/*图文推荐 栅格模式  开始*/
/*栅格下控制上下左右间距用下面方式*/
[class*="col-"]{
    /*margin这里左右必须0或者不写，上下可以调整*/
    /*上右下左*/
    margin: 0.8rem 0 0 0;
    /*padding有默认值,所以默认有左右宽度*/
    padding: 0 0.5rem 0 0.5rem;
}
/*卡片外部边框效果和阴影效果 为了实现图片不同屏幕的自适应*/
.card-article{
    cursor: pointer;
    border: 1px var(--drak) dashed;
    background-color: var(--bglight);
    border-radius: 5%;
    text-align: center;
    box-shadow: 5px 5px var(--bglight-two);
    /*下面这个为了放大*/
    overflow: hidden;
    /*图片上下之间的距离*/
    margin-bottom: 0.5rem;
}
.card-article:hover{ background-color:var(--bglight-two);box-shadow: 5px 5px var(--drak-light); }
.card-body{
    padding:0 5px 6px 8px;
    /*display: flex;*/
    /*justify-content: start;*/
    text-align: left;
    /*允许长单词换行到下一行*/
    word-wrap:break-word;
}

/*vip推荐用户 开始*/
.card-body-vip{
    padding:0 5px 6px 5px;
    display: flex;
    justify-content: center;
    /*允许长单词换行到下一行*/
    word-wrap:break-word;
}
.card-body-vip a{
    /*宽度限制*/
    width: 60%;
    /*字符太多，显示省略号*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.card-body-vip span{
  margin-left: 15px;
}
.find-text{color: var(--the-main);}
.card-body a:hover,.card-body-vip a:hover{
    color: var(--the-main);
text-decoration: none;
}

/*vip推荐用户 结束*/
/*卡片内部图片效果*/
.tt-img-responsive{
    /*响应式图片开始*/
    display:block;
    max-width:100%;
    height:auto;
    /*响应式图片结束*/
    /*不要用margin*/
    /*margin: 5px 5px 5px 2px;*/
    padding: 0.3rem 0.3rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.6s;
}
/*鼠标悬停的效果--实现图片拉近效果*/
.tt-img-responsive:hover{
    /*放大图片*/
    /*scale(1.05,1.05)宽，高缩放 scale(1.2) 高宽都缩放*/
    transform:scale(1.05,1.05);
    transition: transform .5s;
    opacity: 0.8;
}
/*图片拉近效果结束*/
.gray{color:var(--text-dark);font-size: 1rem;
    /*float: left;*/
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*(这里是行数 你可以控制你想在第几行末尾多余的显示省略号，之前的文本正常显示)*/
    -webkit-line-clamp:3;
}
.color-main{
    color:var(--the-main);
}
.city-text{color: var(--text-dark);font-size: 1rem;padding: 8px 0px;}
.city-text span{color: var(--dark-primary)}
.city-text .not{color: var(--the-main);margin-right: 10px;}
/*图文推荐 栅格模式 结束*/

/*纯文字  热点推荐 开始*/
.article-hot-comment{
   display: flex;
    flex-direction: column;
    margin: 0 1rem 0.5rem;
    /*border: 1px solid var(--the-main);*/
    /*padding: 1rem 0;*/
}
.article-detail-hot{
     display: flex;
     flex-direction: column;
     margin: -0.5rem 0.8rem 2rem;
     border: 1px solid var(--the-main);
     padding: 1rem 0;
 }
.article-hot-comment span ,.article-detail-hot span{
    display: flex;
    justify-content: space-between;
    margin: 5px;
    letter-spacing: 1px;
    /*字体变细*/
    /*font-weight: 300;*/
    /*height: 30px;*/
    /*line-height: 30px;*/
    /*margin-top: 10px;*/
    /*padding-left: 30px;*/
    /*width: 100%;*/
}
.article-hot-comment span a{
    /*那两个数字是图片左上角到div（以div为例）左上角的偏移量。
第一个数字正数向左，负数向右；第二数字正数向下，负数向上；
首先将背景图的左上角与div的左上角重合，0 0表示不动，8px 0：表示将背景图向左移动8像素，-8px 0：表示将背景图向右移动8像素，
0 8px：背景图向下移动8像素，0 -8px：背景图向上移动8像素；8px 8px：背景向左移动8像素再向下移动8像素；
超出div的部分会隐藏不会显示出来*/
    background: url(../ico/ico-tuijian.gif) no-repeat 5px 5px;
    padding-left: 30px;
    display: block;
    color: var(--text-dark);
    width: 390px;
    /*width: 100%;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.article-hot-comment span a:hover,.article-detail-hot span a:hover{
    color: var(--the-main);
    text-decoration: none;
    font-weight: 400;
}
/*经典模式下，纯文字省略号，宽度100%*/
.article-detail-hot span a{
    width: 100%;
    background: url(../ico/ico-tuijian.gif) no-repeat 5px 5px;
    padding-left: 30px;
    display: block;
    color: var(--text-dark);
    /*width: 390px;*/
    /*width: 100%;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
/*纯文字  热点推荐 结束*/