#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:-moz-inline-stack;
            display:inline-block;
            vertical-align:middle;
            *vertical-align:auto;
            zoom:1;
            *display:inline;
            margin:0 8px 15px 8px;
            transition:0.3s;
            text-align: center;
            color: #fff;
            opacity: 0.7;
            width: 28px;
            height: 28px;
            line-height: 26px;
            &: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: #afb6ca;
            border:1px solid #afb6ca;
            &:hover {
                border:1px solid #909ab6;
            }
        }
        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;
            }
        }
        a.psn {
            background: #086ef6;
            border:1px solid #086ef6;
            &:hover {
                border:1px solid #086ef6;
            }
        }
    }
}