/*
 * variables
 */
body,
html,
div,
header,
footer,
nav,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal; }

html {
  height: 100%; }

body {
  font-family: 'Helvetica Neue',Helvetica,Arial,'Microsoft YaHei',sans-serif;
  color: #333;
  background-image: url(/static/img/reset_bg.jpg);
  position: relative;
  min-height: 100%;
  padding-bottom: 190px; }

a {
  text-decoration: none; }

button {
  border: none;
  outline: none; }

hr {
  border: 0;
  border-top: 1px solid #eee;
  margin: 20px 0; }

h1 {
  font-size: 36px; }

h2 {
  font-size: 30px;
  border-bottom: 1px solid #eee; }

h3 {
  font-size: 26px; }

h4 {
  font-size: 22px; }

h5 {
  font-size: 20px; }

h6 {
  font-size: 18px; }

h2,
h3,
h4,
h5,
h6 {
  margin: 20px 0 10px; }

blockquote {
  color: #444;
  border-left: 5px solid #D6DBDF;
  padding-left: 15px;
  background: rgba(112, 138, 153, 0.1);
  padding: 10px 20px;
  margin: 0 0 20px; }
  blockquote p:last-of-type {
    margin: 0; }

table {
  border-top: 2px solid #777;
  border-bottom: 2px solid #777;
  margin: 8px 0;
  border-collapse: collapse; }
  table thead {
    border-bottom: 1px solid #777;
    background-color: #aaa;
    color: #fff; }
  table th {
    padding: 2px 10px;
    text-align: left; }
  table tbody tr:nth-of-type(2n+1) {
    background-color: #f8f8fd; }
  table tbody tr:nth-of-type(2n) {
    background-color: #e5eaed; }
  table td {
    padding: 2px 10px; }

p {
  margin: 0 0 10px; }

img {
  max-width: 100%; }

header {
  background: #222;
  height: 52px;
  color: #9d9d9d;
  box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 20px; }
  header a {
    color: #9d9d9d;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease; }
    header a:hover {
      color: #fff; }
  header .fa-heart:before {
    color: #ffa0a0; }
  header .wrapper {
    width: 1140px;
    margin: 0 auto;
    line-height: 52px; }
    header .wrapper .brand {
      font-size: 18px; }
    header .wrapper small {
      margin-left: 26px;
      font-size: 14px; }
    header .wrapper .menu {
      display: none; }
    header .wrapper nav {
      float: right; }
      header .wrapper nav ul {
        font-size: 0;
        margin: 0;
        padding: 0; }
        header .wrapper nav ul li {
          list-style: none;
          font-size: 14px;
          display: inline-block;
          -webkit-transition: 0.2s ease;
          transition: 0.2s ease; }
          header .wrapper nav ul li a {
            display: inline-block;
            padding: 0 10px;
            height: 52px; }
            header .wrapper nav ul li a:hover {
              background-color: #000; }
            header .wrapper nav ul li a i {
              margin-right: 5px; }
          header .wrapper nav ul li > .active {
            color: #fff;
            background-color: #000;
            box-shadow: 0 25px 25px -15px rgba(255, 255, 255, 0.93); }

@media screen and (max-width: 1200px) and (min-width: 770px) {
  header {
    height: 50px; }
    header .wrapper {
      width: 90%;
      line-height: 50px; }
      header .wrapper .brand {
        font-size: 16px; }
      header .wrapper small {
        margin-left: 15px;
        font-size: 12px; }
      header .wrapper .menu {
        display: none; }
      header .wrapper nav ul li a {
        padding: 0 8px;
        height: 50px; }
        header .wrapper nav ul li a i {
          margin-right: 4px; } }
@media screen and (max-width: 770px) {
  header {
    height: 48px;
    margin-bottom: 15px; }
    header .wrapper {
      width: 95%;
      margin: 0 auto;
      line-height: 48px;
      position: relative;
      z-index: 101; }
      header .wrapper .brand {
        font-size: 16px; }
      header .wrapper small {
        margin-left: 10px;
        font-size: 12px; }
      header .wrapper .menu {
        display: inline-block;
        position: absolute;
        z-index: -102;
        right: 0;
        top: 10px;
        padding: 5px 10px;
        background: #333;
        border: 1px solid #333;
        border-radius: 4px;
        color: #c9c9c9;
        font-size: 17px;
        -webkit-transition: 0.4s ease;
        transition: 0.4s ease; }
      header .wrapper > .active {
        background: #000;
        color: #fff; }
      header .wrapper .nav-show {
        visibility: visible;
        transform: scale(1);
        opacity: 1; }
      header .wrapper nav {
        position: absolute;
        z-index: 100;
        right: 0;
        top: 47px;
        text-align: center;
        visibility: hidden;
        transform-origin: 100% 0%;
        transform: scale(0.1);
        opacity: 0;
        transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38); }
        header .wrapper nav ul {
          background: #222;
          border-radius: 0 0 4px 4px;
          box-shadow: 0px 3px 4px 1px rgba(0, 0, 0, 0.5); }
          header .wrapper nav ul li {
            font-size: 14px;
            display: block;
            border-bottom: 1px solid #333; }
            header .wrapper nav ul li a {
              display: block;
              padding: 0 10px;
              height: 40px;
              line-height: 40px; }
            header .wrapper nav ul li:last-of-type {
              border: none; }
            header .wrapper nav ul li > .active {
              color: #fff;
              background-color: #000;
              box-shadow: none; } }
#markdown-toc {
  display: none; }

.page[post] .label {
  margin-top: 16px;
  overflow: hidden; }
  .page[post] .label .label-card {
    float: left;
    margin-right: 15px; }
    .page[post] .label .label-card .point {
      padding: 0 10px;
      color: #9d9d9d; }
    .page[post] .label .label-card i {
      padding-right: 5px;
      color: #6b6a6a; }
.page[post] a {
  color: #4d6dad;
  transition: 0.5s ease; }
  .page[post] a:hover {
    color: #223253;
    background-color: #f4efeb; }
.page[post] .left ul > h2 {
  color: #333; }
.page[post] .left ul li {
  color: #333;
  margin: 0; }

@media screen and (max-width: 770px) {
  .page[post] .left {
    font-size: 15px; }
    .page[post] .left h2 {
      font-size: 24px; }
    .page[post] .left h3 {
      font-size: 20px; }
    .page[post] .left h4 {
      font-size: 18px; }
    .page[post] .left h5 {
      font-size: 16px; }
    .page[post] .left h6 {
      font-size: 15px; } }
.clearfix:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both; }

.clearfix {
  *zoom: 1; }

.page {
  width: 1140px;
  box-sizing: border-box;
  margin: 0 auto; }
  .page .left {
    width: 75%;
    float: left;
    padding: 20px 30px;
    line-height: 1.6;
    font-size: 16px;
    background-color: #f8f8fd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 30px rgba(10, 10, 0, 0.1) inset; }
    .page .left > h1 {
      margin-bottom: -10px; }
    .page .left a:not([title]) {
      word-break: break-all; }
    .page .left ul > h2 {
      margin-left: -40px;
      color: #6a6b6b; }
    .page .left ul li {
      line-height: 1.8;
      color: #888888; }
      .page .left ul li time {
        display: inline-block;
        width: 135px; }
      .page .left ul li .title {
        font-weight: bold;
        color: #223253;
        transition: 0.3s ease; }
        .page .left ul li .title:hover {
          color: #4d6dad; }
      .page .left ul li i {
        margin-right: 5px; }
      .page .left ul li .categories {
        padding: 0 15px; }
        .page .left ul li .categories i {
          color: #9e9d9d; }
        .page .left ul li .categories a {
          padding: 0 5px;
          background-color: #9e9d9d;
          color: #fff;
          font-size: 90%;
          transition: 0.3s ease; }
          .page .left ul li .categories a:hover {
            background-color: #b6b6b9; }
      .page .left ul li .pageTag i {
        color: #c6cbe9; }
      .page .left ul li .pageTag a {
        padding: 0 5px;
        background-color: #c6cbe9;
        border-radius: 4px;
        color: #fff;
        font-size: 90%;
        transition: 0.3s ease; }
        .page .left ul li .pageTag a:hover {
          background-color: #c0ddc7; }
  .page .anchor {
    display: none; }
  .page .right {
    float: left;
    width: 25%;
    padding-left: 30px;
    top: 0; }
    .page .right .scroll-bottom {
      position: absolute;
      bottom: 190px; }
    .page .right .side {
      box-sizing: border-box;
      background-color: #f8f8fd;
      box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset;
      padding-bottom: 1px;
      -ms-word-break: break-all;
      word-break: break-all;
      /* Non standard for webkit */
      word-break: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto; }
      .page .right .side > div {
        padding: 12px 15px;
        border-bottom: 1px solid #c0c0c0;
        font-size: 16px;
        font-weight: bold; }
      .page .right .side a {
        color: #4d6dad;
        transition: 0.5s ease; }
        .page .right .side a:hover {
          color: #223253; }
    .page .right .chitika-ads {
      margin-bottom: 20px;
      padding-bottom: 0px; }
      .page .right .chitika-ads i {
        margin-right: 3px; }
    .page .right .content-ul {
      overflow-y: auto;
      padding-right: 10px;
      line-height: 1.8;
      padding-left: 35px; }
      .page .right .content-ul ul {
        padding-left: 20px; }

@media screen and (max-width: 1200px) and (min-width: 770px) {
  .page {
    width: 90%; } }
@media screen and (max-width: 770px) {
  .page {
    width: 95%; }
    .page .left {
      width: 100%;
      float: left;
      padding: 10px 14px;
      font-size: 14px; }
      .page .left > h1 {
        font-size: 25px;
        margin-bottom: -10px; }
      .page .left ul {
        padding-left: 20px; }
        .page .left ul > h2 {
          font-size: 20px;
          margin-left: -20px; }
        .page .left ul li {
          margin: 20px 0; }
          .page .left ul li time {
            display: block;
            width: auto; }
          .page .left ul li .title {
            display: block;
            font-size: 16px; }
          .page .left ul li .categories {
            font-size: 12px;
            padding-left: 0;
            padding-right: 10px; }
    .page .anchor {
      display: block;
      visibility: visible;
      position: fixed;
      top: 76px;
      right: 2.5%;
      padding: 5px 10px;
      color: #333;
      font-size: 15px;
      background-color: #f8f8fd;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset;
      opacity: 0.7;
      transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38); }
    .page .anchor-hide {
      opacity: 0;
      visibility: hidden; }
    .page .right {
      visibility: hidden;
      float: none;
      width: auto;
      max-width: 95%;
      padding: 0;
      top: 76px;
      right: 2.5%;
      opacity: 0;
      transform-origin: 100% 0;
      transform: scale(0.1);
      transition: 0.2s cubic-bezier(0.5, 0.1, 0.51, 1.38); }
    .page .right-show {
      visibility: visible;
      opacity: 1;
      transform: scale(1); } }
/**
 * Syntax highlighting styles
 */
code {
  padding: 1px 4px;
  margin: 0 2px;
  font-size: 10px;
  border-radius: 3px;
  color: #000;
  background-color: rgba(0, 0, 0, 0.06);
  border: 1px solid #d7d0d2;
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace; }

pre {
  margin: 12px 0;
  line-height: 20px;
  padding: 8px 12px;
  word-wrap: break-word;
  /* IE 5.5-7 */
  white-space: -moz-pre-wrap;
  /* Firefox 1.0-2.0 */
  white-space: pre-wrap;
  /* current browsers */ }
  pre > code {
    margin: 0;
    padding: 0;
    font-size: 10px;
    color: black;
    border: none;
    background-color: #f0f0f0; }

.highlight {
  border-radius: 3px;
  background: #f0f0f0;
  /* Comment */
  /* Error */
  /* Generic */
  /* Keyword */
  /* Literal */
  /* Name */
  /* Operator */
  /* Other */
  /* Punctuation */
  /* Comment.Multiline */
  /* Comment.Preproc */
  /* Comment.Single */
  /* Comment.Special */
  /* Generic.Deleted */
  /* Generic.Emph */
  /* Generic.Error */
  /* Generic.Heading */
  /* Generic.Inserted */
  /* Generic.Output */
  /* Generic.Prompt */
  /* Generic.Strong */
  /* Generic.Subheading */
  /* Generic.Traceback */
  /* Keyword.Constant */
  /* Keyword.Declaration */
  /* Keyword.Namespace */
  /* Keyword.Pseudo */
  /* Keyword.Reserved */
  /* Keyword.Type */
  /* Literal.Date */
  /* Literal.Number */
  /* Literal.String */
  /* Name.Attribute */
  /* Name.Builtin */
  /* Name.Class */
  /* Name.Constant */
  /* Name.Decorator */
  /* Name.Entity */
  /* Name.Exception */
  /* Name.Function */
  /* Name.Label */
  /* Name.Namespace */
  /* Name.Other */
  /* Name.Property */
  /* Name.Tag */
  /* Name.Variable */
  /* Operator.Word */
  /* Text.Whitespace */
  /* Literal.Number.Float */
  /* Literal.Number.Hex */
  /* Literal.Number.Integer */
  /* Literal.Number.Oct */
  /* Literal.String.Backtick */
  /* Literal.String.Char */
  /* Literal.String.Doc */
  /* Literal.String.Double */
  /* Literal.String.Escape */
  /* Literal.String.Heredoc */
  /* Literal.String.Interpol */
  /* Literal.String.Other */
  /* Literal.String.Regex */
  /* Literal.String.Single */
  /* Literal.String.Symbol */
  /* Name.Builtin.Pseudo */
  /* Name.Variable.Class */
  /* Name.Variable.Global */
  /* Name.Variable.Instance */
  /* Literal.Number.Integer.Long */ }
  .highlight .hll {
    background-color: #f0f0f0; }
  .highlight .c {
    color: green;
    font-style: italic; }
  .highlight .err {
    color: #a40000;
    border: 1px solid #ef2929; }
  .highlight .g {
    color: #000000; }
  .highlight .k {
    color: blue; }
  .highlight .l {
    color: #000000; }
  .highlight .n {
    color: #000000; }
  .highlight .o {
    color: black;
    font-weight: bold; }
  .highlight .x {
    color: #000000; }
  .highlight .p {
    color: #000000;
    font-weight: bold; }
  .highlight .cm {
    color: green;
    font-style: italic; }
  .highlight .cp {
    color: green;
    font-style: italic; }
  .highlight .c1 {
    color: green;
    font-style: italic; }
  .highlight .cs {
    color: green;
    font-style: italic; }
  .highlight .gd {
    color: #a40000; }
  .highlight .ge {
    color: #000000;
    font-style: italic; }
  .highlight .gr {
    color: #red; }
  .highlight .gh {
    color: #000080;
    font-weight: bold; }
  .highlight .gi {
    color: #00A000; }
  .highlight .go {
    color: #000000;
    font-style: italic; }
  .highlight .gp {
    color: #8f5902; }
  .highlight .gs {
    color: #000000;
    font-weight: bold; }
  .highlight .gu {
    color: #800080;
    font-weight: bold; }
  .highlight .gt {
    color: #a40000;
    font-weight: bold; }
  .highlight .kc {
    color: #800080;
    font-weight: bold; }
  .highlight .kd {
    color: blue; }
  .highlight .kn {
    color: blue; }
  .highlight .kp {
    color: blue; }
  .highlight .kr {
    color: blue; }
  .highlight .kt {
    color: blue; }
  .highlight .ld {
    color: #800080; }
  .highlight .m {
    color: #800080;
    font-weight: bold; }
  .highlight .s {
    color: #FF00FF; }
  .highlight .na {
    color: black; }
  .highlight .nb {
    color: black; }
  .highlight .nc {
    color: black; }
  .highlight .no {
    color: black; }
  .highlight .nd {
    color: black;
    font-weight: bold; }
  .highlight .ni {
    color: black; }
  .highlight .ne {
    color: black;
    font-weight: bold; }
  .highlight .nf {
    color: black; }
  .highlight .nl {
    color: black; }
  .highlight .nn {
    color: black; }
  .highlight .nx {
    color: black; }
  .highlight .py {
    color: black; }
  .highlight .nt {
    color: black;
    font-weight: bold; }
  .highlight .nv {
    color: black; }
  .highlight .ow {
    color: #204a87;
    font-weight: bold; }
  .highlight .w {
    color: #f8f8f8;
    text-decoration: underline; }
  .highlight .mf {
    color: #800080;
    font-weight: bold; }
  .highlight .mh {
    color: #800080;
    font-weight: bold; }
  .highlight .mi {
    color: #800080;
    font-weight: bold; }
  .highlight .mo {
    color: #800080;
    font-weight: bold; }
  .highlight .sb {
    color: #FF00FF; }
  .highlight .sc {
    color: #FF00FF; }
  .highlight .sd {
    color: #FF00FF;
    font-style: italic; }
  .highlight .s2 {
    color: #FF00FF; }
  .highlight .se {
    color: #FF00FF; }
  .highlight .sh {
    color: #FF00FF; }
  .highlight .si {
    color: #FF00FF; }
  .highlight .sx {
    color: #FF00FF; }
  .highlight .sr {
    color: #FF00FF; }
  .highlight .s1 {
    color: #FF00FF; }
  .highlight .ss {
    color: #FF00FF; }
  .highlight .bp {
    color: black; }
  .highlight .vc {
    color: black; }
  .highlight .vg {
    color: black; }
  .highlight .vi {
    color: black; }
  .highlight .il {
    color: black;
    font-weight: bold; }

.page[index] a {
  color: #4d6dad;
  transition: 0.5s ease; }
  .page[index] a:hover {
    color: #223253; }
.page[index] .left > ul {
  padding: 0; }
  .page[index] .left > ul > li {
    list-style: none; }
  .page[index] .left > ul li {
    color: #333; }
    .page[index] .left > ul li h2 {
      border: none;
      font-size: 27px;
      margin: 0; }
    .page[index] .left > ul li .label {
      margin-bottom: 15px;
      overflow: hidden; }
      .page[index] .left > ul li .label .label-card {
        float: left;
        margin-right: 15px; }
        .page[index] .left > ul li .label .label-card i {
          padding-right: 0;
          margin-right: 3px;
          color: #6b6a6a; }
      .page[index] .left > ul li .label .categories {
        padding: 0; }
    .page[index] .left > ul li .excerpt h2 {
      font-size: 24px; }
    .page[index] .left > ul li .excerpt h3 {
      font-size: 22px; }
    .page[index] .left > ul li .excerpt h4 {
      font-size: 20px; }
    .page[index] .left > ul li .read-all {
      text-align: right;
      font-size: 14px; }
      .page[index] .left > ul li .read-all a {
        color: #778ab0;
        transition: 0.2s ease; }
        .page[index] .left > ul li .read-all a:hover {
          color: #5872a7; }
        .page[index] .left > ul li .read-all a i {
          padding-right: 3px; }
.page[index] .left .pagination {
  text-align: center; }
  .page[index] .left .pagination .previous,
  .page[index] .left .pagination .next {
    font-size: 20px;
    padding: 0 5px; }
  .page[index] .left .pagination .page_number {
    padding: 0 5px; }
  .page[index] .left .pagination .disable {
    color: #cbcbcb; }
.page[index] .right .wrap .side {
  margin-bottom: 20px;
  padding-bottom: 0; }
  .page[index] .right .wrap .side i {
    margin-right: 3px; }
  .page[index] .right .wrap .side .content-ul[cate] {
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; }
    .page[index] .right .wrap .side .content-ul[cate] li {
      font-size: 14px; }
      .page[index] .right .wrap .side .content-ul[cate] li a {
        display: block;
        width: 100%;
        padding: 2px 0;
        border-bottom: 1px solid #eee; }
        .page[index] .right .wrap .side .content-ul[cate] li a:hover {
          background-color: #dbdfee; }
          .page[index] .right .wrap .side .content-ul[cate] li a:hover .badge {
            background-color: #dbdfee;
            transform: scale(1.2) rotate(360deg); }
        .page[index] .right .wrap .side .content-ul[cate] li a .name {
          padding-left: 15px; }
        .page[index] .right .wrap .side .content-ul[cate] li a .badge {
          display: block;
          float: right;
          text-align: center;
          margin-right: 15px;
          margin-top: 3px;
          padding: 0 10px;
          font-size: 12px;
          color: #fff;
          background-color: #bbb;
          border-radius: 50%;
          transition: 0.5s ease-in-out; }
      .page[index] .right .wrap .side .content-ul[cate] li:last-of-type a {
        border: none; }
  .page[index] .right .wrap .side .content-ul[recent] {
    padding-bottom: 16px; }
    .page[index] .right .wrap .side .content-ul[recent] li {
      color: #aaa;
      font-size: 14px; }
  .page[index] .right .wrap .side .content-ul[ads] {
    padding-bottom: 0px; }
    .page[index] .right .wrap .side .content-ul[ads] li {
      color: #aaa;
      font-size: 14px; }
  .page[index] .right .wrap .side .content-ul[links] {
    padding-bottom: 16px; }
    .page[index] .right .wrap .side .content-ul[links] li {
      color: #aaa;
      font-size: 14px; }
  .page[index] .right .wrap .side .tags-cloud {
    font-weight: normal; }
    .page[index] .right .wrap .side .tags-cloud a {
      padding: 0 3px;
      border-radius: 5px; }
      .page[index] .right .wrap .side .tags-cloud a:hover {
        background-color: #f0e7ce; }
.page[index] .right .wrap .chitika-ads {
  margin-bottom: 20px;
  padding-bottom: 0px; }
  .page[index] .right .wrap .chitika-ads i {
    margin-right: 3px; }

@media screen and (max-width: 770px) {
  .page[index] .left > ul li h2 {
    font-size: 22px; }
  .page[index] .left > ul li .excerpt h2 {
    font-size: 20px; }
  .page[index] .left > ul li .excerpt h3 {
    font-size: 18px; }
  .page[index] .left > ul li .excerpt h4 {
    font-size: 16px; }
  .page[index] .left > ul li .excerpt li {
    margin: 0; } }
.page[demo] .left {
  width: 100%; }
  .page[demo] .left a {
    color: #4d6dad;
    transition: 0.5s ease; }
    .page[demo] .left a:hover {
      color: #223253;
      background-color: #f4efeb; }
  .page[demo] .left .grid {
    margin: 0 auto;
    /* clearfix */ }
    .page[demo] .left .grid:after {
      content: '';
      display: block;
      clear: both; }
    .page[demo] .left .grid .grid-item {
      width: 250px;
      background-color: #fff;
      margin-bottom: 20px;
      padding-bottom: 10px;
      float: left;
      transition: 0.5s ease;
      -webkit-transition: 0.5s ease;
      -moz-transition: 0.5s ease;
      -o-transition: 0.5s ease;
      -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); }
      .page[demo] .left .grid .grid-item:hover {
        -webkit-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
        -moz-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
        box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13); }
      .page[demo] .left .grid .grid-item .a-img {
        color: #fff; }
        .page[demo] .left .grid .grid-item .a-img:hover {
          color: #fff;
          background-color: #fff; }
      .page[demo] .left .grid .grid-item .demo-title {
        font-size: 18px;
        font-weight: bold;
        margin: 0 8px; }
      .page[demo] .left .grid .grid-item .demo-repostar {
        padding-left: 6px; }
      .page[demo] .left .grid .grid-item p {
        margin: 0;
        padding: 0 8px;
        font-size: 14px; }

.page[book] .left {
  width: 100%; }
  .page[book] .left a {
    color: #4d6dad;
    transition: 0.5s ease; }
    .page[book] .left a:hover {
      color: #223253;
      background-color: #f4efeb; }
  .page[book] .left .grid {
    margin: 0 auto;
    /* clearfix */ }
    .page[book] .left .grid:after {
      content: '';
      display: block;
      clear: both; }
    .page[book] .left .grid .grid-item {
      width: 160px;
      background-color: #fff;
      margin-bottom: 20px;
      padding-bottom: 10px;
      float: left;
      transition: 0.5s ease;
      -webkit-transition: 0.5s ease;
      -moz-transition: 0.5s ease;
      -o-transition: 0.5s ease;
      -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); }
      .page[book] .left .grid .grid-item:hover {
        -webkit-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
        -moz-box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13);
        box-shadow: 0 2px 30px -1px rgba(0, 0, 0, 0.6), inset 0 0 87px 0 rgba(184, 184, 184, 0.13); }
      .page[book] .left .grid .grid-item .a-img {
        color: #fff; }
        .page[book] .left .grid .grid-item .a-img:hover {
          color: #fff;
          background-color: #fff; }
      .page[book] .left .grid .grid-item .book-title {
        font-size: 14px;
        font-weight: bold;
        margin: 0 8px; }
      .page[book] .left .grid .grid-item p {
        margin: 0;
        padding: 0 8px;
        font-size: 10px; }

.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  background-color: #2b2b3c;
  box-shadow: 0 -2px 4px 1px rgba(0, 0, 0, 0.5);
  color: #bbb; }
  .site-footer .wrapper {
    width: 1140px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    font-size: 14px; }
    .site-footer .wrapper p {
      margin: 0;
      line-height: 1.6; }
    .site-footer .wrapper .contact {
      display: inline-block; }
      .site-footer .wrapper .contact a {
        color: #ccc;
        transition: 0.3s ease; }
        .site-footer .wrapper .contact a:hover {
          color: #fff; }
        .site-footer .wrapper .contact a i {
          margin: 0 5px;
          font-size: 20px; }
    .site-footer .wrapper .description {
      display: inline-block; }
    .site-footer .wrapper .power {
      font-size: 10px; }
      .site-footer .wrapper .power a {
        color: #8F90C5;
        transition: 0.3s ease; }
        .site-footer .wrapper .power a:hover {
          color: #fff; }

@media screen and (max-width: 1200px) and (min-width: 770px) {
  .site-footer .wrapper {
    width: 90%; } }
@media screen and (max-width: 770px) {
  .site-footer .wrapper {
    width: 90%; } }
.content-ul::-webkit-scrollbar {
  width: 7px;
  height: 6px; }
.content-ul::-webkit-scrollbar-button {
  width: 0;
  height: 0; }
.content-ul::-webkit-scrollbar-thumb {
  background: #D3D3D3;
  border: 0 none #ffffff;
  border-radius: 50px; }
.content-ul::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8; }
.content-ul::-webkit-scrollbar-thumb:active {
  background: #787878; }
.content-ul::-webkit-scrollbar-track {
  background: #F1F1F1;
  border-radius: 50px; }
.content-ul::-webkit-scrollbar-track:hover {
  background: #e2e2e2; }
.content-ul::-webkit-scrollbar-track:active {
  background: #cccccc; }
.content-ul::-webkit-scrollbar-corner {
  background: transparent; }

.back-to-top {
  position: fixed;
  left: 50%;
  margin-left: 580px;
  bottom: 37px;
  background-color: #f8f8fd;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s ease;
  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3), 0 0 30px rgba(10, 10, 0, 0.1) inset; }
  .back-to-top a {
    display: block;
    background-color: #eee;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-size: 20px;
    color: #b4b4b4; }

.back-to-top-show {
  visibility: visible;
  opacity: 0.7; }
  .back-to-top-show:hover {
    opacity: 1; }

@media screen and (max-width: 1200px) and (min-width: 770px) {
  .back-to-top {
    left: 50%;
    margin-left: 45.5%; } }
@media screen and (max-width: 770px) {
  .back-to-top {
    right: 2.5%;
    left: auto;
    margin-left: 0px; }
    .back-to-top a {
      width: 33px;
      height: 33px;
      line-height: 33px;
      text-align: center;
      font-size: 18px; } }