*{
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,
    "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;

}
body {
    /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
    margin: 0;
    text-decoration: none;
    padding: 0;
    color: #333;
    background: #fff;

}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 60%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right input{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAABGdBTUEAALGPC/xhBQAAAhlJREFUSA3tVsFKQkEU9an5A0oKtewTjBYVIcgTdBVtC4q2QdsWLgSDqGU/UFCroKUiD0UiWoQu2lbbIBX9AE20cx4OvGRm3ntRrhwYZrx3zj13zszcZyAwb3MF/kkBw0/carUaH41G5ng8jhNnGEY7GAxa6XS67SeOjfUCsCxrHYQFEK1ifQnELRtsGAmMOfxuIIGCaZpPXuLZWLeFIN0H6RVID6PR6E0ymfxyYprN5kKv19uDrYh+nslkLp1+1VwrNUiPsZvTUCi04iZnrVZbGg6Hr0jwCDu/VhEKu5KY8oL0LhKJrKVSqQ8B0I28AyBvQfYNN9mDqkA8UxDnvZIyDlXhkRCriivsUmJmzosUi8VuxUKvI+8BsYyhw0iJkTGfTHn6IukCCd8EU2IMYZONYZkRoEVkbT8Zmd/NhqSJ9b9jt8B/4ZdKjVvZQdYsDr9qUCuBrq1mKmILwCyLg1/mCSbHUqrDSon5LLDjRrfb3dWBZT5WMWLdCo6UmAFZe7Hrs3q97llyVi9Ai8Qyhq4piVl5QHwyGAzeQb6sC0IfE0TVegPmwq1qcb2SmE7WXATKg/y5UqkcyM6cNvr6/f4nIEP0F2LdmrJWO4HOzyLOr4xk7DfOm495lmc6kTeM+T1sO0j6wRljeu6JWIDEHwEWGNpA1kH/8UcASW6RHF+0bVywR4GdyUhyyE/pZ9+gzubsWeeMcwWgwDcwY/ak9MElrAAAAABJRU5ErkJggg==) no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}


/*肚子*/
article{width: 80%;margin: 0 auto;}
.article-1{width: 100%;height: 100px;display: none;line-height: 100px;}
.article-1 .article-1-box{width: 100%;height: 50%;}
.article-1 .article-1-box img{height: 50px;width: 50px; border-radius: 50%;float:left;display: none;}
.article-1 .article-1-box .user-name{font-size: 1em;color: #999999;margin-left: 20px;height: 50px;line-height: 50px;float:left;display: none;}

.div-box{width: 100%;}
.div-box .div-box-navigation{width: 100%;clear: both;}
.div-box .div-box-navigation a{width: 20%;height: 40px;line-height: 40px;color: #999999;cursor: pointer;border-radius: 5px;display: block;float: left;margin-left: 2%;}

.div-box .div-box-data{width: 100%;clear: both;}


/*提示*/
.div-usernull{width: 20%;height: 20%;margin: 0 auto; text-align: center;}
.div-usernull img{width: 100%;height: 100%;}
.div-usernull span{font-size: 1em;color: #999999;}


/*收藏*/

.div-box-data .articl-1-2{width: 100%;padding: 0; margin-top: 30px;display: flex;justify-content: space-between;flex-wrap:wrap;}
.articl-1-2 .articl-1-2-box{ margin-top: 30px;height: 289px;width: 15%;}
.articl-1-2 .articl-1-2-box a img{height: 270px;width: 100%;border-radius: 5px; transition: all 1s; }
.articl-1-2 .articl-1-2-box a img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
.articl-1-2 .articl-1-2-box a div{height: 20px;width: 100%; position:relative;top: 0px;color: white;margin: 0;}
.articl-1-2 .articl-1-2-box a div span{font-size: 0.5em;}
.articl-1-2 .articl-1-2-box a div span:hover{color:#3498db;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-left{float: left;margin-left: 3px;}
.articl-1-2 .articl-1-2-box a div .articl-1-2-box-right{float: right; margin-right: 3px;}
.articl-1-2 .articl-1-2-box a span{position:relative;top: -20px;}
.articl-1-2 .articl-1-2-box a span:hover{color:#3498db;}