/*屏幕宽度大于980*/
@media screen and (min-width: 980px) {
    .main{
        width: 980px;
        margin: 0  auto;
    }
    #outline{
        display: block;
        position: fixed;
        overflow-y: auto;
        height: 100%;
        top: 60px;
        padding-bottom: 60px;
    }
    #detail-outline{
        display: block;
        position: fixed;
        overflow-y: auto;
        height: 100%;
        top: 0px;
        padding-bottom: 0px;
    }
    .md{
        /*margin-left: 250px;*/
    }
}

/*屏幕宽度小于980*/
@media screen and (max-width: 980px) {
    .main {
        width: 95%;
        margin: 0  auto;
    }
    #outline{
        display: none;
    }
}
html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
ul,ol{
    padding-left: 20px;
    margin: 0;
}
.text-overflow{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}
.title{
    width: 100%;
    font-size: 22px;
    text-align: center;
}
.content{
    margin-top: 20px;
    display: flex;
    height: 100%;
}
.md{
    height: 100%;
    overflow: auto;
    margin-top: 20px;
}
img{
    max-width: 100%;
}

.navbar-brand .logo{
    width: 30px;
    height: 30px;
}

a,a:hover {
    color:#e67e22;
    text-decoration:none;
}
li{
    margin: 0;
    padding:0;
}
.menu-list .menu-item{
    list-style: none;
}
ul{
    margin: 0;
    padding:0;
}

@-webkit-keyframes masked-animation {
    0% {
        background-position:0 0
    }
    to {
        background-position:-100% 0
    }
}
@keyframes masked-animation {
    0% {
        background-position:0 0
    }
    to {
        background-position:-100% 0
    }
}
body,html {
    /*color:#505050;*/
    /*line-height:1.75em;*/
    background:#ebebeb;
    position:relative;
    font-family:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}
h1,h2,h3,h4,h5,h6 {
    font-weight:400;
    color:#303030
}
h1 {
    font-size:2em
}
h2 {
    font-size:1.5em
}
h3 {
    font-size:1.2em
}
h4 {
    font-size:1em
}
h5 {
    font-size:.75em
}
h6 {
    font-size:.5em
}
a {
    outline:0
}
a img,a:active,a:focus {
    outline:0
}
.btn {
    padding:7px 14px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px
}
.btn-default {
    border:1px solid #e67e22;
    background:#e67e22;
    color:#fff;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out
}
.btn-default:hover,.btn-default[disabled] {
    border:1px solid #303030;
    background:#303030;
    color:#fff
}
.btn-default:focus {
    outline:0
}
input[type=search] {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    width:75%;
    height:32px;
    line-height:16px;
    padding:7px 11px 7px 7px;
    border-radius:4px 0 0 4px;
    margin-bottom:1em;
    border:1px solid #ebebeb;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
input[type=search]:focus,input[type=text]:focus,input[type=url]:focus,input[type=email]:focus,textarea:focus {
    border:1px solid #e67e22;
    outline:0
}
input[type=text],input[type=url],input[type=email],textarea {
    padding:7px;
    border:1px solid #ebebeb;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}

.post-content a img,.post-content pre,pre {
    border:none
}
blockquote {
    border-left:4px solid #e67e22;
    background-color:#f9f9f9
}
#process,.pagination a {
    -moz-border-radius:2px
}
::-moz-selection {
    color:#fff;
    background:#e67e22;
    text-shadow:none
}
::selection {
    color:#fff;
    background:#e67e22;
    text-shadow:none
}
.ie {
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    width:100%;
    height:70px;
    text-align:center;
    line-height:70px;
    background-color:#f9f9f9;
    color:#f0ad4e;
    border-bottom:1px solid #303030;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap
}
#process {
    position:fixed;
    width:0;
    height:2px;
    background-color:#e67e22;
    top:-1px;
    left:0;
    -webkit-border-radius:2px;
    border-radius:2px;
    -webkit-transition:width 1s ease;
    -o-transition:width 1s ease;
    transition:width 1s ease;
    z-index:99
}
.carousel {
    margin-bottom:20px
}
.carousel img {
    width:100%
}
.main-navigation{
    position: fixed;
    width: 100%;
    z-index: 100;
}
.main-header {
    position:relative;
    text-align:center;
    line-height:0;
    height:180px;
    width:100%;
    background:url(http://7xpw2b.com1.z0.glb.clouddn.com/hexo-sinppet/img/banner.jpg) #fff;
    overflow:hidden
}
.main-header .banneriframe {
    width:100%;
    height:100%;
    border-width:0
}
.main-header .main-header-box {
    position:relative;
    width:100%;
    padding-top:30px
}
.main-header .main-header-box a.header-avatar img {
    width:82px;
    height:82px;
    max-width:100%;
    border-radius:50%
}
.main-header .main-header-box a.header-avatar:hover {
    text-decoration:none
}
.main-header .main-header-box .branding {
    padding-top:15px
}
.main-header .main-header-box .branding h2 {
    font-family:STXingkai,KaiTi,"Microsoft YaHei",SimSun,sans-serif;
    width:320px;
    margin:0 auto;
    letter-spacing:3px;
    color:#e67e22;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    background-image:-webkit-linear-gradient(left,#cddc39,#e67e22 25%,#cddc39 50%,#e67e22 75%,#cddc39)!important;
    -webkit-text-fill-color:transparent!important;
    -webkit-background-clip:text!important;
    background-size:200% 100%!important;
    -webkit-animation:masked-animation 2s infinite linear!important;
    animation:masked-animation 2s infinite linear!important
}
.main-header .main-header-box .branding h2:hover {
    -webkit-animation:masked-animation 1s infinite linear!important;
    animation:masked-animation 1s infinite linear!important;
    text-decoration:none
}
.home-template .main-header {
    padding-top:62px;
    padding-bottom:62px;
    background-repeat:no-repeat;
    background-position:center 20%;
    -webkit-background-size:cover;
    background-size:cover
}
.main-navigation {
    text-align:center;
    background:#fff;
    border-top:1px solid #ebebeb;
    margin-bottom:20px;
    border-bottom:2px solid #e1e1e1
}
.main-navigation .navbar-collapse {
    border-top:1px solid #ebebeb
}
.main-navigation .navbar-brand {
    max-width:90%;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    padding:19px 0 0;
    font-size:14px;
    color:#505050;
    display:none
}
.main-navigation .menu {
    padding:0;
    margin:0;
    display: flex;
}
.main-navigation .menu li {
    list-style:none;
    display:inline-block;
    position:relative
}
.main-navigation .menu li a {
    color:#505050;
    line-height:4em;
    display:block;
    padding:0 21px
}
.main-navigation .menu li:hover>a {
    color:#e67e22;
    text-decoration:none
}
.main-navigation .menu li:hover ul {
    visibility:visible;
    opacity:1;
    filter:alpha(opacity=100);
    top:100%
}
.main-navigation .menu li ul {
    visibility:hidden;
    background:#fff;
    text-align:left;
    padding:7px 0;
    margin:0;
    position:absolute;
    left:0;
    top:120%;
    width:200px;
    z-index:999;
    opacity:0;
    filter:alpha(opacity=0);
    -webkit-transition:all .2s ease;
    -o-transition:all .2s ease;
    transition:all .2s ease
}
.main-navigation .menu li ul li {
    display:block;
    margin:0
}
.main-navigation .menu li ul li a {
    line-height:2.5em;
    color:#505050
}
.main-navigation .menu li ul:hover>a,.main-navigation .navbar-header i:hover {
    color:#e67e22
}
.main-navigation .menu li.nav-current {
    border-bottom:2px solid #e67e22;
    margin-bottom:-2px
}
.main-navigation .navbar-header {
    text-align:center
}
.main-navigation .navbar-header i {
    height:56px;
    line-height:56px;
    font-size:2em;
    cursor:pointer
}
#main {
    background:#fff;
    padding:10px 0;
    margin-bottom:10px
}
@media (max-width: 992px) {
    .category{
        display: flex;
        flex-direction: column;
    }
    .main-content{
        order: -1;
    }
}
.main-content .breadcrumb {
    padding-left:20px;
    font-size:16px;
    line-height:2em
}
.post {
    padding:20px;
    background:#fff;
    margin-bottom:15px;
    position:relative;
    overflow:hidden
}
.post .featured {
    position:absolute;
    background:#e67e22;
    color:#fff;
    text-align:center;
    top:-12px;
    right:-32px;
    width:80px;
    height:40px;
    line-height:54px;
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg)
}
.post .featured i {
    -webkit-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    transform:rotate(-45deg)
}
.post .post-head {
    margin-bottom:.5em;
    text-align:center
}
.post .post-head .post-title {
    font-size:1.5em;
    line-height:1.35em;
    margin:0
}
.post .post-head .post-title a {
    color:#303030
}
.post .post-head .post-title a:focus,.post .post-head .post-title a:hover {
    text-decoration:none;
    color:#e67e22
}
.post .post-head p.warning {
    color:#f0ad4e
}
.post .post-head .post-meta {
    color:#959595;
    margin:5px 0
}
.post .post-head .post-meta span {
    margin-right:5px;
    white-space:nowrap
}
.post .post-head .post-meta span a {
    color:#959595;
    margin-left:3px
}
.post .post-head .post-meta span a:hover {
    color:#e67e22
}
.post .post-media {
    position:relative;
    margin-right:15px;
    width:220px;
    height:160px;
    float:left;
    overflow:hidden
}
.post .post-media img {
    width:100%;
    height:100%
}
.post .post-content .home-post-head {
    text-align:left
}
.post .post-content p.brief {
    overflow:hidden;
    color:#666
}
.post .post-body {
    margin-top:15px;
    padding:25px 0;
    border-top:1px solid #eee;
    overflow:hidden
}
.post .post-body p {
    font-size:1em;
    line-height:1.5
}
.post .post-body p img {
    max-width:100%
}
.post .post-footer {
    margin-top:15px;
    padding-top:15px;
    border-top:1px solid #ebebeb
}
.post .post-footer .tag-list {
    color:#959595;
    line-height:28px
}
.post .post-footer .tag-list .post-meta {
    margin-top:5px
}
.post .post-footer .tag-list .post-meta .fa-wrap {
    margin-right:10px
}
.post .post-footer .tag-list .tags-meta a:nth-child(n+2) {
    margin-left:4px
}
.post .post-footer .tag-list a {
    color:#959595
}
.post .post-footer .tag-list a:hover {
    color:#e67e22
}
.post .post-footer .post-permalink {
    text-align:right
}
.post-content {
    font:400 16px/1.62 Georgia,"Xin Gothic","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    color:#333
}
.post-content h1,.post-content h2,.post-content h3 {
    font-family:Georgia,"Xin Gothic","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",SimSun,sans-serif;
    color:#333
}
.post-content h1 {
    font-size:1.8em;
    margin:.67em 0
}
.post-content h2 {
    font-size:1.5em;
    margin:.83em 0
}
.post-content h3 {
    font-size:1.17em;
    margin:1em 0
}
.post-content h4,.post-content h5,.post-content h6 {
    font-family:Georgia,"Xin Gothic","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",SimSun,sans-serif;
    font-size:1em;
    margin:1.6em 0 1em;
    color:#333
}
.post-content h6 {
    font-weight:500
}
.post-content code,.post-content pre,.post-content tt {
    font-family:Menlo,Monaco,Consolas,"Courier New",monospace;
    background-color:#f9f9f9
}
.post-content>h1 {
    margin-top:0;
    font-size:2em
}
.post-content p {
    font-size:15px
}
.post-content a {
    word-wrap:break-word
}
.post-content b,.post-content strong {
    font-weight:700;
    color:#333
}
.post-content em,.post-content i {
    font-style:italic;
    color:#333
}
.post-content img {
    max-width:100%;
    height:auto;
    margin:.2em 0
}
.post-content figure {
    position:relative;
    clear:both;
    outline:0;
    margin:10px 0
}
.post-content figure img {
    display:block;
    max-width:100%;
    margin:auto auto 4px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}
.post-content figure figcaption {
    position:relative;
    width:100%;
    text-align:center;
    left:0;
    margin-top:10px;
    font-weight:400;
    font-size:14px;
    color:#666
}
.post-content figure figcaption a {
    text-decoration:none;
    color:#666
}
.post-content figure iframe {
    margin:auto
}
.post-content hr {
    border-top:#dededc 1px solid
}
.post-content blockquote {
    margin:0 0 1.64em;
    border-left:3px solid #e67e22;
    padding-left:12px;
    color:#666
}
.post-content ol,.post-content ul {
    margin:0 0 24px 6px;
    padding-left:16px
}
.post-content blockquote a {
    color:#666
}
.post-content ul {
    list-style-type:square
}
.post-content ol {
    list-style-type:decimal
}
.post-content li {
    margin-bottom:.2em
}
.post-content li ol,.post-content li ul {
    margin-top:0;
    margin-bottom:0;
    margin-left:14px
}
.post-content li ul {
    list-style-type:disc
}
.post-content li ul ul {
    list-style-type:circle
}
.post-content li p {
    margin:.4em 0 .6em
}
.post-content .unstyled {
    list-style-type:none;
    margin:0;
    padding:0
}
.post-content code,.post-content tt {
    color:grey;
    font-size:.96em;
    padding:1px 2px;
    border:1px solid #dadada;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    word-wrap:break-word
}
.post-content pre {
    margin:1.64em 0;
    border-left:3px solid #dadada;
    padding-left:10px;
    overflow:auto;
    line-height:1.5;
    color:grey
}
.post-content pre code,.post-content pre tt {
    color:grey;
    border:none;
    background:0 0;
    padding:0
}
.post-content td,.post-content th {
    text-align:left;
    padding:4px 8px 4px 10px;
    border:1px solid #dadada
}
.post-content table {
    width:100%;
    max-width:100%;
    border-collapse:collapse;
    border-spacing:0;
    margin-bottom:1.5em;
    font-size:.96em;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    table-layout:fixed;
    word-wrap:break-word
}
.post-content td {
    vertical-align:top
}
.post-content tr:nth-child(even) {
    background-color:#f9f9f9
}
.post-content iframe {
    display:block;
    max-width:100%;
    margin-bottom:30px
}
.windows .post-content {
    font-size:16px;
    font-family:Georgia,SimSun,sans-serif
}
.pagination {
    margin:30px 0;
    text-align:center;
    display:block
}
.pagination a {
    background:#fff;
    color:#666;
    text-align:center;
    display:inline-block;
    -webkit-border-radius:2px;
    border-radius:2px
}
.pagination .current,.pagination a:hover {
    background:#e67e22;
    color:#fff
}
.pagination a:hover {
    text-decoration:none
}
.pagination a i {
    width:36px;
    height:36px;
    line-height:36px
}
.pagination .next,.pagination .prev {
    margin:0 5px
}
.pagination .page-number {
    margin:0 3px;
    display:inline-block;
    line-height:36px;
    padding:0 14px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px
}
#comments {
    background-color:#fff;
    padding:20px;
    margin-bottom:20px
}
#comments .v .vheader .vinput {
    border:none;
    border-bottom:1px solid #f0f0f0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    border-radius:0;
    font-size:.9em;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
#comments .v .vheader .vinput:focus,#comments .v .vheader .vinput:hover {
    border-bottom:1px solid #e67e22
}
#comments .v .veditor {
    font-size:1em
}
#comments .v .vcontrol .vbtn {
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    padding:.5rem 2rem;
    color:grey
}
#comments .v .vcontrol .vbtn:hover {
    color:#e67e22;
    border-color:#e67e22
}
#comments .v .item3 input {
    width:31%;
    margin:0 1%
}
#comments .v .item2 input {
    width:48%;
    margin:0 1%
}
.prev-next-wrap {
    margin:20px;
    text-align:center
}
.prev-next-wrap .pre-post {
    float:left
}
.prev-next-wrap .next-post {
    float:right
}
.nav{
    display: flex;
    align-items: center;
}
.nav .search-input{
    height: 60%;
    border-radius: 20px;
    padding: 7px 10px;
}
.sidebar .widget {
    background:#fff;
    padding:16px 25px
}
.sidebar .widget ul {
    padding:0
}
.sidebar .widget ul li {
    list-style:none
}
.sidebar .widget ul li.archive-list-item {
    width:50%;
    display:inline-block
}
.sidebar .widget .archive-list-count,.sidebar .widget .category-list-count {
    margin-left:4px;
    color: #959595;
}
.sidebar .widget .archive-list-count:before,.sidebar .widget .category-list-count:before {
    content:"("
}
.sidebar .widget .archive-list-count:after,.sidebar .widget .category-list-count:after {
    content:")"
}
.sidebar .widget-box {
    background:#fff;
    padding:0 25px 16px
}
.main-footer {
    background:#202020;
    color:#959595
}
.widget {
    margin-bottom:15px
}
.widget .title {
    margin-top:0;
    padding-bottom:7px;
    border-bottom:1px solid #ebebeb;
    margin-bottom:21px;
    position:relative
}
.widget .title:after {
    content:"";
    width:90px;
    height:1px;
    background:#e67e22;
    position:absolute;
    left:0;
    bottom:-1px
}
.widget .tag-cloud a {
    border:1px solid #ebebeb;
    padding:2px 7px;
    color:#959595;
    font-size:1em!important;
    line-height:1.5em;
    display:inline-block;
    margin:0 5px 5px 0;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap
}
.widget .tag-cloud a:hover {
    color:#fff;
    background-color:#e67e22;
    border:1px solid #e67e22;
    text-decoration:none
}
.widget .social a,code {
    -webkit-border-radius:3px;
    -moz-border-radius:3px
}
.widget .social a {
    display:inline-block;
    text-align:center;
    width:40px;
    height:40px;
    line-height:45px;
    color:#fff;
    background:grey;
    border-radius:3px;
    margin-right:10px;
    margin-bottom:10px
}
.widget .social a:hover {
    background:#e67e22;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.widget .social a:last-child {
    margin-right:0
}
.widget .social a i {
    font-size:20px
}
.widget .friends-link a {
    margin-right:15px
}
.widget #search-form {
    position:relative;
    width:100%
}
.widget #search-form .search-form-submit {
    float:right;
    width:25%;
    height:32px;
    background:#e67e22;
    color:#fff;
    border-radius:0 4px 4px 0;
    border:1px solid #e67e22
}
.widget #search-form #result-mask {
    position:fixed;
    left:0;
    top:0
}
.widget #search-form .search-form-submit:focus {
    outline:0
}
.widget #search-form #result-wrap {
    position:absolute;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    top:45px;
    left:-50px;
    z-index:6;
    width:120%;
    padding:20px;
    color:#333;
    background:#fff;
    border-radius:4px;
    -webkit-box-shadow:1px 2px 2px #ccc;
    box-shadow:1px 2px 2px #ccc;
    border:1px solid #ccc
}
.widget #search-form #result-wrap:after,.widget #search-form #result-wrap:before {
    position:absolute;
    display:inline-block;
    border-width:0 12px 12px;
    border-style:solid;
    right:80px;
    content:''
}
.widget #search-form #result-wrap:before {
    border-color:#ccc transparent;
    top:-12px
}
.widget #search-form #result-wrap:after {
    border-color:#fff transparent;
    top:-10px
}
.widget #search-form #result-wrap #search-result {
    width:100%;
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    padding-right:20px;
    margin-right:-20px;
    max-height:400px;
    overflow-y:auto
}
.widget #search-form #result-wrap #search-result .tips {
    text-align:center
}
.widget #search-form #result-wrap #search-result .item {
    padding:8px 0
}
.widget #search-form #result-wrap #search-result .item:last-child .content {
    border-bottom:0
}
.widget #search-form #result-wrap #search-result .item a:hover {
    text-decoration:none
}
.widget #search-form #result-wrap #search-result .item .title {
    line-height:1.25;
    font-size:16px;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    margin-bottom:0;
    color:#333;
    border:0
}
.widget #search-form #result-wrap #search-result .item .title:hover {
    color:#e67e22
}
.widget #search-form #result-wrap #search-result .item .title b {
    margin:0 2px;
    color:#e67e22
}
.widget #search-form #result-wrap #search-result .item .content {
    font-size:14px;
    color:#666;
    padding-bottom:10px;
    border-bottom:1px solid #ccc
}
.widget #search-form #result-wrap #search-result .item .content b {
    color:#e67e22;
    margin:0 2px
}
.widget .notification img {
    max-width:100%
}
#article-toc {
    padding-top:1em;
    background-color:#fff;
    top:0;
    overflow-y:auto
}
#article-toc ol {
    list-style:none
}
#article-toc .toc {
    padding-left:2em
}
#article-toc .toc .toc-item .toc-link {
    display:block;
    color:#333;
    text-decoration:none;
    padding:4px 0;
    line-height:1.25em;
    position:relative;
    width:100%;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap
}
#article-toc .toc .toc-item .toc-link:hover {
    color:#e67e22;
    -webkit-transition:.15s;
    -o-transition:.15s;
    transition:.15s
}
.copyright,.copyright a {
    color:#666
}
#article-toc .toc .toc-item.toc-level-2>.toc-link {
    font-size:15px
}
.copyright {
    background:#111;
    font-size:13px;
    text-align:center;
    padding-top:20px;
    padding-bottom:20px;
    border-top:1px solid #303030
}
.copyright span {
    margin:0 .5em
}
#back-to-top,#toc-btn {
    position:fixed;
    right:30px;
    bottom:30px;
    background-color:#959595;
    color:#fff;
    text-align:center;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    z-index:1;
    cursor:pointer
}
#back-to-top:hover,#toc-btn:hover {
    background:#e67e22;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
#back-to-top i,#toc-btn i {
    width:30px;
    height:30px;
    line-height:30px
}
#toc-btn {
    bottom:65px
}
.reward {
    padding:5px 0
}
.reward .reward-wrap {
    position:relative;
    display:block;
    font-size:30px;
    width:62px;
    height:62px;
    line-height:60px;
    margin:0 auto;
    cursor:pointer;
    text-align:center;
    vertical-align:middle;
    color:#ff8140;
    -webkit-user-select:none;
    border:1px solid #d9d9d9;
    -webkit-box-shadow:0 0 2px #d9d9d9;
    -moz-box-shadow:0 0 2px #d9d9d9;
    box-shadow:0 0 2px #d9d9d9;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%
}
.reward .reward-wrap .reward-box {
    position:absolute;
    top:-220px;
    left:50%;
    display:none;
    width:350px;
    height:200px;
    margin-left:-175px;
    padding:15px;
    border:1px solid #e6e6e6;
    background-color:#fff;
    -webkit-box-shadow:0 1px 1px 1px #efefef;
    -moz-box-shadow:0 1px 1px 1px #efefef;
    box-shadow:0 1px 1px 1px #efefef
}
.reward .reward-wrap .reward-box span,.reward .reward-wrap .reward-box span img {
    display:inline-block;
    width:150px;
    height:150px
}
.reward .reward-wrap .reward-box span img {
    float:left;
    margin:0 auto;
    border:0
}
.reward .reward-wrap .reward-box span b {
    font-size:14px;
    line-height:26px;
    display:block;
    text-align:center;
    color:#666
}
.reward .reward-wrap .reward-box:after,.reward .reward-wrap .reward-box:before {
    position:absolute;
    content:'';
    border:10px solid transparent
}
.reward .reward-wrap .reward-box:before {
    bottom:-20px;
    left:50%;
    margin-left:-10px;
    border-top-color:#e6e6e6
}
.reward .reward-wrap .reward-box:after {
    bottom:-19px;
    left:50%;
    margin-left:-10px;
    border-top-color:#fff
}
.reward .reward-wrap:hover {
    color:#fff;
    background-color:#ff8140;
    border:1px solid #ff8140;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
.reward .reward-wrap:hover .reward-box {
    display:block
}
.reward .reward-tip {
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    color:#969696;
    margin:15px auto;
    text-align:center;
    min-height:24px
}
.timebox {
    position:relative;
    width:100%;
    padding:0 20px;
    margin:20px auto;
    overflow:hidden
}
.timeline h2 {
    height:44px;
    line-height:44px;
    font-size:30px;
    color:#666;
    font-weight:700;
    padding-left:75px;
    margin-bottom:25px;
}
.timeline h2 img {
    vertical-align:-5px
}
.timeline ul {
    list-style:none;
    margin:0;
    padding:0
}
.timeline ul li {
    padding-bottom:20px;
    zoom:1;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap
}
.timeline ul li:after {
    content:" ";
    display:block;
    height:0;
    clear:both;
    visibility:hidden
}
.timeline ul li h3 {
    float:left;
    width:168px;
    font-size:20px;
    color:#333;
    text-align:right;
    padding-right:15px;
    margin:0
}
.timeline ul li h3 span {
    color:#666;
    font-size:12px;
    margin-left:3px
}
.timeline ul li a {
    padding-left:41px;
    margin-top:-5px;
    font-weight:400;
    font-size:16px;
    color:#505050
}
.timeline ul li a:hover {
    text-decoration:none;
    color:#e67e22
}
@media screen and (max-width:500px) {
    .timebox {
        background-position:97px 0
    }
    .timeline h2 {
        padding-left:40%;
        background-position:48px 0
    }
    .timeline ul li {
        background-position:70px 5px
    }
    .timeline ul li h3 {
        width:68px
    }
}.highlight,pre,pre code {
     padding:0;
     color:#c5c8c6
 }
.highlight,pre {
    overflow:auto;
    margin:20px 0;
    font-size:13px;
    background:#1d1f21;
    line-height:1.6
}
code {
    padding:2px 4px;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    color:#666;
    background:#eee;
    border-radius:3px
}
pre code {
    background:0 0;
    text-shadow:none
}
pre .meta {
    color:#b294bb
}
pre .comment {
    color:#969896
}
.highlight {
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px
}
.highlight pre {
    border:none;
    margin:0;
    padding:10px 0
}
.highlight table {
    margin:0;
    width:auto;
    border:none
}
.highlight td {
    border:none;
    padding:0
}
.highlight figcaption {
    font-size:1em;
    color:#c5c8c6;
    line-height:1em;
    margin-bottom:1em
}
.highlight figcaption a {
    float:right;
    color:#c5c8c6
}
.highlight figcaption a:hover {
    border-bottom-color:#c5c8c6
}
.highlight .gutter pre {
    padding-left:10px;
    padding-right:10px;
    color:#888f96;
    text-align:right;
    background-color:#000
}
.highlight .code pre {
    width:100%;
    padding-left:10px;
    padding-right:10px;
    background-color:#1d1f21
}
.highlight .line {
    height:20px
}
.gutter {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none
}
.gist table {
    width:auto
}
.gist table td {
    border:none
}
pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title {
    color:#c66
}
pre .built_in,pre .command,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor {
    color:#de935f
}
pre .css .rules .attribute,pre .formula,pre .header,pre .inheritance,pre .number,pre .ruby .class .title,pre .ruby .symbol,pre .special,pre .string,pre .value,pre .xml .cdata {
    color:#b5bd68
}
pre .css .hexcolor,pre .title {
    color:#8abeb7
}
pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword {
    color:#81a2be
}
pre .javascript .function,pre .keyword {
    color:#b294bb
}
::-webkit-scrollbar {
    -webkit-appearance:none;
    height:5px;
    width:5px
}
::-webkit-scrollbar-track {
    background-color:inherit
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    background-color:rgba(1,1,1,.12)
}
::-webkit-scrollbar-thumb:hover {
    background-color:rgba(1,1,1,.22)
}
@media screen and (max-width:767px) {
    .main-navigation .menu li,.main-navigation .navbar-brand,.prev-next-wrap a {
        display:block
    }
    .main-navigation,.post .post-head {
        text-align:left
    }
    .main-navigation .menu li {
        width:33%;
        float:left
    }
    .main-navigation .menu li:hover>a {
        color:#e67e22;
        text-decoration:none
    }
    .main-navigation .menu li a {
        padding:0
    }
    .main-navigation .menu li ul {
        visibility:visible;
        padding:0 0 0 20px;
        margin:0;
        position:relative;
        top:0;
        width:100%;
        opacity:1;
        filter:alpha(opacity=100)
    }
    .prev-next-wrap {
        margin:15px
    }
    .post .post-head h1 {
        line-height:1.25em
    }
    .post .post-content p.brief {
        -o-text-overflow:ellipsis;
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap
    }
    .post .post-media {
        float:none;
        width:100%;
        height:auto;
        margin:0 0 1em
    }
    #article-toc,.post-footer {
        display:none
    }
    .content-wrap .m-post {
        padding:0
    }
    .widget #search-form #result-wrap {
        left:-25px;
        width:100%
    }
}@media screen and (min-width:768px) {
    .nav-toggle-button {
        display:none
    }
}@media screen and (min-width:1100px) {
    .post-content blockquote {
        padding-left:20px;
        border-width:4px
    }
    .post-content blockquote blockquote {
        margin-left:0
    }
    .post-content figure img {
        margin:0 0 4px
    }
    .post-content figure figcaption {
        position: absolute;
        left:-172px;
        width:150px;
        top:0;
        text-align:right;
        margin-top:0
    }
    .post-content figure figcaption:before {
        width:25%;
        margin-left:75%;
        border-top:1px solid #dededc;
        display:block;
        content:"";
        margin-bottom:10px
    }
}


#detail{
    width:100%;
    height: 100%;
    background-color: white;
    padding-top: 60px;
}
#detail .main{
    background: #ebebeb;
    height: 100%;
}
#detail .container{
    width:100%;
    height: 100%;
    display: flex;
    padding-left: 0;
    padding-right: 0;
    overflow-y: auto;
}
#detail .menu{
    width: 25rem;
    height: 100%;
    overflow: auto;
    position: fixed;
    border-right: 1px solid #ddd;
    background-color: #fafafa
}
#detail .menu .menu-list{
    border-top: 1px solid #ddd;
}
#detail .menu .category{
    font-weight: 700;
    margin: 10px 0;
    padding-left: 23px;
}
#detail .menu .menu-item{
    /*border-left: 3px solid white;*/
}
#detail .menu .menu-check{
    /*border-left: 3px solid #e67e22;*/
}
#detail .menu .menu-check .title{
    color: #e67e22;
    border-left: 3px solid #e67e22
}
#detail .menu .menu-list a{
    display: block;
    padding: 10px 20px;
    color: #303030;
}
#detail .menu .menu-list .title{
    font-size: 16px;
}
#detail .content{
    flex: 1;
    flex-direction: column;
    padding-left: 25rem;
}
#detail .content .header{
    margin: 0 auto;
    background: white;
    padding: 2rem;
}
#detail .content .content-wrap{
    border-top: 1px solid #eee;
    background: white;
}
#detail .content .title{
    text-align: center;
}
#detail .content .meta span{
    font: 400 16px/1.62 Georgia,"Xin Gothic","Hiragino Sans GB","Droid Sans Fallback","Microsoft YaHei",sans-serif;
    color: #959595;
    margin-right: 1rem;
}
#detail .content .meta{
    text-align: center;
}
#detail .toc-list .toc-item .toc{
    color: #959595;
    padding: 5px 0px 5px 40px;
}
#detail .content-wrap{
    margin: 0 auto;
}
@media (min-width:900px) {
    #detail .content-wrap{
        width: 900px;
    }
    #detail .header{
        width: 900px;
    }
}

#category{
    padding-top: 7rem;
}
#category .container{
    margin: 0 auto;
}
#category .menu{
    position: fixed;
    width: 20rem;
    background-color: white;
}
#category .category-padding{
    padding-left: 25rem;
}
@media (min-height: 500px) {
    #category .article-list{
        min-height: 500px;
    }
}
@media (max-width: 600px) {
    #detail .menu{
        display: none;
    }
    #detail .content{
        padding-left: 0px;
    }
    #category .menu{
        display: none;
    }
    #category .article-list{
        padding-left: 0px;
    }
    #main-menu .menu{
        width: 100%;
    }
    #main-menu .nav .menu .text-center{
        padding: 0 10px;
    }
    #main-menu .nav .search-input{
        display: none;
    }
}
#category .menu .menu-item a{
    padding: 5px 20px;
    display: block;
    font-size: 16px;
    color: #333;
}
#category .menu .menu-check .check-category{
    border-left: 3px solid #e67e22;
    color: #e67e22;
}
#category .menu .menu-item .child{
    padding: 5px 40px;
    color: #777777;
}
#category .menu .menu-check .check{
    color: #e67e22;
}
#category .empty{
    height: 500px;
    padding: 5rem;
    display: flex;
    justify-content: center;
    font-size: 18px;
}
/*.page{*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    margin: 2rem 0;*/
/*}*/
/*.page a,.page-curr{*/
/*    color: #666;*/
/*    background-color: #fff;*/
/*    padding: 5px 10px;*/
/*    border-radius: 3px;*/
/*    margin: 0 5px;*/
/*    font-size: 15px;*/
/*}*/
/*.page .page-curr{*/
/*    color: #fff;*/
/*    background-color: #e67e22;*/
/*}*/
/*.page .disabled{*/
/*    cursor: not-allowed;*/
/*}*/
.mask{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);

}
.mask .search{
    width: 600px;
    height: 80%;
    background-color: white;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    /*margin: 9rem auto;*/
}
.mask .search .header{
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border-radius: 5px;
}
.mask .search .header img{
    width: 20px;
    height:20px;
    cursor: pointer;
}
.mask .search input{
    width: 88%;
    border: 0;
    background-color: #f5f5f5;
    padding: 10px;
}
.mask .search .result{
    width: 95%;
    height: 100%;
    flex: 1;
    margin: 0 auto;
    overflow-y: auto;
}
.mask .search .result .list{
    padding: 10px;
}
.mask .search .result .list .item{
    margin-top: 10px;
    border-bottom: 1px dashed #ccc;
}
.mask .search .result .list .item a{
    display: block;
    padding: 5px 0;
    color: #333;
    font-size: 17px;
}
.mask .search .result .list .item a:hover{
    color: #e67e22;
}
.mask .search .result .list .item .tags{
    display: block;
    margin-bottom: 10px;
    color: #959595;
}
.mask .search .result .list .item .tag{
    margin-left: 10px;
    color: #959595;
}
.mask .search .result .list .item .content{
    color: #666;
    margin: 0;
}
.pages{
    display: flex;
    margin-bottom: 20px;
    justify-content: center;
}
.pages li{
    list-style: none;

    background-color: #fff;
    border-radius: 3px;
    cursor: pointer;
}
.pages li:not(:last-child){
    margin-right: 10px;
}
.pages .checked{
    background-color: #e67e22;
}
.pages .checked a{
    color: #fff;
    cursor: not-allowed;
}
.pages li a{
    display: inline-block;
    padding: 5px 10px;
}