#header .header-nav {
  width: 100%;
  position: absolute;
  transition: transform .3s ease-in;
  .social {
    margin-top: 10px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    a {
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      zoom: 1;
      margin: 0 8px 15px 8px;
      transition: 0.3s;
      text-align: center;
      color: #fff;
      opacity: 0.7;
      width: 28px;
      height: 28px;
      line-height: 28px;
      &:hover {
        opacity: 1;
      }
    }
    a.weibo {
      background: #aaaaff;
      border: 1px solid #aaaaff;
      &:hover {
        border: 1px solid #aaaaff;
      }
    }
    a.segmentfault {
      background: #009a61;
      border: 1px solid #009a61;
      &:hover {
        border: 1px solid #009a61;
      }
    }
    a.rss {
      background: #ef7522;
      border: 1px solid #ef7522;
      &:hover {
        border: 1px solid #cf5d0f;
      }
    }
    a.github {
      background: #767c8d;
      border: 1px solid #767c8d;
      &:hover {
        border: 1px solid #666d80;
      }
    }
    a.facebook {
      background: #3b5998;
      border: 1px solid #3b5998;
      &:hover {
        border: 1px solid #2d4373;
      }
    }
    a.google {
      background: #c83d20;
      border: 1px solid #c83d20;
      &:hover {
        border: 1px solid #9c3019;
      }
    }
    a.twitter {
      background: #55cff8;
      border: 1px solid #55cff8;
      &:hover {
        border: 1px solid #24c1f6;
      }
    }
    a.linkedin {
      background: #005a87;
      border: 1px solid #005a87;
      &:hover {
        border: 1px solid #006b98;
      }
    }
    /*
    a.acfun {
      background: #fd4c5d;
      border:1px solid #fd4c5d;
      &:hover {
        border:1px solid #fd4c5d;
      }
    }
    a.bilibili {
      background: #e15280;
      border:1px solid #e15280;
      &:hover {
        border:1px solid #e15280;
      }
    }*/
    a.zhihu {
      background: #0078d8;
      border: 1px solid #0078d8;
      &:hover {
        border: 1px solid #0078d8;
      }
    }
    a.douban {
      background: #06c611;
      border: 1px solid #06c611;
      &:hover {
        border: 1px solid #06c611;
      }
    }
    a.mail {
      background: #005a87;
      border: 1px solid #005a87;
      &:hover {
        border: 1px solid #006b98;
      }
    }
    /*
    a.jianshu {
      background: #ff5722;
      border:1px solid #ff5722;
      &:hover {
        border:1px solid #ff5722;
      }
    }
    a.weixin {
      background: #4caf50;
      border:1px solid #4caf50;
      &:hover {
        border:1px solid #4caf50;
      }
    }
    a.qq {
      background: #34baad;
      border:1px solid #34baad;
      &:hover {
        border:1px solid #34baad;
      }
    }*/
  }
}