/* 全局重置与基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", "PingFang SC", "Helvetica Neue", sans-serif;
}

html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 头部导航固定 - PC端保持原有样式 */
.header-nav-wrap {
    width: 100%;
    background-color: #fff; /* PC端白色背景 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* PC端阴影 */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    transition: all 0.3s ease;
    pointer-events: auto;
}

body {
    padding-top: 56px; /* PC端保留头部内边距 */
    color: #333;
    line-height: 1.6;
    
}

/* 菜单区域 */
.header-nav {
    max-width: 1100px;
    height: 56px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative;
}

/* PC端显示logo */
.nav-logo {
    display: flex;
    align-items: center;
}
.nav-logo img {
    height: 40px;
    object-fit: contain;
}

/* 桌面端菜单 */
.nav-menu {
    display: flex;
    list-style: none;
}

.nav-menu li {
    margin-left: 30px;
    position: relative;
    height: 56px;
    display: flex;
    align-items: center;
}

.nav-menu a {
    text-decoration: none;
    color: #605f6d;
    font-size: 17px;
    font-weight: 300;
    transition: color 0.3s;
    display: inline-block;
    position: relative;
    padding: 4px 0;
}

.nav-menu a.active::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #666;
    transition: all 0.3s;
}

.nav-menu a:hover::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #666;
    opacity: 0.7;
    transition: all 0.3s;
}

.nav-menu a:hover {
    color: #333;
}

/* 汉堡菜单按钮 - 移动端（左侧） */
.hamburger-btn {
    display: none;
    width: 40px;
    height: 40px;
    background-color: #000;
    border-radius: 2px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    z-index: 10001;
    position: absolute;
    left: 20px; /* 固定在左侧 */
    top: 8px; /* 垂直居中 */
    transition: background-color 0.2s ease;
}

.hamburger-btn:hover {
    background-color: #333;
}

.hamburger-line {
    width: 20px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
    transition: all 0.3s ease;
}

/* 移动端弹出菜单 */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: hsla(0,0%,100%,.98);
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    padding-top: 70px;
    overflow-y: auto;
}

.mobile-menu.show {
    transform: translateY(0);
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close-line {
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: #333;
}

.close-line:first-child {
    transform: rotate(45deg);
}

.close-line:last-child {
    transform: rotate(-45deg);
}

/* 移动端菜单列表 */
.mobile-menu-list {
    list-style: none;
    width: 100%;
}

.mobile-menu-item {
    width: 100%;
    border-bottom: 1px dashed #ccc;
}

.mobile-menu-item a {
    display: block;
    padding: 20px 30px;
    text-decoration: none;
    color: #605f6d;
    font-size: 18px;
    transition: color 0.3s;
}

.mobile-menu-item a.active {
    color: #333;
    font-weight: 500;
}

.mobile-menu-item a:hover {
    color: #333;
}

/* 通用Banner区域 - 区分所有页面Banner */
/* 首页Banner */
.banner {
    width: 100%;
    max-height: 725px;
    height: calc(100vh - 56px); /* PC端高度 */
    min-height: 400px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./19.jpg") center/cover no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
    margin-top: 0;
}

.banner-content {
    max-width: 800px;
}

.banner-title {
    font-size: 48px;
    margin-bottom: 16px;
    line-height: 1.2;
    font-weight: normal;
}

.banner-subtitle {
    font-size: 24px;
    margin-bottom: 32px;
    opacity: 0.9;
}

.banner-btn {
    display: inline-block;
    width: 140px;
    height: 65px;
    line-height: 65px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    border-radius: 2px;
    transition: all 0.3s;
}

.banner-btn:hover {
    background-color: #fff;
    color: #333;
}

/* 关于我们页面Banner */
.banner.about-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-about.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    font-size: 32px;
    text-align: left;
}

.banner.about-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* 安全页面Banner */
.banner.safety-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-safety.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    font-size: 32px;
    text-align: left;
}

.banner.safety-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* 产品页面Banner */
.banner.product-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-product.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    font-size: 32px;
    text-align: left;
}

.banner.product-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* 联系我们页面Banner */
.banner.contact-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-contact.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    text-align: center;
}

.banner.contact-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* 人才招聘页面Banner */
.banner.talent-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-talent.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    font-size: 32px;
    text-align: left;
    padding: 0 20px;
}

.banner.talent-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* 研发技术页面Banner */
.banner.tech-banner {
    height: 260px;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url("./banner-tech.jpg") center/cover no-repeat;
    display: flex;
    align-items: center;
    font-size: 32px;
    text-align: left;
    padding: 0 20px;
}

.banner.tech-banner .banner-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: left;
}

/* banner下方模块 - 首页专用 */
.banner-bottom-module {
    max-width: 1000px;
    margin: 120px auto 100px;
    padding: 0 20px;
    text-align: center;
    position: relative;
}
.banner-bottom-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 60px;
    font-weight: normal;
}
.banner-bottom-container {
    display: flex;
    align-items: center;
    gap: 40px;
    justify-content: center;
}
.banner-bottom-img {
    flex: 1;
    max-width: 500px;
}
.banner-bottom-img img {
    width: 100%;
    border-radius: 4px;
}
.banner-bottom-text {
    flex: 1;
    text-align: left;
    color: #333;
}
.banner-bottom-text h3 {
    font-size: 22px;
    margin-bottom: 8px;
}
.banner-bottom-text p {
    font-size: 16px;
    margin-bottom: 24px;
    line-height: 1.6;
}

/* 樾达科技一览模块 - 首页专用 */
.overview-module {
    max-width: 1000px;
    margin: 120px auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
}
.overview-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 80px;
    position: relative;
    display: inline-block;
    font-weight: normal;
}
/* 调整一览模块虚线样式 */
.overview-title::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

.overview-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.overview-item {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.overview-item.show {
    opacity: 1;
    transform: translateY(0);
}
.overview-icon {
    width: 185px;
    height: 120px;
    margin-bottom: 15px;
    object-fit: contain;
}
.overview-text {
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

/* 了解更多模块（首页）- 拉大间距 */
.more-info-module {
    max-width: 864px;
    margin: 120px auto;
    padding: 0 20px;
    text-align: center;
    position: relative;
}
.more-info-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 80px;
    position: relative;
    display: inline-block;
    font-weight: normal;
}
/* 调整了解更多模块虚线样式 */
.more-info-title::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

.more-info-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.more-info-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 0;
    border-radius: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.more-info-item.show {
    opacity: 1;
    transform: translateY(0);
}
.more-info-img {
    flex: 0 0 304px;
    height: 171px;
    object-fit: cover;
    border-radius: 8px;
}
.more-info-content {
    flex: 1;
    text-align: left;
}
.more-info-content h3 {
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
}
.more-info-content p {
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}
.more-info-btn {
    display: inline-block;
    padding: 8px 20px;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 2px;
    transition: background-color 0.3s;
}

/* 内容容器（所有子页面通用）- 宽度864px */
.content-container {
    max-width: 864px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 模块通用样式（关于我们） */
.about-section {
    padding: 60px 0;
    position: relative;
}

/* 全屏虚线分隔（关于我们） */
.about-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（关于我们） */
.about-section:first-child::before {
    display: none;
}

/* 通用标题样式 - 所有页面通用（区分不同页面间距） */
.section-title {
    font-size: 36px;
    color: #333;
    margin-bottom: 30px;
    font-weight: normal;
    text-align: center;
    padding-bottom: 0;
    border-bottom: none;
}

/* 各页面标题间距调整 */
.product-section .section-title { margin-bottom: 40px; }
.contact-section .section-title { margin-bottom: 20px; }
.talent-section .section-title { margin-bottom: 30px; }
.tech-section .section-title { margin-bottom: 30px; }

.company-intro {
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: center;
}

/* 图文布局模块（关于我们）- 交错图文专用样式 */
.flex-module-section {
    padding: 60px 0;
    position: relative;
}

.flex-module-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

.flex-module {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.flex-module.reverse {
    flex-direction: row-reverse;
}

.module-text {
    flex: 1;
}

.module-title {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
    font-weight: normal;
}

/* 交错图文图片尺寸 412X231（关于我们） */
.module-img {
    flex: 0 0 412px;
    height: 231px;
}

.module-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* 服务行业模块（关于我们） */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    text-align: center;
    margin-top: 20px;
}

.industry-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}

.industry-item p {
    font-size: 14px;
}

/* 资质与荣誉模块（关于我们）- 3列2行 */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}

.cert-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cert-item img {
    width: 268px;
    height: 392px;
    object-fit: cover;
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
}

.cert-item p {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}

/* 安全页面专用样式 */
/* 模块通用样式（安全页面） */
.safety-section {
    padding: 60px 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 模块显示状态（安全页面） */
.safety-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 全屏虚线分隔（安全页面） */
.safety-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（安全页面） */
.safety-section:first-child::before {
    display: none;
}

/* 安全/产品/联系我们/人才招聘/研发技术页面通用描述 */
.section-desc {
    text-align: center;
    margin-bottom: 40px;
    color: #666;
    line-height: 1.8;
}

/* 安全模块 - 三列布局（安全页面） */
.safety-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.safety-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.safety-section.animate-in .safety-item {
    opacity: 1;
    transform: translateY(0);
}

.safety-item:nth-child(1) { transition-delay: 0.1s; }
.safety-item:nth-child(2) { transition-delay: 0.2s; }
.safety-item:nth-child(3) { transition-delay: 0.3s; }

.safety-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.safety-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.safety-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* 品质模块 - 三列布局（安全页面） */
.quality-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.quality-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.safety-section.animate-in .quality-item {
    opacity: 1;
    transform: translateY(0);
}

.quality-item:nth-child(1) { transition-delay: 0.1s; }
.quality-item:nth-child(2) { transition-delay: 0.2s; }
.quality-item:nth-child(3) { transition-delay: 0.3s; }

.quality-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.quality-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.quality-item p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* MSDS下载模块（安全页面） */
.msds-section {
    text-align: center;
}

.msds-desc {
    margin-bottom: 30px;
    color: #666;
}

.msds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px; /* 增加间距 */
}

.msds-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.safety-section.animate-in .msds-item {
    opacity: 1;
    transform: translateY(0);
}

.msds-item:nth-child(1) { transition-delay: 0.1s; }
.msds-item:nth-child(2) { transition-delay: 0.2s; }
.msds-item:nth-child(3) { transition-delay: 0.3s; }
.msds-item:nth-child(4) { transition-delay: 0.4s; }
.msds-item:nth-child(5) { transition-delay: 0.5s; }
.msds-item:nth-child(6) { transition-delay: 0.6s; }

.msds-item img {
    width: 60px;
    height: 60px;
    margin-bottom: 10px;
}

.msds-item p {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px; /* 调整间距 */
}

/* MSDS下载按钮样式（安全页面） */
.msds-item a {
    text-decoration: none;
    color: #fff; /* 文字白色 */
    font-size: 14px;
    background: #444; /* 背景色 #444 */
    border-radius: 3px; /* 圆角 3px */
    padding: 6px 12px; /* 内边距 */
    transition: background 0.3s; /* 过渡效果 */
    display: inline-block; /* 确保padding生效 */
}

.msds-item a:hover {
    background: #000; /* 鼠标移上背景 #000 */
    color: #fff; /* 保持文字白色 */
}

/* 查看更多按钮样式（安全页面） */
.msds-more-wrap {
    display: flex;
    justify-content: center; /* 按钮居中 */
    margin-top: 10px;
}

.msds-more {
    display: inline-block;
    padding: 8px 24px; /* 调整内边距 */
    background: #444; /* 背景色 #444 */
    border-radius: 3px; /* 圆角 3px */
    color: #fff; /* 文字白色 */
    text-decoration: none;
    transition: background 0.3s; /* 过渡效果 */
    border: none; /* 移除边框 */
}

.msds-more:hover {
    background: #000; /* 鼠标移上背景 #000 */
    color: #fff; /* 保持文字白色 */
}

/* 安全分享模块（安全页面） */
.share-section {
    text-align: center;
}

.share-item {
    max-width: 400px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.safety-section.animate-in .share-item {
    opacity: 1;
    transform: translateY(0);
}

.share-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.share-item h3 {
    font-size: 20px;
    color: #333;
}

.share-item p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* 产品页面专用样式 */
/* 模块通用样式（产品页面） */
.product-section {
    padding: 60px 0;
    position: relative;
}

/* 全屏虚线分隔（产品页面） */
.product-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（产品页面） */
.product-section:first-child::before {
    display: none;
}

/* 电子特气产品 - 206X206px，2列4行（产品页面） */
.gas-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gas-product-item {
    text-align: center;
}

.gas-product-img {
    width: 206px;
    height: 206px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto 10px;
}

.gas-product-name {
    font-size: 16px;
    color: #333;
}

/* 更多按钮（产品页面） */
.more-btn {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    margin: 30px auto 0;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.more-btn:hover {
    background-color: #555;
}

/* 核心产品简介 - 左侧图412X231px（产品页面） */
.core-product-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.core-product-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.core-product-img {
    flex: 0 0 412px;
    height: 231px;
    border-radius: 8px;
    object-fit: cover;
}

.core-product-text {
    flex: 1;
}

.core-product-title {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.core-product-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* 更多产品 - 3列，图268X178px（产品页面） */
.more-product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.more-product-item {
    text-align: center;
}

.more-product-img {
    width: 268px;
    height: 178px;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 auto 10px;
}

.more-product-name {
    font-size: 16px;
    margin-bottom: 10px;
}

.more-product-sub-btn {
    display: inline-block;
    padding: 6px 15px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px;
    transition: all 0.3s;
}

.more-product-sub-btn:hover {
    background-color: #333;
    color: #fff;
}

/* 我们的服务 - 6列，图124X91px（产品页面） */
.service-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    text-align: center;
}

.service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-img {
    width: 124px;
    height: 91px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

.service-name {
    font-size: 14px;
    color: #333;
}

/* 联系我们页面专用样式 */
/* 模块通用样式（联系我们） */
.contact-section {
    padding: 60px 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 模块显示状态（联系我们） */
.contact-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 全屏虚线分隔（联系我们） */
.contact-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（联系我们） */
.contact-section:first-child::before {
    display: none;
}

/* 联系表单+信息区域（联系我们） */
.contact-wrap {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

.contact-section.animate-in .contact-wrap {
    opacity: 1;
    transform: translateY(0);
}

.contact-form {
    flex: 1;
}

.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    transition: border-color 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #666;
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form button {
    width: 100px;
    padding: 10px 0;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 14px;
}

.contact-form button:hover {
    background-color: #000;
}

.contact-info {
    flex: 1;
    color: #666;
    font-size: 14px;
}

.contact-info p {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.contact-info p span:first-child {
    color: #333;
    min-width: 80px;
}

/* 人才招聘页面专用样式 */
/* 模块通用样式（人才招聘） */
.talent-section {
    padding: 60px 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 模块显示状态（人才招聘） */
.talent-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 全屏虚线分隔（人才招聘） */
.talent-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（人才招聘） */
.talent-section:first-child::before {
    display: none;
}

/* 人才理念与发展模块（人才招聘） */
.talent-concept {
    margin-bottom: 40px;
}

.talent-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 40px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.talent-section.animate-in .talent-item {
    opacity: 1;
    transform: translateY(0);
}

.talent-item:nth-child(1) { transition-delay: 0.1s; }
.talent-item:nth-child(2) { transition-delay: 0.2s; }
.talent-item:nth-child(3) { transition-delay: 0.3s; }

.talent-img {
    flex: 0 0 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

.talent-text {
    flex: 1;
}

.talent-text h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.talent-text p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* 招聘职位模块（人才招聘）- 完全重构 */
.job-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 职位项容器 - 关键修改（人才招聘） */
.job-item {
    border-radius: 5px;
    border: 1px solid rgb(226, 228, 231);
    padding: 20px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    position: relative; /* 相对定位，作为箭头绝对定位的容器 */
    background-color: #fff;
}

.talent-section.animate-in .job-item {
    opacity: 1;
    transform: translateY(0);
}

.job-item:nth-child(1) { transition-delay: 0.1s; }
.job-item:nth-child(2) { transition-delay: 0.2s; }
.job-item:nth-child(3) { transition-delay: 0.3s; }
.job-item:nth-child(4) { transition-delay: 0.4s; }
.job-item:nth-child(5) { transition-delay: 0.5s; }
.job-item:nth-child(6) { transition-delay: 0.6s; }

.job-name {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    padding-right: 40px; /* 给箭头留出空间 */
    display: block;
}

/* 箭头样式 - 完全重构（人才招聘） */
.arrow {
    /* 绝对定位到模块最右侧 */
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    
    /* 箭头样式 */
    font-size: 20px; /* 基础大小 */
    color: #777;
    font-style: normal;
    user-select: none;
    transition: all 0.3s ease-in-out;
    
    /* 更大角度的箭头 */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 向右箭头（更大角度）（人才招聘） */
.arrow::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #777;
    border-bottom: 2px solid #777;
    transform: rotate(-45deg); /* 更大角度的右箭头 */
    transition: transform 0.3s ease-in-out;
}

/* 展开时向下箭头（人才招聘） */
.job-item.active .arrow::before {
    transform: rotate(45deg); /* 向下箭头 */
}

/* 职位详情样式（人才招聘） */
.job-detail-wrap {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.job-detail {
    width: 100%;
    padding: 20px;
    background-color: #f9fafb;
    border-radius: 0 0 5px 5px;
    color: #666;
    font-size: 14px;
    line-height: 1.8;
    border: 1px solid rgb(226, 228, 231);
    border-top: none;
}

.job-detail h4 {
    font-size: 15px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
}

.job-detail p {
    margin-bottom: 12px;
}

.job-detail p:last-child {
    margin-bottom: 0;
}

/* 研发技术页面专用样式 */
/* 模块通用样式（研发技术） */
.tech-section {
    padding: 60px 0;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 模块显示状态（研发技术） */
.tech-section.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 全屏虚线分隔（研发技术） */
.tech-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
}

/* 第一个模块取消顶部虚线（研发技术） */
.tech-section:first-child::before {
    display: none;
}

/* 研发技术列表 - 图文布局（研发技术） */
.tech-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.tech-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s;
}

/* 技术项显示状态（研发技术） */
.tech-section.animate-in .tech-item {
    opacity: 1;
    transform: translateY(0);
}

/* 逐个动画延迟（研发技术） */
.tech-item:nth-child(1) { transition-delay: 0.1s; }
.tech-item:nth-child(2) { transition-delay: 0.2s; }
.tech-item:nth-child(3) { transition-delay: 0.3s; }
.tech-item:nth-child(4) { transition-delay: 0.4s; }
.tech-item:nth-child(5) { transition-delay: 0.5s; }

.tech-img {
    flex: 0 0 412px;
    height: 231px;
    border-radius: 8px;
    object-fit: cover;
}

.tech-text {
    flex: 1;
}

.tech-title {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.tech-content {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* 了解更多模块 - 所有页面通用（5列） */
.more-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 30px;
    text-align: center;
    /* 安全/联系我们/人才招聘/研发技术页面专属动画 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

/* 了解更多显示状态（安全/联系我们/人才招聘/研发技术页面） */
.safety-section.animate-in .more-grid,
.contact-section.animate-in .more-grid,
.talent-section.animate-in .more-grid,
.tech-section.animate-in .more-grid {
    opacity: 1;
    transform: translateY(0);
}

/* 非动画页面移除过渡 */
.about-section .more-grid, .product-section .more-grid {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 安全/联系我们/人才招聘/研发技术页面专属动画 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 了解更多子项动画（安全/联系我们/人才招聘/研发技术页面） */
.safety-section.animate-in .more-item,
.contact-section.animate-in .more-item,
.talent-section.animate-in .more-item,
.tech-section.animate-in .more-item {
    opacity: 1;
    transform: translateY(0);
}

/* 非动画页面移除子项过渡 */
.about-section .more-item, .product-section .more-item {
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.more-item:nth-child(1) { transition-delay: 0.3s; }
.more-item:nth-child(2) { transition-delay: 0.4s; }
.more-item:nth-child(3) { transition-delay: 0.5s; }
.more-item:nth-child(4) { transition-delay: 0.6s; }
.more-item:nth-child(5) { transition-delay: 0.7s; }

.more-item img {
    width: 152px;
    height: 152px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid #eee;
}

.more-item a {
    text-decoration: none;
    color: #605f6d;
    font-size: 16px;
    transition: color 0.3s;
}

.more-item a:hover {
    color: #333;
}

/* 底部模块通用样式 */
.footer-top-dash {
    position: relative;
    height: 1px;
    margin: 0 auto;
    overflow: hidden;
}
.footer-top-dash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
    transform: translateX(calc(-50vw + 50%));
}

.footer-module {
    max-width: 1000px;
    margin: 40px auto 0;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    font-size: 14px;
    color: #666;
    /* 安全/联系我们/人才招聘/研发技术页面底部动画 */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 底部模块显示状态（安全/联系我们/人才招聘/研发技术页面） */
.footer-module.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* 首页/关于我们/产品页面底部样式 */
.footer-module.default {
    margin: 60px auto 0;
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

.footer-logo {
    flex: 1;
    min-width: 200px;
}
.footer-logo img {
    height: 40px;
    margin-bottom: 10px;
}
.footer-col {
    flex: 1;
    min-width: 150px;
}
.footer-col h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
}
.footer-col ul {
    list-style: none;
}
.footer-col li {
    margin-bottom: 8px;
}
.footer-col a {
    text-decoration: none;
    color: #666;
    transition: color 0.3s;
}
.footer-col a:hover {
    color: #333;
}
.footer-copyright {
    max-width: 1000px;
    margin: 20px auto 10px;
    padding: 0 10px 20px;
    border-top: 1px solid #eee;
    font-size: 12px;
    color: #999;
    text-align: center;
    line-height: 2;
}
.footer-copyright span {
    margin: 0 8px;
}

/* 修改底部虚线样式 - 全屏宽度 */
.bottom-dash {
    position: relative;
    height: 1px;
    margin: 100px 0;
    overflow: hidden;
}
.bottom-dash::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 1px;
    border-top: 1px dashed #ccc;
    transform: translateX(calc(-50vw + 50%));
}

/* 响应式适配 - 768px断点（移动端） */
@media (max-width: 768px) {
    /* 移动端头部透明，移除logo */
    .header-nav-wrap {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    .nav-logo {
        display: none; /* 移动端隐藏logo */
    }
    .header-nav {
        height: 56px;
        justify-content: center;
    }
    body {
        padding-top: 0; /* 移动端移除顶部内边距 */
    }
    
    /* 显示汉堡按钮 */
    .nav-menu {
        display: none;
    }
    .hamburger-btn {
        display: flex;
    }
    
    /* 首页Banner移动端贴合顶部 */
    .banner {
        height: 100vh;
        padding-top: 56px; /* 给头部留出空间 */
    }
    .banner-title {
        font-size: 32px;
    }
    .banner-subtitle {
        font-size: 18px;
    }
    .banner-btn {
        width: 120px;
        height: 55px;
        line-height: 55px;
        font-size: 16px;
    }

    /* 所有子页面Banner移动端适配 */
    .banner.about-banner, .banner.safety-banner, 
    .banner.product-banner, .banner.contact-banner, 
    .banner.talent-banner, .banner.tech-banner {
        height: 180px;
        font-size: 28px;
        padding-top: 56px;
    }
    .banner.about-banner .banner-content, .banner.safety-banner .banner-content, 
    .banner.product-banner .banner-content, .banner.contact-banner .banner-content,
    .banner.talent-banner .banner-content, .banner.tech-banner .banner-content {
        max-width: 100%;
    }
    
    /* 樾达科技一览 - 移动端一行显示2个 */
    .overview-module {
        margin: 80px auto;
    }
    .overview-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .overview-item {
        min-width: unset;
        width: 100%;
    }
    .overview-title {
        font-size: 26px;
    }
    
    /* banner下方模块移动端适配 */
    .banner-bottom-module {
        margin: 80px auto 60px;
    }
    .banner-bottom-container {
        flex-direction: column;
        gap: 20px;
    }
    .banner-bottom-text {
        text-align: center;
    }
    
    /* 首页了解更多模块移动端适配 */
    .more-info-module {
        margin: 80px auto;
        max-width: 100%;
    }
    .more-info-title {
        font-size: 26px;
    }
    .more-info-item {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .more-info-content {
        text-align: center;
        width: 100%;
        padding: 0 10px;
    }
    .more-info-img {
        flex: 0 0 100%;
        height: auto;
        max-height: 250px;
        width: 100%;
    }
    /* 查看更多按钮移动端全屏宽度 */
    .more-info-btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 12px 0;
        font-size: 16px;
    }

    /* 关于我们 - 移动端交错图文100%宽度 */
    .flex-module, .flex-module.reverse {
        flex-direction: column;
        gap: 20px;
    }
    .module-img {
        flex: 0 0 100%;
        height: auto;
    }
    .module-img img {
        border-radius: 8px; /* 8px圆角 */
    }

    /* 关于我们 - 服务行业模块移动端2列 */
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 关于我们 - 移动端资质模块改为2列 */
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .cert-item img {
        width: 100%;
        height: auto;
        max-height: 392px;
    }

    /* 安全页面 - 安全/品质/MSDS模块移动端单列 */
    .safety-grid, .quality-grid, .msds-grid {
        grid-template-columns: 1fr;
    }

    /* 产品页面 - 电子特气产品移动端2列 */
    .gas-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .gas-product-img {
        width: 100%;
        height: auto;
        max-height: 206px;
    }

    /* 产品页面 - 核心产品简介移动端单列 */
    .core-product-item {
        flex-direction: column;
    }
    .core-product-img {
        flex: 0 0 100%;
        height: auto;
        max-height: 231px;
    }

    /* 产品页面 - 更多产品移动端2列 */
    .more-product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .more-product-img {
        width: 100%;
        height: auto;
        max-height: 178px;
    }

    /* 产品页面 - 我们的服务移动端2列 */
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .service-img {
        width: 100%;
        height: auto;
        max-height: 91px;
    }

    /* 联系我们 - 表单+信息移动端单列 */
    .contact-wrap {
        flex-direction: column;
        gap: 30px;
    }

    /* 人才招聘 - 移动端单列 */
    .talent-item {
        flex-direction: column;
    }
    .talent-img {
        flex: 0 0 100%;
        height: auto;
        max-height: 200px;
    }
    /* 人才招聘 - 移动端箭头优化 */
    .arrow {
        width: 20px;
        height: 20px;
        font-size: 18px;
    }
    .arrow::before {
        width: 7px;
        height: 7px;
    }

    /* 研发技术 - 移动端单列 */
    .tech-item {
        flex-direction: column;
    }
    .tech-img {
        flex: 0 0 100%;
        height: auto;
        max-height: 231px;
    }

    /* 通用 - 了解更多模块移动端2列 */
    .more-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    .more-item:nth-child(5) {
        grid-column: 1 / 3;
        margin-top: 10px;
    }
    .more-item img {
        width: 120px;
        height: 120px;
    }
    
    /* 底部模块移动端布局 - 两行两列，左对齐 */
    .footer-module {
        margin: 80px auto 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
        text-align: left;
        padding: 40px 20px;
    }
    .footer-logo, .footer-col {
        min-width: unset;
        flex: unset;
        width: 100%;
    }
    /* 第一行：logo + 关于我们 */
    .footer-logo {
        grid-row: 1;
        grid-column: 1;
    }
    .footer-col:nth-child(2) { /* 关于我们 */
        grid-row: 1;
        grid-column: 2;
    }
    /* 第二行：网站导航 + 联系我们 */
    .footer-col:nth-child(3) { /* 网站导航 */
        grid-row: 2;
        grid-column: 1;
    }
    .footer-col:nth-child(4) { /* 联系我们 */
        grid-row: 2;
        grid-column: 2;
    }
    .footer-col ul {
        padding-left: 0;
    }
    .footer-col li {
        text-align: left;
    }
}

/* 小屏手机额外适配 - 480px断点 */
@media (max-width: 480px) {
    .overview-list {
        gap: 20px;
    }
    .overview-icon {
        width: 60px;
        height: 60px;
    }
    .overview-text {
        font-size: 14px;
    }

    /* 通用标题适配 */
    .section-title {
        font-size: 28px;
    }

    /* 所有子页面Banner小屏适配 */
    .banner.about-banner, .banner.safety-banner, 
    .banner.product-banner, .banner.contact-banner, 
    .banner.talent-banner, .banner.tech-banner {
        height: 150px;
        font-size: 24px;
    }
    
    /* 关于我们 - 小屏手机资质模块改为1列 */
    .cert-grid {
        grid-template-columns: 1fr;
    }

    /* 产品页面 - 电子特气产品小屏1列 */
    .gas-product-grid {
        grid-template-columns: 1fr;
    }

    /* 产品页面 - 更多产品小屏1列 */
    .more-product-grid {
        grid-template-columns: 1fr;
    }

    /* 通用 - 了解更多模块小屏1列 */
    .more-grid {
        grid-template-columns: 1fr;
    }
    .more-item:nth-child(5) {
        grid-column: 1;
    }
    
    /* 人才招聘 - 小屏手机职位样式优化 */
    .job-item {
        padding: 15px;
    }
    .job-detail {
        padding: 15px;
    }
    .arrow {
        right: 15px;
        width: 18px;
        height: 18px;
    }
    .arrow::before {
        width: 6px;
        height: 6px;
    }
    
    /* 小屏手机底部模块优化 */
    .footer-module {
        gap: 25px 15px;
    }
    .footer-col h4 {
        font-size: 15px;
    }
    .footer-col li, .footer-logo p {
        font-size: 13px;
    }
}