.mouseMoveIn{
    cursor: pointer;
}
    .font10{
        font-size: 10px;
    }
    .fontColor666{
    color: #666;
}
    .fontColor999{
        color: #999999;
    }
    .fontColor000{
        color: #000000;
    }
    body{
        background-image: linear-gradient(#5282FE,white 120px);
		background-repeat: no-repeat;
		height: 100vh;
    }
    .topBar{
        position: sticky;
        width: 100%;
        top: 0px;
        /* background-color: #ffffff; */
        height: 44px;
        z-index: 20;
    }
    .center{
        position: relative;
        top: 0px;
    }
    .nav{
        /* margin-left: 45%; */
        display: flex; /*设置为flex布局*/
        justify-content: center; /*水平居中*/
        align-items: center; /*垂直居中*/
    }
    .nav ul{
        list-style: none;
        margin: 0;
    }
    .nav ul li{
        display: inline-block;
        margin-right: 100px;
        position: relative;
    }
    .nav .selected>a::before{
        content: "";
        width: 30px;
        height: 5px;
        background-color: #000000;
        position: absolute;
        top: 39px;
        left: 4px;
    }
   
    .userLogin{
        display: inline-block;
        /* text-align: center; */
        text-decoration: none;
        color:rgb(194, 190, 190);
        font-size: 20px;
    }
    .active{
        color: black !important;
        font-weight: 600;
        /* border-bottom: 3px solid #156FFC; */
        padding-bottom: 3px;
    }

    /* 列表区 */
    .container{
        /* width: 1320px; */
        /* height: 969px; */
        display: flex;
        justify-content: center;
    }
    .card{
        width: 68%;
        height: inherit;
        display: flex;
        justify-content: space-between;
        margin-top: 30px;
    }
    .card .recommend {
        width: 17rem;
        height: 563px;
        position: sticky;
        top: 65px;
    
    }
    .recommend img{
        width: 100%;
        border-radius: 5px;
        /* margin-bottom: 30px; */
    }

    .articlePublish{
       
        width: 17rem;
        height: 17rem;
        background-image: url(../../public/images/article.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .recommend .articlePublish img{
        margin-left: 20px;
        margin-top: 20px;
        width: 80%;
    }
    .articlePublish .goBtn{
        width: 130px;
        height: 38px;
        font-size: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        padding: 8px 25px;
        background-color: #191919;
        border: none;
        border-radius: 36px;
        -webkit-border-radius: 36px;
        -moz-border-radius: 36px;
        -ms-border-radius: 36px;
        -o-border-radius: 36px;
}
    .hotArticle{
      
    }
    .user .font16{
        font-size: 18px;
    }
     .font10{
        font-size: 16px;
    }
    .card .newsbox .col{
        display: flex;
        justify-content: space-between;
        /* margin-top: 30px; */
        margin-bottom: 30px;
    }
    .img1{
        border-radius: 5px;
        width: 17rem;
        height: 10rem;
    }
    .content{ 
        width: 706px;
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .content .title1{
        color: black;
        font-size: 20px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
    }
    .content .title2{
		-webkit-line-clamp: 2!important;
		margin-bottom: 20px;
        font-size: 16px;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
    }
    .content .message{
        display: flex;
        justify-content: space-between;
        align-items:baseline
    }
    .content .message img{
        border-radius: 100%;
        width: 50px;
        height: 50px;
    }
    .content .message .personMsg{
        /* margin-top: 40px; */
        width: 100%;
        display: flex;
    }
    .personMsg .user{
        width: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 15px;
    }
   
    .reaction{   
        display: flex;
    }
    .reaction span .icon{
       height: 20px;
       width: auto;
    }
    .reaction span{
        margin-left: 3px;
        margin-right: 15px;
    }
    .thumbs-up,.comment,.collection{
        display: flex;
    }
    
    #nodata{
        display: flex;
        justify-content: center;
    }
    .addBg{
        background-color: white;
    }
    @media screen and (max-width:1780px){
        .card{width: 65%;}
        .topBox{height: 90px !important;}  
        .content{ width: 500px;}
        .img1{width: 14rem;height: 9rem;}
        .card .recommend{width: 14rem;}
        .articlePublish{width: 14rem;height: 14rem;}
        .articlePublish .goBtn {width: 116px;height: 35px;font-size: 13px;}
        .content .title1{font-size: 18px;}
        .content .message img{height: 40px;width: 40px;}
        .font16{font-size: 16px;}
        .user .font16{font-size: 16px;}
        .reaction span .icon{height: 15px;width: 15px;}
        .font10{font-size: 10px;}
    }
    
    @media (max-width: 1480px) {
    .topBox{height: 90px !important;}  
    .card{width: 68%;}
    .content{ width: 480px;}
    .img1{width: 14rem;height: 9rem;}
    .card .recommend{width: 14rem;}
    .articlePublish{width: 14rem;height: 14rem;}
    .articlePublish .goBtn {width: 116px;height: 35px;font-size: 13px;}
    .content .title1{font-size: 18px;}
    .content .message img{height: 40px;width: 40px;}
    .font16{font-size: 16px;}
    .user .font16{font-size: 16px;}
    .reaction span .icon{height: 15px;width: 15px;}
    .font10{font-size: 10px;}
    }
    @media (max-width: 1070px) {
        .card{
            width: 816px;
        }
        .card .newsbox .col{
            display: flex;
            flex-direction: column;
            width: 240px;
            height: 347px;
            border-radius: 5px;
            padding: 10px 10px 10px 10px;
            border: 0.5px solid #e6e6e6;
            float: left;
            margin-left: 30px;
            margin-bottom: 20px;
        }        
        /* .card .newsbox .item {
            display: block;
        } */
         .content{
            width: 240px;
            margin-left: 0;
         }
          .img1{
            width: 240px;
            height: 140px;
         }
         .content .title1{
            margin-top: 5px;
            font-size: 14px;
         }
         .content .title2{
            font-size: 12px;
         }
         .content .message{
            display: block;
            float: left;
         }
         .content .message img{            
            width: 30px;
            height: 30px;
         }
         .content .message .personMsg{
            margin-top: 15px;
         }
         .reaction{
            margin-left: 0px;
            margin-top: 25px;
         }
         .reaction span{
          font-size: 12px;
         }
         .content .title2{
            margin-top: 5px;
         }
         .username{
            font-size: 12px;
         }
         .cooperation{
            font-size: 10px;
         }
         
    }
    @media (max-width: 780px){         
        .card .recommend{
           display: none;
        }
    }
    @media (max-width: 600px){         
        .card{
            display: block;
        }
        .card .newsbox{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }