/*组图显示方式的样式*/

.imggrouplist{margin:0 auto;width:100%;}
.imggrouplist li{font-size:16px;line-height:50px;}
.imggrouplist li img{width:99%;box-shadow: 10px 10px 10px rgba(0,0,0,.3);

                 /*考虑浏览器兼容性*/

                 -moz-box-shadow: 10px 10px 10px rgba(0,0,0,.3);

                 -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.3);}
/*组图显示方式的样式结束*/



.fl{float: left;}
.fr{float: right;}
.clear{clear: both;}
.bg-white {
    background-color: #fff;
    line-height: 2;
    color: #555;
}
.tuijian {
    background-color: #fff;
    line-height: 2;
    color: #5#525252;
}
/* ========= 参考资料模块样式 ========= */
.reference {
    /* 可根据需要添加容器限制，如 max-width: 1200px; margin: 0 auto; */
}

/* 定义块（描述区域） */
.reference dl {
    margin-top: 30px;
    padding-bottom: 15px;
    line-height: 1.5; /* 相对单位，更灵活 */
}

.reference dl dt {
    font-size: 24px;
    font-weight: bold; /* 修正原错误 */
    margin-bottom: 10px; /* 增加下边距，与 dd 区分 */
}

.reference dl dd {
    margin-top: 15px;
}

/* 名称（如“作者：”、“来源：”） */
.reference dl dd .name {
    display: inline-block;
    width: 80px;
    color: #666; /* 提高对比度，原 #999 太浅 */
    font-size: 16px;
}

/* 描述内容 */
.reference dl dd .desc {
    color: #333;
    margin-left: 103px; /* 与 .name 宽度对齐 */
    line-height: 1.5;
}

/* 图片列表中的图片自适应 */
.reference dl dd .pic_list .desc img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* 可选，增加美观 */
}

/* 如果是多图片横向排列，可补充 */
.reference .pic_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* 下面的 ul li 样式（像是统计或入口图标） */
.reference ul {
    display: flex;
    flex-wrap: wrap;
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.reference ul li {
    position: relative;
    flex: 1 1 33%;          /* 默认三列，允许折行 */
    min-width: 200px;       /* 避免太窄 */
    height: 100px;
    background: #fafafa;
    border-left: 1px solid #e0e0e0;  /* 将白色改为可见边框 */
    box-sizing: border-box;
    transition: background 0.2s;
}

/* 去除第一个 li 的左边框 */
.reference ul li:first-child {
    border-left: none;
}

/* 奇偶行不同背景（原 .spec 类） */
.reference ul li.spec,
.reference ul li:nth-child(even) {
    background: #f7f7f7;
}

/* 图标容器 */
.reference ul li .iconbox {
    margin-top: 23px;
    margin-left: 10px;
    width: 90px;
}

/* 文章/文字容器 */
.reference ul li .article {
    margin-top: 23px;
    width: 125px;
}

.reference ul li p.f20 {
    margin-top: 5px;
    font-size: 20px; /* 如果全局没定义，加上 */
}

/* 二维码容器（需配合 position） */
.reference .ewmbox {
    position: absolute;  /* 原代码缺失，补充 */
    left: 55px;
    bottom: 80px;
    /* 其他样式根据实际需求补充，如 width、background 等 */
}

/* ========= 移动端适配 ========= */
@media (max-width: 768px) {
    .reference dl dt {
        font-size: 20px;
    }
    .reference dl dd .name,
    .reference dl dd .desc {
        display: block;
        margin-left: 0;
    }
    .reference dl dd .name {
        width: auto;
        margin-bottom: 5px;
    }
    .reference ul li {
        flex: 1 1 100%;   /* 手机屏幕每行一个 */
        border-left: none;
        border-top: 1px solid #e0e0e0;
    }
    .reference ul li:first-child {
        border-top: none;
    }
    .reference .ewmbox {
        left: 20px;
        bottom: 20px;
    }
}
/* =================== 1. 移动端基础适配 =================== */
@media only screen and (max-width: 768px) {
    /* 参考资料模块：强制标签与内容块级化，避免左偏移 */
    .reference dl dd .name,
    .reference dl dd .desc {
        display: block;
        margin-left: 0;
        width: auto;
    }
    .reference dl dd .name {
        margin-bottom: 5px;
        font-weight: 500;
    }
    /* 可选：手机端减小标题字号 */
    .reference dl dt {
        font-size: 20px;
    }
}

/* =================== 2. 雪碧图（支持Retina屏） =================== */
.icon {
    display: inline-block;      /* 改为 inline-block 更灵活 */
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url(icon1@2x.png);  /* 建议使用2倍尺寸雪碧图 */
    background-size: 20px auto;           /* 关键：将原始40px宽缩放到20px显示 */
    vertical-align: middle;               /* 与文字垂直居中 */
    /* 回退兼容：如果只有1倍图，请将上述两行改为下面注释的内容 */
    /* background-image: url(icon1.png); */
    /* background-size: auto; */
}

/* 各图标位置（假设原图每个图标高度20px，2倍图中实际占40px高度） */
.icon-car           { background-position: 0 0; }
.icon-local         { background-position: 0 -17px; }
.icon-city          { background-position: 0 -40px; }
.icon-down          { background-position: 0 -60px; }
.icon-star-blue     { background-position: 0 -100px; }
.icon-star-gray     { background-position: 0 -120px; }
.icon-down-big      { background-position: 0 -140px; }
.icon-type          { background-position: 0 -160px; }
.icon-gooff         { background-position: 0 -180px; }
.icon-back          { background-position: 0 -200px; }
.icon-end           { background-position: 0 -220px; }
.icon-user          { background-position: 0 -240px; }
.icon-note          { background-position: 0 -256px; }
.icon-deposit       { background-position: 0 -280px; }
.icon-offer         { background-position: -20px -140px; }
.icon-models        { background-position: -20px -160px; }
.icon-has           { background-position: -20px -180px; }
.icon-no            { background-position: -20px -200px; }
.icon-comm          { background-position: -20px -216px; }
.icon-camera        { background-position: -45px -260px; }
.icon-date          { background-position: -20px -240px; }
.icon-1             { background-position: -45px -140px; }
.icon-2             { background-position: -45px -160px; }
.icon-3             { background-position: -45px -180px; }
.icon-4             { background-position: -45px -200px; }
.icon-5             { background-position: -45px -220px; }
.icon-6             { background-position: -45px -240px; }

/* =================== 3. 工具类 =================== */
/* 两端对齐（现代浏览器标准写法，移除IE私有） */
.justify {
    text-align: justify;
}
/* 如需强制最后一行也两端对齐（谨慎使用） */
.justify-last {
    text-align-last: justify;
}

/* 颜色和字号（修正命名与值一致） */
.blue {
    color: #e60012 !important;   /* 统一品牌红色，原 #EC020D 接近但保留原也可 */
    font-style: normal;
}
.f28 { font-size: 28px; }   /* 原 .f24 实际 28px，改为正确命名 */
.f14 { font-size: 14px; }
.f16 { font-size: 16px; }

/* =================== 4. 分享 & 收藏按钮 =================== */
.share-collect {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}
.share-collect a {
    display: inline-flex;           /* 更灵活的居中方式 */
    align-items: center;
    justify-content: center;
    min-width: 90px;
    min-height: 44px;               /* 符合移动端点击区域标准 */
    padding: 8px 24px;
    font-size: 14px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}
.share-btn {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}
.share-btn:hover {
    background-color: #e9e9e9;
}
.collect-btn {
    background-color: #e60012;
    color: #fff;
    border: none;
}
.collect-btn:hover {
    background-color: #c5000e;
}
/* 点击态反馈 */
.collect-btn:active {
    transform: scale(0.96);
    background-color: #b0000a;
}
/* 已收藏状态示例（可根据需要启用） */
.collect-btn.active {
    background-color: #999;
    cursor: default;
}
.collect-btn.active:active {
    transform: none;
}

/* =================== 5. 移动端额外优化 =================== */
@media (max-width: 768px) {
    /* 增大图标热区（配合2倍图，视觉大小不变但点按区域增大） */
    .icon {
        width: 28px;
        height: 28px;
        background-size: 28px auto;  /* 如果2倍图原宽56px则缩到28px */
    }
    /* 分享按钮手机端宽度可稍微撑开 */
    .share-collect a {
        min-width: 110px;
    }
}