/* ================================= 底部预约免费上门报价 ================================= */

/* 服务项目主容器 - 居中显示，垂直排列 */
.sxzxMain {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* 标题区域样式 */
.sxzxMainTitle {
    font-size: 30px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #111111;
    margin-top: 100px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* 副标题样式 */
.sxzxMainTitle p {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #484848;
    margin-top: 19px;
}

/* 服务项目容器 - 水平排列 */
.styleLife {
    width: 1200px;
    margin-top: 66px;
    margin-bottom: 125px;
    display: flex;
    flex-direction: row;
}

/* 服务项通用样式 */
.tasabs {
    width: 290px;
    height: 366px;
    margin-right: 14px;
    position: relative;
}

/* 图片容器样式 - 隐藏超出部分 */
.scrolImg {
    width: 290px;
    height: 366px;
    overflow: hidden;
    border-radius: 10px;
}

/* 服务项图片样式 - 初始状态 */
.scrolImg img {
    width: 100%;
    transition: all 0.3s;
}

/* 服务项描述卡片 - 定位在图片底部 */
.jincnbaojia {
    width: 250px;
    height: 84px;
    position: absolute;
    bottom: -26px;
    left: 20px;
    background: #ffffff;
    box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 服务项标题 */
.titleImgsto {
    font-size: 22px;
    font-weight: bold;
    color: #010101;
    line-height: 30px;
}

/* 服务项说明文字 */
.titlelSele {
    font-size: 14px;
    font-weight: 400;
    color: #010101;
    line-height: 30px;
}

/* 预约表单卡片样式 - 橙色背景突出显示 */
.tasabs.orgin {
    background: #ff6400;
    border: 1px solid rgba(228, 228, 228, 0.7);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    margin-right: 0;
    height: 334px;
}

/* 预约卡片标题 */
.fro3 {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    line-height: 30px;
    margin-bottom: 22px;
}

/* 表单项目样式 */
.itemfrom {
    width: 240px;
    height: 25px;
    background: #ffffff;
    border-radius: 6px;
    margin-top: 10px;
    padding: 14px 17px;
    display: flex;
    flex-direction: row;
}

/* 表单图标 */
.iconsto {
    width: 22px;
    height: 24px;
}

/* 表单分隔线 */
.dredep {
    width: 1px;
    height: 25px;
    margin-left: 17px;
    background: #787878;
    display: inline-block;
}

/* 表单输入框 */
.itemfrom input {
    border: none;
    outline: none;
    flex: 1;
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    padding-left: 12px;
}

/* 提交按钮容器 */
.sumbit2 {
    /* 继承jincnbaojia样式并可在此添加额外样式 */
}

/* 提交按钮 */
.btns {
    background-color: #ffffff;
    color: #ff6400;
    padding: 8px 20px;
    border-radius: 4px;
    cursor: pointer;
}

/* 服务项图片悬停效果 - 图片放大 */
.tasabs .scrolImg:hover img {
    cursor: pointer;
    transform: scale(1.2);
    transition: all 0.3s;
}



/* ================================= 横幅区域样式带表单 ================================= */
/* 横幅容器 - 相对定位，确保内容可以绝对定位在图片上方 */
.jzglBanners {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 100px;
    overflow: hidden;
}

/* 横幅图片 - 占满容器宽度 */
.jzglBanners img {
    width: 100%;
}

/* 横幅内容容器 - 绝对定位在横幅中央，固定宽度1200px */
.jzglBannersContent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
    height: 100%;
    margin: 0 auto;
}

/* 横幅文本区域 */
.jzglBannersText {
    flex: none;
    height: 342px;
}

/* 横幅主标题样式 */
.jzglBannersText p {
    font-size: 48px;
    font-weight: bold;
    line-height: 82px;
    margin-bottom: 73px;
}

/* 横幅副标题样式 */
.jzglBannersText p b {
    display: block;
    font-size: 82px;
}

/* 横幅说明文字样式 */
.jzglBannersText i {
    font-size: 30px;
    line-height: 22px;
    font-style: normal;
    font-weight: 400;
}

/* 横幅右侧表单卡片 */
.jzglBannersAbout {
    width: 300px;
    height: 342px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 46px 20px 38px;
}

/* 表单卡片标题 */
.jzglBannersAbout h6 {
    font-size: 18px;
    height: 18px;
    margin-bottom: 20px;
    line-height: 18px;
    text-align: center;
    color: #1e1e1e;
}

/* 表单卡片统计文本 */
.jzglBannersAbout p {
    height: 14px;
    line-height: 14px;
    margin-bottom: 20px;
    font-weight: 400;
    text-align: center;
    color: #1e1e1e;
}

/* 统计数字强调样式 */
.jzglBannersAbout p em {
    font-style: normal;
    color: #ff5600;
    font-weight: bold;
}

/* 表单输入框样式 */
.jzglBannersAbout input[type="text"] {
    display: block;
    width: 100%;
    height: 44px;
    line-height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 2px;
    background: #f5f5f6;
    margin-bottom: 12px;
}

/* 表单提示文本 */
.jzglBannersAbout span {
    display: block;
    text-align: center;
    line-height: 14px;
    margin: 15px 0;
}

/* 表单提交按钮 */
.jzglBannersAbout button {
    display: block;
    width: 100%;
    height: 44px;
    background: #ff5600;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
}

/* ================================= 装修攻略主内容区域样式 ================================= */
/* 总布局容器 - 固定宽度1240px，居中显示，使用flex布局 */
.main-container {
    width: 1240px;
    margin: 0 auto;
    display: flex;
    gap: 20px;
}

/* 左侧内容区域 - 占3/4宽度 */
.left-column {
    flex: 3;
}

/* 右侧边栏 - 固定宽度300px */
.right {
    width: 300px;
}

/* 右侧表单区域 - 粘性定位，随滚动保持在视野内 */
.right-column {
    flex: 1;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* 内容模块容器 - 每个分类内容的外层容器 */
.jzglContent {
    width: 100%;
    margin-bottom: 20px;
}

/* 标题栏样式 */
.jzglHomeTitle {
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
}

/* 标题文本样式 */
.jzglHomeTitle h2 {
    display: inline-block;
    font-size: inherit;
    margin: 0;
}

/* 标题栏链接样式 */
.jzglHomeTitle a {
    margin-left: 30px;
    color: #484848;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
}

/* "查看更多"链接定位 */
.more {
    float: right;
}

/* 内容布局 - 使用flex布局排列大图文章和文章列表 */
.jzglHomeSwiperItem {
    display: flex;
}

/* 左侧大图文章容器 */
.jzglHomeSwiperNews {
    width: 400px;
    height: 476px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 15px;
    margin-right: 10px;
}

/* 大图文章链接样式 - 占满容器高度 */
.jzglHomeSwiperNews a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 大图文章图片样式 */
.jzglHomeSwiperNews img {
    width: 100%;
    height: 290px;
    border-radius: 6px;
    margin-bottom: 20px;
    object-fit: cover; /* 保持图片比例并覆盖容器 */
}

/* 大图文章标题 */
.jzglHomeSwiperNews h2 {
    font-size: 18px;
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 超出部分显示省略号 */
}

/* 大图文章描述 */
.jzglHomeSwiperNews p {
    flex: 1;
    color: #787878;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 最多显示3行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右侧文章列表容器 */
.article-list {
    flex: 1;
    height: 476px;
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    overflow: hidden;
    margin: 0;
}

/* 文章列表项样式 */
.article-list li {
    list-style: none;
    height: 108px;
    margin-bottom: 16px;
}

/* 文章链接样式 */
.article-list a {
    display: flex;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* 文章列表项图片 */
.article-list img {
    width: 158px;
    height: 98px;
    margin-right: 10px;
    border-radius: 6px;
    object-fit: cover;
    flex: none;
}

/* 文章列表项标题 */
.article-list h2 {
    font-size: 18px;
    margin: 8px 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 文章列表项描述 */
.article-list p {
    color: #787878;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 右侧表单容器 */
.jzglTui {
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 46px 20px 10px;
    box-sizing: border-box; /* 确保padding不影响总宽度 */
}

/* 表单标题 */
.jzglNewTitle {
    font-size: 18px;
    font-weight: bold;
    color: #1e1e1e;
    line-height: 18px;
    margin-bottom: 20px;
    text-align: center;
}

/* 统计文本 */
.jzglAboutMb20 {
    margin-bottom: 20px;
    color: #1e1e1e;
    text-align: center;
}

/* 统计数字强调 */
.jzglAboutMb20 span {
    color: #ff5600;
    font-weight: bold;
}

/* 表单元素容器 */
.jzglAbout p {
    color: #1e1e1e;
    text-align: center;
    margin-bottom: 12px;
}

/* 下拉选择框 & 输入框 通用样式 */
.jzglAboutName, .jzglAboutMobile {
    width: 100%;
    background: #f5f5f6;
    border-radius: 2px;
    height: 44px;
    border: none;
    padding: 0 26px 0 16px;
    box-sizing: border-box;
}

/* 下拉选择框样式 - 添加自定义下拉箭头 */
.jzglAboutName {
    appearance: none;
    background-image: url(https://ikj-storage-front-prod.oss-cn-beijing.aliyuncs.com/app/html-pc/jzgl/xl.png);
    background-repeat: no-repeat;
    background-position: 227px center;
    background-size: 14px 8px;
}

/* 提示文本 */
.jzglAboutTs {
    display: block;
    text-align: center;
    margin-bottom: 12px;
}

/* 按钮样式 */
.jzglAbout button {
    display: block;
    border: none;
    width: 100%;
    background: #ff5600;
    color: #fff;
    font-size: 18px;
    border-radius: 4px;
    cursor: pointer;
    height: 44px;
    line-height: 44px;
}

/* 右侧横幅链接样式 */
.jzglNewsBanner {
    display: block;
    width: 100%;
    height: 210px;
    margin-bottom: 16px;
    border-radius: 6px;
    overflow: hidden;
}

/* 右侧横幅图片样式 */
.jzglNewsBanner img {
    width: 100%;
    height: 100%;
    vertical-align: top;
}

/* 热门推荐列表样式 */
/* 序号样式 */
.news-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

/* 列表项悬停效果 */
.news-item:hover {
    background-color: #f9f9f9;
}

/* 序号样式 */
.news-index {
    font-size: 14px;
    width: 24px;
    text-align: center;
    font-weight: bold;
}

/* 新闻标题样式 */
.news-title {
    font-size: 14px;
    flex: 1;
    color: #333;
    text-decoration: none;
    line-height: 1.5;
}

/* 新闻标题悬停效果 */
.news-title:hover {
    color: #FF6900;
}

/* 序号颜色 - 前三名使用不同颜色突出显示 */
.index-1 { color: #FE2D46; }
.index-2 { color: #F60; }
.index-3 { color: #FAA90E; }
.index-4, .index-5, .index-6, .index-7, .index-8, .index-9, .index-10 { 
    color: #9195a3; 
}

/* 热门推荐标题样式 */
.jzglNewTitle {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

/* ================================= 导航栏菜单鼠标悬停出现二维码 ================================= */
        .qrcode-popup {
            position: absolute;
            padding: 10px;
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            z-index: 1000; /* 确保弹窗在最上层 */
            display: none;
            transform-origin: center top;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.2s ease-out; /* 显示/隐藏动画 */
        }
        
        .qrcode-popup.show {
            display: block;
            transform: scale(1);
            opacity: 1;
        }
        
        .qrcode-popup img {
            width: 160px;
            height: 160px;
            display: block;
        }
        
        .qrcode-popup .qrcode-desc {
            text-align: center;
            margin-top: 8px;
            color: #666;
            font-size: 12px;
        }
        
        /* 弹窗顶部三角形指示器 */
        .qrcode-popup::after {
            content: '';
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0 6px 6px;
            border-style: solid;
            border-color: transparent transparent #fff;
        }
        
        
        
/* ================================= 底部菜单鼠标悬停出现二维码 ================================= */
/* 二维码弹窗容器样式 - 用于展示官方商城/微信的二维码弹窗 */
.ycmjft_icon_consbox {
    padding: 20px 10px;
    background: #fff;
    width: 120px;
    height: 160px;
    position: absolute; /* 绝对定位，相对于父元素 */
    top: -210px;        /* 定位在触发元素上方 */
    left: -48px;
    border: 1px solid #eee;
    border-radius: 4px;
    display: none;      /* 默认隐藏 */
}

/* 二维码图片样式 */
.ycmjft_icon_consbox img {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

/* 二维码弹窗标题样式 */
.ycmjft_icon_consbox h2 {
    height: 20px;
    line-height: 20px;
    margin-top: 5px;
    text-align: center;
    font-size: 12px;
    color: #333;
}

/* 二维码弹窗描述样式 */
.ycmjft_icon_consbox p {
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #989898;
}



/* ================================= 装修攻略列表样式 ================================= */
    /* 全局背景样式 */


    /* 容器样式 - 装修阶段导航容器 */
    .jzglChange {
        margin: 0 auto 15px;
        padding: 0 20px;
        background: #fff;
        border-radius: 8px;
    }
    
    /* 项目项样式 - 导航项容器 */
    .jzglChangeItem {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 6px 0;
        height: 52px;
        line-height: 40px;
    }
    
    /* 最后一项移除下边框 - 避免多余边框 */
    .jzglChangeItem:last-child {
        border: none;
    }
    
    /* 标题样式 - 导航区域标题 */
    .jzglChangeItem h6 {
        font-size: 14px;
        margin-right: 30px;
        margin: 0 30px 0 0; /* 重置默认margin */
        font-weight: normal;
    }
    
    /* 链接通用样式 - 导航项链接 */
    .jzglChangeItem a {
        font-weight: 500;
        color: #787878;
        margin-right: 28px;
        cursor: pointer;
        text-decoration: none; /* 移除默认下划线 */
    }
    
    /* 最后一个链接移除右侧间距 - 避免容器右侧多余空间 */
    .jzglChangeItem a:last-child {
        margin-right: 0;
    }
    
    /* 激活状态样式 - 当前选中导航项 */
    .jzglChangeItem a.active {
        color: #ff5600;
    }
    
    /* 链接悬停效果 - 提升交互体验 */
    .jzglChangeItem a:hover {
        color: #ff5600;
    }

    /* 列表内容样式 - 文章列表容器 */
    .decor-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .decor-list li {
        margin-bottom: 15px;
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
    }
    
    .decor-link {
        display: flex;
        text-decoration: none;
        color: inherit;
        transition: transform 0.2s;
    }
    
    .decor-link:hover {
        transform: translateY(-2px);
    }
    
    .decor-img {
        flex: none;
        width: 200px;
        height: 150px;
        margin-right: 15px;
        object-fit: cover;
        border-radius: 4px; /* 增加图片圆角 */
    }
    
    .jzglListItem {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        overflow: hidden;
    }
    
    .jzglTitle {
        font-size: 20px;
        line-height: 22px;
        height: 22px;
        width: 100%;
        margin: 0 0 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        transition: color 0.2s;
    }
    
    .decor-link:hover .jzglTitle {
        color: #FF6900; /* 标题hover效果 */
    }
    
    .jzglInfo {
        color: #787878;
        line-height: 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4; /* 最多显示4行文本 */
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0; /* 移除默认margin */
    }
    
    .jzglTimes {
        margin-top: 10px;
    }
    
    .source-text {
        font-size: 12px;
        color: #787878;
        margin-right: 18px;
    }

    /* 主容器样式 - 内容区域主容器 */
    .zxglContent {
        display: flex;
        margin: 0 auto;
        padding: 0 0 100px;
    }
    
    /* 左侧列表区域 - 文章列表主容器 */
    .jzglList {
        flex: 1;
        margin-right: 15px;
        overflow: hidden;
    }
    
    /* 右侧边栏 - 侧边栏容器 */
    .jzglNews {
        flex: none;
        width: 300px;
    }
    
    .jzglNewsItem {
        background-color: #f5f6fa;
        border-radius: 6px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .jzglNewTitle {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .jzglAboutMb20 {
        text-align: center;
        margin-bottom: 20px;
        color: #333;
    }
    
    .jzglAboutMb20 span {
        color: #ff5600;
        font-weight: bold;
    }
    
    .jzglAboutCity, .jzglAboutArea, .jzglAboutMobile {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    .jzglAboutArea {
        padding-right: 30px;
    }
    
    .jzglAboutArea + em {
        position: relative;
        left: -30px;
        color: #787878;
    }
    
    .viewTitle {
        margin: 10px 0;
        font-size: 12px;
        color: #787878;
    }
    
    .viewTitle a {
        color: #ff5600;
        text-decoration: none;
    }
    
    .jzglNewsItem button {
        width: 100%;
        padding: 12px;
        background-color: #ff5600;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .jzglNewsItem button:hover {
        background-color: #e04a00;
    }
    
    /* 表单标题 */
    .jzglNewTitle {
        font-size: 18px;
        font-weight: bold;
        color: #1e1e1e;
        line-height: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    /* 统计文本 */
    .jzglAboutMb20 {
        margin-bottom: 20px;
        color: #1e1e1e;
        text-align: center;
    }
    
    .jzglAboutMb20 span {
        color: #ff5600;
        font-weight: bold;
    }
    
    /* 表单元素容器 */
    .jzglAbout p {
        color: #1e1e1e;
        text-align: center;
        margin-bottom: 12px;
    }
    
    /* 下拉选择框 & 输入框 通用样式 */
    .jzglAboutName, .jzglAboutMobile {
        width: 100%;
        background: #f5f5f6;
        border-radius: 2px;
        height: 44px;
        border: none;
        padding: 0 26px 0 16px;
        box-sizing: border-box;
    }
    
    .jzglAboutName {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.5L7 6.5L13 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 227px center;
        background-size: 14px 8px;
    }
    
    /* 提示文本 */
    .jzglAboutTs {
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
    
    /* 按钮样式 */
    .jzglAbout button {
        display: block;
        border: none;
        width: 100%;
        background: #ff5600;
        color: #fff;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
        height: 44px;
        line-height: 44px;
    }
    
    /* 右侧表单区域 - 跟随滚动 */
    .zxglright-column {
        flex: 1;
        position: sticky;
        top: 20px;
        align-self: flex-start;
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
    }

    /* 横幅链接样式 */
    .jzglNewsBanner {
        display: block;
        width: 100%;
        height: 210px;
        margin-bottom: 16px;
        border-radius: 6px;
        overflow: hidden;
    }
    
    /* 横幅图片样式 */
    .jzglNewsBanner img {
        width: 100%;
        height: 100%;
        vertical-align: top;
    }

    /* 序号样式 - 热门推荐列表 */
    .news-item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        transition: all 0.3s ease;
    }
    
    .news-item:hover {
        background-color: #f9f9f9;
    }
    
    .news-index {
        font-size: 14px;
        width: 24px;
        text-align: center;
        font-weight: bold;
    }
    
    .news-image {
        width: 80px;
        height: 60px;
        margin: 0 10px;
        border-radius: 4px;
        object-fit: cover;
    }
    
    .news-title {
        font-size: 14px;
        flex: 1;
        color: #333;
        text-decoration: none;
        line-height: 1.5;
    }
    
    .news-title:hover {
        color: #FF6900;
    }
    
    /* 序号颜色 - 前三名特殊颜色标识 */
    .index-1 { color: #FE2D46; }
    .index-2 { color: #F60; }
    .index-3 { color: #FAA90E; }
    .index-4, .index-5, .index-6, .index-7, .index-8, .index-9, .index-10{ color: #9195a3; } /* 4-10序号使用默认#9195a3 */
    
    .jzglNewTitle {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 15px;
        color: #333;
        padding-bottom: 8px;
        border-bottom: 2px solid #f0f0f0;
    }

    /* 主容器样式 - 服务项目区域 */
    .sxzxMain {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    /* 标题区域样式 */
    .sxzxMainTitle {
        font-size: 30px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #111111;
        margin-top: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    .sxzxMainTitle p {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #484848;
        margin-top: 19px;
    }
    
    /* 服务项目容器 */
    .styleLife {
        width: 1200px;
        margin-top: 66px;
        margin-bottom: 125px;
        display: flex;
        flex-direction: row;
    }
    
    /* 服务项通用样式 */
    .tasabs {
        width: 290px;
        height: 366px;
        margin-right: 14px;
        position: relative;
    }
    
    /* 图片容器样式 */
    .scrolImg {
        width: 290px;
        height: 366px;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .scrolImg img {
        width: 100%;
        transition: all 0.3s;
    }
    
    /* 服务项描述卡片 */
    .jincnbaojia {
        width: 250px;
        height: 84px;
        position: absolute;
        bottom: -26px;
        left: 20px;
        background: #ffffff;
        box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    /* 服务项标题 */
    .titleImgsto {
        font-size: 22px;
        font-weight: bold;
        color: #010101;
        line-height: 30px;
    }
    
    /* 服务项说明文字 */
    .titlelSele {
        font-size: 14px;
        font-weight: 400;
        color: #010101;
        line-height: 30px;
    }
    
    /* 预约表单卡片样式 */
    .tasabs.orgin {
        background: #ff6400;
        border: 1px solid rgba(228, 228, 228, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 30px;
        margin-right: 0;
        height: 334px;
    }
    
    /* 预约卡片标题 */
    .fro3 {
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
        line-height: 30px;
        margin-bottom: 22px;
    }
    
    /* 表单项目样式 */
    .itemfrom {
        width: 240px;
        height: 25px;
        background: #ffffff;
        border-radius: 6px;
        margin-top: 10px;
        padding: 14px 17px;
        display: flex;
        flex-direction: row;
    }
    
    /* 表单图标 */
    .iconsto {
        width: 22px;
        height: 24px;
    }
    
    /* 表单分隔线 */
    .dredep {
        width: 1px;
        height: 25px;
        margin-left: 17px;
        background: #787878;
        display: inline-block;
    }
    

    /* 提交按钮容器 */
    .sumbit2 {
        /* 继承jincnbaojia样式并可在此添加额外样式 */
    }
    
    /* 提交按钮 */
    .btns {
        background-color: #ffffff;
        color: #ff6400;
        padding: 8px 20px;
        border-radius: 4px;
        cursor: pointer;
    }
    
    /* 服务项图片悬停放大效果 */
    .tasabs .scrolImg:hover img {
        cursor: pointer;
        transform: scale(1.2);
        transition: all 0.3s;
    }









/* ================================= 文章内容页样式 ================================= */

    /* 弹性布局 - 两端对齐 */
    .justify-between {
        display: flex;
        justify-content: space-between;
    }
    
    /* 分页导航样式 */
    .pageNav {
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }

    /* 信息文本样式 - 用于分页导航文本 */
    .info {
        width: 413px;
        color: rgba(120, 120, 120, 1);
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }

    /* 容器样式 - 主要内容容器 */
    .container{
        margin: 15px 0;
    }
    
    /* 头部样式 - 文章标题区域 */
    .header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }
    
    .header .title {
        font-size: 24px;
    }
    
    /* 元信息样式 - 文章分类、阅读量等 */
    .meta-info {
        color: #7f8c8d;
        font-size: 14px;
    }
    
    .meta-info span {
        margin-right: 20px;
        display: inline-flex;
        align-items: center;
    }
    
    .meta-info i {
        margin-right: 5px;
    }
    
    /* 主内容区样式 - 左右分栏布局 */
    .main-content {
        display: flex;
        gap: 20px;
    }
    
    /* 文章内容区样式 */
    .article-content {
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
        height: 100%;
    }
    
    /* 文章段落样式 */
    .article-content p {
        margin-bottom: 1.5rem;
        font-size: 16px;
        color: #555;
    }
    
    /* 文章二级标题样式 */
    .article-content h2 {
        font-size: 22px;
        margin: 2rem 0 1rem;
        color: #2c3e50;
        position: relative;
        padding-bottom: 10px;
    }
    
    /* 标题下划线装饰 */
    .article-content h2:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #3498db;
    }
    
    /* 文章图片自适应 */
    .article-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* 引用样式 */
    .quote {
        border-left: 4px solid #3498db;
        padding: 10px 15px;
        margin: 1.5rem 0;
        background-color: #f5f7fa;
        color: #666;
        font-style: italic;
    }
    
    /* 侧边栏样式 */
    .sidebar {
        width: 300px;
    }
    
    /* 侧边栏模块容器 */
    .sidebar-module {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
    }
    
    /* 侧边栏标题样式 */
    .sidebar-title {
        font-size: 18px;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    /* 标题底部装饰线 */
    .sidebar-title:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 40px;
        height: 2px;
        background-color: #FF6900;
    }
    
    /* 相关推荐文章样式 */
    .related-article {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: transform 0.2s ease;
    }
    
    /* 最后一项移除边框和间距 */
    .related-article:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    /* 相关文章悬停效果 */
    .related-article:hover {
        transform: translateX(5px);
    }
    
    .related-article a {
        color: #34495e;
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
    }
    
    .related-article a:hover {
        color: #3498db;
    }
    
    /* 猜你喜欢模块 - 固定定位跟随滚动 */
    .guess-like {
        position: sticky;
        top: 0px;
    }
    
    /* 猜你喜欢列表项 */
    .like-item {
        display: flex;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: all 0.3s ease;
    }
    
    /* 最后一项移除边框和间距 */
    .like-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    /* 悬停效果 */
    .like-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    /* 文章缩略图容器 */
    .like-img {
        width: 80px;
        height: 60px;
        flex-shrink: 0;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .like-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    /* 图片悬停放大效果 */
    .like-item:hover .like-img img {
        transform: scale(1.1);
    }
    
    /* 文章信息容器 */
    .like-info {
        flex: 1;
    }
    
    /* 文章标题 */
    .like-title {
        font-size: 14px;
        color: #34495e;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 5px;
        transition: color 0.2s;
    }
    
    .like-item:hover .like-title {
        color: #3498db;
    }
    
    /* 元信息 */
    .like-meta {
        font-size: 12px;
        color: #95a5a6;
    }
    
    /* 文章底部样式 */
    .article-footer {
        padding: 20px 20px;
        border-top: 1px solid #eee;
    }
    
    /* 文章内容容器 */
    .viewthread{
        padding: 20px;
    }
    
    /* 文章信息行 */
    .article-info{
        height: 25px;
        line-height: 40px;
        padding: 0;
        color: #999;  
    }
    
    .article-info span{
        display: inline-block;
        height: 15px;
        line-height: 15px;
    }

    /* 底部表单容器样式 */
    .fcontainer {
        max-width: 1200px;
        margin: 0 auto;
        background-color: white;
        padding: 30px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    /* 标题区域样式 */
    .title-section {
        margin-bottom: 30px;
    }
    
    .main-title {
        font-size: 28px;
        color: #333;
        margin-bottom: 10px;
    }
    
    .subtitle {
        font-size: 16px;
        color: #666;
        line-height: 1.5;
    }
    
    .phone-number {
        font-weight: bold;
        color: #333;
    }
    
    /* 表单布局样式 */
    .form-container {
        display: flex;
        flex-wrap: nowrap; /* 不换行，保持在同一行 */
        gap: 15px;
        width: 100%;
    }
    
    .form-field {
        flex: 1; /* 每个元素平均分配空间 */
        min-width: 0; /* 允许元素缩小到内容大小 */
    }
    
    /* 输入框和选择框样式 */
    input, select {
        width: 100%;
        height: 45px;
        padding: 0 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box; /* 确保padding不影响总宽度 */
    }
    
    input::placeholder {
        color: #999;
    }
    
    /* 聚焦状态样式 */
    input:focus, select:focus {
        outline: none;
        border-color: #ff6400;
    }
    
    /* 提交按钮样式 */
    .submit-btn {
        background-color: #ff6400;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 0 15px;
        height: 45px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
        width: 100%;
        box-sizing: border-box;
    }
    
    .submit-btn:hover {
        background-color: #e55a00;
    }
    
    /* 响应式调整 - 小屏幕适配 */
    @media (max-width: 768px) {
        .form-container {
            flex-wrap: wrap; /* 小屏幕下自动换行 */
        }
        
        .form-field {
            min-width: 100%; /* 小屏幕下每个元素占满一行 */
        }
        
        .main-title {
            font-size: 24px;
        }
        
        .container {
            padding: 20px;
        }
    }
    
    /* 表单标题 */
    .jzglNewTitle {
        font-size: 18px;
        font-weight: bold;
        color: #1e1e1e;
        line-height: 18px;
        margin-bottom: 20px;
        text-align: center;
    }
    
    /* 统计文本 */
    .jzglAboutMb20 {
        margin-bottom: 20px;
        color: #1e1e1e;
        text-align: center;
    }
    
    .jzglAboutMb20 span {
        color: #ff5600;
        font-weight: bold;
    }
    
    /* 表单元素容器 */
    .jzglAbout p {
        color: #1e1e1e;
        text-align: center;
        margin-bottom: 12px;
    }
    
    /* 下拉选择框 & 输入框 通用样式 */
    .jzglAboutName, .jzglAboutMobile {
        width: 100%;
        background: #f5f5f6;
        border-radius: 2px;
        height: 44px;
        border: none;
        padding: 0 26px 0 16px;
        box-sizing: border-box;
    }
    
    /* 下拉框箭头图标 */
    .jzglAboutName {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1.5L7 6.5L13 1.5' stroke='%23666666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 227px center;
        background-size: 14px 8px;
    }
    
    /* 提示文本 */
    .jzglAboutTs {
        display: block;
        text-align: center;
        margin-bottom: 12px;
    }
    
    /* 按钮样式 */
    .jzglAbout button {
        display: block;
        border: none;
        width: 100%;
        background: #ff5600;
        color: #fff;
        font-size: 18px;
        border-radius: 4px;
        cursor: pointer;
        height: 44px;
        line-height: 44px;
    }
    
    






/* ================================= 效果图内容页样式 ================================= */
    /* 弹性布局 - 两端对齐 */
    .ysimg-justify-between {
        display: flex;
        justify-content: space-between;
    }
    
    /* 分页导航样式 */
    .ysimg-pageNav {
        display: flex;
        flex-direction: row;
        cursor: pointer;
    }

    /* 信息文本样式 - 单行省略 */
    .ysimg-info {
        width: 413px;
        color: rgba(120, 120, 120, 1);
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    
    /* 推荐列表容器样式 */
    .ysimg-jzglTui {
        width: 100%;
        border: 0px solid #e5e5e5;
        border-radius: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    /* 输入框和选择框样式 */
    .ysimg-input, .ysimg-select {
        width: 100%;
        height: 45px;
        padding: 0 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
    }

    /* 容器样式 - 上下外边距 */
    .ysimg-container{
        margin: 15px 0;
    }
    
    /* 头部样式 */
    .ysimg-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }
    
    .ysimg-header .ysimg-title {
        font-size: 24px;
    }
    
    .ysimg-meta-info {
        color: #7f8c8d;
        font-size: 14px;
    }
    
    .ysimg-meta-info span {
        margin-right: 20px;
        display: inline-flex;
        align-items: center;
    }
    
    .ysimg-meta-info i {
        margin-right: 5px;
    }
    
    /* 主内容区样式 - 弹性布局 */
    .ysimg-main-content {
        display: flex;
        gap: 20px;
    }
    
    /* 文章内容区 - 占主要宽度 */
    .ysimg-article-content {
        flex: 1;
        background-color: #fff;
        border-radius: 8px;
        height: 100%;
    }
    
    .ysimg-article-content p {
        margin-bottom: 1.5rem;
        font-size: 16px;
        color: #555;
    }
    
    .ysimg-article-content h2 {
        font-size: 22px;
        margin: 2rem 0 1rem;
        color: #2c3e50;
        position: relative;
        padding-bottom: 10px;
    }
    
    .ysimg-article-content h2:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #3498db;
    }
    
    .ysimg-article-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* 引用样式 */
    .ysimg-quote {
        border-left: 4px solid #3498db;
        padding: 10px 15px;
        margin: 1.5rem 0;
        background-color: #f5f7fa;
        color: #666;
        font-style: italic;
    }
    
    /* 侧边栏样式 - 固定宽度 */
    .ysimg-sidebar {
        width: 300px;
    }
    
    .ysimg-sidebar-module {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
    }
    
    .ysimg-sidebar-title {
        font-size: 18px;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    .ysimg-sidebar-title:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 40px;
        height: 2px;
        background-color: #FF6900;
    }
    
    /* 相关推荐样式 */
    .ysimg-related-article {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: transform 0.2s ease;
    }
    
    .ysimg-related-article:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .ysimg-related-article:hover {
        transform: translateX(5px);
    }
    
    .ysimg-related-article a {
        color: #34495e;
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
    }
    
    .ysimg-related-article a:hover {
        color: #3498db;
    }
    
    /* 猜你喜欢样式 - 粘性定位 */
    .ysimg-guess-like {
        position: sticky;
        top: 0px;
    }
    
    .ysimg-like-item {
        display: flex;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: all 0.3s ease;
    }
    
    .ysimg-like-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    .ysimg-like-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .ysimg-like-img {
        width: 80px;
        height: 60px;
        flex-shrink: 0;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .ysimg-like-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    .ysimg-like-item:hover .ysimg-like-img img {
        transform: scale(1.1);
    }
    
    .ysimg-like-info {
        flex: 1;
    }
    
    .ysimg-like-title {
        font-size: 14px;
        color: #34495e;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 5px;
        transition: color 0.2s;
    }
    
    .ysimg-like-item:hover .ysimg-like-title {
        color: #3498db;
    }
    
    .ysimg-like-meta {
        font-size: 12px;
        color: #95a5a6;
    }
    
    /* 文章底部样式 */
    .ysimg-article-footer {
        padding: 20px 20px;
        border-top: 1px solid #eee;
    }
    
    .ysimg-viewthread {
        padding: 20px;
    }
    
    .ysimg-article-info {
        height: 25px;
        line-height: 40px;
        padding: 0;
        color: #999;  
    }
    
    .ysimg-article-info span {
        display: inline-block;
        height: 15px;
        line-height: 15px;
        border-right: 1px solid #ccc;
        padding: 0 12px 0 12px;
    }
    
    /* 图片浏览主容器 */
    .ysimg-page-container {
        margin: 0 auto;
        background-color: #fff;
        min-height: 100vh;
        overflow: hidden;
    }
    
    /* 图片显示区域 - 黑色背景，居中显示 */
    .ysimg-image-container {
        width: 100%;
        background-color: #000;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
        height: 50vh;
        cursor: zoom-in;
        overflow: hidden;
    }
    
    /* 图片交互区域 - 用于捕获点击和滑动事件 */
    .ysimg-image-click-area {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 4;
    }
    
    /* 主图片样式 - 支持过渡动画 */
    .ysimg-main-image {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.0), opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1.0);
        z-index: 3;
        position: absolute;
        will-change: transform, opacity;
        transform: translateZ(0);
    }
    
    /* 图片信息区域 */
    .ysimg-image-info {
        padding: 0;
        background-color: #fff;
    }
    
    .ysimg-image-title {
        font-size: 17px;
        color: #1D1D1F;
        margin-bottom: 8px;
        font-weight: 500;
    }
    
    .ysimg-image-desc {
        font-size: 14px;
        color: #6E6E73;
        line-height: 1.4;
    }
    
    /* 控制按钮区域 - 居中排列 */
    .ysimg-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        background-color: #fff;
        border-top: 1px solid #E5E5EA;
    }
    
    /* 控制按钮基础样式 */
    .ysimg-control-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 6px;
        border: none;
        background-color: #F5F5F7;
        color: #1D1D1F;
        font-size: 20px;
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    
    /* 主要操作按钮样式 */
    .ysimg-control-btn--primary {
        background-color: #FF6900;
        color: white;
    }
    
    /* 按钮点击效果 */
    .ysimg-control-btn:active {
        background-color: #E5E5EA;
        transform: scale(0.95);
    }
    
    .ysimg-control-btn--primary:active {
        background-color: #ff8936;
    }
    
    /* 图片计数显示 */
    .ysimg-counter {
        margin: 0 12px;
        color: #6E6E73;
        font-size: 14px;
        padding: 6px 12px;
        border-radius: 16px;
        background-color: #F5F5F7;
    }
    
    /* 缩略图区域 */
    .ysimg-thumbnails-section {
        padding: 20px 0;
        background-color: #fff;
        position: relative;
    }
    
    .ysimg-thumbnails-container {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    /* 图集导航按钮 */
    .ysimg-album-nav-btn {
        width: 36px;
        height: 60px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: #F5F5F7;
        border: none;
        color: #1D1D1F;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .ysimg-album-nav-btn:hover {
        background-color: #E5E5EA;
    }
    
    .ysimg-album-nav-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: #F5F5F7;
    }
    
    /* 缩略图滚动容器 */
    .ysimg-thumbnails {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
        flex: 1;
    }
    
    /* 自定义滚动条 */
    .ysimg-thumbnails::-webkit-scrollbar {
        height: 3px;
    }
    
    .ysimg-thumbnails::-webkit-scrollbar-thumb {
        background-color: #E5E5EA;
        border-radius: 3px;
    }
    
    /* 缩略图样式 */
    .ysimg-thumbnail {
        width: 80px;
        height: 60px;
        flex-shrink: 0;
        border-radius: 8px;
        object-fit: cover;
        opacity: 0.7;
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }
    
    /* 当前选中的缩略图 */
    .ysimg-thumbnail.ysimg-active {
        opacity: 1;
        border-color: #FF6900;
        box-shadow: 0 0 0 1px #FF6900;
    }
    
    .ysimg-thumbnail:hover {
        opacity: 1;
    }
    
    /* 分享菜单容器 */
    .ysimg-share-menu {
        position: relative;
    }
    
    /* 分享选项下拉框 */
    .ysimg-share-options {
        position: absolute;
        bottom: 100%;
        right: 0;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        width: 200px;
        z-index: 100;
        display: none;
        overflow: hidden;
    }
    
    /* 分享选项项 */
    .ysimg-share-option {
        padding: 12px 16px;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #1D1D1F;
        transition: background-color 0.2s;
    }
    
    .ysimg-share-option:active {
        background-color: #F5F5F7;
    }
    
    .ysimg-share-option svg {
        margin-right: 12px;
        width: 20px;
        height: 20px;
    }
    
    /* 滑动提示 */
    .ysimg-swipe-hint {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 10;
        pointer-events: none;
        backdrop-filter: blur(4px);
    }
    
    /* 加载指示器 - 旋转动画 */
    .ysimg-loading {
        position: absolute;
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #FF6900;
        animation: ysimg-spin 1s linear infinite;
        z-index: 5;
        display: none;
    }
    
    @keyframes ysimg-spin {
        to { transform: rotate(360deg); }
    }
    
    /* 隐藏Fancybox锚点 */
    [data-fancybox] {
        /*display: none;*/
    }
    
    /* SVG图标样式 */
    .ysimg-icon-svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
    }
    
    /* iOS风格提示框 */
    .ysimg-ios-toast {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 12px 20px;
        border-radius: 10px;
        font-size: 16px;
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        backdrop-filter: blur(10px);
    }
    
    .ysimg-ios-toast.ysimg-show {
        opacity: 1;
    }
    
    /* 操作引导样式 */
    .ysimg-guide-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
    .ysimg-guide-overlay.ysimg-show {
        opacity: 1;
        pointer-events: auto;
    }
    
    .ysimg-guide-content {
        background-color: #fff;
        border-radius: 16px;
        padding: 24px;
        max-width: 300px;
        width: 90%;
        text-align: center;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    
    .ysimg-guide-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 20px;
        color: #1D1D1F;
    }
    
    .ysimg-guide-items {
        margin-bottom: 24px;
        text-align: left;
    }
    
    .ysimg-guide-item {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        padding: 8px 0;
    }
    
    .ysimg-guide-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        color: #FF6900;
        flex-shrink: 0;
    }
    
    .ysimg-guide-item span {
        font-size: 15px;
        line-height: 1.4;
    }
    
    .ysimg-guide-close {
        background-color: #FF6900;
        color: white;
        border: none;
        border-radius: 20px;
        padding: 8px 24px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    
    .ysimg-guide-close:active {
        background-color: #ff8936;
    }
    
    /* 响应式调整 - 平板及以上设备 */
    @media (min-width: 768px) {
        .ysimg-image-container {
            height: 60vh;
        }
        
        .ysimg-thumbnail {
            width: 90px;
            height: 68px;
        }
    }
    
    /* 响应式调整 - 移动设备 */
    @media (max-width: 767px) {
        .ysimg-controls {
            padding-bottom: calc(12px + env(safe-area-inset-bottom));
        }
        
        .ysimg-album-nav-btn {
            width: 30px;
            height: 50px;
        }
    }
    
    
    
    
/* ================================= 客户服务页面样式 ================================= */    
        /* 通用工具类 */
        .overflow-hidden {
            overflow: hidden;
        }
        
        .float-left {
            float: left;
        }
        
        .position-relative {
            position: relative;
        }
        
        .position-absolute {
            position: absolute;
        }
        
        /* 清除浮动：用于包含浮动元素的父容器 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
        
        /* ==================================================
           服务帮助列表模块样式 - 仅用于服务列表部分
        ================================================== */
        
        /* 列表模块主容器 */
        .main.service-help {
            padding: 20px 0 0 0;
            width: 1240px; /* 固定宽度 */
            margin: 0 auto; /* 水平居中 */
        }
        
        /* 服务列表容器 */
        .service-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin: 0 auto;
    gap: 20px;
            list-style: none; /* 移除默认列表样式 */
        }
        
        /* 列表项样式 */
        .service-item {
width: 25%;
    margin: 0 0 30px 0;
    background: #ffffff;
    display: block;
    height: 290px;
    border-radius: 8px;
        }
        
        /* 列表项链接样式 */
        .service-link {
            padding: 20px 15px 30px; /* 内边距 */
            display: block; /* 转为块级元素，可点击区域更大 */
            transition: all 0.3s linear; /* 过渡动画 */
            text-decoration: none; /* 移除下划线 */
            height: 100%; /* 高度100%，确保填充整个列表项 */
        }
        
        /* 图标容器 */
        .service-icon {
    width: 72px;
    height: 72px;
    margin: 15px auto 0;
    position: relative;
    overflow: hidden;
    display: block;
        }
        
        /* 图标图片样式 */
        .service-icon-img {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            transition: all 0.3s linear; /* 过渡动画 */
            position: absolute; /* 绝对定位，使两张图片重叠 */
        }
        
        /* 悬停状态的图标默认隐藏 */
        .service-icon-img.hover {
            opacity: 0;
        }
        
        /* 服务标题样式 */
        .service-title {
            margin-top: 15px;
            font-weight: normal;
            font-size: 20px;
            color: #333;
            line-height: 30px;
            text-align: center;
            transition: all 0.3s linear; /* 过渡动画 */
        }
        
        /* 服务描述文本样式 */
        .service-desc {
            margin-top: 10px;
            font-size: 14px;
            color: #969696;
            line-height: 22px;
            height: 66px; /* 固定高度，确保各行对齐 */
            text-align: center;
            transition: all 0.3s linear; /* 过渡动画 */
        }
        
        /* 鼠标悬停效果 */
        .service-link:hover {
            background-color: #FF6900;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
            /*transform: translateY(-2px); /* 轻微上浮 */
        }
        
        /* 悬停时切换图标显示状态 */
        .service-link:hover .service-icon-img.default {
            opacity: 0;
        }
        
        .service-link:hover .service-icon-img.hover {
            opacity: 1;
        }
        
        /* 悬停时改变标题颜色 */
        .service-link:hover .service-title {
            color: #FFF;
        }
        
        /* 悬停时改变描述文本颜色 */
        .service-link:hover .service-desc {
            color: #FFF;
        }
        
        /* ==================================================
           服务中心页脚模块样式 - 仅用于页脚部分
        ================================================== */
        
        /* 页脚主容器 */
        .content.contentTextFooter {
            /*background: #fff;*/
            width: 1240px; /* 与列表模块保持一致宽度 */
            margin: 15px auto; /* 水平居中，与上方列表留出间距 */
            padding: 0 0 20px 0; /* 上下内边距 */
        }
        
        /* 页脚内容容器 */
        .contentText {
            width: 100%; /* 适应父容器宽度 */
        }
        
        /* 页脚整体布局容器 */
        .servicecentreFooter {
            width: 100%;
        }
        
        /* 页脚左侧电话区域 */
        .servicecentreFooterLeft {
            background: url(https://www.unispc.com/images/bg-servicecentreFooterLeft.jpg) right top no-repeat;
            float: left;
            width: 1160px; /* 占一半宽度 */
            padding: 26px 40px; /* 内边距 */
            background-size: 100% auto; /* 背景图自适应 */
            min-height: 280px; /* 固定最小高度，确保与右侧对齐 */
                border-radius: 8px;
        }
        
        /* 高度占满父容器 */
        .servicecentreFooterHeight {
            height: 100%;
        }
        
        /* 电话文本样式 */
        .tel p {
            color: #fff;
            font-size: 22px;
        }
        
        /* 电话号码样式 */
        .tel h4 {
            color: #fff;
            font-size: 30px;
            margin: 6px 0; /* 上下间距 */
        }
        
        /* 电话号码链接样式 */
        .tel h4 a {
            color: #fff;
            font-size: 30px;
            text-decoration: none; /* 移除下划线 */
        }
        
        /* 分隔线样式 */
        .telLine {
            padding-top: 31px;
            margin-bottom: 31px;
            border-bottom: 1px solid #fff; /* 白色分隔线 */
            display: block;
            width: 211px; /* 固定宽度 */
        }
        
        /* 移除底部外边距 */
        .tel.mb-0 {
            margin-bottom: 0;
        }
        
        /* 页脚右侧区域 */
        .r49 {
            float: right;
            width: 48%; /* 略小于50%，避免与左侧重叠 */
        }
        
        /* 右侧服务项样式 */
        .servicecentretelmail {
            float: left;
            width: 49%; /* 每个占右侧区域的一半 */
            background: #FFF; /* 浅灰色背景 */
            padding: 45px 0; /* 上下内边距 */
            min-height: 280px; /* 与左侧保持相同高度 */
                border-radius: 8px;
        }
        
        /* 第一个服务项右侧留出间距 */
        .servicecentretelmail:first-child {
            margin-right: 2%;
        }
        
        /* 右侧服务项标题 */
        .servicecentretelmail h4 {
            color: #FF6900;
            font-size: 30px;
            text-align: center; /* 文字居中 */
            margin: 0;
        }
        
        /* 图标容器样式 */
        .servicecentreFooterimg.mailtoImg {
            padding: 29px 0 0 0;
            text-align: center; /* 图标居中 */
        }
        
        /* 图标图片大小 */
        .servicecentreFooterimg img {
            width: 98px;
        }
        
        /* 文本链接容器 */
        .mailtoText {
            text-align: center;
            margin: 10px 0;
        }
        
        /* 文本链接样式 */
        .mailtoText a {
            color: #FF6900;
            font-size: 20px;
            background: 0 0; /* 无背景 */
            padding: 0;
            margin-top: 0;
            text-decoration: none; /* 移除下划线 */
        }
        
        /* 块级链接样式 */
        .mailtoText a.block {
            display: inline-block;
            border-radius: 5px; /* 圆角 */
        }
        
        /* 按钮容器样式 */
        .lineServier, .email-action {
            text-align: center; /* 按钮居中 */
        }
        
        /* 按钮样式 */
        .lineServier a, .email-action a {
            color: #fff;
            font-size: 20px;
            background: #FF6900; /* 紫色背景 */
            display: inline-block;
            border-radius: 5px; /* 圆角 */
            padding: 5px 20px; /* 内边距 */
            margin-top: 4px;
            text-decoration: none; /* 移除下划线 */
            transition: background-color 0.3s; /* 背景色过渡 */
        }
        
        /* 按钮悬停效果 */
        .lineServier a:hover, .email-action a:hover {
            background: #ff69008c; /* 深一点的紫色 */
        }
        
/* ================================= 免费报价页样式 ================================= */
    /* 清除浮动通用样式 */
    .ysbj-clear::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* 阴影效果样式 */
    .ysbj-box-shadow {
        box-shadow: 0 4px 20px rgba(210, 1, 1, .1);
    }
    
    /* 主容器样式 */
    .ysbj-fzzhaobiao.ysbj-yusg {
        width: 100%;
    }
    
    /* 信息区域样式 */
    .ysbj-info-b.ysbj-c {
        height: 778px;
        width: 100%;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
    }
    
    /* 背景图片样式 */
    .ysbj-imgbg {
        height: 642px;
        display: block;
        position: absolute;
        left: 50%;
        top: 0;
        margin: 0 0 0 -960px;
        width: 1920px;
    }
    
    /* 表单区域样式 */
    .ysbj-info-imgimg {
        width: 100%;
        max-width: 1920px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }
    
    .ysbj-yusbj {
        position: absolute;
        top: 60px;
        left: 50%;
        margin: 0 0 0 -490px;
        width: 980px;
    }
    
    .ysbj-yusbg.ysbj-box-shadow {
        margin-top: 109px;
        height: 297px;
        width: 930px;
        padding: 35px 25px;
        position: relative;
        border: 0;
        background: #fff;
        border-radius: 2px;
    }
    
    .ysbj-yuszb {
        margin: 0;
        position: relative;
        padding: 0;
        width: 100%;
        height: 100%;
    }
    
    /* 为什么了解报价区域样式 */
    .ysbj-yus-b {
        width: 100%;
        margin: 0;
        background: #ffffff;
        padding: 30px 0;
    }
    
    .ysbj-infotitle {
        padding-bottom: 40px;
        width: 100%;
        margin: 0;
        text-align: center;
        line-height: 30px;
    }
    
    .ysbj-infotitle h2 {
        display: block;
        color: #333;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 2px;
    }
    
    .ysbj-infoconta {
        margin: 0;
        padding-bottom: 40px;
    }
    
    .ysbj-info-ee.ysbj-clear {
        width: 1200px;
        margin: 0 auto;
        position: relative;
    }
    
    .ysbj-info-eelist {
        margin: 0;
        float: left;
        position: relative;
        width: 270px;
        height: 325px;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(210, 1, 1, .1);
        margin-right: 30px;
    }
    
    /* 最后一个列表项去除右边距 */
    .ysbj-info-eelist:last-child {
        margin-right: 0;
    }
    
    .ysbj-imgg {
        display: block;
        width: 100%;
        height: 120px;
        padding: 50px 0 20px 0;
        text-align: center;
    }
    
    .ysbj-icond {
        display: inline-block;
        background: url(/template/ycmj/static/image/info_sprites.png) no-repeat;
    }
    
    .ysbj-icond {
        display: block;
        margin: 0 auto;
        background: url(/template/ycmj/static/image/bg-ys.png);
    }
    
    .ysbj-icond.ysbj-d1 {
        width: 124px;
        height: 88px;
        background-position: -172px -150px;
    }
    
    .ysbj-icond.ysbj-c1 {
        width: 142px;
        height: 90px;
        background-position: -10px -150px;
    }
    
    .ysbj-icond.ysbj-b1 {
        width: 125px;
        height: 120px;
        background-position: -10px -10px;
    }
    
    .ysbj-icond.ysbj-a1 {
        width: 143px;
        height: 99px;
        background-position: -155px -10px;
    }
    
    .ysbj-info-eelist .ysbj-a {
        font-size: 20px;
        color: #333;
        font-weight: bold;
        display: block;
        padding: 0;
        margin: 0;
        line-height: 24px;
        text-align: center;
    }
    
    .ysbj-info-eelist .ysbj-b {
        font-size: 16px;
        color: #666;
        padding-top: 15px;
        display: block;
        margin: 0;
        line-height: 24px;
        text-align: center;
        padding: 0;
    }
    
    /* 传统装修问题区域样式 */
    .ysbj-yus-a {
        width: 100%;
        margin: 0;
        background: #fef5f3;
        padding: 30px 0;
    }
    
    .ysbj-yus-a .ysbj-infotitle {
        padding-bottom: 30px;
    }
    
    .ysbj-yus-a .ysbj-infotitle p {
        line-height: 24px;
        color: #444;
        font-size: 16px;
        padding-top: 10px;
    }
    
    .ysbj-yus-a .ysbj-infoconta {
        width: 1200px;
        height: 400px;
        margin: -10px auto 0 auto;
        position: relative;
        padding: 0 0 60px 0;
    }
    
    .ysbj-pimg {
        display: block;
        width: auto;
        height: auto;
        margin: 0 auto;
        position: absolute;
        left: -28px;
        top: 0;
    }
    
    .ysbj-ysn-hh {
        position: relative;
        width: 300px;
        height: 300px;
        margin: 0 auto;
        padding: 0;
    }
    
    .ysbj-o {
        position: absolute;
        line-height: 30px;
    }
    
    .ysbj-o.ysbj-a {
        padding: 20px 45px 15px 25px;
        left: -435px;
        top: 35px;
        width: 335px;
        height: 100px;
    }
    
    .ysbj-o.ysbj-b {
        padding: 20px 20px 15px 45px;
        right: -445px;
        top: 35px;
        width: 330px;
        height: 100px;
    }
    
    .ysbj-o.ysbj-c {
        padding: 20px 30px 15px 18px;
        left: -365px;
        bottom: -95px;
        width: 335px;
        height: 100px;
    }
    
    .ysbj-o.ysbj-d {
        padding: 20px 20px 15px 45px;
        right: -365px;
        bottom: -90px;
        width: 330px;
        height: 94px;
    }
    
    .ysbj-k {
        font-size: 20px;
        color: #ff4f23;
        font-weight: bold;
        display: block;
        margin: 0;
        line-height: 20px;
    }
    
    .ysbj-l {
        font-size: 14px;
        padding-top: 10px;
        display: block;
        margin: 0;
        line-height: 20px;
    }
    
    .ysbj-o.ysbj-a .ysbj-l {
        color: #627670;
    }
    
    .ysbj-o.ysbj-b .ysbj-l {
        color: #7d7658;
    }
    
    .ysbj-o.ysbj-c .ysbj-l {
        color: #887874;
    }
    
    .ysbj-o.ysbj-d .ysbj-l {
        color: #5b5875;
    }
    
    /* 报价单展示区域样式 */
    .ysbj-yus-d {
        width: 100%;
        margin: 0;
        background: #fff;
        padding: 30px 0;
    }
    
    .ysbj-yus-d .ysbj-infotitle {
        padding-bottom: 10px;
    }
    
    .ysbj-yus-d .ysbj-infotitle h2 {
        padding: 0;
        margin: 0;
    }
    
    .ysbj-yus-d .ysbj-infoconta.ysbj-clear {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 20px;
        height: 518px;
        position: relative;
    }
    
    .ysbj-yus-d1 {
        display: block;
        width: 1252px;
        height: auto;
        position: absolute;
        left: -26px;
        top: 0;
    }
    
    /* 最后一个区域样式 */
    .ysbj-yus-e {
        width: 100%;
        margin: 0;
        background: #fef5f3;
        padding: 30px 0;
    }
    
/* ================================= 0元设计页样式 ================================= */
    /* 清除浮动通用样式 */
    .yslysj-clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* 主要容器样式 - 整个页面的主容器 */
    .yslysj-fzzhaobiao.yslysj-infog {
        width: 100%;
    }
    
    /* 内容区块基础样式 - 用于页面中各个主要内容区块 */
    .yslysj-info-section {
        width: 100%;
        background: #fff;
        padding: 30px 0;
    }
    
    /* 标题样式 - 页面中各区块的标题容器 */
    .yslysj-info-title {
        width: 100%;
        text-align: center;
        line-height: 30px;
        padding: 30px 0 15px 0;
    }
    
    /* 标题文本样式 - 主标题样式 */
    .yslysj-info-title h2 {
        display: block;
        color: #333;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 2px;
    }
    
    /* 标题图标 - 用于标题两侧的装饰图标 */
    .yslysj-title-icon {
        display: inline-block;
        margin: 0 20px;
        vertical-align: middle;
        width: 30px;
        height: 15px;
        background: url(//res2.zx123.cn/pc2020/img/zhaobiao/info/oopd.png) no-repeat center center;
    }
    
    /* 标题说明文本 - 标题下方的辅助说明文字 */
    .yslysj-info-title p {
        padding-top: 15px;
        display: block;
        color: #666;
        font-size: 20px;
    }
    
    /* 服务流程部分容器 - 包含整个服务流程内容 */
    .yslysj-process-container {
        width: 100%;
        margin: 0 auto;
    }
    
    /* 服务流程图片 - 展示服务流程的图示 */
    .yslysj-process-image {
        display: block;
        width: 1018px;
        height: 140px;
        margin: 20px auto 10px auto;
    }
    
    /* 流程步骤容器 - 包含所有流程步骤的容器 */
    .yslysj-process-steps {
        width: 1165px;
        height: 60px;
        margin: 10px auto;
    }
    
    /* 单个流程步骤 - 每个步骤的容器 */
    .yslysj-process-step {
        width: 25%;
        float: left;
        text-align: center;
        line-height: 30px;
    }
    
    /* 步骤标题 - 流程步骤的标题文字 */
    .yslysj-step-title {
        display: block;
        margin: 0 auto;
        font-size: 20px;
        color: #333;
    }
    
    /* 步骤描述 - 流程步骤的详细说明 */
    .yslysj-step-desc {
        display: block;
        margin: 0 auto;
        font-size: 16px;
        color: #666;
    }
    
    /* 三步出图部分容器 - 包含三步出图的整个内容 */
    .yslysj-three-steps-container {
        width: 1200px;
        height: auto;
        margin: 0 auto;
        padding: 20px 0 60px 0;
    }
    
    /* 步骤卡片 - 每个步骤的卡片容器 */
    .yslysj-step-card {
        float: left;
        width: 343px;
        height: 445px;
    }
    
    /* 步骤卡片头部 - 包含步骤编号和名称的头部区域 */
    .yslysj-step-card-header {
        position: relative;
        width: 270px;
        height: 110px;
        margin: 0 0 0 40px;
        background: url(//res2.zx123.cn/pc2020/img/zhaobiao/info/lkt.png) no-repeat center top;
    }
    
    /* 步骤编号 - 卡片头部的步骤数字 */
    .yslysj-step-card-header .yslysj-step-number {
        font-size: 24px;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-right: 4px;
        display: block;
        line-height: 58px;
    }
    
    /* 步骤名称 - 卡片头部的步骤名称 */
    .yslysj-step-card-header .yslysj-step-name {
        font-size: 20px;
        color: #fff;
        font-weight: normal;
        text-align: center;
        line-height: 40px;
        margin-right: 4px;
        display: block;
    }
    
    /* 步骤卡片主体 - 卡片的主要内容区域 */
    .yslysj-step-card-body {
        width: 100%;
        height: 420px;
        padding-top: 1px;
        margin: -76px auto 0 auto;
        background: #ff3217;
        border-radius: 20px;
    }
    
    /* 步骤图片容器 - 包含步骤图片的容器 */
    .yslysj-step-image-container {
        width: 282px;
        height: 274px;
        margin: 105px auto 35px auto;
        border-radius: 20px;
        background: #fff;
    }
    
    /* 步骤图片 - 步骤展示的图片 */
    .yslysj-step-image {
        display: block;
        width: 100%;
        height: 100%;
    }
    
    /* 步骤分隔符 - 用于分隔各个步骤卡片的装饰元素 */
    .yslysj-step-divider {
        float: left;
        width: 82px;
        height: 400px;
        margin-top: 40px;
        background: url(//res2.zx123.cn/pc2020/img/zhaobiao/info/lky.png) no-repeat center center;
    }
    
    /* 设计方案PK部分 - 设计方案对比区域的容器 */
    .yslysj-design-comparison {
        width: 100%;
        background: #F8F8F8;
        padding: 50px 0 80px 0;
    }
    
    /* 对比容器 - 包含设计方案对比的所有内容 */
    .yslysj-comparison-container {
        position: relative;
        width: 1200px;
        height: auto;
        margin: 0 auto;
        padding: 20px 0 40px 0;
    }
    
    /* 对比边框 - 用于装饰对比标题的边框 */
    .yslysj-comparison-border {
        position: absolute;
        left: 190px;
        top: 50px;
        width: 820px;
        height: 120px;
        border: 2px solid #ff3217;
        border-bottom: 0;
    }
    
    /* 对比边框分隔符 - 分隔对比边框的线 */
    .yslysj-comparison-border-divider {
        width: 50%;
        height: 100%;
        border-right: 2px solid #ff3217;
        float: left;
        margin-left: -1px;
    }
    
    /* 对比标题 - 设计方案对比区域的标题 */
    .yslysj-comparison-title {
        position: relative;
        text-align: center;
        font-size: 24px;
        line-height: 62px;
        margin: 0 auto;
        color: #fff;
        width: 644px;
        height: 62px;
        background-color: #ff3217;
        border-radius: 20px;
        z-index: 2;
    }
    
    /* 设计列表 - 包含多个设计方案的列表容器 */
    .yslysj-design-list {
        position: relative;
        margin-top: 50px;
        overflow: hidden;
    }
    
    /* 设计项 - 单个设计方案的容器 */
    .yslysj-design-item {
        margin: 0 0 0 30px;
        width: 370px;
        float: left;
    }
    
    /* 第一个设计项 - 移除第一个设计项的左外边距 */
    .yslysj-design-item.yslysj-first {
        margin: 0;
    }
    
    /* 设计图片 - 设计方案的展示图片 */
    .yslysj-design-image {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 15px;
    }
    
    /* 设计标题 - 设计方案的标题 */
    .yslysj-design-title {
        font-size: 20px;
        color: #333;
        margin-top: 15px;
        font-weight: bold;
        display: block;
        text-align: center;
        line-height: 26px;
    }
    
    /* 设计描述 - 设计方案的描述文字 */
    .yslysj-design-desc {
        font-size: 16px;
        color: #333;
        display: block;
        text-align: center;
        line-height: 26px;
    }
    
    /* 全景效果部分 - 全景展示区域的容器 */
    .yslysj-panorama-section {
        width: 100%;
        background: #333 url(//res2.zx123.cn/pc2020/img/zhaobiao/info/info_ck.jpg) center center no-repeat;
        background-size: cover;
        height: 744px;
        padding: 50px 0 30px 0;
        box-sizing: border-box;
    }
    
    /* 全景区域标题样式 - 重写全景区域的标题颜色 */
    .yslysj-panorama-section .yslysj-info-title h2,
    .yslysj-panorama-section .yslysj-info-title p {
        color: #fff;
    }
    
    /* 全景容器 - 包含全景图片的容器 */
    .yslysj-panorama-container {
        padding: 10px;
        background: #fff;
    }
    
    /* 全景项 - 单个全景图片的容器 */
    .yslysj-panorama-item {
        width: 585px;
        height: 420px;
        float: left;
        position: relative;
    }
    
    /* 第二个全景项 - 为第二个全景项添加左间距 */
    .yslysj-panorama-item.yslysj-second {
        margin-left: 10px;
    }
    
    /* 全景链接 - 全景图片上的链接按钮 */
    .yslysj-panorama-link {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -28px 0 0 -90px;
        width: 178px;
        height: 55px;
        line-height: 55px;
        border-radius: 37px;
        border: solid 1px #707070;
    }
    
    /* 链接背景 - 全景链接的半透明背景 */
    .yslysj-panorama-link .yslysj-link-bg {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #090909;
        opacity: 0.65;
        border-radius: 37px;
    }
    
    /* 链接文本 - 全景链接上的文字 */
    .yslysj-panorama-link .yslysj-link-text {
        position: relative;
        display: block;
        font-size: 20px;
        color: #fff;
        font-weight: bold;
        width: 120px;
        text-align: center;
        margin: 0 auto;
        height: 100%;
        background: url(//res2.zx123.cn/pc2020/img/zhaobiao/info/lkle.png?rd=12) right center no-repeat;
    }
    
    /* 增值服务部分 - 增值服务区域的容器 */
    .yslysj-value-added-services {
        width: 100%;
        background: #FEF6F6 url(//res2.zx123.cn/pc2020/img/zhaobiao/info/info_e.jpg) center bottom no-repeat;
        padding: 50px 0 30px 0;
    }
    
    /* 服务容器 - 包含所有增值服务的容器 */
    .yslysj-services-container {
        width: 1200px;
        margin: 0 auto;
        position: relative;
        padding-top: 1px;
    }
    
    /* 服务项 - 单个增值服务的容器 */
    .yslysj-service-item {
        float: left;
        position: relative;
        background: #fff;
        border-radius: 25px;
        width: 580px;
        height: 152px;
        margin: 40px 0 0 40px;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
    }
    
    /* 第一个服务项 - 移除第一个服务项的左外边距 */
    .yslysj-service-item.yslysj-first {
        margin-left: 0;
    }
    
    /* 服务图标 - 增值服务的图标 */
    .yslysj-service-icon {
        display: block;
        width: 74px;
        height: auto;
        position: absolute;
        left: 38px;
        top: 35px;
        border-radius: 20px;
    }
    
    /* 服务标题 - 增值服务的标题 */
    .yslysj-service-title {
        font-size: 20px;
        color: #000;
        padding-top: 30px;
        font-weight: bold;
        display: block;
        margin: 0 35px 0 135px;
        line-height: 40px;
        text-align: left;
    }
    
    /* 服务描述 - 增值服务的详细说明 */
    .yslysj-service-desc {
        font-size: 16px;
        color: #666;
        line-height: 24px;
        display: block;
        margin: 0 35px 0 135px;
    }
    
    /* 行动按钮容器 - 包含主要行动按钮的容器 */
    .yslysj-action-button {
        padding-top: 50px;
        font-size: 24px;
        color: #fff;
        line-height: 136px;
        text-align: center;
        font-weight: bold;
        margin: 0 auto;
    }
    
    /* 行动按钮链接 - 主要行动按钮的样式 */
    .yslysj-action-button a {
        display: block;
        width: 504px;
        height: 136px;
        margin: 0 auto;
        color: #fff;
        background: url(//res2.zx123.cn/pc2020/img/zhaobiao/info/info_eg.png) no-repeat center center;
        text-decoration: none;
    }
    
/* ================================= 文章详情页样式 ================================= */
    /* 容器样式 - 包裹整个文章详情页的主容器 */
    .ys-content-container{
        margin: 15px 0;
    }
    
    /* 文章头部样式 - 包含标题和元信息的区域 */
    .ys-content-header {
        padding: 15px 20px;
        border-bottom: 1px solid #eee;
    }
    
    /* 文章标题样式 - 主标题文字样式 */
    .ys-content-header .ys-content-title {
        font-size: 24px;
    }
    
    /* 元信息容器样式 - 包含作者、日期等辅助信息 */
    .ys-content-meta-info {
        color: #7f8c8d;
        font-size: 14px;
    }
    
    /* 元信息项样式 - 每个元信息的间距和对齐方式 */
    .ys-content-meta-info span {
        margin-right: 20px;
        display: inline-flex;
        align-items: center;
    }
    
    /* 元信息图标样式 - 图标与文字的间距 */
    .ys-content-meta-info i {
        margin-right: 5px;
    }
    
    /* 主内容区布局 - 控制文章内容与侧边栏的整体布局 */
    .ys-content-main-content {
        display: flex;
        gap: 20px; /* 内容区与侧边栏间距 */
    }
    
    /* 文章内容区样式 - 文章主体内容的容器样式 */
    .ys-content-article-content {
        flex: 1; /* 占满剩余宽度 */
        background-color: #fff;
        border-radius: 8px;
        height: 100%;
    }
    
    /* 文章段落样式 - 正文段落的间距和文字样式 */
    .ys-content-article-content p {
        margin-bottom: 1.5rem;
        font-size: 16px;
        color: #555;
    }
    
    /* 文章二级标题样式 - 正文中的小标题样式 */
    .ys-content-article-content h2 {
        font-size: 22px;
        margin: 2rem 0 1rem;
        color: #2c3e50;
        position: relative;
        padding-bottom: 10px;
    }
    
    /* 标题下划线样式 - 二级标题下方的装饰线 */
    .ys-content-article-content h2:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 50px;
        height: 3px;
        background-color: #3498db;
    }
    
    /* 文章图片样式 - 确保图片自适应容器宽度 */
    .ys-content-article-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* 引用样式 - 文章中引用内容的特殊样式 */
    .ys-content-quote {
        border-left: 4px solid #3498db;
        padding: 10px 15px;
        margin: 1.5rem 0;
        background-color: #f5f7fa;
        color: #666;
        font-style: italic;
    }
    
    /* 侧边栏样式 - 右侧边栏的宽度设置 */
    .ys-content-sidebar {
        width: 300px;
    }
    
    /* 侧边栏模块样式 - 侧边栏中每个功能模块的容器样式 */
    .ys-content-sidebar-module {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
    }
    
    /* 侧边栏标题样式 - 侧边栏模块的标题样式 */
    .ys-content-sidebar-title {
        font-size: 18px;
        color: #2c3e50;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
        position: relative;
    }
    
    /* 侧边栏标题下划线 - 侧边栏标题下方的装饰线 */
    .ys-content-sidebar-title:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 40px;
        height: 2px;
        background-color: #FF6900;
    }
    
    /* 相关推荐样式 - 相关文章项的间距和分隔线 */
    .ys-content-related-article {
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: transform 0.2s ease;
    }
    
    /* 最后一个相关推荐项 - 移除最后一项的底部间距和分隔线 */
    .ys-content-related-article:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    /* 相关推荐悬停效果 - 鼠标悬停时的位移效果 */
    .ys-content-related-article:hover {
        transform: translateX(5px);
    }
    
    /* 相关推荐链接样式 - 相关文章标题链接的样式 */
    .ys-content-related-article a {
        color: #34495e;
        font-size: 14px;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 最多显示2行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        transition: color 0.2s;
    }
    
    /* 相关推荐链接悬停样式 - 链接 hover 状态的颜色变化 */
    .ys-content-related-article a:hover {
        color: #3498db;
    }
    
    /* 猜你喜欢样式 - 固定在视口顶部的样式 */
    .ys-content-guess-like {
        position: sticky;
        top: 0px;
    }
    
    /* 猜你喜欢项样式 - 每个推荐项的布局和间距 */
    .ys-content-like-item {
        display: flex;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: 1px dashed #eee;
        transition: all 0.3s ease;
    }
    
    /* 最后一个猜你喜欢项 - 移除最后一项的底部间距和分隔线 */
    .ys-content-like-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
    
    /* 猜你喜欢项悬停效果 - 鼠标悬停时的上浮和阴影效果 */
    .ys-content-like-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    /* 推荐项图片容器 - 控制推荐项图片的尺寸 */
    .ys-content-like-img {
        width: 80px;
        height: 60px;
        flex-shrink: 0; /* 不缩小 */
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
    }
    
    /* 推荐项图片样式 - 确保图片填充容器并添加过渡效果 */
    .ys-content-like-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    
    /* 推荐项图片悬停效果 - 鼠标悬停时图片轻微放大 */
    .ys-content-like-item:hover .ys-content-like-img img {
        transform: scale(1.1);
    }
    
    /* 推荐项信息容器 - 推荐项文字内容的容器 */
    .ys-content-like-info {
        flex: 1;
    }
    
    /* 推荐项标题样式 - 推荐项标题的文字样式和显示控制 */
    .ys-content-like-title {
        font-size: 14px;
        color: #34495e;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 5px;
        transition: color 0.2s;
    }
    
    /* 推荐项标题悬停样式 - 标题 hover 状态的颜色变化 */
    .ys-content-like-item:hover .ys-content-like-title {
        color: #3498db;
    }
    
    /* 推荐项元信息样式 - 推荐项辅助信息的文字样式 */
    .ys-content-like-meta {
        font-size: 12px;
        color: #95a5a6;
    }
    
    /* 文章底部样式 - 文章底部区域的内边距和边框 */
    .ys-content-article-footer {
        padding: 20px 20px;
        border-top: 1px solid #eee;
    }
    
    /* 文章正文容器 - 文章内容的内边距设置 */
    .ys-content-viewthread {
        padding: 20px;
    }
    
    /* 文章信息行样式 - 文章辅助信息的高度和颜色 */
    .ys-content-article-info {
        height: 25px;
        line-height: 40px;
        padding: 0;
        color: #999;  
    }
    
    /* 文章信息项样式 - 每个信息项的分隔线和间距 */
    .ys-content-article-info span {
        display: inline-block;
        height: 15px;
        line-height: 15px;
        border-right: 1px solid #ccc;
        padding: 0 12px 0 12px;
    }