/*tab 图文列表 开始*/
.index-img-second{
    /*一行显示2个图文列表+用户帮助*/
    display: flex;
    /*顶部一行基线对齐*/
    /*align-items: baseline;*/
    flex-wrap: wrap;
    /*justify-content: space-between;*/
    margin: 1rem;


}
.index-img-second ul{
    margin-bottom: 10px;
}
/*边框*/
.article-aside-left,.article-aside-left-75{
    /*align-items: center;*/
    /*边框颜色*/
    border: 0.05rem solid var(--main-two);
    /*边框阴影*/
    box-shadow:  0 0 1px var(--the-main);
    border-radius: 5px;
    /*距离底部空间*/
   margin: 0 0.5rem 1rem;
    /*margin-top: -60px;*/
}
.article-aside-left-75{
    width: 75%;
}
.article-aside-right{
    width: 25%;
    /*align-items: center;*/
    /*边框颜色*/
    border: 0.05rem solid var(--main-two);
    /*边框阴影*/
    box-shadow:  0 0 1px var(--the-main);
    border-radius: 5px;
    /*距离底部空间*/
    margin: 0 0.5rem 1rem 0;
    /*margin-top: -60px;*/
}
.tab-img-text{
    /*display: flex;*/
    margin: 10px 8px;
    position: relative;
    /*外围容器给固定宽度,不指定高度或高度auto(此时需要设置overflow:hidden) 否则图片超出范围*/
    overflow: hidden;
    /*底部边框颜色*/
    /*padding-bottom: 15px;*/
    /*border-bottom: 0.05rem dashed var(--the-main);*/
}
.index-title,.index-title a{
    /*图文列表标题*/
    color: var(--the-main);
    /*省略号*/
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*一行显示*/
    -webkit-line-clamp:1;
}

/*纯文字右侧列表，用户名，时间 开始*/
.tab-img-text-i{
    /*display: flex;*/
    margin: 13px 15px 0 15px;
    position: relative;
    /*外围容器给固定宽度,不指定高度或高度auto(此时需要设置overflow:hidden) 否则图片超出范围*/
    overflow: hidden;
    /*底部边框颜色*/
    padding-bottom: 8px;
    border-bottom: 0.05rem dashed var(--drak);
}
/*最后一条底线不显示*/
/*.tab-img-text-i:last-child{*/
    /*border-bottom: 0 dashed var(--drak);*/
/*}*/
.tab-img-text-i .tab-user-message{
    display: flex;
    justify-content: space-between;

}
.tab-img-text-i .tab-user-message em
{
    font-style: normal;
    color: var(--the-main);
    /*为了鼠标悬停的时候出现下划线，不晃动*/
    border-bottom: 1px solid transparent;
}
.tab-img-text-i .tab-user-message em:hover{
    cursor: pointer;
    border-bottom: 1px solid var(--the-main);
}
.tab-img-text-i .tab-user-message i{
    font-style: normal;
    color: var(--text-dark9);
}

/*纯文字右侧列表，用户名，时间 结束*/
.aside-tab-img img{
    /*固定图片宽度*/
    width: 130px;
    height: 170px;
    /*圆角边*/
    border-radius: 10px;
    /*居左显示*/
    float: left;
    position: relative;
    /*右边距离*/
    margin-right: 8px;
    /*渐变时间，起到缓冲效果*/
    transition: 1s;
}
.aside-tab-img img:hover{
    cursor: pointer;
    /*图片Y轴翻转 360度*/
    transform: rotateY(180deg);
    /*渐变时间，起到缓冲效果*/
    transition: 1s;
}
.aside-tab-text{
    font-size: 1.0rem;
    /*2个字之间的距离*/
    letter-spacing: 2px;
    /*上下字之间的距离*/
    line-height: 1.4;
    color: var(--text-dark3);
}
.aside-tab-text:hover{
    cursor: pointer;
    color: var(--dark-primary);
    /*渐变效果*/
    /*transition: 0.5s;*/
}
/*限制文本总共显示几行，*/
.ell-content{
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    /*(这里是行数 你可以控制你想在第几行末尾多余的显示省略号，之前的文本正常显示)*/
    -webkit-line-clamp:5;
    /*width: 200em;*/
}

/*发表时间*/
.tab-img-text li time{
    font-style: normal;
    color: var(--text-dark9);
    /*居右显示*/
    float: right;
    margin-right: 5px;
}
.tab-img-text li i,.tab-img-text li a{
    font-style: normal;
    color: var(--the-main);
    /*为了鼠标悬停的时候出现下划线，不晃动*/
    border-bottom: 1px solid transparent;
    /*margin-right: 8px;*/
    text-decoration: none;
}
.tab-img-text li i:hover,.tab-img-text li a:hover{
    cursor: pointer;
    border-bottom: 1px solid var(--the-main);
}
.tab-title{
    /*padding-bottom: 1px;*/
    /*border-bottom: 1px solid transparent;*/
    font-size: 1.1rem;
    /*渐变效果*/
    transition: 0.1s;
    /*溢出显示省略号*/
    display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
    /*限制宽度，否则容易撑破行*/
    width:95%;
}
.tab-title:hover{
    cursor: pointer;
    color: var(--the-main);
    /*border-bottom: 1px solid var(--the-main);*/
    padding-left: 1px;
    /*渐变效果*/
    transition: 0.1s;
}
/*tab 图文列表 结束*/

/*媒体查询 开始*/
/*0-480手机*/
/*手机 隐藏右侧用户列表信息 */
@media only screen and (max-width:480px) {
    .index-img-second{
        flex-wrap: wrap;
    }
    .article-aside-left-75{
        /*左侧列表隐藏*/
        display: none;
    }
    .article-aside-right{
        width: 100%;
        margin: 0.5rem;
    }
    .tab-title,.tab-title:hover{
        width: 100%;
        /*渐变效果*/
        transition: 0s;
    }
    .tab-img-text-i:last-child{
        border-bottom: 0;
    }
}
/*480-960平板，手机横屏*/
/*手机平板 隐藏右侧用户列表信息 */
@media only screen and (min-width: 480px) and (max-width: 960px) {
    .index-img-second{
        flex-wrap: wrap;
    }
    .article-aside-left-75{
        /*左侧列表隐藏*/
        display: none;
    }
    .article-aside-right{
        width: 100%;
        margin: 0.5rem;
    }
    .tab-title,.tab-title:hover{
        width: 100%;
        /*渐变效果*/
        transition: 0s;
    }
    .tab-img-text-i:last-child{
        border-bottom: 0;
    }
}
/*960PC屏幕*/
@media only screen and (min-width:960px) {

}
/*媒体查询 结束*/