@charset "utf-8";
/* ==========================================================================
   培训课程列表页（移动端）
   参考：https://www.mede.com.cn/course/rengongzhineng
   设计稿宽度 750px，1rem = 100px（由 setfontsize.js 控制根字号）
   主色：深蓝 #0054b2 / 亮蓝 #2592ff
   ========================================================================== */

/* 页面容器 ------------------------------------------------------------------*/
.container {
    width: 100%;
    padding: .2rem 0rem .3rem;
    box-sizing: border-box;
}

/* 课程分类筛选栏 -------------------------------------------------------------*/
.list-select {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #fff;
    /* border-radius: .1rem; */
    padding: .24rem .2rem;
    box-shadow: 0 .05rem .2rem #efefef;
}

.list-select .title {
    flex-shrink: 0;
    font-size: .3rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .56rem;
}

/* 分类标签横向滚动（左右滑动） */
.list-select > ul {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: .2rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.list-select > ul::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.list-select > ul > li {
    flex-shrink: 0;
    white-space: nowrap;
    display: inline-block;
    border-radius: .3rem;
    border: .02rem solid #e8ecf1;
    background: #fbfcfd;
    cursor: pointer;
    transition: all .2s ease;
}

.list-select > ul > li > a {
    display: block;
    padding: .1rem .28rem;
    font-size: .26rem;
    line-height: 1.2;
    color: #666;
}

/* 选中态：蓝边框 + 蓝字，贴合参考网站胶囊高亮风格 */
.list-select > ul > li.active {
    border-color: #0054b2;
    background: #fff;
}

.list-select > ul > li.active > a {
    color: #0054b2;
    font-weight: 600;
}

/* 主体：移动端改为纵向，侧边栏沉底 ------------------------------------------*/
.list-main {
    display: flex;
    flex-direction: column;
    gap: .24rem;
    margin-top: .24rem;
}

/* 左侧课程列表 --------------------------------------------------------------*/
.list-left {
    width: 100%;
    min-width: 0;
}
.list-main  .list-left .list-title {
    height: 0.8rem;
    margin-bottom: 0.2rem;
}

/* 区块标题 */
.list-title {
    display: flex;
    align-items: center;
    background: #fff;
    line-height: 1rem;
        padding: 0 0.2rem;
}

.list-title h2 {
    font-size: .34rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: .4rem;
    padding-left: .16rem;
    border-left: .06rem solid #0054b2;
}

/* 卡片列表 */
.list-box {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.list-item {
    background: #fff;
    /* border-radius: .12rem; */
    box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .06);
    overflow: hidden;
    transition: box-shadow .3s ease, transform .3s ease;
}

.list-item:active {
    box-shadow: 0 .08rem .24rem rgba(0, 84, 178, .16);
    transform: translateY(-.03rem);
}

.list-item > a {
    display: flex;
    text-decoration: none;
    color: inherit;
}

/* 缩略图：左图右文 */
.item-img {
    width: 3.5rem;
    /* height: 1.8rem; */
    flex-shrink: 0;
    overflow: hidden;
    background: #f2f3f5;
}

.item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 信息区 */
.item-info {
    flex: 1;
    min-width: 0;
    padding: .18rem .2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.item-title h3 {
    font-size: .3rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-desc {
    font-size: .24rem;
    color: #888;
    /* line-height: 1.6; */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-desc span {
    color: inherit;
}

.item-meta {
    font-size: .22rem;
    color: #999;
}

.item-meta span {
    color: inherit;
}

/* 右侧边栏（移动端沉底，全宽） ----------------------------------------------*/
.list-sidebar {
    width: 100%;
    min-width: 0;
}

/* 覆盖侧边栏内联样式中的固定宽度（PC 为 300px），避免移动端溢出 */
.list-sidebar,
.list-sidebar .common_article_sidebar,
.list-sidebar .hot-articles,
.list-sidebar .recent-articles,
.list-sidebar .hot-tags,
.list-sidebar .trial-form {
    width: 100% !important;
    box-sizing: border-box;
}

/* 侧边栏卡片间留白（配合 PC 内联样式的 mb-25 / mt-25 兜底） */
.list-sidebar .hot-articles,
.list-sidebar .recent-articles,
.list-sidebar .hot-tags,
.list-sidebar .trial-form {
    margin-bottom: .24rem;
}

/* sidebar-item ------------------------------------------------------------------*/
.sidebar-item  {
    padding: .26rem 0 0 0;
    background-color: #fff;
    -webkit-box-shadow: 0 5px 20px #efefef;
    -moz-box-shadow: 0 5px 20px #efefef;
    -ms-box-shadow: 0 5px 20px #efefef;
    -o-box-shadow: 0 5px 20px #efefef;
    box-shadow: 0 5px 20px #efefef;
    margin-bottom: .26rem;
}
.sidebar-item .list-title {
    margin-bottom: .2rem;
}

.sidebar-item-list {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-item-list li {
    background: #fff;
    border-radius: .12rem;
    box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .06);
    overflow: hidden;
}

.sidebar-item-list li > a {
    display: flex;
    text-decoration: none;
    color: inherit;
}

.hot-img {
    width: 2.2rem;
    height: 1.6rem;
    flex-shrink: 0;
    overflow: hidden;
    background: #f2f3f5;
}

.hot-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hot-info {
    flex: 1;
    min-width: 0;
    padding: .16rem .2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .12rem;
}

.hot-name {
    font-size: .28rem;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hot-views {
    font-size: .22rem;
    color: #999;
}

/* 近期文章（排行榜样式） ----------------------------------------------------*/
.recent-article-list {
    list-style: none;
    margin: 0;
    padding: .1rem .2rem .2rem;
    background: #fff;
    border-radius: .12rem;
    box-shadow: 0 .02rem .12rem rgba(0, 0, 0, .06);
}

.recent-article-list li {
    position: relative;
    padding: .16rem 0;
    border-bottom: 1px solid #f4f4f4;
}

.recent-article-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* 序号：前三名红色，第 4 名起灰色 */
.recent-article-list li > em {
    position: absolute;
    left: 0;
    top: .16rem;
    width: .36rem;
    height: .36rem;
    background: #ff0000;
    color: #fff;
    font-style: normal;
    font-size: .24rem;
    line-height: .36rem;
    text-align: center;
    border-radius: .08rem;
}

.recent-article-list li:nth-child(n+4) > em {
    background: #eaeaea;
    color: #666;
}

.recent-article-list li > a {
    display: block;
    padding-left: .5rem;
    padding-right: .95rem;
    font-size: .28rem;
    color: #333;
    line-height: .36rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.recent-article-list li > a:hover {
    color: #ff0000;
}

/* 日期：右侧灰色 */
.recent-article-list li > span {
    position: absolute;
    right: 0;
    top: .16rem;
    font-size: .22rem;
    color: #999;
    line-height: .36rem;
}