html {
  font-family: 'PingHei', 'PingFang SC', Helvetica Neue, 'Work Sans', 'Hiragino Sans GB',
    'Microsoft YaHei', SimSun, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background: #fff;
  color: #666;
  -webkit-font-smoothing: antialiased; }

  * {
    outline: none; }

    body {
      padding: 0;
      margin: 0 auto; }

      img {
        max-width: 100%; }

        .body_for_item_list {
          background-color: #f7f7f7; }

          .item_list {
            max-width: 900px;
            margin: 0 auto;
            padding-top: 120px; }

            .nav_container {
              line-height: 78px;
              min-height: 80px;
              background: #fff;
              z-index: 10;
              display: block;
              width: 100%;
              padding: 0;
              text-align: right;
              -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
              -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
              box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); }
              .nav_container .nav_body {
                padding: 0 45px; }
                .nav_container .site_avatar {
                  float: left;
                  height: 80px;
                  position: relative;
                  z-index: 99; }
                  .nav_container .site_avatar a {
                    display: block; }
                    .nav_container .site_avatar img {
                      margin-top: 8px;
                      max-height: 60px; }

.item_list .item {
  padding: 15px;
  position: relative;
  margin-bottom: 10px;
  overflow: hidden; }
  .item_list .item a {
    text-decoration: none; }
    .item_list .item .item_body {
      width: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 3px;
      background-color: #fff;
      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); }
      .item_list .item .item_body:hover {
        -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); }
        .item_list .item .item_body img {
          max-width: 100%; }
          .item_list .item .item_body a.thumb {
            text-decoration: none;
            color: #555;
            text-align: center;
            display: block;
            position: relative;
            min-height: 250px;
            background-position: 50% 50%;
            background-size: cover; }
            .item_list .item .item_body a.thumb .desc {
              font-size: 14px;
              position: absolute;
              top: 10%;
              overflow: hidden;
              height: 145px;
              padding: 0 30px;
              word-break: break-all;
              opacity: 0;
              color: #fff;
              text-align: left;
              line-height: 1.8; }
      .item_list .item .item_body .slant {
        position: absolute;
        z-index: 0;
        right: 0;
        bottom: 50px;
        left: 0;
        width: 110%;
        min-height: 100px;
        -webkit-transform: rotate(7deg) translate(-10px, 0);
        -ms-transform: rotate(7deg) translate(-10px, 0);
        transform: rotate(7deg) translate(-10px, 0);
        background-color: #fff; }
        .item_list .item .item_body .label {
          padding: 10px 20px 40px;
          box-sizing: border-box;
          position: relative;
          height: 130px;
          background-color: #fff; }
          .item_list .item .item_body .label .title a {
            font-size: 17px;
            line-height: 17px;
            word-break: break-all;
            color: #313131; }
            .item_list .item .item_body .label .meta {
              position: absolute;
              bottom: 20px;
              left: 0;
              width: 100%; }
              .item_list .item .item_body .label .meta .meta_body {
                padding: 10px 20px;
                position: relative; }
                .item_list .item .item_body .label .meta .date {
                  font-size: 80%;
                  color: #999; }
                  .item_list .item .item_body .label .meta .view_type {
                    position: absolute;
                    right: 20px;
                    bottom: 0;
                    text-align: center;
                    width: 30px;
                    height: 30px;
                    display: block;
                    line-height: 30px;
                    border-radius: 15px;
                    border: 1px solid #eee; }
                    .item_list .item .item_body .label .meta .view_type i {
                      color: #999; }
                      .item_list .item .item_body .label .meta .view_type:hover {
                        border: 1px solid #999; }
                        .item_list .item .item_body .label .meta .view_type:hover i {
                          color: #555; }

.post_album {
  margin-bottom: 100px;
  text-align: center;
  padding-top: 80px; }
  .post_album .item_in_2, .post_album .item_in_3 {
    padding: 8px; }
    .post_album .humech_post_info {
      padding-bottom: 20px;
      border-bottom: 1px solid #eee; }
      .post_album .date {
        padding-top: 40px;
        margin: 0 0 15px 0;
        font-weight: normal;
        color: #6d6e6f;
        text-transform: none; }
        .post_album .title {
          font-weight: normal;
          color: #1e1e1e; }
          .post_album .description {
            color: #a0a0a0;
            font-size: 14px;
            letter-spacing: 0.2; }
            .post_album .sub h4.title {
              margin: 1em auto 0.5em auto; }
              .post_album .sub .sub_description {
                font-size: 14px; }
                .post_album .sub .sub_description p {
                  margin: 0.5em auto; }
            .post_album .sub .img_wrap {
              padding: 8px; }
  .post_album .text {
    padding: 0 20px;
    margin-bottom: 35px; }
    .post_album .text h4.title {
      font-size: 18px;
      color: #000;
      text-align: center;
      margin: 3.5em 0 0.8em 0; }
      .post_album .text .text_content {
        text-align: center;
        font-size: 14px;
        line-height: 1.58;
        margin: 0 auto;
        max-width: 980px; }
        .post_album .text .text_content .p_part p {
          margin: 0.5em 0; }

.footer {
  margin-top: 30px;
  border-top: 1px solid #eee;
  background: #fafafa;
  padding: 20px 0 18px 0;
  text-align: center;
  font-size: 12px;
  color: #999; }
  .footer a {
    text-decoration: none;
    color: #666; }
    .footer a.theme_info {
      border: 1px solid #ddd;
      border-radius: 6px;
      width: 12px;
      margin-left: 6px;
      height: 12px;
      display: inline-block;
      font-size: 10px;
      line-height: 12px;
      text-align: center; }
      .footer a.theme_info:hover {
        border-color: indianred;
        color: indianred; }

@media screen and (max-width: 768px) {
  .nav_container {
    min-height: 50px;
    line-height: 48px;   }
    .nav_container .nav_body {
      padding: 0 25px;   }
      .nav_container .site_avatar {
        display: none;   }
  .item_list {
    padding-top: 75px;   }
    .post_album .item_in_2, .post_album .item_in_3 {
      padding: 8px 0;   }
      .post_album .sub .img_wrap {
        padding: 0;   }
}

@media screen and (min-width: 768px) {
  .site_nav a {
    padding-top: 30px !important;   }
    .item_list .item .item_body a.thumb:hover {
      background-image: none !important;
      background-color: #8997aa !important;   }
}