无文字，
旧 float 时代渲染出 30px 残行）：整项 display:none 剔除出导航行。
导航行只保留 6 个栏目链接 + 微信图标；h1/p 描述行在 .site-slogan 独立窗体，
与导航残行互不占空间，三者分层：导航行 / h1 行 / p 行（h1↔p 间距 12px） */
.main-nav > li.nav-home {
display: none;
}
/* ---------- §2 首页三栏（侧栏 | 轮播 | 头条栏） ----------
主区紧贴 slogan（8px 间隙，替代旧版 80px 大空白）。
注意 common.css 的 .home-main{margin-top:80px} 与本规则同特指度，
本文件在 head 最末加载 → 此处 8px 压过 80px 生效 */
.home-main {
margin-top: 8px;
}
.home-left-wrap {
display: grid;
grid-template-columns: 160px minmax(0, 1fr) 160px;
column-gap: 15px;
/* 旧 CSS 里 .home-left-wrap 带 margin-top:30（float 时代的堆叠余量），
grid 化后 home-main 已 margin-top:80 还原旧版 banner 顶 204，
此处清零，否则轮播/侧栏整体多下移 30px */
margin-top: 0;
}
/* 侧栏列（position:relative 是 hover 面板 .side-tab-panel{absolute} 的定位锚点，
旧版 float:左 + relative；面板 top:0 与侧栏同顶，left:166 从侧栏右沿伸出 6px 盖住轮播左沿） */
.home-left-box {
float: none;
position: relative;
}
.side-nav {
display: flex;
flex-direction: column;
}
/* 侧栏推荐：旧 float 两列 → grid 两列 */
.side-rec-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px 20px;
}
.side-rec-list li {
float: none;
width: auto;
margin: 0;
min-width: 0;
}
/* 缩略图刚性盒（80×52 旧定盒，补 cover 防变形） */
.side-rec-list li img {
width: 100%;
height: 52px;
object-fit: cover;
display: block;
}
/* 轮播列（网格 1fr 单元，宽正好 850） */
.web_huand {
float: none;
width: 100%;
margin: 0;
min-width: 0;
}
.home-banner {
width: 100%;
overflow: hidden;
}
/* 轮播图刚性盒：原图再大，cover 铺满盒内，不变形不留白 */
.home-banner .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 头条栏列（grid 自动落第三列） */
.home-dl {
float: none;
width: auto;
overflow: hidden;
}
/* ---------- §3 中部链接栏（单行 5 入口占满整宽）----------
旧版是 5 入口 flex:1 + 微信盒 flex:0 0 160 贴右沿（双格，高度不齐）。
现 index.htm 已移除 wechat-box，5 入口行占满 1200 整行，
每格 flex:1 等分 = (1200 − 4×15)/5 = 234px，间距 15（与首页其他区块列距一致） */
.link-bar {
display: flex;
gap: 15px;
}
/* 旧 CSS 清浮伪元素在 flex 容器里各占一格，必须先排除出布局流 */
.link-bar::before,
.link-bar::after {
content: none;
display: none;
}
/* 已删，但保留防御（旧模板可能有残留） */
.link-bar > .clear {
display: none;
}
/* 5 入口行占满 1200 整行；间距 5 贴合源码模板"栏目间紧凑"视觉，
每格 flex:1 = (1200−4×5)/5 = 232px */
.link-bar-show {
flex: 1;
min-width: 0;
display: flex;
gap: 5px;
width: auto;
}
/* 每格 flex:1 等分主区，与首页其他区块（3列/2列）的列距 15 一致 */
.link-bar-show .show-box {
float: none;
flex: 1 1 0;
min-width: 0;
margin: 28px 0 0 0;
}
/* 微信盒：顶 652（与 5 入口同顶，margin 28）；右贴内容盒右沿 1320（与上排 .link-bar 右缘对齐）；
margin-left:auto 把它推到 flex 行最右、右缘正好 1320，不悬空；
底部向下探 45（h100 vs 入口 h45）——与旧版语义一致。
当前首页模板未使用该类，此规则为保留声明，防止他页复用 */
.wechat-box {
float: none;
flex: 0 0 160px;
width: 160px;
height: 100px;
margin: 28px 0 0 auto;
}
.wechat-box::before,
.wechat-box::after {
content: none;
display: none;
}
/* ---------- §4 区块标题行（h2 左 / 更多右） ---------- */
.section-head {
display: flex;
align-items: center;
}
.section-head h2 {
float: none;
}
.section-head > a {
margin-left: auto;
}
/* ---------- §5 今日推荐（swiper slide 内 5 张卡） ----------
卡宽 = (1200 − 4×30 列距)/5 = 216px，封面刚性盒 124 恒定，
contain 完整显示（不变形不裁切，超出留浅底 #f7f7f7）。
注意旧 CSS 遗留规则：style.css 的 .rec-swiper{width:1280px;margin-left:-39px}
与 .rec-banner{width:1280px;height:320px}（float 时代遗留的破盒写法）必须压回 1200 内容盒；
且 Swiper JS 会给 .swiper-wrapper 写内联 width:1280px，需要 !important 才能收回
（特指度再高也压不过内联样式） */
.today-rec .rec-swiper {
width: auto;
margin-left: 0;
}
.today-rec .rec-banner {
width: auto;
height: auto;
}
/* swiper 把 slide 宽度设为容器宽，强制 100% 防漂移（wrapper 内联 1280px 必须压住）；
同时清掉 style.css .rec-banner .swiper-wrapper{margin-left:40px}（grid 化后 banner 自身已
1200 居中 40→1240，多 40 边距会让 5 卡右缘推到 1280 超盒 40） */
.rec-banner .swiper-container,
.rec-banner .swiper-wrapper {
width: 100% !important;
margin-left: 0;
}
/* 5 卡等分主区：repeat(5, minmax(0,1fr)) + 列距 30；
总宽 5×216 + 4×30 = 1200 精确落满（右缘 1240） */
.rec-banner .swiper-slide {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: 30px;
width: 100%;
}
/* 特指度 0,2,1 压 style.css 的 .rec-item{width:217px}（0,1,0），让卡宽随主区等分 216 */
.today-rec .rec-item {
float: none;
width: auto;
min-width: 0;
margin: 20px 0 0 0;
overflow: hidden;
}
/* 封面刚性盒：a 为定位锚点 relative，宽 100%、高 124 恒定；
img absolute inset:0 100%×100% + contain，原图任意尺寸都同比例完整落入 216×124 窗体 */
.today-rec .rec-item a {
position: relative;
display: block;
width: 100%;
height: 124px;
overflow: hidden;
background: #f7f7f7;
}
.today-rec .rec-item a img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* 卡片内容列：100% 卡宽 + 内边距（特指度 0,2,1 压 style.css 的 .rec-item dl{width:187px}） */
.rec-item dl {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
}
/* ---------- §6 课程区（左右容器 0 空隙紧贴，右列 330 与下载排行侧栏基准统一）----------
download-rank-wrap 与 featured-articles 宽度统一 330；
course-column 与 featured-articles 容器之间不留空隙（0 列距），左右两窗体紧贴 */
.course-section .page-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 0;
align-items: start;
width: 1200px;
margin: 0 auto;
height: auto;
}
.course-section {
position: static;
}
/* 显式钉住 page-container 的两个直接子元素到 grid 格位（DOM 里 section-head/course-grid
已包进 .course-column 容器，所以 page-container 直接子只有 course-column / featured-articles / clear，
必须显式钉 course-column→r1c1、featured→r1c2，否则 featured 自动放置掉到第 2 行） */
.course-section .page-container > .course-column {
grid-column: 1;
grid-row: 1;
}
/* 左侧窗体 .course-column（index.htm 新增容器）：装 section-head（上）+ course-grid（下），
占 grid 第 1 列；内部 flex column 上下堆叠，列内顶对齐。
与右侧 .featured-articles 同为 page-container 的直接子元素，左右并排对齐 */
.course-section .page-container > .course-column {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.course-section .page-container > .course-column > .section-head {
width: 100%;
}
.course-section .page-container > .course-column > .course-grid {
width: 100%;
}
/* .course-column 内 .clear（旧清浮残留）排除出布局流 */
.course-section .page-container > .course-column > .clear {
display: none;
}
/* 右侧独立窗体（右列宽 330，与下载排行侧栏基准一致） */
.course-section .page-container > .featured-articles {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
width: 330px;
}
.course-section .page-container > .clear {
display: none;
}
/* 课程卡：3 列等分左列——卡宽随 955/960 主区自适应 ≈300，等高；
行距 32、列距 20；minmax(0,1fr) 防 min-content 撑破盒 */
.course-section .page-container .course-grid .detail > ul {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px 20px;
justify-content: stretch;
}
.course-section .page-container .course-grid .detail > ul > li {
display: block;
width: auto;
margin: 0;
min-width: 0;
}
.course-section .page-container .course-grid .detail > ul > li:nth-child(2),
.course-section .page-container .course-grid .detail > ul > li:nth-child(5),
.course-section .page-container .course-grid .detail > ul > li:nth-child(8),
.course-section .page-container .course-grid .detail > ul > li:nth-child(11) {
margin: 0;
}
/* 课程卡封面刚性盒：
.courses→.course-grid 类名调整后，common.css 中锚定旧类名的
.left_img{position:relative;height:181px} 与 3 层翻转图 absolute 叠放规则不再生效，
封面盒失去刚性会导致 3 张翻转图按自然高度堆叠、卡片高度膨胀。
本规则在新类名下补回刚性几何（布局属性，翻转盒视觉归 overlay 旧 CSS）：
盒 100%×181 relative + overflow:hidden + 浅底 #f7f7f7，
翻转图 absolute 叠在盒内 contain（口径：不变形、不裁切，超出留浅底） */
.course-section .page-container .course-grid .detail ul li a > .left_img {
position: relative;
width: 100%;
height: 181px;
overflow: hidden;
background: #f7f7f7;
}
/* 翻转盒内 3 张图 + 信息层统一 object-fit:contain（不变形、不裁切，超出留浅底 #f7f7f7）；
超出盒宽的图由盒 overflow:hidden 收进，横向安全 */
.course-section .page-container .course-grid .detail ul li a > .left_img > img,
.course-section .page-container .course-grid .detail ul li a > .left_img > .learn-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.course-section .page-container .course-grid .detail ul li a > .left_img > .learn-info {
top: auto;
left: 8px;
right: auto;
bottom: 8px;
width: auto;
height: auto;
}
.course-section .page-container .course-grid {
float: none;
width: auto;
min-width: 0;
}
/* 翻转特效盒：溢出收进盒内（取消旧 5px 溢出特例），横向安全 */
.left_img {
overflow: hidden;
max-width: 100%;
}
/* 课程卡标题行：旧 .source_name{margin-top:20px; height:20px;
overflow:hidden; nowrap; ellipsis} 锚定 .w/.courses 旧类名、类名调整后失效——
补回后卡高归一：单行标题 20px 定盒 + 20px 上留白，长标题不再折两行撑高卡，
行内卡片视觉等高 */
.course-section .page-container .course-grid .detail ul li > a > .source_name {
margin-top: 20px;
height: 20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 「免费试学」按钮（.fr.apply）收进卡内：
旧版 82×24 定盒 + float:right 锚定 .courses（类名调整后旧规则失效），
几何定盒由本文件补回，flex 行原地布局（视觉属性归旧 CSS） */
.course-section .course-grid .price-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.course-section .course-grid .fr.apply {
float: none;
margin: 0;
width: 82px;
height: 24px;
line-height: 24px;
text-align: center;
}
/* 课程卡说明行：单行 20px 定盒 + 省略号，长说明不折行不撑高卡 */
.course-section .page-container .course-grid .detail ul li .train-desc {
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* .detail 内缩 25（旧 .courses>.detail{margin:25px} 锚定 .w/.courses，类名调整后失效）：
外边距只保留左右 25（卡左缘基准 65/850、卡 3 列 = (835−50−50列距)/3），
上下置 0（目标 .course-grid 高≈626±20 = 2×297+32 行距；上下 margin 50 会撑到 676 越界）；
课程区顶部留白由 section-head 自身几何承担 */
.course-section .page-container .course-grid .detail {
margin: 0 25px;
}
/* 右栏：宽 330（与下载排行 download-rank-wrap 统一 330 侧栏基准，
解决"下载量字号被 224 挤看不清"）；内部 .article-block-inner 随列扩到 330，白盒与列同宽 */
.course-section .page-container .featured-articles {
width: 330px;
box-sizing: border-box;
}
.course-section .page-container .featured-articles .article-block-inner {
width: 330px;
}
/* .article-list 收旧 185 定宽，随白盒满宽（含 15 内缩） */
.course-section .featured-articles .article-block-inner .article-list {
width: 100%;
box-sizing: border-box;
padding: 0 15px;
}
.course-section .featured-articles .article-list li {
width: auto;
min-width: 0;
}
/* 精选缩略条目：flex 行（图左 100 + 文字右自适应），按 240 列宽等比缩小（原 120×80 → 100×66）；
contain 不变形完整显示，超出留浅底 #f7f7f7 */
.course-section .featured-articles .article-list li a {
display: flex;
align-items: flex-start;
gap: 10px;
}
.course-section .featured-articles .article-list li a span {
position: relative;
float: none;
flex: 0 0 100px;
width: 100px;
height: 66px;
overflow: hidden;
background: #f7f7f7;
}
.course-section .featured-articles .article-list li a span img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* 文字列：flex:1 自适应 + min-width:0（旧 dl{float:right;width:90px} 压掉，长标题折行不裁死） */
.course-section .featured-articles .article-list li a dl {
float: none;
flex: 1;
min-width: 0;
width: auto;
margin: 0;
}
/* ---------- §7 资源下载栏（主区 + 330 排行侧栏，白色圆角盒边界）----------
download-left 加白色圆角盒边界（四周留白不贴边、不拥挤），
且 download-left 高度与 download-rank-wrap 一致（两列等高、底对齐）。
栅格基准 955/21/224（955+21+224=1200 精确落满，右列贴页面右沿 1240）。
盒边界与旧 .download-rank 同款（白盒 + 圆角 12 + 内缩留白） */
.download-section {
display: grid;
/* 右列 330（与 featured-articles/下载排行统一 330 侧栏基准）；
列距 0（容器紧贴不留空隙，参考 course-column ‖ featured-articles 结构）；
左列弹性 minmax(0,1fr)，总和 845+330=1175（1200 盒内留 25 内缩）右缘贴 1240 */
grid-template-columns: minmax(0, 1fr) 330px;
column-gap: 0;
/* 两列高度一致：stretch 让左右盒等高（底对齐） */
align-items: stretch;
width: 1200px;
margin: 0 auto;
}
/* 左列白盒边界（四周留白、圆角，与右列 download-rank 白盒视觉一致）：
特指度 0,3,1 压 style.css .download-left{width:955;height:500}（0,1,0）定宽；
box-sizing:border-box 让 955 列宽含盒边，padding 24 四周留白、圆角 12、白底
把"拥挤贴边"的下载列表包进盒内 */
.download-section .download-left {
float: none;
width: auto;
height: auto;
min-width: 0;
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
/* 右列白盒边界（与左列等高：旧 .download-rank 白盒已含圆角 12/底，
wrap 补白盒 padding + 圆角，让 download-rank-wrap 与 download-left 视觉同框、等高；
宽度与左侧栏基准统一为 330，排行条字号不再被挤压） */
.download-section .download-rank-wrap {
float: none;
width: 330px;
height: auto;
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-sizing: border-box;
}
/* 旧 .download-rank 自带白盒/圆角/内边距，现在 wrap 已套盒，避免双盒叠 → 去旧盒属性 */
.download-section .download-rank {
background: transparent;
border-radius: 0;
padding: 0;
margin-top: 0;
}
/* 排行条盒 + 列表：旧 style.css 把 .download-rank/.download-rank-list/.li 写死 195/224 定宽居中，
定宽在 330 侧栏里会"条窄、字挤、两侧留白"，故放开为自适应 330 列宽（满宽排行条，字号舒展） */
.download-section .download-rank-wrap .download-rank-list {
width: auto;
margin: 0;
}
.download-section .download-rank-wrap .download-rank-list li {
width: auto;
}
/* 旧 style.css .download-rank{width:224px;height:423px} 把排行条锁死 224（=224 侧栏时代值），
330 侧栏下排行条仍 224 居中 → 两侧留白 53px、字号看着挤。压掉定宽让排行条随 330 列满宽 */
.download-section .download-rank-wrap .download-rank {
width: auto;
height: auto;
}
/* 特指度 0,3,1 压 style.css 的 .download-list{width:955px;height:420px}（0,1,0）——
旧定宽 955 比主区 835 宽 120：下载卡栅格若按 955 算列宽得 463，
右缘 995 撞上排行侧栏。收回 auto 后卡宽 = (835−30列距)/2 ≈ 402，右缘落 875 内 */
.download-section .download-left .download-list {
float: none;
width: auto;
height: auto;
min-width: 0;
}
/* 栏目 tab：一行 flex，间距 10（与源码模板 tab 行一致） */
.download-section .download-menu {
float: none;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.download-section .download-menu li {
float: none;
margin: 0;
}
/* 下载卡列表：2 列写死 435 宽（单卡基准 435×68），列距 30；
总宽 435×2 + 30 = 900（在 955 主区内 + 55 右侧留白，与源码"卡 435 贴左 955 盒"一致）；
特指度 0,5,2 压住 style.css 的 .download-tabs li{width:435px}（0,1,1），li 宽度随栅格单元自适应 */
.download-section .download-left .download-list .content3 .download-tabs {
display: grid;
grid-template-columns: repeat(2, 435px);
gap: 30px 30px;
justify-content: flex-start;
width: auto;
margin: 0;
}
.download-section .download-left .download-list .content3 .download-tabs li {
float: none;
width: auto;
margin: 0;
min-width: 0;
}
/* 下载卡内缩 12px 与内容留白对齐（保留旧视觉微调，不影响列骨架） */
.download-section .download-tabs li > span,
.download-section .download-tabs li > a {
margin-left: 12px;
}
/* 排行条：排名图标 + 名称 + 下载数 一行 flex；条宽 195 居中（旧视觉值保留） */
.download-rank-list li {
display: flex;
align-items: center;
}
.download-rank-list li a {
flex: 1;
min-width: 0;
}
/* ---------- §8 论坛问答（三列卡片） ----------
骨架参考源码模板 3 列等分主区，视觉保留本站风格。
列距 30（与 §5/§7 统一 30 列距基准），行距 30；
卡宽 = (1200 − 2×30)/3 = 380（旧 float 时代卡 386 + 列距 21，grid 化后等分主区 380，
视觉接近且整齐，每个 li 意义=1 条问答卡） */
.ask-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 30px 30px;
}
.ask-list li {
float: none;
width: auto;
margin: 0;
min-width: 0;
}
/* 条目：作者时间左、点击/回复右（一行 flex） */
.ask-list li dd {
display: flex;
align-items: center;
justify-content: space-between;
}
.ask-list li dd em {
position: static;
display: flex;
align-items: center;
gap: 15px;
margin: 0;
}
/* ---------- §9 内页两栏（列表页 / 内容页） ---------- */
/* 列表页 .container：主 835 + 侧 330，间隙 35（=1200 精确还原） */
/* 内容页 .news_aricle：主 .aricle_left 835 + 侧 330 */
.container,
.news_aricle {
display: grid;
grid-template-columns: 835px minmax(0, 1fr);
gap: 35px;
}
.article-card-box-min {
float: none;
width: auto;
min-width: 0;
/* DOM 里该盒在前（=左列 835），显式钉死列位防旧 float 时代顺序歧义 */
grid-column: 1;
}
.aricle_left {
float: none;
width: auto;
min-width: 0;
grid-column: 1;
}
.star-article-r {
float: none;
width: auto;
min-width: 0;
grid-column: 2;
}
/* 文章卡：左图（刚性盒 210×131 旧值）+ 右文 */
.article-card {
display: grid;
grid-template-columns: 210px minmax(0, 1fr);
gap: 25px;
}
/* 内页文章卡左图 210×131 采用 contain（不变形、不裁切、留浅底），
与 §0 兜底 .article-card .figure img 同口径（本规则后置，特指度相同 → 后者生效） */
.article-card .figure {
float: none;
width: 210px;
}
.article-card .figure img {
width: 210px;
height: 131px;
object-fit: contain;
background: #f7f7f7;
display: block;
}
.article-text {
float: none;
width: auto;
height: auto;
margin: 0;
min-width: 0;
}
/* 内容页正文图片：流式自适应，不裁切 */
.aricle_content img,
.videobox img {
max-width: 100%;
height: auto;
}
/* ---------- §10 页脚 ---------- */
/* 5 个栏目链接 + 联系块 一行 flex */
.footer {
display: flex;
align-items: flex-start;
gap: 30px;
}
.footer-links {
float: none;
width: auto;
}
.footer-contact {
margin-left: auto;
}
/* 两个二维码并排（旧 .flex-center 已是 flex，保留） */
/* 友情链接：流式换行 */
.friend-link p {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 25px;
}
.friend-link p a {
display: inline-block;
}
/* ---------- §12 区块间距统一 ----------
首页各 section 纵向堆叠：今日推荐 / 课程区 / 资源下载 / 论坛问答。
旧 CSS 各区块 margin-top 值不一（course 10、today 10、download 10、ask 10，
且 .course-section 存在旧 margin 10 与 .webtoday 等规则叠加）。
统一为 20px，便于后续维护 */
.today-rec,
.course-section,
.download-section,
.ask-section {
margin-top: 20px;
}
/* ---------- §11 grid 化后的清理 ---------- */
/* 旧 CSS 的清浮伪元素（display:table）在 grid 里会各占一个格子，
把真实子元素挤错列 —— 容器转 grid 后必须禁用。
首页四段（今日推荐/课程/下载/问答）+ 内页容器全量纳入 */
.container::before,
.container::after,
.home-left-wrap::before,
.home-left-wrap::after,
.news_aricle::before,
.news_aricle::after,
.today-rec::before,
.today-rec::after,
.course-section::before,
.course-section::after,
.download-section::before,
.download-section::after,
.ask-section::before,
.ask-section::after {
content: none;
display: none;
}
/* 旧模板 .clear/.cleara（clear:both 清浮块）在 grid 容器里会占格，全部剔除出布局流 */
.today-rec .clear,
.course-section .clear,
.download-section .clear,
.ask-section .clear,
.download-menu > .cleara,
.rec-banner .clear {
display: none;
}