.header{margin:0 auto;width:100%;height:100%;background-color:#000;position:fixed!important;background-image:url('/static/images/my_images/blog_bg.jpg');background-size:100% 100%}
*{margin:0;padding:0}
a,img{text-decoration:none;border:none}
button,input,textarea{outline:0;border:none;font:14px/1.5 "Microsoft YaHei","微软雅黑","Helvetica Neue","Hiragino Sans GB",Helvetica,Tahoma,sans-serif;color:#515250}
h4{font-size:20px}
li{list-style:none}
body,html{background-color:rgba(210, 210, 210, 0.1);font:14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;color:#515250;-webkit-font-smoothing:antialiased;-webkit-backface-visibility:hidden;overflow-x:hidden}
.gird-header{width:100%;min-height:60px;opacity: 0.9;position:fixed;background-color:#1e9fff;z-index:11002;top:0;left:0;font-size:14px}
.container-fixed,.footer-fixed,.header-fixed{width:1280px;margin-left:auto;margin-right:auto;position:relative}
.header-inner{margin-left:10px;margin-right:10px;position:relative}
.header-logo{font-family:BarbaraHand;font-size:40px;color:#444647;text-align:center;position:absolute;left:0}
.nav{display:block;position:absolute;right:15%}
.nav li{display:block;float:left;margin:10px 5px;position:relative}
.nav li:before{width:0;height:5px;position:absolute;bottom:-10px;left:50%;background-color:#fff;content:"";transition:all .6s;z-index:-1}
.nav li a{display:block;line-height:32px;padding:4px 28px;color:rgba(255,255,255,.6);font-weight:600;font-size:16px;text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-transition:all .2s;transition:all .2s;text-decoration: none;}
.nav .current:before{width:100%;left:0}
.nav .current a{color:rgba(255,255,255,1)}
.blog-user{position:absolute;line-height:60px;font-size:24px}
.blog-user>img{border-radius:50%;width:40px;height:40px}
.phone-menu{width:50px;height:50px;display:inline-block;position:absolute;cursor:pointer;right:0;top:5px}
.phone-menu i{background:#fff;display:inline-block;width:22px;height:2px;position:absolute;left:14px}
.phone-menu i:nth-of-type(1){top:18px}
.phone-menu i:nth-of-type(2){top:25px}
.phone-menu i:nth-of-type(3){top:32px}
.content-container{margin-top: 60px;min-height: 490px;}
.grid-footer{background-color:#1e9fff;color:#fff;font-size:14px;padding:10px 0 0 0;position:relative;zoom:1;clear:both;line-height:20px;margin-top:40px;overflow:hidden}
.copyright{padding:10px 0 10px 0}
.copyright .info{position:relative;text-align:center}
.copyright p{color:#fff;font-size:13px}
.copyright a{color:#fff;font-size:13px}
.copyright .contact{margin-bottom: 10px;}
.copyright .contact a{display:inline-block;width:30px;height:30px;background-color:rgba(255,255,255,.3);text-align:center;line-height:30px;text-shadow:1px 1px 1px rgba(0,0,0,.5);font-size:14px;margin-left:15px;margin-right:0;border-radius:100%;text-decoration:none;color:#fff;-webkit-transition:all .3s;transition:all .3s}
.copyright .contact a:hover{color:#fff}
.copyright .contact .github:hover{background-color:#b952c5}
.copyright .contact .qq:hover{background-color:#d25744}
.copyright .contact .email:hover{background-color:#668f20}
.copyright .contact .weixin:hover{background-color:#06a2c9}
.copyright .contact .admin:hover{background-color:#06a212}
.doc-container{position:relative;padding-top:60px;-webkit-transition:all .2s;transition:all .2s;min-height:100vh}
.lo{width:250px;height:60px;padding:10px 15px;clear:both;border-radius:4px}
.lo input{margin-left:15px;border:1px solid #e8e9e7}
.lo button{margin-top:10px;padding:5px 15px;cursor:pointer}
.lo .waiting{padding:5px 15px;font-family:FontAwesome;font-style:normal;text-rendering:auto;font-size:20px;display:none}
.lo .waiting:before{content:"\f110";-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}
.artcle{transition:animation .3s linear}
.zoomIn{animation:zoomIn 1s both}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0)}
    100%{-webkit-transform:rotate(359deg)}
}
@keyframes spin{0%{transform:rotate(0)}
    100%{transform:rotate(359deg)}
}
@media screen and (min-width:1025px){.blog-user{right:0}
    .phone-menu{display:none}
    .nav{display:block!important}
}
@media screen and (max-width:1366px){.container-fixed,.footer-fixed,.header-fixed{width:90%}
    .phone-menu{display:none}
    .nav{display:block}
}
@media screen and (max-width:1024px){.header-logo{left:25%;width:50%}
    .nav{position:fixed;top:80px;left:0;right:0}
    .container-fixed,.footer-fixed,.header-fixed{width:90%}
    .phone-menu{display:block}
    .nav{display:none;width:100%;background:#1e9fff}
    .nav li:before{bottom:0;z-index:10;height: 3px;}
    .nav li{float:none;border-bottom:1px solid #e8e9e7}
    .nav li:last-child{border:0}
}
@font-face{font-family:BarbaraHand;src:url(../font/barbarahand-webfont.eot);src:url(../font/barbarahand-webfont.eot?#iefix) format('embedded-opentype'),url(../font/barbarahand-webfont.woff2) format('woff2'),url(../font/barbarahand-webfont.woff) format('woff'),url(../font/barbarahand-webfont.ttf) format('truetype'),url(../font/barbarahand-webfont.svg#BarbaraHand) format('svg');font-weight:400;font-style:normal}


.f-oh{
    overflow: hidden;
    zoom: 1;
    clear: both;
}
.f-oh a{
    margin-right: 30px;
    color: #565755;
}
.f-oh a:hover{
    text-decoration:underline;
    color:#6bc30d;
}
.fs-12{
    font-size:12px;
}
.fs-14{
    font-size:14px;
}
.fs-16,h6{
    font-size:16px;
}
.fs-18{
    font-size:18px;
}
.fs-24{
    font-size:24px;
}
.fs-32{
    font-size:32px;
}
.f-fr{
    float:right;
}
.fc-blue{
    color: #2ea7e0;
}
.fc-black{
    color:#383937
}
.fc-grey{
    color:#787977;
}
.fc-red{
    color:#ff4351;
}
.f-fwb{
    font-weight:bold;
}
.f-fwn{
    font-weight:normal;
}
.f-fl{
    float:left;
}
.f-vam{
    vertical-align:middle;
}
/*.f-ff-icon{
    font-family:"FontAwesome";
    font-style:normal;
    text-rendering:auto;
}*/
.f-fr{
    float:right;
}
.mt05{
    margin-top:5px;
}
.mt10{
    margin-top:10px;
}
.mt20{
    margin-top:20px;
}
.ml05{
    margin-left:5px;
}
.ml10{
    margin-left:10px;
}
.ml20{
    margin-left:20px;
}
.mr05{
    margin-right:5px;
}
.f-noneselect{
    -webkit-user-select: none;
    user-select: none;
}
.fc-link{
    color: #3e8bc7 !important;
}

.f-cb,.f-cb:after{
    display: block;
    content: " ";
    height: 0;
    visibility: hidden;
    clear: both;
}
.img-light{
    position:relative;
}
.img-light:after {
    content: "";
    height: 100%;
    width: 100px;
    -webkit-transform: skewX(-25deg) translateZ(0);
    transform: skewX(-25deg) translateZ(0);
    background-image: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3) 50%,hsla(0,0%,100%,0));
    position: absolute;
    left: -160%;
    top: 0;
    z-index: 2;
}
.img-light:hover:after {
    transition: left 1s ease-in-out;
    left: 160%;
}
.grid-page{
    font-size:0;
}
.grid-page a[href]:hover,.grid-page a.p-current{
    color: #fff;
    background-color: #787977;
    text-decoration: none;
}
.grid-page a{
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    background-color: #fff;
    margin: 0 3px;
    transition: all .3s ease-out;
    cursor: default;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    color: #787977;
}
.grid-page a.p-current{
    background-color: #6bc30d;
    border-radius: 3px;
}
.grid-page a[href]{
    cursor:pointer;
}
.grid-page a.more{
    background-color: transparent;
    color: #787977;
    cursor: default;
    text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

.checkbox-check {}
.checkbox-label{
    display: inline-block;
    width: 46px;
    height: 26px;
    background-color: #f1f2f0;
    border-radius: 26px;
    vertical-align: middle;
    border: 1px solid #e8e9e7;
    position: relative;
    font-size: 0;
    cursor: pointer;
    transition: all .3s ease;
}
.checkbox-label:after{
    content: '';
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 1px solid #e8e9e7;
    background-color: #fff;
    border-radius: 100%;
    position: absolute;
    top: -1px;
    left: 0;
    transition: all .3s ease;
}
.checkbox-check:checked~.checkbox-label{
    background-color: #6bc30d;
    border-color: #6bc30d;
}
.checkbox-check:checked~.checkbox-label:after{
    transform: translate3d(20px,0,0);
    border-color: #6bc30d;
}

.u-label {
    display: inline-block;
    border: 1px solid #e8e9e7;
    padding: 5px;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    transition: background-color .3s;
}
.u-label.input{
    padding: 0 5px 0 30px;
    min-width: 140px;
    background-color: #fff;
}
.u-label.button{
    border: none;
    padding: 0;
}
.u-btn-sub{
    border: none;
    display: inline-block;
    height: 24px;
    line-height: 24px;
    padding: 6px 0;
    text-align: center;
    width: 90px;
    background-color: #70ca10;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
    box-sizing: content-box;
    text-decoration: none!important;
}

