/*推荐用户 竖线  开始*/
.user-line{
    /*推荐用户左边的竖线*/
    display: flex;
    margin-left: 1rem;
    justify-content: start;
    /*垂直居中*/
    align-items: center;
    /*距离底部各省市距离*/
    margin-bottom: 0.6rem;
    margin-top: 1rem;
    /*字体大小*/
    font-size: 1.5rem;
    color: var(--the-main);
}
.user-line i{
    /*左侧竖线*/
    height: 25px;
    width: 5px;
    background: var(--the-main);
    /*居右距离*/
    margin-right: 0.5rem;
    /*竖线往下移动点*/
   margin-top: 1px;
}
/*推荐用户 竖线  结束*/
/*tab动画效果 开始*/
.tab-container-aside {
    /*width: 200px;*/
    /*tab 标签居中对齐*/
    display: flex;
    justify-content: start;
    /*子项目居中*/
    align-items: center;
    margin: 5px 0 0;

    /*底边 颜色*/
    /*border-bottom:0.05rem solid var(--main-two);*/
    /*边框阴影效果*/
    /*box-shadow: 0 0  1px  var(--the-main);*/
    /*移动自动换行*/
    /*flex-wrap: wrap;*/
    /*距离左边的距离*/
    /*margin-left: 1.5rem;*/
    /*margin-top: 0.5rem;*/
    /*列的方式显示*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*-ms-flex-direction:column;*/

    /*padding-bottom: 0.5rem;*/

    /*border-top:0.05rem solid var(--main-two) ;*/
    /*内阴影效果*/
    /*box-shadow:inset 0px 0px 5px 1px var(--the-main);*/
}
.tab-container-aside .tab {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.tab-container-aside .tab .tab-item {
    /*width: 50%;*/
    font-size: 1.2rem;
    /*每个tab之间的距离*/
    margin:5px 15px;
    /*tab字体距离左边的距离*/
    padding-left: 2px;
    float: left;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    /*justify-content: space-around;*/
    height: 40px;
    line-height: 40px;
    /*默认tab字体的颜色*/
    color: var(--text-dark);
}
/*鼠标经过的时候，字体变颜色*/
/*.tab-container .tab .tab-item:hover,.curent-tab{*/
/*color: var(--main-drak);*/
/*font-weight: 600;*/
/*}*/
.tab-container-aside .tab .tab-item-line {
    width: 100%;
    /*tab下划线的高度*/
    height: 4px;
}

@keyframes tab-line-active-animation {
    0%   {width: 0;}
    10%  {width: 10%;}
    25%  {width: 25%;}
    35%  {width: 35%;}
    45%  {width: 50%;}
    60%  {width: 50%;}
    75%  {width: 115%;}
    85%  {width: 108%;}
    100% {width: 100%;}
}
/*鼠标经过是通过js事件有的效果*/
.tab-container-aside .tab .tab-line-active {
    animation: tab-line-active-animation .2s;
    /*tab滑动切换的时候背景线变颜色*/
    background: var(--the-main);

}
/*通过js事件 鼠标悬停 字体变色*/
.tab-container-aside .tab .tab-item-title-active{
    color: var(--the-main);
    /*font-weight: 600;*/
    /*文字阴影效果*/
    /*text-shadow: 0px 0px 2px var(--main-three);*/
}
/*tab动画效果 结束*/
/*外局控制显示效果*/
.display-out{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*背景色*/
    background:var(--bglight);
    border-radius: 5px;
    /*opacity: 0.8;*/
}
/*申请显示 今日之星*/
.display-show{
    /*左侧自动填满*/
    margin-left: auto;
    margin-right: 1rem;
    padding: 6px 15px;
    border: 1px solid var(--the-main);
    border-radius: 15px;
    color: var(--the-main);
    cursor: pointer;
    /*渐变效果*/
    transition: 0.1s;
}
.display-show:hover{
    background: var(--the-main);
    color: var(--light-best);
    /*渐变效果*/
    transition: 0.1s;
}