/* 全局样式重置 */
@media screen and (min-width: 769px) {

    * {
        margin: 0;
        padding: 0;
    }

    /* 链接样式 */
    a {
        text-decoration: none; /* 去除下划线 */
        color: black; /* 默认链接颜色 */
    }

    /* 页面基础样式 */
    body {
        font-size: 14px; /* 默认字体大小 */
        background-color: #000000; /* 页面背景颜色 */
    }

    /* 块级元素样式 */
    .block {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* 分隔线样式 */
    .divider {
        width: 1202px; /* 固定宽度 */
        height: 60px; /* 固定高度 */
        margin: 0 auto; /* 水平居中 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 分隔线中的段落样式 */
    .divider p {
        font-size: 24px; /* 字体大小 */
    }

    /* 导航栏样式 */
    #navigation {
        width: 1202px; /* 固定宽度 */
        height: 70px; /* 固定高度 */
        margin: 0 auto; /* 水平居中 */
        display: flex;
        justify-content: space-between; /* 两端对齐 */
        align-items: center; /* 垂直居中 */
        font-size: 14px; /* 字体大小 */
    }

    /* 菜单栏样式 */
    .menu {
        width: calc(100% - 300px); /* 计算宽度 */
        height: 100%; /* 高度100% */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }

    /* 下拉菜单样式 */
    .dropDownMenu {
        width: 11.111%; /* 宽度占比 */
        height: 100%; /* 高度100% */
        position: relative; /* 相对定位 */
    }

    .dropDownMenu > a {
        line-height: 70px; /* 行高 */
        text-align: center; /* 文字居中 */
        color: white; /* 文字颜色 */
        text-decoration: none; /* 默认无下划线 */
        position: relative; /* 相对定位，用于伪元素 */
        padding-bottom: 0px; /* 为下划线留出空间 */
    }

    .dropDownMenu > a:hover {
        color: white; /* 悬停时文字颜色 */
    }

    /* 使用伪元素添加下划线 */
    .dropDownMenu > a:hover::after {
        content: ''; /* 必须设置内容 */
        display: block; /* 块级元素 */
        width: 100%; /* 宽度与文字相同 */
        height: 1px; /* 下划线高度 */
        background-color: white; /* 下划线颜色 */
        position: absolute; /* 绝对定位 */
        bottom: 0; /* 定位到底部 */
        left: 0; /* 从左侧开始 */
    }

    /* 下拉菜单链接悬停样式 */
    .dropDownMenu > a:hover {
        color: #1c84c0; /* 悬停时文字颜色 */
    }

    /* 下拉菜单列表样式 */
    .dropDownMenu .menuList {
        display: none; /* 默认隐藏 */
    }

    /* 下拉菜单图标样式 */
    .dropDownMenu i {
        display: none; /* 默认隐藏 */
    }

    /* 悬停时显示下拉菜单 */
    @media (any-hover: hover) {
        .dropDownMenu:hover .menuList {
            display: block; /* 显示下拉菜单 */
            position: absolute; /* 绝对定位 */
            border-top: 4px solid #1c84c0; /* 顶部边框 */
            padding: 10px 0; /* 内边距 */
            background: rgba(255, 255, 255, 0.7); /* 背景颜色 */
            width: 100%; /* 宽度100% */
            border-bottom-left-radius: 5px; /* 左下角圆角 */
            border-bottom-right-radius: 5px; /* 右下角圆角 */
            box-shadow: 1px 1px 3px #ddd; /* 阴影效果 */
            z-index: 100; /* 层级 */
        }

        /* 悬停时显示下拉菜单图标 */
        .dropDownMenu:hover > i {
            display: block; /* 显示图标 */
            width: 0;
            height: 0;
            border-left: 5px solid transparent; /* 左边透明 */
            border-right: 5px solid transparent; /* 右边透明 */
            border-bottom: 7px solid #1c84c0; /* 底部边框 */
            position: absolute; /* 绝对定位 */
            margin-top: -5px; /* 上边距 */
            margin-left: 45px; /* 左边距 */
        }
    }

    /* 下拉菜单列表链接样式 */
    .dropDownMenu .menuList a {
        width: 100%; /* 宽度100% */
        height: 30px; /* 高度 */
        text-align: center; /* 文字居中 */
        font-size: 12px; /* 字体大小 */
        line-height: 30px; /* 行高 */
        overflow: hidden; /* 溢出隐藏 */
        text-overflow: ellipsis; /* 文字溢出显示省略号 */
    }

    /* 下拉菜单列表链接悬停样式 */
    .dropDownMenu .menuList a:hover {
        color: #fff; /* 悬停时文字颜色 */
        background: #999; /* 悬停时背景颜色 */
    }

    /* 登录按钮样式 */
    .loginButton {
        padding: 10px 10px; /* 内边距 */
        border-radius: 5px; /* 圆角 */
        background: #409eff; /* 背景颜色 */
    }

    /* 登录按钮链接样式 */
    .loginButton a {
        color: #fff; /* 文字颜色 */
    }

    /* 移动端图标样式 */
    .mobileIcon {
        display: none; /* 默认隐藏 */
    }

    #banner {
        width: 80%; /* 宽度100% */
        max-width: 1200px; /* 设置最大宽度（根据需求调整） */
        height: 500px; /* 固定高度 */
        overflow: hidden; /* 溢出隐藏 */
        position: relative; /* 相对定位 */
        margin: 0 auto; /* 水平居中 */
    }

    /* 轮播图滑动容器样式 */
    #banner .slider {
        width: 300vw; /* 宽度为3倍视口宽度 */
        height: 100%; /* 高度100% */
        transition-duration: 200ms; /* 过渡时间 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: flex-start; /* 顶部对齐 */
    }

    /* 轮播图图片样式 */
    #banner .slider img {
        width: 100vw; /* 宽度为视口宽度 */
        height: 100%; /* 高度100% */
        object-fit: cover; /* 图片覆盖 */
    }

    /* 轮播图控制按钮样式 */
    #banner .handler {
        position: absolute; /* 绝对定位 */
        width: 40%; /* 宽度 */
        height: 16px; /* 高度 */
        bottom: 0; /* 底部对齐 */
        left: 50%; /* 左边距50% */
        text-align: center; /* 文字居中 */
        transform: translateX(-50%); /* 水平居中 */
    }

    /* 轮播图控制按钮样式 */
    #banner .handler button {
        display: inline-block; /* 行内块元素 */
        width: 14px; /* 宽度 */
        height: 14px; /* 高度 */
        border-radius: 50%; /* 圆形 */
        background: none; /* 无背景 */
        border: 1px solid #fff; /* 边框 */
        margin: 0 3px; /* 外边距 */
        vertical-align: top; /* 顶部对齐 */
        overflow: hidden; /* 溢出隐藏 */
    }

    /* 轮播图控制按钮激活状态样式 */
    #banner .handler button.on {
        background-color: white; /* 背景颜色 */
    }

    /* 新闻模块样式 */
    #news {
        width: 100%; /* 宽度100% */
        margin-top: 63px; /* 上边距 */
        background: url(https://sxccg.com/html/images/icon10.jpg) repeat-x 0 15px; /* 背景图片 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 新闻主内容样式 */
    .newsMain {
        width: 1202px; /* 固定宽度 */
        height: 384px; /* 固定高度 */
        margin-top: 50px; /* 上边距 */
        display: flex;
        justify-content: space-between; /* 两端对齐 */
        align-items: center; /* 垂直居中 */
    }

    /* 新闻内容样式 */
    .newsContent {
        width: 540px; /* 固定宽度 */
        height: 384px; /* 固定高度 */
    }

    /* 新闻标题样式 */
    .newsTitle {
        font-size: 25px; /* 字体大小 */
        font-weight: normal; /* 字体粗细 */
    }

    /* 新闻标题链接样式 */
    .newsTitle a {
        color: #00528a; /* 链接颜色 */
    }

    /* 新闻摘要样式 */
    .newsSummary {
        font-size: 12px; /* 字体大小 */
        margin-top: 10px; /* 上边距 */
        line-height: 22px; /* 行高 */
    }

    /* 新闻列表样式 */
    .newsList {
        margin-top: 30px; /* 上边距 */
    }

    /* 新闻列表链接样式 */
    .newsList a {
        font-size: 12px; /* 字体大小 */
        height: 27px; /* 高度 */
        line-height: 27px; /* 行高 */
        color: black; /* 文字颜色 */
    }

    /* 新闻按钮样式 */
    .newsButton {
        width: 143px; /* 固定宽度 */
        height: 37px; /* 固定高度 */
        margin-top: 25px; /* 上边距 */
        border: 1px solid #ddd; /* 边框 */
        text-align: center; /* 文字居中 */
        line-height: 37px; /* 行高 */
        font-size: 12px; /* 字体大小 */
    }

    /* 新闻按钮链接样式 */
    .newsButton a {
        color: #000; /* 文字颜色 */
    }

    /* 新闻图片样式 */
    .newsImg {
        width: 577px; /* 固定宽度 */
        height: 384px; /* 固定高度 */
    }

    /* 新闻图片样式 */
    .newsImg img {
        width: 100%; /* 宽度100% */
        height: 100%; /* 高度100% */
        object-fit: cover; /* 图片覆盖 */
    }

    /* 分布模块样式 */
    #distribution {
        width: 100%; /* 宽度100% */
        height: 212px; /* 固定高度 */
        background: url(https://sxccg.com/html/images/icon8.jpg) no-repeat center center; /* 背景图片 */
        margin-top: 63px; /* 上边距 */
        padding-top: 62px; /* 上边距 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 分布标题样式 */
    .disTitle {
        margin-bottom: 20px; /* 下边距 */
    }

    /* 分布城市样式 */
    .disCity {
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: flex-start; /* 顶部对齐 */
        font-size: 16px; /* 字体大小 */
        line-height: 28px; /* 行高 */
    }

    /* 分布城市中的span样式 */
    .disCity span {
        width: 80px; /* 固定宽度 */
        color: white; /* 文字颜色 */
    }

    /* 分布城市中的ul样式 */
    .disCity ul {
        width: 770px; /* 固定宽度 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-wrap: wrap; /* 换行 */
        list-style: none; /* 去除列表样式 */
    }

    /* 分布城市中的li样式 */
    .disCity ul li {
        margin-right: 23px; /* 右边距 */
        color: white; /* 文字颜色 */
    }

    /* 业务中心模块样式 */
    #businessCenter {
        width: 100%; /* 宽度100% */
        padding: 63px 0 80px 0; /* 内边距 */
        background: url(https://sxccg.com/html/images/icon10.jpg) repeat-x 0 78px; /* 背景图片 */
        background-color: #f1f1f1; /* 背景颜色 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 业务中心主内容样式 */
    .bcMain {
        width: 1363px; /* 固定宽度 */
        height: 480px; /* 固定高度 */
        margin-top: 20px; /* 上边距 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }

    /* 业务中心轮播图样式 */
    .bcCarousel {
        width: 1203px; /* 固定宽度 */
        margin: 0 60px 0 60px; /* 外边距 */
        overflow: hidden; /* 溢出隐藏 */
    }

    /* 轮播图容器样式 */
    .carouselContainer {
        width: 3000px; /* 固定宽度 */
        transition-duration: 200ms; /* 过渡时间 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
    }

    /* 业务中心卡片样式 */
    .bcCard {
        width: 280px; /* 固定宽度 */
        height: 480px; /* 固定高度 */
        margin: 0 10px; /* 外边距 */
        background-color: white; /* 背景颜色 */
        color: #333; /* 文字颜色 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-content: flex-start; /* 顶部对齐 */
        flex-direction: column; /* 垂直排列 */
        cursor: pointer; /* 鼠标指针 */
    }

    /* 业务中心卡片图片样式 */
    .bcCard img {
        width: 280px; /* 固定宽度 */
        height: 211px; /* 固定高度 */
        object-fit: cover; /* 图片覆盖 */
    }

    /* 业务中心卡片悬停样式 */
    .bcCard:hover .bcCardContent {
        background: #00528a; /* 背景颜色 */
        color: white; /* 文字颜色 */
    }

    /* 业务中心卡片悬停链接样式 */
    .bcCard:hover .bcCardContent a {
        background: #00528a; /* 背景颜色 */
        color: white; /* 文字颜色 */
    }

    /* 业务中心卡片内容样式 */
    .bcCardContent {
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: flex-start; /* 顶部对齐 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 业务中心卡片标题样式 */
    .bcCardContent h3 {
        width: 246px; /* 固定宽度 */
        line-height: 40px; /* 行高 */
        font-size: 20px; /* 字体大小 */
        font-weight: normal; /* 字体粗细 */
        text-transform: uppercase; /* 大写字母 */
    }

    /* 业务中心卡片段落样式 */
    .bcCardContent p:nth-of-type(1) {
        border-bottom: 2px solid #00528a; /* 底部边框 */
        font-size: 18px; /* 字体大小 */
        float: left; /* 左浮动 */
    }

    /* 业务中心卡片段落样式 */
    .bcCardContent p:nth-of-type(2) {
        width: 246px; /* 固定宽度 */
        height: 90px; /* 固定高度 */
        margin-top: 15px; /* 上边距 */
        line-height: 22px; /* 行高 */
        font-size: 12px; /* 字体大小 */
    }

    /* 业务中心卡片内容样式 */
    .bcCardContent {
        width: 246px; /* 固定宽度 */
        padding: 17px; /* 内边距 */
        height: 235px; /* 固定高度 */
    }

    /* 业务中心卡片链接样式 */
    .bcCardContent a {
        margin-top: 10px; /* 上边距 */
        color: #00528a; /* 文字颜色 */
    }

    /* 解决方案模块样式 */
    #solution {
        width: 100%; /* 宽度100% */
        height: 430px; /* 固定高度 */
        padding: 110px 0 110px 0; /* 内边距 */
        background: url(https://sxccg.com/html/images/icon7.jpg) no-repeat center center; /* 背景图片 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 解决方案内容样式 */
    .soluContent {
        width: 470px; /* 固定宽度 */
        align-self: flex-start; /* 左对齐 */
        margin-left: max(calc(50% - 601px), 0px); /* 左边距 */
    }

    /* 解决方案标题样式 */
    .soluContent h3 {
        width: 470px; /* 固定宽度 */
        height: 40px; /* 固定高度 */
        font-size: 30px; /* 字体大小 */
        font-weight: normal; /* 字体粗细 */
        color: #fff; /* 文字颜色 */
    }

    /* 解决方案段落样式 */
    .soluContent p {
        width: 470px; /* 固定宽度 */
        height: 90px; /* 固定高度 */
        margin-top: 35px; /* 上边距 */
        color: #fff; /* 文字颜色 */
        font-size: 14px; /* 字体大小 */
        text-indent: 2em; /* 首行缩进 */
        line-height: 24px; /* 行高 */
    }

    /* 解决方案链接样式 */
    .soluContent a {
        display: block; /* 块级元素 */
        width: 145px; /* 固定宽度 */
        height: 45px; /* 固定高度 */
        margin-top: 20px; /* 上边距 */
        border: 1px solid #8ad4ff; /* 边框 */
        line-height: 37px; /* 行高 */
        text-align: center; /* 文字居中 */
        color: #75c2f1; /* 文字颜色 */
    }

    /* 解决方案图标样式 */
    .soluIcon {
        width: 1146px; /* 固定宽度 */
        height: 104px; /* 固定高度 */
        margin-top: 40px; /* 上边距 */
        padding: 28px; /* 内边距 */
        background-color: white; /* 背景颜色 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a {
        display: block; /* 块级元素 */
        width: 160px; /* 固定宽度 */
        height: 104px; /* 固定高度 */
        border-right: 1px solid #ddd; /* 右边框 */
        text-align: center; /* 文字居中 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(1) {
        background: url(https://sxccg.com/html/images/p1.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(1):hover {
        background: url(https://sxccg.com/html/images/p01.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(2) {
        background: url(https://sxccg.com/html/images/p2.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(2):hover {
        background: url(https://sxccg.com/html/images/p02.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(3) {
        background: url(https://sxccg.com/html/images/p3.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(3):hover {
        background: url(https://sxccg.com/html/images/p03.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(4) {
        background: url(https://sxccg.com/html/images/p4.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(4):hover {
        background: url(https://sxccg.com/html/images/p04.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(5) {
        background: url(https://sxccg.com/html/images/p5.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(5):hover {
        background: url(https://sxccg.com/html/images/p05.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(6) {
        background: url(https://sxccg.com/html/images/p6.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(6):hover {
        background: url(https://sxccg.com/html/images/p06.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接样式 */
    .soluIcon a:nth-of-type(7) {
        border: 0px; /* 无边框 */
        background: url(https://sxccg.com/html/images/p7.png) no-repeat center center; /* 背景图片 */
    }

    /* 解决方案图标链接悬停样式 */
    .soluIcon a:nth-of-type(7):hover {
        background: url(https://sxccg.com/html/images/p07.png) no-repeat center center; /* 背景图片 */
    }

    /* 成功案例模块样式 */
    #successCase {
        width: 100%; /* 宽度100% */
        margin-top: 63px; /* 上边距 */
        background: url(https://sxccg.com/html/images/icon10.jpg) repeat-x 0 15px; /* 背景图片 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 成功案例内容样式 */
    .caseContent {
        width: 1203px; /* 固定宽度 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-wrap: wrap; /* 换行 */
    }

    /* 成功案例图片样式 */
    .caseContent img {
        width: 100%; /* 宽度100% */
        height: 227px; /* 固定高度 */
        margin-bottom: -5px; /* 下边距 */
        object-fit: cover; /* 图片覆盖 */
    }

    /* 成功案例卡片样式 */
    .caseCard {
        margin: 35px 10px 0 10px; /* 外边距 */
        border: 1px solid #dcdcdc; /* 边框 */
        width: 370px; /* 固定宽度 */
        cursor: pointer; /* 鼠标指针 */
    }

    /* 成功案例卡片标题样式 */
    .caseCard h3 {
        text-align: center; /* 文字居中 */
        height: 35px; /* 固定高度 */
        line-height: 35px; /* 行高 */
        font-weight: normal; /* 字体粗细 */
        font-size: 18px; /* 字体大小 */
    }

    /* 成功案例卡片悬停样式 */
    .caseCard:hover h3 {
        color: #00528a; /* 文字颜色 */
    }

    /* 成功案例按钮样式 */
    .caseButton {
        display: block; /* 块级元素 */
        width: 168px; /* 固定宽度 */
        height: 37px; /* 固定高度 */
        margin-top: 60px; /* 上边距 */
        border: 1px solid #989898; /* 边框 */
        background: #fff; /* 背景颜色 */
        line-height: 37px; /* 行高 */
        text-align: center; /* 文字居中 */
        font-size: 18px; /* 字体大小 */
        color: #000; /* 文字颜色 */
    }

    /* 成功案例按钮悬停样式 */
    .caseButton:hover {
        background-color: #002050; /* 背景颜色 */
        color: white; /* 文字颜色 */
    }

    /* 页脚样式 */
    #footer {
        width: 100%; /* 宽度100% */
        height: 80px; /* 固定高度 */
        background: #000000; /* 背景颜色 */
        padding: 500px 0 40px 0; /* 内边距 */
        margin-top: 65px; /* 上边距 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 页脚信息样式 */
    .footerInfo {
        width: 1202px; /* 固定宽度 */
        height: 210px; /* 固定高度 */
        padding-bottom: 35px; /* 下边距 */
        display: flex;
        justify-content: space-between; /* 两端对齐 */
        align-items: flex-start; /* 顶部对齐 */
    }

    /* 页脚标题样式 */
    .footerInfo h2 {
        height: 40px; /* 固定高度 */
        line-height: 40px; /* 行高 */
        font-size: 25px; /* 字体大小 */
        font-weight: bold; /* 字体粗细 */
        color: white; /* 文字颜色 */
    }

    /* 页脚副标题样式 */
    .footerInfo h3 {
        height: 20px; /* 固定高度 */
        line-height: 20px; /* 行高 */
        font-size: 20px; /* 字体大小 */
        margin-bottom: 35px; /* 下边距 */
        color: white; /* 文字颜色 */
        font-weight: normal; /* 字体粗细 */
    }

    /* 页脚联系信息样式 */
    .footerContact {
        width: 284px; /* 固定宽度 */
    }

    /* 页脚联系信息中的span样式 */
    .footerContact span {
        font-size: 18px; /* 字体大小 */
        color: #ababab; /* 文字颜色 */
        line-height: 30px; /* 行高 */
    }

    /* 页脚联系信息中的em样式 */
    .footerContact span em {
        color: #ff1a1a; /* 文字颜色 */
        font-style: normal; /* 字体样式 */
    }

    /* 页脚联系信息中的段落样式 */
    .footerContact p {
        color: #6f7376; /* 文字颜色 */
        font-size: 12px; /* 字体大小 */
        line-height: 22px; /* 行高 */
    }

    /* 页脚关注信息样式 */
    .footerAttention {
        width: 255px; /* 固定宽度 */
    }

    /* 页脚关注信息标题样式 */
    .footerAttention h2 {
        text-align: center; /* 文字居中 */
    }

    /* 页脚关注信息副标题样式 */
    .footerAttention h3 {
        text-align: center; /* 文字居中 */
    }

    /* 页脚关注信息中的二维码样式 */
    .footerAttention .qrcodes {
        display: flex;
        justify-content: space-between; /* 两端对齐 */
        align-items: center; /* 垂直居中 */
    }

    /* 页脚二维码样式 */
    .qrcode p {
        width: 92px; /* 固定宽度 */
        height: 30px; /* 固定高度 */
        line-height: 30px; /* 行高 */
        text-align: center; /* 文字居中 */
        color: #6f7376; /* 文字颜色 */
        font-size: 12px; /* 字体大小 */
    }

    /* 页脚快捷菜单样式 */
    .footerShortMenu {
        width: 270px; /* 固定宽度 */
    }

    /* 页脚快捷菜单标题样式 */
    .footerShortMenu h2 {
        text-align: right; /* 文字右对齐 */
    }

    /* 页脚快捷菜单副标题样式 */
    .footerShortMenu h3 {
        text-align: right; /* 文字右对齐 */
    }

    /* 页脚快捷菜单列表样式 */
    .footerShortMenu .menuList {
        display: flex;
        justify-content: flex-end; /* 右对齐 */
        align-items: center; /* 垂直居中 */
        flex-wrap: wrap; /* 换行 */
    }

    /* 页脚快捷菜单链接样式 */
    .footerShortMenu .menuList a {
        display: block; /* 块级元素 */
        width: 115px; /* 固定宽度 */
        text-align: right; /* 文字右对齐 */
        line-height: 24px; /* 行高 */
        font-size: 12px; /* 字体大小 */
        color: #6f7376; /* 文字颜色 */
    }

    /* 页脚版权信息样式 */
    .footerCopyright {
        margin-top: 100px;
        width: 1200px; /* 固定宽度 */
        height: 35px; /* 固定高度 */
        border-top: 1px solid #3e3e3e; /* 顶部边框 */
        line-height: 35px; /* 行高 */
        text-align: center; /* 文字居中 */
        color: #545454; /* 文字颜色 */
    }

    /* 页脚版权信息链接样式 */
    .footerCopyright a {
        color: #545454; /* 文字颜色 */
    }

    /* 关于我们页面内部轮播图样式 */
    #innerBanner {
        width: 100%; /* 宽度100% */
        height: 330px; /* 固定高度 */
    }

    /* 关于我们页面内部轮播图图片样式 */
    #innerBanner img {
        width: 100%; /* 宽度100% */
        height: 100%; /* 高度100% */
        object-fit: cover; /* 图片覆盖 */
    }

    /* 关于我们页面按钮列表样式 */
    #buttonList {
        width: 1203px; /* 固定宽度 */
        height: 40px; /* 固定高度 */
        margin: 0 auto; /* 水平居中 */
        margin-top: 30px; /* 上边距 */
        display: flex;
        justify-content: center; /* 水平居中 */
        align-content: center; /* 垂直居中 */
        flex-wrap: wrap; /* 换行 */
    }

    /* 关于我们页面按钮样式 */
    #buttonList .button {
        width: 116px; /* 固定宽度 */
        height: 40px; /* 固定高度 */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 关于我们页面按钮中的span样式 */
    #buttonList span {
        width: 116px; /* 固定宽度 */
        height: 38px; /* 固定高度 */
        border: 1px solid #d8d8d8; /* 边框 */
        background: #fff; /* 背景颜色 */
        color: #666; /* 文字颜色 */
        line-height: 38px; /* 行高 */
        font-size: 16px; /* 字体大小 */
        text-align: center; /* 文字居中 */
    }

    /* 关于我们页面按钮激活状态样式 */
    #buttonList .button.active span {
        border: 1px solid #b4daff; /* 边框 */
        color: #115fad; /* 文字颜色 */
        background: #ddeeff; /* 背景颜色 */
    }

    /* 关于我们页面按钮激活状态图标样式 */
    #buttonList .button.active i {
        width: 0;
        height: 0;
        border-left: 10px solid transparent; /* 左边透明 */
        border-right: 10px solid transparent; /* 右边透明 */
        border-top: 10px solid #b4daff; /* 顶部边框 */
    }

    /* 关于我们页面内容样式 */
    .contents {
        width: 62%; /* 固定宽度 */
        margin: 0 auto; /* 水平居中 */
        margin-top: 40px; /* 上边距 */
    }

    /* 关于我们页面内容块样式 */
    .content {
        width: 100%; /* 宽度100% */
        display: flex;
        justify-content: flex-start; /* 左对齐 */
        align-items: center; /* 垂直居中 */
        flex-direction: column; /* 垂直排列 */
    }

    /* 关于我们页面内容段落样式 */
    .content p {
        width: 100%; /* 宽度100% */
        font-size: 16px; /* 字体大小 */
        line-height: 36px; /* 行高 */
        text-indent: 2em; /* 首行缩进 */
        align-self: flex-start; /* 左对齐 */
        margin-bottom: 10px; /* 下边距 */
    }

    /* 关于我们页面内容第一个段落样式 */
    .content p:first-of-type {
        margin-top: 20px; /* 上边距 */
    }

    /* 关于我们页面内容最后一个段落的第一个span样式 */
    .content:last-of-type p:first-of-type span {
        text-align: center; /* 文字居中 */
        color: rgb(31, 73, 125); /* 文字颜色 */
    }

    /* 关于我们页面内容最后一个段落的最后一个span样式 */
    .content:last-of-type p:first-of-type span:last-of-type {
        font-size: 20px; /* 字体大小 */
    }

    /* id 选择器*/
    #aboutUs {
        color: #115fad;
        width: 55%;
        height: 610px;
        margin-left: 38%; /* 距离右侧 160px */
        position: relative; /* 使子元素相对于此元素定位 */
        margin-top: 40px; /* 添加间隔 */
    }

    #aboutUs .left {
        position: absolute; /* 绝对定位 */
        top: 0; /* 位于父元素顶部 */
        left: -5%; /* 位于父元素左侧 */
        width: 30%; /* 宽度 */
        height: 143px; /* 高度 */
        width: 50%;
    }

    #aboutUs .left .aboutus1 {
        color: #ffffff; /* 纯白色 */
        font-size: 3.7vw; /* 字号 */
        line-height: 50px; /* 行高 */
        margin-bottom: 20px; /* 添加间隔 */
    }

    #aboutUs .left .aboutus2 {
        color: #ffffff; /* 纯白色 */
        font-size: 2.6vw; /* 字号 */
        line-height: 48px; /* 行高 */
    }

    #aboutUs .right {
        position: absolute; /* 绝对定位 */
        top: 0; /* 位于父元素顶部 */
        right: 0; /* 位于父元素左侧 */
        width: 120%;
        padding-left: 50%;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
    }

    #aboutUs .right p {
        color: #FFFFFF;
        font-size: 1.2vw;
        line-height: 40px;
        font-weight: 400;
        padding-left: 20%;
    }

    /*关于我们-白色底色*/
    .white {
        width: 100%;
        height: 610px;
        background: #ffffff;
    }

    /*公司简介*/
    .introduction {
        width: 84%;
        height: 60vw;
        margin: 0 auto; /* 水平居中 */
        margin-top: -720px;
        background-color: #FFFFFF;
        z-index: 999;

        .img1 {
            width: 40%;
            height: 40%;
            position: absolute;
            left: 11%;
            top: 1140px;
        }

        .font1 {
            width: 33%;
            height: 370px;
            position: absolute;
            left: 54%;

            .top1 {
                .cn {
                    font-size: 4vw;
                    color: #000000;
                    line-height: 68px;
                    text-align: left;
                    font-style: normal;
                }

                .en {
                    /*上间距*/
                    margin-top: 5%;
                    width: 90%;
                    height: 48px;
                    font-size: 2.8vw;
                    color: #000000;
                    line-height: 48px;
                    text-align: left;
                    font-style: normal;
                }
            }

            .bottom {
                p {
                    position: absolute;
                    padding-top: 6%;
                    font-weight: 400;
                    font-size: 1.2vw;
                    color: #000000;
                    line-height: 40px;
                    text-align: left;
                    font-style: normal;
                }

            }
        }

        .font2 {
            width:30% ;
            p {
                position: absolute;
                padding-top: 25%;
                left: 15%;
                width: 33%;
                height: 520px;
                font-weight: 400;
                font-size: 1.2vw;
                color: #000000;
                line-height: 40px;
                text-align: left;
                font-style: normal;
            }
        }

        .img2 {
            img {
                position: absolute;
                padding-top: 25%;
                left: 54%;
                width: 33%;
                height: auto;
            }
        }
    }

    .join {
        width: 10%;
        height: 33px;
        font-weight: 400;
        font-size: 1.2vw;
        color: #FFFFFF;
        line-height: 33px;
        text-align: center;
        font-style: normal;
        position: relative;
        left: 43%;
        top: 70px;
    }

    /* 第二个页面 羽绒 & 羽毛页面*/
    .yumao {
        width: 100%;
        height: 60%;
        img {
            width: 100%;
            height: 100%;
            atsc-nav-left: 50%;

        }
    }

    .feather {
        height: 676px;

        .waterfowl {
            position: absolute;
            left: 19%;
            margin-top: 2%;
            width: 70%;
            height: 397px;

            .waterfowl_left {
                width: 240px;
                height: 60px;
                font-weight: 600;
                font-size: 3vw;
                color: #FFFFFF;
                line-height: 60px;
                text-align: left;
                font-style: normal;
            }

            .waterfowl_right {
                width: 170px;
                height: 60px;
                display: flex;
                justify-content: center; /* 水平居中 */
                align-items: center; /* 垂直居中 */
            }

            .waterfowl_bottom {
                margin-top: -60px;
                margin-left: 170px;
                width: 170px;
                height: 60px;

                display: flex;
                justify-content: center; /* 水平居中 */
                align-items: center; /* 垂直居中 */
            }

            .content {
                width: 65%;
                height: 120px;

                p {
                    font-weight: 400;
                    font-size: 1.5vw;
                    color: #FFFFFF;
                    line-height: 40px;
                    text-align: left;
                    font-style: normal;
                }
            }
        }

        .nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;

        }

        .nav li {
            border-left: 1px solid white;
            padding: 10px;
        }

        .nav li:first-child {
            border-left: none;
        }

        .tab-content {
            padding: 20px;
        }

        .tab-content.active {
            display: block;
        }

        .tab {
            text-decoration: none;
            color: white;
            width: 48px;
            height: 24px;
            font-weight: 600;
            font-size: 1.5vw;
            color: #808080;
            line-height: 1.5vw;
            text-align: right;
            font-style: normal;

        }

        .tab.active {
            color: #FFFFFF;
        }

        .mao {
            img {
                width: 30%;
                height: 548px;
                margin-top: 75px;
                margin-left: 63%;
            }
        }

        .typeColor {
            width: 33%;
            height: 180px;
            position: absolute;
            left: 19%;
            top: 1355px;
            display: flex;
            flex-direction: column;
        }

        .category {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .row1 {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;

            top: 30px;
        }

        .row2 {
            display: flex;
            justify-content: space-between;
            width: 100%;
            position: absolute;
            top: 110px;
        }

        .item {
            position: relative;
            top: -40px;
            justify-content: space-between;

            p {
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #333;
                color: #fff;
                padding: 10px;
                border-radius: 5px;
                font-size: 0.7vw;
                width: 181px;
                height: 55px;
                text-align: center;
                border-radius: 28px;
                border: 1px solid #FFFFFF;
                opacity: 0.5;
            }
        }

        .item img {
            width: 20%;
            height: 33px;
            position: relative;
            top: 45px;
            left: 30px;
            align-items: center;
        }

        .items {
            width: 80%;
            height: 24px;
            padding-top: -40%;
            font-weight: 600;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 24px;
            text-align: left;
            margin-top: 10px;
            font-style: normal;
        }
    }

    /*两张图片*/
    .imgs {
        display: flex;
    }

    .imgs .img1 img {
        width: 100%;

    }

    .imgs .img2 img {
        width: 100%;

    }

    .product {
        width: 120px;
        height: 60px;
        margin-left: 19%;
        margin-top: 60px;
        h1 {
            width: 320px;
            height: 60px;
            font-weight: 600;
            font-size: 2.8vw;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
            margin-top: 15%;
        }
    }

    .product2 {
        width: 63%;
        margin-left: 19%;
        margin-top: 40px;

        p {
            width: 76%;
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
            margin-bottom: 5%;
        }
    }

    .product2 .underline {
        border: none; /* 去除默认边框 */
        border-top: 1px solid #ffffff; /* 添加上边框作为下划线 */
        margin: 20px 0; /* 设置上边距和下边距 */
    }

    .product3 {
        width: 22%;
        margin-left: 19%;
        margin-top: 140px;

        h1 {
            font-weight: 600;
            font-size: 2.8vw;
            color: #FFFFFF !important;
            line-height: 60px;
            text-align: left;
            font-style: normal;
            margin-top: 10%;
            margin-bottom: 15%;
        }
    }

    .product4 {
        width: 63%;

        margin-left: 19%;
        margin-top: 40px;

        p {
            width: 47%;
            height: 40px;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
            margin-bottom: 5%;
        }
    }

    .product4 p {
        width: 100%;
        font-weight: 400;
        font-size: 1.5vw;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
    }

    .product4 .underline {
        border: none; /* 去除默认边框 */
        border-top: 1px solid #ffffff; /* 添加上边框作为下划线 */
        margin: 20px 0; /* 设置上边距和下边距 */
        margin-bottom: 5%;
    }

    .product5 {
        width: 10%;
        margin-top: 200px;
        margin-left: 27%;

        img {
            width: 100%;

        }
    }

    .product6 {
        width: 27%;
        height: 200px;
        margin-top: -170px;
        margin-left: 45%;

        p {
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 50px;
            text-align: left;
            font-style: normal;
        }
    }

    .product7 {
        width: 60%;
        height: 80px;
        margin-top: 100px;
        margin-left: 19%;

        p {
            width: 120%;
            height: 100%;
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 40px;
            text-align: left;
            font-style: normal;
        }
    }

    .product8 {
        width: 37%;
        margin-left: 19%;
        margin-top: 60px;

        p {
            font-weight: 400;
            font-size: 1.5vw;
            color: #FFFFFF;
            line-height: 50px;
            text-align: left;
            font-style: normal;
        }

        img {
            width: 40%;
            height: 192px;
            margin-left: 120%;
            margin-top: -200px;
        }
    }

    .product9 {
        width: 38%;
        margin-left: 19%;
        margin-top: 80px;

        p {
            width: 120%;
            height: auto;
            font-weight: 600;
            font-size: 60px;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
        }
    }

    /* 九宫格容器 */
    .grid-container {
        display: flex;
        flex-wrap: wrap;
        margin-left: 19%;
        margin-top: 30px;
        width: 63%;
        height: auto;
    }

    /* 单元格样式 */
    .cell {
        width: 31%;
        height: 200px;
        font-size: 24px;
        border: 1px solid #808080;
        margin: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative; /* 为了让文字可以绝对定位 */
        cursor: pointer; /* 鼠标悬停时显示为可点击 */
    }

    /* 单元格中的文字 */
    .cell p {
        font-weight: 400;
        font-size: 1.5vw;
        color: #808080;
        line-height: 24px;
        text-align: left;
        margin: 0;
    }

    /* 图片默认隐藏 */
    .cell img {
        clip-path: inset(3px); /* 根据需要调整裁剪区域 */
        width: 70%;
        height: auto;
        display: none; /* 默认隐藏图片 */
    }

    /* 当单元格显示图片时，文字调整到左上方 */
    .cell.with-image p {
        position: absolute; /* 绝对定位 */
        top: 10px; /* 距离上边距10px */
        left: 10px; /* 距离左边距10px */
        font-size: 1.1vw; /* 可以调整字体大小 */
        color: #808080; /* 文字颜色 */
        line-height: 18px;
    }

    /* 高亮选中的单元格 */
    .cell.highlighted {
        border: 2px solid #ffffff; /* 高亮边框，使用红色 */
    }

    .cell.highlighted p {
        color: #ffffff; /* 高亮文字颜色 */
    }

    .product10 {
        width: 35%;
        margin-left: 19%;
        margin-top: 80px;

        h1 {
            width: 100%;
            font-weight: 600;
            font-size: 3vw;
            color: #FFFFFF;
            line-height: 60px;
            text-align: left;
            font-style: normal;
        }
    }

    /* 默认标签样式 */
    .product11 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        flex-wrap: wrap;
        margin-left: 19%;
        margin-top: 30px;
    }

    .c1 {
        width: 10%;
        height: 60px;
        font-size: 1.5vw;
        border: 1px solid #808080;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: background-color 0.3s ease, border 0.3s ease, transform 0.3s ease;
    }

    /* 单元格中的文字 */
    .c1 p {
        font-weight: 400;
        font-size: 1.5vw;
        color: #808080;
        line-height: 24px;
        text-align: center;
        margin: 0;
    }

    /* 高亮样式 */
    .c1.selected {
        border: 2px solid #ffffff;
        transform: scale(1.1); /* 标签点击时缩放 */
    }

    .c1.selected p {
        color: #ffffff;
    }

    /* 内容区域默认隐藏 */
    .product12 {
        width: 63%;
        height: 222px;
        margin-left: 20%;
        margin-top: 30px;
    }

    .product12 .content {
        display: none; /* 默认所有内容隐藏 */
        opacity: 0;
        transform: translateX(50px); /* 初始位置 */
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    /* 激活内容区域 */
    .product12 .content.active {
        display: block;
        opacity: 1;
        transform: translateX(0); /* 滑动动画 */
    }

    .product12 .content p {
        color: #FFFFFF;
        width: 42%;
        height: 240px;
        font-weight: 400;
        font-size: 1.5vw;
        line-height: 40px;
        text-align: left;
    }
    .con140 {
        display: flex;
        justify-content: center; /* 水平居中 */
    }
    .footc_l {

    }

    /* 图片区域默认隐藏 */
    .product13 {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
        margin-left: 30%;
        margin-top: -12%;
    }

    .product13 .image-pair {
        display: none; /* 默认隐藏图片 */
        opacity: 0;
        transform: translateX(50px); /* 初始位置 */
        transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .product13 .image-pair.show {
        display: flex;
        opacity: 1; /* 图片淡入 */
        transform: translateX(0); /* 图片滑入 */
    }

    .product13 .image-pair img {
        width: 80%;
        height: auto;
        object-fit: cover;
        margin: 0;
    }
}
.animated {
    opacity: 0; /* 初始状态不可见 */
    animation-fill-mode: forwards; /* 确保动画完成后保持最终状态 */
    animation-duration: 1.2s; /* 动画持续时间 */
}