是站内多处复用的通用布局
* class（不止 footer 一处在用），直接在 .layout-100 上加背景图会连带影响页面里其它
* 用到 .layout-100 的地方。这里额外给 footer.php 那个最外层 div 加了一个专属的
* footer-outer class（同时保留 layout-100，不影响它原有的布局行为），背景图只挂在
* .footer-outer 上，只影响 footer 这一处。
*/
.footer-outer {
/* 深色底色打底：图片没铺满/加载失败的区域也不会露出父主题原来的白底，
同时给下面"所有链接改白色"提供足够的背景对比度。 */
background-color: #1E1F1A;
background-image: url('https://lindemh.static.wezan.cn/images/bg_footer.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* 需求"里面所有按钮/链接颜色都改成#fff"：父主题全局有 a,a:active,a:focus,a:visited{color:#AA0020}
（选择器优先级(0,1,1)/(0,0,1)），不特意处理的话，footer里普通的
（比如菜单链接、
备案链接）点击过（:visited会一直生效）、聚焦或按住时会被这条全局规则盖回品红色，在
深色背景上不好看也不易读。这里用 .footer-outer a 打底，同时把 :active/:focus/:hover/
:visited 都显式列出来跟默认态用同一份白色声明——选择器优先级(0,2,1)，比全局的(0,1,1)/
(0,0,1)高，不依赖"nav-v2.css/footer-v2.css排在styles.css后面加载"这个顺序也能稳定生效，
不需要!important。下面 footer-socialmedia__cta-btn 等需要红底白字的按钮会再单独覆盖
background，不受这条影响。 */
.footer-outer a,
.footer-outer a:active,
.footer-outer a:focus,
.footer-outer a:hover,
.footer-outer a:visited {
color: #fff;
}
/* 父主题 styles.css 里 .footer{background:#fff}（(0,1,0)）是不透明白色背景，
紧贴在 .footer-outer 内层、把它撑满——不去掉这个白色背景的话，会完全盖住上面
刚设置的 .footer-outer 背景图，图片实际什么都看不见。这里只在子主题的
.footer-outer 范围内把 .footer 背景改透明，选择器优先级 (0,2,0) 比父主题那条
(0,1,0) 高，不需要 !important；不写成裸的 .footer{background:transparent}，
避免影响到万一其它地方也有 .footer 这个 class 但不在 footer-outer 里的情况。 */
.footer-outer .footer {
background: transparent;
}
/* ---------- 1. 底部菜单（Ydo_footer_nav）：最大宽度1200px + 居左对齐 ---------- */
/*
* 父主题 styles.css 里 .footer>ul{width:100%;text-align:center}（选择器优先级(0,2,0)）
* 是让菜单占满整行、菜单项居中排列。这里参考站内已有的通用约定
* （比如 .linde-section__inner{max-width:1200px;margin:0 auto}）：外层用
* max-width:1200px + margin:0 auto，让整块菜单在页面上居中（两侧留白一致，
* 不再贴边占满全屏），内部文字/菜单项改用 text-align:left，让菜单项从这块
* 居中区域的左边开始排列，而不是居中排列。
* 选择器优先级跟 styles.css 那条一样都是 (0,2,0)，这里靠 footer-v2.css 在文档里
* 排在 styles.css 之后加载（footer.php 里的 在 header.php 引入的 styles.css
* 之后），同优先级时后加载的生效，不需要 !important。
*/
.footer > ul {
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
/* .footer>ul>li 原有 display:inline-block 不用改，inline-block 元素本来就会
跟着父级的 text-align 走，上面把父级改成 left 之后这里自然就左对齐了；
单独写一条只是让"最终是靠这条生效"这件事更明确，方便以后查样式。 */
.footer > ul > li {
text-align: left;
font-weight: 800;
font-size: 16px;
}
/* ---------- 2. footer-socialmedia：左侧联系电话+咨询按钮 / 右侧图标链接 ---------- */
/*
* 父主题里这块原来只放一个背景图 logo（.footerIcon），子主题 footer.php 已经把
* 这部分 DOM 换成了 .footer-socialmedia__phone（左，电话号码+"需求咨询"/"在线客服"
* 两个按钮）+ ul.footer-socialmedia__icons（右，5个 li>a 图标+文字），这里负责
* 让这两块保持同一行、桌面端按40%/60%分配宽度。
*/
.footer-socialmedia {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 16px;
max-width: 1200px;
margin: 0 auto;
/* 父主题 styles.css 里 .footer-socialmedia{padding:16px 0;border-top:1px solid
#eeeff3;border-bottom:1px solid #eeeff3}还带一条上分隔线、一条下分隔线，是给白底
footer配的浅灰色细线；这次需求去掉这两条线，保留16px上下留白（padding不用重复
声明，父主题那条本身也没被这里覆盖掉，只单独覆盖border）。选择器优先级(0,1,0)
跟父主题一致，footer-v2.css排在styles.css之后加载，同优先级后加载的生效。 */
border-top: none;
border-bottom: none;
}
@media (min-width: 1024px) {
/* 需求"phone占40%宽度，剩下的给icons"：两栏都用固定的flex-basis百分比
（flex-grow/shrink都关掉，宽度不随内容多少变化），加起来正好100%，
同一行不会换行，也不需要靠flex-wrap:wrap兜底。 */
.footer-socialmedia {
flex-wrap: nowrap;
min-height: 260px;
}
.footer-socialmedia__phone {
flex: 0 0 40%;
max-width: 40%;
}
.footer-socialmedia__icons {
flex: 0 0 60%;
max-width: 60%;
justify-content: flex-end;
}
}
/* .footer-socialmedia__phone内部纵向排两行：电话号码在上，"需求咨询"/"在线客服"
按钮在下，整块跟右侧.footer-socialmedia__icons仍然是同一行（横向flex）里的
一栏，互不冲突。 */
.footer-socialmedia__phone {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.footer-socialmedia__phone-link,
.footer-socialmedia__phone-link:active,
.footer-socialmedia__phone-link:focus,
.footer-socialmedia__phone-link:hover,
.footer-socialmedia__phone-link:visited {
display: inline-flex;
align-items: center;
gap: 8px;
color: #fff;
text-decoration: none;
}
.footer-socialmedia__phone-link .icon {
font-size: 18px;
}
.footer-socialmedia__phone-number {
font-size: 16px;
font-weight: 600;
letter-spacing: .02em;
}
@media (min-width: 1024px) {
/* PC端电话号码放大成54px的醒目大字。letter-spacing的"-3%"是设计稿(Figma等工具)的
习惯写法——相对字号的百分比，CSS的letter-spacing不支持百分比单位（写%浏览器会
直接忽略整条声明），换算成等价的em：-3% ≈ -0.03em，用em而不是按54px算出的固定
px值，字号以后再调时这个负字距也能跟着等比例缩放，不用重新换算。 */
.footer-socialmedia__phone-number {
font-size: 34px;
letter-spacing: -0.04em;
}
}
/* "需求咨询"/"在线客服"：主题红(#AA0020)底、并排、间距10px的超链接按钮，文字白色。 */
.footer-socialmedia__cta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
.footer-socialmedia__cta-btn,
.footer-socialmedia__cta-btn:active,
.footer-socialmedia__cta-btn:focus,
.footer-socialmedia__cta-btn:visited {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background-color: #AA0020;
color: #fff;
font-size: 14px;
line-height: 1;
white-space: nowrap;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
transition: background-color .15s ease;
}
.footer-socialmedia__cta-btn .icon {
font-size: 16px;
flex: none;
}
.footer-socialmedia__cta-btn:hover {
/* 悬停用深一点的红做反馈，文字保持白色，不改用户要求的"文字为白色"这条。 */
background-color: #8a0019;
color: #fff;
}
/* 图标区：每个图标項最小宽度85px、项间距30px，图标(徽标)在上、白色12px文字在下，
整体在各自85px宽的格子里居中显示。align-items改成flex-end（底对齐）——badge现在
不设宽高了，各图标本身大小可能不一样高，底对齐才能保证不管图标多高，下面那行
文字始终在同一条水平线上，不会因为某个图标偏高/偏矮就把自己的文字行带得忽高忽低。 */
.footer-socialmedia__icons {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 30px;
margin: 0;
padding: 0;
list-style: none;
}
.footer-socialmedia__icons > li {
margin: 0;
padding: 0;
min-width: 85px;
}
.footer-social-icon,
.footer-social-icon:active,
.footer-social-icon:focus,
.footer-social-icon:hover,
.footer-social-icon:visited {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
color: #fff;
text-decoration: none;
transition: opacity .15s ease;
}
.footer-social-icon:hover {
opacity: .7;
}
.footer-social-icon__badge {
/* 去掉圆圈边框(border)和圆角(border-radius)，只留图标本身；这次再去掉固定的
width:36px/height:36px，大小完全跟着图标字体自己的font-size走，不再被
36x36的方框限制。 */
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.footer-social-icon__label {
font-size: 12px;
color: #fff;
line-height: 1.2;
text-align: center;
white-space: nowrap;
}
@media (max-width: 767px) {
/* 移动端窄屏放不下两栏并排，改成上下堆叠，电话+按钮在上、图标在下，都靠左对齐，
跟上面第1点"整体居左"的方向保持一致；桌面端40%/60%的宽度分配只在
min-width:1024px生效，这里不受影响，自动回到auto宽度纵向堆叠。 */
.footer-socialmedia {
flex-direction: column;
align-items: flex-start;
}
.footer-socialmedia__icons {
gap: 24px;
}
}
/* ---------- 3. footer-copyright：最大宽度1200px + 居左显示 + 白色60%透明字体 ---------- */
/*
* 父主题 styles.css 里 .footer-copyright{color:rgba(68,68,68,.4);text-align:center;
* display:block;padding:16px;font-size:.65rem}（(0,1,0)）是给白底 footer 配的深灰色、
* 居中文字。这里改成跟上面菜单/footer-socialmedia一致的 max-width:1200px+margin:0 auto
* 居中容器、text-align:left 内容居左，字体颜色改成白色60%不透明度（这一条是文字本身的
* 颜色，不是链接——现在footer已经有深色底了，见上面0.节，能看清）。
*/
.footer-copyright {
display: block;
max-width: 1200px;
margin: 0 auto;
text-align: left;
color: rgba(255, 255, 255, .6);
}
/* footer-copyright 里的两个备案链接：文字本身是60%透明白（上面那条），链接要比周围
文字更亮一些、看得出是可点的，这里改成悬停时到rgba(255,255,255,.8)，其它状态用不
透明的纯白。.footer-copyright a 和 0.节的 .footer-outer a 选择器优先级其实一样
（都是1个class+1个元素，含伪类时都是1个class+1个元素+1个伪类），这里能生效
靠的是源码顺序排在0.节后面（同优先级后写的赢），不是优先级更高；这里再单独写一遍
主要是为了不依赖那条通用规则、单看这一段样式也能确认链接颜色，同时避免以后有人
改了0.节却忘了这里跟着变。 */
.footer-copyright a,
.footer-copyright a:active,
.footer-copyright a:focus,
.footer-copyright a:hover,
.footer-copyright a:visited {
color: #fff;
}
.footer-copyright a:hover {
color: rgba(255, 255, 255, .8);
}