/**
 * blog theme 
 */
.clearfix {
  *zoom: 1; }
  .clearfix::after {
    content: '';
    display: table;
    clear: both; }

@media screen and (min-width: 980px) {
  body .page__post {
    margin-right: 30px; } }

.page__content {
  overflow: hidden; }

.post__cover {
  width: 100%; }
  .post__cover > img {
    display: block;
    width: 100%; }

.post__info {
  margin: 60px 0; }

.post__title {
  font-size: 2em;
  color: #242f35;
  margin: .5em 0;
  font-weight: 400;
  line-height: 1; }

.post__mark {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap; }

.mark__block {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  margin-right: 15px; }
  .mark__block .mark__icon {
    font-size: 18px;
    margin-right: 5px; }
  .mark__block .mark__list {
    list-style: none;
    margin: 0;
    padding: 0; }
  .mark__block .mark__item {
    float: left;
    margin-right: 5px; }
    .mark__block .mark__item > span {
      vertical-align: middle; }
    .mark__block .mark__item > a {
      font-size: inherit;
      text-decoration: none;
      transition: color 0.3s;
      color: #666;
      vertical-align: middle; }
      .mark__block .mark__item > a:hover {
        color: #19abd6; }
    .mark__block .mark__item:not(:last-child)::after {
      display: inline-block;
      content: ','; }

.post__content {
  word-wrap: break-word;
  overflow-wrap: break-word; }
  .post__content h1 {
    font-size: 2em; }
  .post__content h2 {
    font-size: 1.8em; }
  .post__content h3 {
    font-size: 1.6em; }
  .post__content h4 {
    font-size: 1.4em; }
  .post__content h5 {
    font-size: 1.2em; }
  .post__content h6 {
    font-size: 1em; }
  .post__content a, .post__content abbr, .post__content acronym, .post__content address, .post__content applet, .post__content big, .post__content blockquote, .post__content body, .post__content caption, .post__content cite, .post__content code, .post__content dd, .post__content del, .post__content dfn, .post__content div, .post__content dl, .post__content dt, .post__content em, .post__content fieldset, .post__content form, .post__content h1, .post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6, .post__content html, .post__content iframe, .post__content img, .post__content ins, .post__content kbd, .post__content label, .post__content legend, .post__content li, .post__content object, .post__content ol, .post__content p, .post__content pre, .post__content q, .post__content s, .post__content samp, .post__content small, .post__content span, .post__content strike, .post__content strong, .post__content sub, .post__content sup, .post__content table, .post__content tbody, .post__content td, .post__content tfoot, .post__content th, .post__content thead, .post__content tr, .post__content tt, .post__content ul, .post__content var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: inherit;
    vertical-align: baseline; }
  .post__content h1, .post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6, .post__content blockquote, .post__content p, .post__content img, .post__content ul, .post__content ol, .post__content dl {
    margin: 0;
    outline: none;
    border: 0; }
    .post__content h1:not(:last-child), .post__content h2:not(:last-child), .post__content h3:not(:last-child), .post__content h4:not(:last-child), .post__content h5:not(:last-child), .post__content h6:not(:last-child), .post__content blockquote:not(:last-child), .post__content p:not(:last-child), .post__content img:not(:last-child), .post__content ul:not(:last-child), .post__content ol:not(:last-child), .post__content dl:not(:last-child) {
      margin-bottom: 21px; }
  .post__content h1, .post__content h2, .post__content h3, .post__content h4, .post__content h5, .post__content h6 {
    line-height: 1;
    font-weight: 400;
    color: #242f35;
    margin-top: 35px; }
  .post__content ul, .post__content ol, .post__content dl {
    padding-left: 1.5em; }
  .post__content blockquote {
    position: relative;
    padding: 1.5em;
    border-left: 5px solid #e4e4e4;
    background-color: rgba(164, 177, 191, 0.1);
    overflow: hidden; }
  .post__content a {
    color: #19abd6;
    transition: color .3s;
    text-decoration: none; }
    .post__content a:hover, .post__content a:active {
      color: #3ac0e8;
      text-decoration: underline; }
  .post__content .highlight {
    background-color: #272822;
    margin: 21px 0;
    color: #fff;
    padding: .5em;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    font-size: 12px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; }
    .post__content .highlight + .post__content .highlight {
      margin: 10px 0; }
      .post__content .highlight + .post__content .highlight:last-child {
        margin-bottom: 21px; }
    .post__content .highlight table {
      width: auto;
      margin: 0;
      border: 0; }
      .post__content .highlight table tr td,
      .post__content .highlight table tr th {
        border: 0;
        padding: 0;
        background-color: transparent !important; }
    .post__content .highlight .line {
      height: 22px; }
    .post__content .highlight .gutter pre {
      min-width: 18px;
      margin-right: .8em;
      text-align: right;
      color: #8f908a; }
    .post__content .highlight .code .tag .name {
      color: #F92672; }
    .post__content .highlight .code .tag .attr {
      color: #74E22E; }
    .post__content .highlight .code .tag .string {
      color: #E6DB74; }
    .post__content .highlight .code .comment {
      color: #75715E; }
    .post__content .highlight .code .keyword {
      color: #66D9EF; }
    .post__content .highlight .code .attr {
      color: #E6DB74; }
    .post__content .highlight .code .literal,
    .post__content .highlight .code .number {
      color: #AE81FF; }
    .post__content .highlight .code .string {
      color: #E6DB74; }
    .post__content .highlight .code .built_in {
      color: #66D9EF; }
    .post__content .highlight .code .function {
      color: #66D9EF; }
      .post__content .highlight .code .function .params {
        color: #FD9720; }
  .post__content code {
    padding: 0 .4em;
    margin: 0;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-weight: 400;
    word-break: break-all; }
  .post__content hr {
    border: 0;
    border-top: 1px solid #e4e4e4;
    margin: 1.5em 0; }
  .post__content img {
    max-width: 100%; }
    .post__content img:not(:last-child) {
      margin-bottom: 10px; }
  .post__content table {
    width: 100%;
    border: 1px solid #d8e5f3;
    border-collapse: collapse; }
    .post__content table th {
      font-weight: 700; }
    .post__content table th,
    .post__content table td {
      padding: .5em;
      text-align: left;
      border: 1px solid #ddd; }
    .post__content table tbody > tr:nth-child(2n+1) > td {
      background-color: rgba(102, 128, 153, 0.05); }
  .post__content .post-announce {
    margin: 2em 0; }
  .post__content .post__prevs {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    font-size: 0;
    font-weight: bold;
    padding-top: 10px;
    border-top: 1px dashed #ddd; }
  .post__content .post__prev {
    -ms-flex: 1 0 0;
        flex: 1 0 0;
    overflow: hidden; }
    .post__content .post__prev > a {
      font-size: 14px;
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #666;
      text-decoration: none;
      cursor: pointer;
      transition: color 0.3s;
      text-decoration: none; }
      .post__content .post__prev > a.actived {
        color: #3ac0e8; }
      .post__content .post__prev > a:hover, .post__content .post__prev > a:active {
        color: #3ac0e8; }
      .post__content .post__prev > a > i {
        font-size: 16px; }
    .post__content .post__prev--right {
      text-align: right; }