@charset "UTF-8";
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
figcaption,
figure,
main {
  display: block;
}
figure {
  margin: 1em 40px;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a:active,
a:hover {
  outline-width: 0;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: inherit;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
dfn {
  font-style: italic;
}
mark {
  background-color: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
audio,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
img {
  border-style: none;
}
svg:not(:root) {
  overflow: hidden;
}
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
[type=reset],
[type=submit],
button,
html [type=button] {
  -webkit-appearance: button;
}
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  display: inline-block;
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details,
menu {
  display: block;
}
summary {
  display: list-item;
}
canvas {
  display: inline-block;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
* {
  font-family: 'Optima', 'PingFang SC', 'Roboto', 'Noto SansCJK', 'Helvetica Neue', 'Helvetica', "微软雅黑", "YaHei-Consolas-Hybrid", sans-serif;
  transition-duration: 0.35s;
  -moz-transition-duration: 0.35s;
  -webkit-transition-duration: 0.35s;
  outline: none;
}
::-webkit-scrollbar {
  width: 6px;
  height: 1px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #f0f0f0;
}
::-webkit-scrollbar-thumb {
  background-color: #666;
}
::selection {
  background-color: #ddd;
}
::-webkit-selection {
  background-color: #ddd;
}
body {
  height: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
}
a {
  -webkit-tap-highlight-color: transparent;
}
.highlight.html:after {
  content: "HTML";
}
.highlight.js:after {
  content: "JavaScript";
}
.highlight.ts:after {
  content: "TypeScript";
}
.highlight.bash:after {
  content: "BASH";
}
.highlight.sh:after {
  content: "Shell";
}
.highlight.css:after {
  content: "CSS";
}
.highlight.scss:after {
  content: "SCSS";
}
.highlight.diff:after {
  content: "Diff";
}
.highlight.java:after {
  content: "JAVA";
}
.highlight.xml:after {
  content: "XML";
}
.highlight.python:after {
  content: "Python";
}
.highlight.yml:after {
  content: "YAML";
}
.highlight.swift:after {
  content: "Swift";
}
.highlight.ruby:after {
  content: "Ruby";
}
.highlight.perl:after {
  content: "Perl";
}
.highlight.php:after {
  content: "PHP";
}
.highlight.c:after {
  content: "CLang";
}
.highlight.cpp:after {
  content: "C++";
}
.highlight.cs:after {
  content: "C#";
}
@-moz-keyframes indeterminate {
  from {
    left: -90%;
    right: 100%;
  }
  60% {
    left: -90%;
    right: 100%;
  }
  to {
    left: 100%;
    right: -35%;
  }
}
@-webkit-keyframes indeterminate {
  from {
    left: -90%;
    right: 100%;
  }
  60% {
    left: -90%;
    right: 100%;
  }
  to {
    left: 100%;
    right: -35%;
  }
}
@-o-keyframes indeterminate {
  from {
    left: -90%;
    right: 100%;
  }
  60% {
    left: -90%;
    right: 100%;
  }
  to {
    left: 100%;
    right: -35%;
  }
}
@keyframes indeterminate {
  from {
    left: -90%;
    right: 100%;
  }
  60% {
    left: -90%;
    right: 100%;
  }
  to {
    left: 100%;
    right: -35%;
  }
}
@-moz-keyframes indeterminate-short {
  from {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  to {
    left: 107%;
    right: -8%;
  }
}
@-webkit-keyframes indeterminate-short {
  from {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  to {
    left: 107%;
    right: -8%;
  }
}
@-o-keyframes indeterminate-short {
  from {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  to {
    left: 107%;
    right: -8%;
  }
}
@keyframes indeterminate-short {
  from {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  to {
    left: 107%;
    right: -8%;
  }
}
@font-face {
  font-family: "LedFont";
  font-style: normal;
  src: url("../font/lcd.ttf") format('truetype');
}
@font-face {
  font-family: "iconfont";
  src: url("../font/iconfont/iconfont.eot");
  src: url("../font/iconfont/iconfont.eot") format('embedded-opentype'), url("../font/iconfont/iconfont.woff") format('woff'), url("../font/iconfont/iconfont.ttf") format('truetype'), url("../font/iconfont/iconfont.svg") format('svg');
}
.iconfont {
  font-family: 'iconfont';
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-mail:before {
  content: "\e694";
}
.icon-alipay:before {
  content: "\e695";
}
.icon-facebook:before {
  content: "\e696";
}
.icon-linkedin:before {
  content: "\e697";
}
.icon-ins:before {
  content: "\e698";
}
.icon-zhihu:before {
  content: "\e69a";
}
.icon-twitter:before {
  content: "\e69b";
}
.icon-weibo:before {
  content: "\e69e";
}
.icon-moments:before {
  content: "\e6a0";
}
.icon-right:after {
  content: "\e78b";
}
.icon-up:before {
  content: "\e7a8";
}
.icon-left:before {
  content: "\e833";
}
.icon-github:before {
  content: "\e6ed";
}
.icon-more:before {
  content: "\e652";
}
.icon-visit:before {
  content: "\e637";
}
.icon-people:before {
  content: "\e651";
}
.container {
  width: 800px;
  margin: 0 auto;
}
@media screen and (max-width: 800px) {
  .container {
    width: 100%;
  }
}
.container.ispost {
  width: 70%;
  margin: 0 208px 0 auto;
}
@media screen and (max-width: 800px) {
  .container.ispost {
    width: 100%;
    margin: 0;
  }
}
.main {
  margin: 24px auto;
}
.body {
  display: none;
}
.header {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}
.header .table {
  display: table;
  height: 100%;
  width: 100%;
}
.header .table .connect {
  display: table-cell;
  vertical-align: middle;
}
.header .table .connect .connect-inner {
  box-sizing: border-box;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
}
.header .table .connect .connect-inner span a {
  font-family: 'LedFont', cursive, 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #666;
  text-decoration: none;
}
.header .title {
  flex: 2;
  height: 100%;
  text-align: center;
  padding-right: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.header #subtitle {
  font-size: 12px;
  margin-top: 8px;
}
.header .main-nav {
  flex: 3;
  text-align: center;
  padding-left: 24px;
}
.header .main-nav .menu {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 40px 0;
}
.header .main-nav .menu .menu-item {
  display: inline-table;
  margin: 0 16px;
}
.header .main-nav .menu .menu-item a {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #666;
  font-size: 16px;
}
.header .main-nav .menu .menu-item a:hover {
  color: #000;
}
.header .main-nav .menu .menu-item .menu-item-label {
  font-size: 12px;
}
@media screen and (max-width: 800px) {
  .header .title {
    padding-right: 0;
  }
  .header .main-nav {
    padding-left: 0;
  }
  .header .menu {
    padding: 0;
  }
}
@media screen and (max-width: 650px) {
  .header .main-nav .menu {
    margin: 16px 0;
    padding: 0;
  }
  .header .main-nav .menu .menu-item {
    margin: 0 8px;
  }
  .header .main-nav .menu .menu-item a {
    font-size: 12px;
  }
}
@media screen and (max-width: 650px) {
  .header {
    height: inherit;
    display: block;
  }
}
.mobile-header {
  display: none;
}
@media screen and (max-width: 650px) {
  .mobile-header {
    z-index: 50;
    position: fixed;
    top: -300px;
    left: 0;
    right: 0;
    height: auto;
    box-shadow: 0px 2px 2px #c4c4c4;
    display: block;
  }
  .mobile-header .mobile-header-nav {
    background-color: #666;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 48px;
    height: 48px;
  }
  .mobile-header .mobile-header-nav .mobile-header-item {
    flex: 0.5;
    width: 100%;
    height: 100%;
    color: inherit;
  }
  .mobile-header .mobile-header-nav .mobile-header-item.item-clicked .header-menu-line {
    background-color: transparent;
  }
  .mobile-header .mobile-header-nav .mobile-header-item.item-clicked .header-menu-line:before {
    top: 0;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }
  .mobile-header .mobile-header-nav .mobile-header-item.item-clicked .header-menu-line:after {
    top: 0;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  .mobile-header .mobile-header-nav .mobile-header-title {
    flex: 3;
    text-align: center;
    margin: 0.2rem;
    color: inherit;
  }
  .mobile-header .mobile-header-nav .mobile-header-title a {
    font-family: 'LedFont', cursive, 'Microsoft YaHei', sans-serif;
    text-decoration: none;
    font-size: 32px;
    color: inherit;
    font-weight: 200;
    line-height: 1;
  }
  .mobile-header .mobile-header-body .mobile-header-list {
    background-color: #666;
    opacity: 0.9;
    box-sizing: border-box;
    padding: 8px 0;
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item {
    position: relative;
    box-sizing: border-box;
    padding: 8px 24px;
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item a {
    text-decoration: none;
    color: #fff;
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item .mobile-nav-tagcloud {
    position: absolute;
    overflow-x: auto;
    top: 8px;
    left: 24px;
    right: 24px;
    width: 80%;
    transform: translateX(120%);
    -ms-transform: translateX(120%);
    -moz-transform: translateX(120%);
    -webkit-transform: translateX(120%);
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item .mobile-nav-tagcloud .mobile-tagcloud-inner {
    display: inline-block;
    white-space: nowrap;
    word-break: keep-all;
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item .mobile-nav-tagcloud .mobile-tagcloud-inner a {
    margin: 0 4px;
  }
  .mobile-header .mobile-header-body .mobile-header-list .mobile-nav-item .mobile-nav-tagcloud .mobile-tagcloud-inner a:before {
    content: '#';
  }
  .header-menu-item {
    position: relative;
    padding: 0 12px;
    box-sizing: border-box;
    height: 100%;
  }
  .header-menu-item .header-menu-line {
    position: absolute;
    top: 50%;
    background-color: #fff;
    height: 1px;
    width: 24px;
  }
  .header-menu-item .header-menu-line:before {
    content: '';
    position: absolute;
    top: -6px;
    background-color: #fff;
    height: 1px;
    width: 24px;
    transition: transform 0.3s;
    -moz-transition: transform 0.3s;
    -webkit-transition: transform 0.3s;
    transition: top 0.3s;
    -moz-transition: top 0.3s;
    -webkit-transition: top 0.3s;
  }
  .header-menu-item .header-menu-line:after {
    content: '';
    position: absolute;
    top: 6px;
    background-color: #fff;
    height: 1px;
    width: 24px;
    transition-property: top, transform;
    transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
  }
}
.posts {
  padding: 0 8px;
}
.post {
  position: relative;
  background-color: #fefefe;
  padding: 16px;
  margin-bottom: 16px;
}
.post:before {
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  background-color: #777;
  box-shadow: -1px -1px 1px #bbb;
  position: absolute;
  top: -1px;
  left: -1px;
  -webkit-animation: fadeIn 0.5s ease-in-out backwards 0.5s;
  animation: fadeIn 0.5s ease-in-out backwards 0.5s;
}
.post:after {
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  background-color: #777;
  box-shadow: 1px 1px 1px #bbb;
  position: absolute;
  bottom: -1px;
  right: -1px;
  -webkit-animation: fadeIn 0.5s ease-in-out backwards 0.5s;
  animation: fadeIn 0.5s ease-in-out backwards 0.5s;
}
.post .post-header {
  z-index: 10;
}
.post .post-header .post-time {
  padding-left: 16px;
  font-family: "Source Sans Pro", "Helvetica Neue";
  font-weight: 400;
  font-size: 14px;
  color: #666;
}
.post .post-header .post-time .post-category {
  font-size: inherit;
}
.post .post-header .post-time .post-category a {
  text-decoration: none;
  color: #666;
}
.post .post-header .post-time .post-category:before {
  content: ' · ';
}
.post .post-header .post-title {
  margin: 0;
  padding: 5px 0;
  font-weight: 200;
  font-size: 28px;
}
.post .post-header .post-title a {
  text-decoration: none;
  color: #000;
}
@media screen and (max-width: 650px) {
  .post .post-header .post-time {
    font-size: 12px;
  }
  .post .post-header .post-title {
    font-size: 20px;
  }
}
@media screen and (max-width: 800px) {
  .post {
    margin: 8px;
  }
}
@media screen and (max-width: 650px) {
  .post {
    margin: 8px;
    padding: 8px;
  }
}
.post-content h1 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h1:before {
  content: '∮ ';
}
.post-content h2 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h2:before {
  content: '∮ ';
}
.post-content h3 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h3:before {
  content: '∮ ';
}
.post-content h4 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h4:before {
  content: '∮ ';
}
.post-content h5 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h5:before {
  content: '∮ ';
}
.post-content h6 {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  font-weight: 300;
  margin: 16px 0;
}
.post-content h6:before {
  content: '∮ ';
}
.post-content a {
  color: #666;
  text-decoration: underline;
}
.post-content a:hover {
  color: #000;
}
.post-content p {
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
  margin: 8px 0;
  line-height: 1.5em;
  font-weight: 300;
}
.post-content code {
  border: 1px solid #999;
  background-color: #f0f0f0;
  padding: 0 4px;
  margin: 0 4px;
  font-size: 14px;
}
.post-content strong {
  font-weight: bold;
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
}
.post-content i {
  font-weight: 100;
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
}
.post-content img {
  max-width: 100%;
  display: inline;
}
@media screen and (max-width: 650px) {
  .post-content {
    font-size: 14px;
  }
}
.content-link {
  margin: 8px 0;
  display: inline-block;
}
.content-link:hover {
  transform: translateX(10%);
  -ms-transform: translateX(10%);
  -moz-transform: translateX(10%);
  -webkit-transform: translateX(10%);
}
.content-link a {
  color: #666;
  text-decoration: none;
}
.content-link a:hover {
  color: #000;
}
.post-tags {
  display: inline-block;
  padding: 4px 16px;
  font-size: 12px;
  border-bottom: 1px solid #ddd;
}
.post-tags a {
  text-decoration: none;
  color: #666;
  margin: 0 4px;
}
.post-tags a:before {
  content: '#';
}
.post-tags a:hover {
  color: #000;
}
blockquote {
  position: relative;
  margin: 8px 8px;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border-left: 5px solid #999;
}
blockquote:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-color: #fff #fff transparent transparent;
  background: transparent;
  border-style: solid;
  width: 0;
  box-shadow: -1px 1px 1px #ddd;
}
blockquote p {
  margin: 0;
  font-family: 'Source Han Serif TC', 'Source Han Serif SC', 'Source Han Sans TC', 'Noto Sans CJK TC', 'Source Han Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans GB', 'Roboto', sans-serif;
}
.archive {
  margin: 0 48px;
}
.archive .archive-title {
  display: inline-block;
  margin: 0;
  font-family: Athelas, "PingFang SC", serif;
  font-weight: 300;
  color: #666;
}
.archive .archive-num {
  margin: 8px;
  font-weight: 100;
}
.archive .archive-name {
  font-family: Athelas, "PingFang SC", serif;
  font-weight: 300;
}
.archive .archive-list .archive-year {
  font-family: Athelas, "PingFang SC", serif;
  font-weight: 100;
}
.archive .archive-list ul {
  list-style: none;
  padding: 0;
}
.archive .archive-list .archive-post {
  border-left: 1px solid #ddd;
  padding: 0 8px;
}
.archive .archive-list .archive-post:hover {
  padding: 0 16px;
  background-color: $main-back;
  border-left: 3px solid #666;
  border-right: 3px solid #666;
}
.archive .archive-list .archive-post-time {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #999;
}
.archive .archive-list .archive-post-link {
  display: inline-block;
  line-height: 1.5em;
}
.archive .archive-list .archive-post-link a {
  margin: 0 8px;
  text-decoration: none;
  color: #666;
}
.archive .archive-list .archive-post-link a:hover {
  color: #000;
}
.pagination {
  width: 80%;
  margin: 24px auto;
  font-weight: 500;
}
.pagination .page-number {
  display: none;
}
.pagination:before,
.pagination:after,
.article-page:after {
  content: '';
  display: table;
}
.pagination:after {
  clear: both;
}
.pagination .extend {
  text-decoration: none;
  color: #666;
  font-size: 18px;
}
.pagination .extend.next {
  float: right;
}
.pagination .extend.next:hover {
  color: #000;
  transform: translateX(10%);
  -ms-transform: translateX(10%);
  -moz-transform: translateX(10%);
  -webkit-transform: translateX(10%);
}
.pagination .extend.prev {
  float: left;
}
.pagination .extend.prev:hover {
  color: #000;
  transform: translateX(-10%);
  -ms-transform: translateX(-10%);
  -moz-transform: translateX(-10%);
  -webkit-transform: translateX(-10%);
}
@media screen and (max-width: 650px) {
  .pagination .extend {
    font-size: 14px;
  }
}
.article-page {
  width: 80%;
  margin: 24px auto;
  font-weight: 500;
}
@media screen and (max-width: 650px) {
  .article-page {
    text-align: center;
  }
}
.article-page a {
  text-decoration: none;
  color: #666;
  font-size: 16px;
}
@media screen and (max-width: 650px) {
  .article-page a {
    font-size: 12px;
  }
}
.article-page a:hover {
  color: #000;
}
.article-page .next-title i,
.article-page .prev-title i {
  vertical-align: middle;
}
.article-page:before {
  content: '';
  display: table;
}
.article-page:after {
  clear: both;
}
.article-page .art-right {
  float: right;
}
@media screen and (max-width: 650px) {
  .article-page .art-right {
    float: none;
    display: block;
    margin-bottom: 16px;
  }
}
.article-page .art-right:hover {
  transform: translateX(10%);
  -ms-transform: translateX(10%);
  -moz-transform: translateX(10%);
  -webkit-transform: translateX(10%);
}
.article-page .art-left {
  float: left;
}
@media screen and (max-width: 650px) {
  .article-page .art-left {
    float: none;
    display: block;
    margin-top: 16px;
  }
}
.article-page .art-left:hover {
  transform: translateX(-10%);
  -ms-transform: translateX(-10%);
  -moz-transform: translateX(-10%);
  -webkit-transform: translateX(-10%);
}
.footer {
  margin: 8px 0;
  width: 100%;
  height: 100%;
}
.footer hr {
  border: none;
  height: 1px;
  background-color: #666;
  background-image: -webkit-linear-gradient(0deg, #fff, #666, #fff);
}
.footer .footer-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
}
@media screen and (max-width: 650px) {
  .footer .footer-wrapper {
    flex-direction: column;
  }
}
.footer .left {
  flex: 1;
  padding: 16px;
  border-right: 1px solid #ddd;
  border-image: -webkit-linear-gradient(#fff, #ddd, #fff) 0 10 0 0;
}
@media screen and (max-width: 650px) {
  .footer .left {
    border: none;
    padding: 8px;
  }
}
.footer .left .contact-icon {
  display: flex;
  justify-content: center;
}
.footer .left .contact-icon a {
  margin: 4px 8px;
  text-decoration: none;
  color: #666;
  font-size: 26px;
}
.footer .left .icon-github:hover {
  color: #24292e;
}
.footer .left .icon-weibo:hover {
  color: #e6162d;
}
.footer .left .icon-twitter:hover {
  color: #1ab2e8;
}
.footer .left .icon-zhihu:hover {
  color: #0767c8;
}
.footer .left .icon-linkedin:hover {
  color: #5290bc;
}
.footer .left .icon-facebook:hover {
  color: #4e69a2;
}
.footer .left .icon-ins:hover {
  color: #d10869;
}
.footer .right {
  flex: 2;
  display: block;
  padding: 16px;
}
@media screen and (max-width: 650px) {
  .footer .right {
    padding: 8px;
  }
}
.footer .right .copyright {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}
.footer .right .copyright span {
  color: #666;
  font-size: 11px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.footer .right .copyright a {
  font-family: Arial;
  text-decoration: none;
  color: #666;
}
.footer .right .copyright a:hover {
  color: #000;
  text-decoration: underline;
}
.footer .visit_count {
  color: #666;
  display: flex;
  align-items: center;
}
.footer .visit_count .iconfont {
  font-size: 14px;
}
.footer .visit_count span {
  margin: 4px 4px;
}
.about {
  padding: 16px 56px;
  font-family: Athelas, "PingFang SC", serif;
  font-weight: 300;
}
.about .title {
  font-family: Athelas, "PingFang SC", serif;
  font-weight: 300;
}
.about .content {
  padding: 8px 16px;
}
.about p {
  line-height: 1.5em;
}
.copy-line {
  border: none;
  border-bottom: 2px dashed #ddd;
  height: 16px;
}
.post-copyright .copy-author,
.post-copyright .copy-url,
.post-copyright .copy-origin,
.post-copyright .copy-license {
  margin: 8px 8px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: 14px;
}
.post-copyright .copy-author a,
.post-copyright .copy-url a,
.post-copyright .copy-origin a,
.post-copyright .copy-license a {
  color: #666;
}
.post-copyright .copy-author a:hover,
.post-copyright .copy-url a:hover,
.post-copyright .copy-origin a:hover,
.post-copyright .copy-license a:hover {
  color: #000;
}
.post-reward {
  width: 100%;
}
.post-reward .reward-btn {
  display: block;
  margin: 8px auto;
  padding: 8px;
  text-align: center;
  border: 1px solid #666;
  width: 48px;
  border-radius: 8px;
}
.post-reward .reward-btn:hover {
  color: #fff;
  background-color: #666;
  cursor: pointer;
}
.post-reward .reward-wrapper {
  margin: 24px 0;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.post-reward .reward-wrapper .reward-item {
  margin: 0 2%;
}
.post-reward .reward-wrapper img {
  width: 150px;
  height: 150px;
}
.post-toc {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  width: 200px;
  margin: auto 16px auto 0;
  border: none;
  line-height: 1.5rem;
  word-wrap: break-word;
  box-sizing: border-box;
}
.post-toc .toc-inner {
  height: 80%;
  overflow: auto;
  white-space: nowrap;
  padding: 8px;
}
.post-toc .toc-inner::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
.post-toc ol {
  list-style: none;
  padding-left: 16px;
}
.post-toc .title {
  display: block;
  margin: 0 auto;
  text-align: center;
  width: 50%;
  position: relative;
}
.post-toc .title:before {
  content: '';
  position: absolute;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 100%;
  background: #999;
  transition-property: right;
  animation: lane-right 0.35s linear both;
}
.post-toc .title-link {
  list-style: none;
  margin-top: 16px;
}
.post-toc .title-link a {
  text-decoration: none;
  color: #666;
  padding: 0 8px;
  font-size: 14px;
}
.post-toc .title-link a.active {
  border-left: 2px solid #666;
}
.post-toc .toc {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-toc .toc .toc-item {
  color: #666;
}
.post-toc .toc .toc-item .toc-link {
  color: #666;
  text-decoration: none;
  padding: 0 8px;
  font-size: 14px;
}
.post-toc .toc .toc-item .toc-link.active {
  border-left: 2px solid #666;
}
@media screen and (max-width: 650px) {
  .post-toc {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .post-toc {
    display: none;
  }
}
@-moz-keyframes lane-right {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
@-webkit-keyframes lane-right {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
@-o-keyframes lane-right {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
@keyframes lane-right {
  from {
    right: 100%;
  }
  to {
    right: 0;
  }
}
.highlight {
  position: relative;
  background-color: #f7f7f7;
  width: 100%;
  margin: 8px 0;
  overflow-x: auto;
}
.highlight:after {
  content: 'plain';
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 100;
  color: #ddd;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 8px;
}
.highlight table {
  position: relative;
}
.highlight pre * {
  font-family: 'Ubuntu Mono', 'Roboto Mono', monospace !important;
}
.highlight .gutter {
  width: 10px;
  color: #bbb;
}
.highlight .gutter pre {
  padding: 0 8px;
}
.highlight .code {
  color: #2c2c2c;
}
.highlight .code pre {
  padding: 0 8px;
}
.highlight .line {
  height: 1.5em;
}
.highlight tr,
.highlight td {
  margin: 0;
}
.highlight .code .comment,
.highlight .code .quote {
  color: #a1a4aa;
}
.highlight .code .keyword,
.highlight .code .selector-tag,
.highlight .code .addition {
  color: #c678dd;
}
.highlight .code .number,
.highlight .code .string,
.highlight .code .meta .meta-string,
.highlight .code .literal,
.highlight .code .doctag,
.highlight .code .regexp {
  color: #d19a66;
}
.highlight .code .title,
.highlight .code .section,
.highlight .code .name,
.highlight .code .selector-id,
.highlight .code .selector-class {
  color: #e06c75;
}
.highlight .code .attribute,
.highlight .code .attr,
.highlight .code .variable,
.highlight .code .template-variable,
.highlight .code .class .title,
.highlight .code .type {
  color: #61aeee;
}
.highlight .code .symbol,
.highlight .code .bullet,
.highlight .code .subst,
.highlight .code .meta,
.highlight .code .meta .keyword,
.highlight .code .selector-attr,
.highlight .code .selector-pseudo,
.highlight .code .link {
  color: #cb4b16;
}
.highlight .code .built_in,
.highlight .code .deletion {
  color: #e6c07b;
}
.highlight .code .params {
  color: #5799de;
}
.show-tag {
  transform: translateY(0px);
  -ms-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -webkit-transform: translateY(0px);
}
.tagcloud {
  z-index: 500;
  position: absolute;
  transform: translateY(-120px);
  -ms-transform: translateY(-120px);
  -moz-transform: translateY(-120px);
  -webkit-transform: translateY(-120px);
  display: block;
  width: 100%;
  min-height: 120px;
  text-align: center;
  box-sizing: border-box;
  background-color: #666;
  border-bottom: 3px solid #666;
  box-shadow: inset 0px -8px 10px 0px #585858;
}
.tagcloud-mask {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  transition: background 0.3s backwards 0.1s;
  -moz-transition: background 0.3s backwards 0.1s;
  -webkit-transition: background 0.3s backwards 0.1s;
}
.tagcloud-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
  min-height: inherit;
  width: 100%;
  height: 100%;
}
.tagcloud-inner a {
  flex: 0 0 17%;
  text-decoration: none;
  color: #fff;
}
.tagcloud-inner a:before {
  content: '#';
}
.tagcloud-inner a:hover {
  text-shadow: 1px 1px 1px #fff;
}
@media screen and (max-width: 650px) {
  .tagcloud .tagcloud-inner {
    justify-content: center;
  }
  .tagcloud .tagcloud-inner a {
    font-size: 9px !important;
  }
}
.backtop {
  display: flex;
  flex-direction: column;
  z-index: 10;
  position: fixed;
  bottom: 32px;
  right: 32px;
}
.backtop:hover {
  -webkit-animation-name: float-in;
  animation-name: float-in;
  -webkit-animation-duration: 2.33s;
  animation-duration: 2.33s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.backtop i {
  font-size: 24px;
  font-weight: 100;
}
.progress .progress-inner {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  height: 3px;
  width: 100%;
}
.progress .progress-inner:before {
  content: '';
  height: inherit;
  position: absolute;
  width: auto;
  will-change: left right;
  background: #666;
  -webkit-animation: indeterminate 2.2s ease-out infinite;
  animation: indeterminate 2.2s ease-out infinite;
}
.progress .progress-inner:after {
  content: '';
  height: inherit;
  position: absolute;
  width: auto;
  will-change: left right;
  background: #666;
  -webkit-animation: indeterminate-short 2.2s ease-out infinite;
  animation: indeterminate-short 2.2s ease-out infinite;
}
.search {
  display: none;
}
.search .slide {
  transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
}
.search .mask {
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
}
.search .search-wrapper {
  background: transparent;
  width: 100%;
  max-width: 100%;
  position: absolute;
  top: 20%;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.search .search-wrapper h1 {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  color: #fff;
  font-weight: 100;
  font-size: 3.6rem;
}
@media screen and (max-width: 800px) {
  .search .search-wrapper h1 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 650px) {
  .search .search-wrapper h1 {
    font-size: 1.2rem;
  }
}
.search .search-wrapper input {
  width: 800px;
  height: 60px;
  outline: none;
  border: none;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 32px;
  padding: 8px;
  font-weight: 100;
}
@media screen and (max-width: 800px) {
  .search .search-wrapper input {
    width: 570px;
    font-size: 24px;
  }
}
@media screen and (max-width: 650px) {
  .search .search-wrapper input {
    width: 230px;
    font-size: 18px;
    height: 24px;
  }
}
.search #local-search-result {
  background-color: rgba(0,0,0,0.2);
}
@media screen and (max-width: 800px) {
  .search #local-search-result {
    width: 590px;
  }
}
@media screen and (max-width: 650px) {
  .search #local-search-result {
    width: 100%;
  }
}
.search #local-search-result .search-result-list {
  font-weight: 300;
  list-style: none;
  width: 800px;
  color: #fff;
  padding: 8px;
}
@media screen and (max-width: 800px) {
  .search #local-search-result .search-result-list {
    width: auto;
  }
}
.search #local-search-result .search-result-list .search-result-title {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
}
.search #local-search-result .search-result-list .search-keyword {
  font-weight: 400;
}
.search #local-search-result .search-result-list .search-result-item {
  padding: 8px;
  border-top: 1px solid #707070;
}
.search #local-search-result .search-result-list .search-result-item:hover {
  background-color: rgba(0,0,0,0.2);
}
.search .end-line {
  border: none;
  border-top: 1px dashed #fff;
}