.cover {
    padding: 0;
    text-align: center
}

.cover .forkMe {
    position: absolute;
    z-index: 999;
    top: 0;
    right: 0
}

.cover-frame {
    position: relative;
    min-width: 100%;
    height: 100vh
}

.cover-frame .bg-box {
    width: 100%;
    height: 100%
}

.cover-frame .bg-box>img {2
    display: block;
    width: 100vw;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}

.cover-inner {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -100%)
}

.cover-inner h1 {
    font-size: 7rem;
    margin: 0;
    opacity: .95
}

.cover-inner #subtitle-box,
.cover-inner h1 {
    font-family: Titillium Web, PingFang SC, Hiragino Sans GB, Microsoft JhengHei, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif
}

.cover-inner #subtitle-box {
    font-size: 3rem;
    margin: .5rem 0 1.5rem
}

.cover-inner,
.cover-inner a {
    color: #fff;
    text-decoration: none
}

.cover-inner img,
.cover-inner video {
    position: relative
}

.cover-inner .cover-logo {
    width: 6rem
}

.cover-learn-more {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 0;
    width: 100%
}

.cover-learn-more a>i {
    font-size: 3rem;
    color: #fff;
    -webkit-animation: down 1s linear infinite;
    animation: down 1s linear infinite
}

.cover-learn-more a>i:hover {
    color: #1e3e3f
}

#app,
.cover {
    position: relative
}
@media (min-width:768px) {
    .cover {
        margin-bottom: 0;
        height: 100%
    }
    .outer,
    .wrap {
        width: 70rem;
        padding-right: 0;
        padding-left: 0
    }
    .local-search {
        width: 70rem
    }
    .content.on {
        transform: none
    }
}
@media (max-width:768px) {
    .cover .forkMe {
        display: none
    }
    .content.on {
        margin-left: -1px!important
    }
    .sidebar {
        background-color: #403e3e
    }
    .navbar-toggle {
        transform: scale(1.1)
    }
}

@media (max-width:768px) {
    .cover-inner {
        transform: translate(-50%, -70%);
        width: 100%
    }
    .cover-inner h1 {
        font-size: 4.5rem
    }
    .cover-inner #subtitle-box {
        font-size: 2rem
    }
    .to_top {
        right: 10px
    }
}
.cover-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%)
}

img {
    max-width: 100%
}
.cover-frame {
    position: relative;
    min-width: 100%;
    height: 100vh
}

.cover-frame .bg-box {
    width: 100%;
    height: 100%
}

.cover-frame .bg-box>img {
    display: block;
    width: 100vw;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center
}



.cover-inner h1 {
    font-size: 7rem;
    margin: 0;
    opacity: .95
}

.cover-inner #subtitle-box,
.cover-inner h1 {
    font-family: Titillium Web, PingFang SC, Hiragino Sans GB, Microsoft JhengHei, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif
}

.cover-inner #subtitle-box {
    font-size: 3rem;
    /*margin: .5rem 0 1.5rem*/
}

.cover-inner,
.cover-inner a {
    color: #fff;
    text-decoration: none
}

.cover-inner img,
.cover-inner video {
    position: relative
}

.cover-inner .cover-logo {
    width: 6rem
}

.cover-learn-more {
    position: absolute;
    z-index: 1;
    bottom: 10px;
    left: 0;
    width: 100%
}

.cover-learn-more a>i {
    font-size: 3rem;
    color: #fff;
    -webkit-animation: down 1s linear infinite;
    animation: down 1s linear infinite
}

.cover-learn-more a>i:hover {
    color: #1e3e3f
}



















* {
    margin: 0;
    padding: 0;
    font-family: "Microsoft YaHei";
}

body {
    color: #fff;
    font-size: 16px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

@media screen and (max-width: 1260px) {
    body {
        margin: 0 0px;
    }
}

@media screen and (max-width: 600px) {
    body {
        font-size: 13px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Microsoft YaHei";
}

h1 {
    font-size: 1.8em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.3em;
}

a {
    text-decoration: none;
    color: #0cf;
}

a:hover {
    text-decoration: underline;
}

.alignleft {
    float: left;
}

.alignright {
    float: right;
}

.clearfix {
    zoom: 1;
}

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

.clearfix:after {
    clear: both;
}

.inner {
    width: 1200px;
    margin: 0 auto;
}

@media screen and (max-width: 1260px) {
    .inner {
        width: 100%;
    }
}

#main-col {
    width: 900px;
}

@media screen and (max-width: 1260px) {
    #main-col {
        width: 100%;
        margin-right: -300px;
    }
}

@media screen and (max-width: 900px) {
    #main-col {
        margin-right: 0;
        float: none;
    }
}

@media screen and (max-width: 1260px) {
    #wrapper {
        margin-right: 300px;
    }
}

@media screen and (max-width: 900px) {
    #wrapper {
        margin-right: 0;
    }
}

#bg {
    background-color: #15253a;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}

#header {
    margin: 50px auto;
}

#header a {
    color: #fff;
}

#header a:hover {
    color: #0cf;
    text-decoration: none;
}

#header h1 {
    font-weight: normal;
    font-size: 2.5em;
    line-height: 1;
}

#header h2 {
    font-weight: normal;
    font-size: 0.9em;
    line-height: 1;
    margin-top: 10px;
}

#header #main-nav {
    font-family: "Microsoft YaHei";
    line-height: 2.5em;
}

#header #main-nav ul {
    list-style: none;
}

# #main-nav ul {
    list-style: none;
}

#header #main-nav ul li {
    float: left;
    margin-left: 30px;
}

#footer #main-nav ul li {
    float: left;
    margin-left: 30px;
}


article {
    border-radius: 17px;
    background: rgba(0, 0, 0, 0.32);
}

article.page {
    padding-left: 20px;
}

article.page .icon {
    display: none;
}

article.post .icon:before {
    content: '\f016';
}

article.photo .icon:before {
    content: '\f030';
}

article.link .icon:before {
    content: '\f0c1';
}

article.link .title a:after {
    content: '\f08e';
    color: #fff;
    font: 12px FontAwesome;
    padding-left: 10px;
    vertical-align: super;
}

article .post-content {
    padding: 20px 20px 15px 77px;
    margin-bottom: 50px;
    position: relative;
}

@media screen and (max-width: 600px) {
    article .post-content {
        padding-left: 20px;
    }
}

article .gallery {
    overflow: hidden;
    position: relative;
}

article .gallery:hover .control {
    opacity: 1;
    -ms-filter: none;
    filter: none;
}

article .gallery img {
    min-width: 100%;
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}

article .gallery .control {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

article .gallery .prev,
article .gallery .next {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    cursor: pointer;
}

article .gallery .prev:before,
article .gallery .next:before {
    position: absolute;
    font: 24px/1 FontAwesome;
    text-align: center;
    width: 24px;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-top: -12px;
    top: 50%;
}

article .gallery .prev {
    left: 0;
}

article .gallery .prev:before {
    content: '\f053';
    left: 10px;
}

article .gallery .next {
    right: 0;
}

article .gallery .next:before {
    content: '\f054';
    right: 10px;
}

article header .icon {
    width: 32px;
    height: 32px;
    margin-right: 25px;
    position: absolute;
    top: 20px;
    left: 20px;
    color: #0cf;
}

@media screen and (max-width: 600px) {
    article header .icon {
        display: none;
    }
}

article header .icon:before {
    position: absolute;
    font: 32px FontAwesome;
    top: 0;
    left: 0;
    width: 32px;
    text-align: center;
}

article header time {
    color: #fff;
    font: 0.9em "Microsoft YaHei";
    margin-bottom: 5px;
    display: block;
    line-height: 1;
}


article header .title {
    font-weight: normal;
}

article header .title a {
    color: #fff;
}

article header .title a:hover {
    color: #0cf;
    text-decoration: none;
}

article .entry {
    text-align: justify;
    line-height: 1.6;
}

article .entry p,
article .entry blockquote,
article .entry ul,
article .entry ol,
article .entry dl,
article .entry table,
article .entry iframe,
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6,
article .entry .video-container {
    margin-top: 15px;
}

.entry p:after{
    content: <hr>
}
article .entry blockquote {
    border-left: 4px solid #ddd;
    padding: 0 15px;
    color: #ccc;
    /*footer
        border-top none
        font-size 0.8em
        line-height 1
        margin 20px 0 0
        padding-top 0
        cite
          &:before
            content '—'
            color #ccc
            padding 0 0.5em*/
}

article .entry blockquote>:first-child {
    margin-top: 0px;
}

article .entry blockquote>:last-child {
    margin-bottom: 0px;
}

article .entry code,
article .entry pre {
    font-family: Consolas, Monaco, Lucida Console, monospace;
}

article .entry code {
    padding: 0 5px;
    margin: 0 2px;
    font-size: 0.9em;
    border: 1px solid #ddd;
    border-radius: 3px;
}

article .entry pre {
    border: 1px solid #ddd;
    margin-top: 15px;
    overflow: auto;
    padding: 7px 15px;
    border-radius: 2px;
}

article .entry pre code {
    background: none;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}

article .entry ul,
article .entry ol,
article .entry dl {
    margin-left: 20px;
}

article .entry ul ul,
article .entry ol ul,
article .entry dl ul,
article .entry ul ol,
article .entry ol ol,
article .entry dl ol,
article .entry ul dl,
article .entry ol dl,
article .entry dl dl {
    margin-top: 0;
}

article .entry hr {
    border-top: 1px dotted #ddd;
    border-bottom: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

article .entry h1,
article .entry h2 {
    font-weight: normal;
    border-bottom: 1px dashed #ddd;
    padding-bottom: 10px;
    margin-top: 20px;
}

article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6 {
    font-weight: normal;
}

article .entry img,
article .entry video {
    max-width: 100%;
    height: auto;
    border: none;
}

article .entry iframe {
    border: none;
}

article .entry .caption {
    display: block;
    margin-top: 5px;
    color: #fff;
    position: relative;
    font-size: 0.9em;
    padding-left: 25px;
}

article .entry .caption:before {
    content: '\f040';
    position: absolute;
    font: 1.3em FontAwesome;
    position: absolute;
    left: 0;
    top: 3px;
}

article .entry .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

article .entry .video-container iframe,
article .entry .video-container object,
article .entry .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-top: 0;
}

article .entry .pullquote {
    float: right;
    border: none;
    padding: 0;
    margin: 1em 0 0.5em 1.5em;
    text-align: left;
    width: 45%;
    font-size: 1.5em;
}

time:after{
    content: <br>;
}

#comment {
    padding: 20px;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 17px;
    margin-bottom: 50px;
}

#comment .title {
    font-weight: normal;
    margin-bottom: 15px;
}

#pagination {
    zoom: 1;
    margin: block-margin auto;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 17px;
    text-align: center;
    overflow: hidden;
    margin-bottom: 50px;
}

#pagination:before,
#pagination:after {
    content: "";
    display: table;
}

#pagination:after {
    clear: both;
}

#pagination a,
#pagination span {
    padding: 10px 20px;
    line-height: 1;
    height: 2ex;
}

#pagination a {
    color: #fff;
    text-decoration: none;
}

#pagination a:hover {
    background: #000;
    color: #0cf;
}

#pagination .prev {
    float: left;
}

#pagination .next {
    float: right;
}

#pagination .page-number {
    display: inline-block;
}

@media mq-mobile {
    #pagination .page-number {
        display: none;
    }
}

#pagination .current {
    color: color-cont;
    font-weight: bold;
}

#pagination .space {
    color: #ddd;
}

.archive-title {
    color: #fff;
    font-weight: normal;
    margin-bottom: 30px;
    text-shadow: 0 0 1px #fff;
}

.archive-title:before {
    font-family: FontAwesome;
    content: '\f073';
    padding-right: 15px;
}

.archive-title.tag:before {
    content: '\f02b';
}

.archive-title.category:before {
    content: '\f07b';
}

.archive {
    -webkit-box-shadow: 1px 2px 3px #ddd;
    box-shadow: 1px 2px 3px #ddd;
    border-bottom: 1px solid #ddd;
    margin-bottom: 50px;
}

.archive article {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.archive article .post-content {
    margin-bottom: 0;
}

#sidebar {
    width: 270px;
    line-height: 1.8em;
}

@media screen and (max-width: 900px) {
    #sidebar {
        float: none;
        width: 100%;
    }
}

#footer {
    color: #fff;
    margin-bottom: 50px;
    font: 0.9em/1.6 "Microsoft YaHei";
}

.entry .gist {
    background: #eee;
    border: 1px solid #ddd;
    margin-top: 15px;
    padding: 7px 15px;
    border-radius: 2px;
    text-shadow: 0 0 1px #fff;
    line-height: 1.6;
    overflow: auto;
    color: #666;
}

.entry .gist .gist-file {
    border: none;
    font-family: inherit;
    margin: 0;
    font-size: 0.9em;
}

.entry .gist .gist-file .gist-data {
    background: none;
    border-bottom: none;
}

.entry .gist .gist-file .gist-data pre {
    padding: 0 !important;
    font-family: Consolas, Monaco, Lucida Console, monospace;
}

.entry .gist .gist-file .gist-meta {
    background: none;
    color: #fff;
    margin-top: 5px;
    padding: 0;
    text-shadow: 0 0 1px #fff;
    font-size: 100%;
}

.entry .gist .gist-file .gist-meta a {
    color: #0cf;
}

.entry .gist .gist-file .gist-meta a:visited {
    color: #0cf;
}

figure.highlight {
    border: 1px solid #ddd;
    margin-top: 15px;
    padding: 7px 15px;
    border-radius: 2px;
    line-height: 1.6;
    overflow: auto;
    position: relative;
    font-size: 0.9em;
}

figure.highlight figcaption {
    color: #fff;
    margin-bottom: 5px;
    text-shadow: 0 0 1px #fff;
}

figure.highlight figcaption a {
    position: absolute;
    right: 15px;
}

figure.highlight pre {
    border: none;
    padding: 0;
    margin: 0;
}

figure.highlight table {
    margin-top: 0;
    border-spacing: 0;
}

figure.highlight .gutter {
    color: #fff;
    padding-right: 15px;
    border-right: 1px solid #ddd;
    text-align: right;
}

figure.highlight .code {
    padding-left: 15px;
    border-left: 1px solid #fff;
}

figure.highlight .line {
    height: 20px;
    font-family: Consolas, Monaco, Lucida Console, monospace;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
    color: #93a1a1;
    font-style: italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
    color: #859900;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
    color: #2aa198;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
    color: #268bd2;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
    color: #b58900;
}

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
    color: #cb4b16;
}

pre .deletion {
    color: #dc322f;
}