/* 全局样式 */
:root {
    --primary-color: #0056b3;
    --secondary-color: #003366;
    --accent-color: #00a0e9;
    --text-color: #333333;
    --light-text: #ffffff;
    --light-gray: #f5f5f5;
    --medium-gray: #e0e0e0;
    --dark-gray: #666666;
    --border-color: #dddddd;
    --success-color: #28a745;
    --warning-color: #ffc107;
    --error-color: #dc3545;
    --font-main: 'Segoe UI', Arial, sans-serif;
    --transition-speed: 0.3s;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.6;
    background-color: #ffffff;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--secondary-color);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 4px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--light-text);
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--light-text);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.btn-outline {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.btn-large {
    padding: 15px 35px;
    font-size: 1.1em;
}

/* 导航栏样式 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.logo img {
    height: 50px;
}

.main-nav ul {
    display: flex;
}

.main-nav li {
    margin: 0 15px;
}

.main-nav a {
    color: var(--text-color);
    font-weight: 500;
    padding: 10px 0;
    position: relative;
}

.main-nav a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}

.main-nav a:hover:after,
.main-nav a.active:after {
    width: 100%;
}

.language-selector select {
    padding: 5px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: #ffffff;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 2px 0;
    transition: all var(--transition-speed);
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* 横幅轮播样式 */
.hero-slider {
    margin-top: 80px; /* 控制轮播图与顶部的距离 */
    position: relative;
    overflow: hidden;
    height: 600px; /* 控制轮播图的高度 */
    background-color: #f0f0f0;
}

.slider-container {
    position: relative;
    height: 100%;
    width: 100%;
}

.slide {
    display: none; /* 默认隐藏所有幻灯片 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    align-items: center;
    padding: 0 50px;
}

.slide.active {
    display: flex; /* 活动状态的幻灯片显示为flex布局 */
    opacity: 1;
    z-index: 1;
}

.slide-content {
    flex: 1;
    padding-right: 50px;
    padding: 30px;
  
    border-radius: 8px; /* 添加圆角 */
}

.slide-content h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.slide-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: var(--dark-gray);
}

.slide-image {
    flex: 1;
    text-align: center;
}

.slide-image img {
    max-height: 400px;
    border-radius: 10px;
    /* 移除阴影效果 */
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
    background-color: transparent;
}

.slider-controls {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.prev-slide,
.next-slide {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 15px;
    transition: background var(--transition-speed);
}

.prev-slide:hover,
.next-slide:hover {
    background: rgba(255, 255, 255, 0.9);
}

.slider-dots {
    display: flex;
    margin: 0 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 5px;
    cursor: pointer;
    transition: background var(--transition-speed);
}

.dot.active {
    background-color: var(--primary-color);
}

/* 公司简介样式 */
.company-intro {
    padding: 80px 0;
    background-color: var(--light-gray);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.2em;
    color: var(--secondary-color);
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.section-header h2:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: var(--accent-color);
}

.section-header p {
    color: var(--dark-gray);
    font-size: 1.1em;
}

.intro-content {
    display: flex;
    align-items: center;
}

.intro-text {
    flex: 1;
    padding-right: 50px;
}

.intro-text p {
    margin-bottom: 20px;
    font-size: 1.05em;
}

.intro-image {
    flex: 1;
}

.intro-image img {
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 全球业务地图样式 */
.global-map {
    padding: 80px 0;
    background-color: #ffffff;
}

.map-container {
    position: relative;
}

#world-map {
    height: 500px;
    background-color: var(--light-gray);
    border-radius: 10px;
    overflow: hidden;
}

.map-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 30px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 1.1em;
    color: var(--dark-gray);
}

/* 产品分类样式 */
.product-categories {
    padding: 80px 0;
    background-color: var(--light-gray);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

/* 修改产品卡片样式 */
.category-card {
    background-color: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.category-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.category-content h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
    font-size: 1.4em;
    text-align: center;
}

.category-content p {
    margin-bottom: 25px;
    color: var(--dark-gray);
    text-align: center;
    flex-grow: 1;
}

.category-content .btn {
    align-self: center;
    min-width: 120px;
}

.category-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.category-content {
    padding: 20px;
}

.category-content h3 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

.category-content p {
    margin-bottom: 20px;
    color: var(--dark-gray);
}

/* 客户案例样式 */
.client-cases {
    padding: 80px 0;
    background-color: #ffffff; /* 保持白色背景 */
}

/* 公司简介样式 */
.company-intro {
    padding: 80px 0;
    background-color: var(--light-gray); /* 保持浅灰色背景 */
}

.cases-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px;
}

.case-item {
    text-align: center;
    padding: 30px 20px;
    background-color: var(--light-gray);
    border-radius: 10px;
    transition: transform var(--transition-speed);
}

.case-item:hover {
    transform: translateY(-5px);
}

.case-icon {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.case-item h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}

.case-item p {
    color: var(--dark-gray);
}

/* 询价区域样式 */
.cta-section {
    padding: 80px 0;
    background-color: var(--primary-color);
    color: var(--light-text);
    text-align: center;
}

.cta-content h2 {
    font-size: 2.2em;
    margin-bottom: 15px;
}

.cta-content p {
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-section .btn-primary {
    background-color: #ffffff;
    color: var(--primary-color);
    border-color: #ffffff;
}

.cta-section .btn-primary:hover {
    background-color: transparent;
    color: #ffffff;
}

/* 页脚样式 */
.footer {
    background-color: var(--secondary-color);
    color: var(--light-text);
    padding: 80px 0 20px;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.footer-logo {
    flex: 1;
    min-width: 250px;
    margin-bottom: 30px;
}

.footer-logo img {
    height: 50px;
    margin-bottom: 15px;
}

.footer-links {
    flex: 3;
    display: flex;
    flex-wrap: wrap;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin-bottom: 30px;
}

.footer-column h3 {
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-column h3:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: var(--accent-color);
}

.footer-column ul li {
    margin-bottom: 10px;
}

.footer-column ul li a {
    color: #cccccc;
    transition: color var(--transition-speed);
}

.footer-column ul li a:hover {
    color: #ffffff;
}

/* 为页脚中的联系信息添加特定样式 */
.footer .contact-info {
    background-color: transparent; /* 移除白色背景 */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

.footer .contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.footer .contact-info li i {
    margin-right: 10px;
    margin-top: 5px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a {
    color: #cccccc;
    margin-left: 15px;
    font-size: 1.2em;
    transition: color var(--transition-speed);
}

.social-links a:hover {
    color: #ffffff;
}

/* 第一个轮播图的样式 */
.slide:nth-child(1) {
    width: 100%;
}


.slide:nth-child(1) .slide-image img {
    transform: scale(1.3); /* 将图片放大到原来的1.2倍 */
    max-height: 450px;
    
}

/* 第二个轮播图的样式 */
.slide:nth-child(2) .slide-image img {
    transform: scale(1.3); /* 将图片放大到原来的1.3倍 */
    max-height: 400px; /* 调整第二个轮播图的图片高度 */
    margin-left: 0px; /* 调整图片左侧间距，可能需要调整为0 */
    padding-right: 0px; /* 调整第二个轮播图内容的右侧内边距 */
}

.slide:nth-child(2) .slide-content {
    padding-right: 100px; /* 调整第二个轮播图内容的右侧内边距 */
}

/* 第三个轮播图的样式 */
.slide:nth-child(3) .slide-image img {
    transform: scale(1.2); /* 将图片放大到原来的1.3倍 */
    max-height: 400px; /* 调整第三个轮播图的图片高度 */
    margin-left: 0px; /* 调整图片左侧间距，可能需要调整为0 */
    padding-right: 50px; /* 调整第二个轮播图内容的右侧内边距 */
}

.slide:nth-child(3) .slide-content {
    padding-left: -20px; /* 与轮播图1保持一致 */
    /* 或者使用 padding-right: 70px; 与轮播图2保持一致 */
}

/* 订单滚动展示区样式 */
.orders-ticker-container {
    margin: 30px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid rgba(0, 86, 179, 0.1);
}

.refresh-notice {
    font-size: 0.8em;
    color: #888;
    padding: 0 20px 5px;
    text-align: right;
    margin-top: 0;
}

.orders-ticker-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--primary-color);
    color: white;
}

.ticker-icon {
    margin-right: 15px;
    font-size: 1.5em;
}

.orders-ticker-header h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.orders-ticker {
    position: relative;
    height: auto; /* 保持自动高度 */
    min-height: 400px; /* 增加最小高度以容纳5条订单，原来是160px */
    overflow: visible; /* 改为可见溢出，允许内容显示 */
    padding: 0 20px;
}

.ticker-wrapper {
    position: relative; /* 改为相对定位，不再使用绝对定位 */
    width: 100%;
    height: auto; /* 自动高度 */
    overflow: visible; /* 允许内容溢出显示 */
}

/* 添加承运商样式 */
.ticker-item-carrier {
    font-size: 0.85em;
    color: #666;
    margin-right: 10px;
    white-space: nowrap;
    background-color: #f0f8ff;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0; /* 防止被压缩 */
}

.ticker-item {
    display: flex;
    align-items: flex-start; /* 改为顶部对齐，避免内容拉伸 */
    padding: 15px 10px;
    padding-right: 10px; /* 减少右侧内边距，从20px改为10px */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    position: relative;
    justify-content: space-between; /* 两端对齐 */
    gap: 10px;
    min-height: 80px; /* 设置最小高度 */
    height: auto; /* 允许自动调整高度 */
}

/* 添加右侧信息容器 */
.ticker-item-right-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto; /* 推到右侧 */
    margin-right: 2; /* 完全移除右侧边距，从5px改为0 */
}

.ticker-item-flag {
    width: 30px;
    height: 20px;
    margin-right: 5px;
    border-radius: 3px;
    background-size: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.ticker-item-details {
    flex: 1;
    min-width: 0;
    max-width: 60%;
}

.ticker-item-carrier {
    font-size: 0.85em;
    color: #666;
    white-space: nowrap;
    background-color: #f0f8ff;
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ticker-item-time {
    font-size: 0.8em;
    color: var(--accent-color);
    white-space: nowrap;
    flex-shrink: 0; /* 防止被压缩 */
    margin-right: 3px; /* 减少右边距 */
}

/* 状态标签样式 - 不再使用绝对定位 */
.ticker-item-status {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    background-color: #e6f7ff;
    color: var(--primary-color);
    white-space: nowrap;
    flex-shrink: 0;
    position: static; /* 取消绝对定位 */
    transform: none; /* 取消transform */
    margin-right: 0; /* 完全移除右边距 */
}

.ticker-item.active {
    opacity: 1;
    transform: translateY(0);
}

.ticker-item-flag {
    width: 30px;
    height: 20px;
    margin-right: 5px; /* 减少右边距 */
    border-radius: 3px;
    background-size: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    flex-shrink: 0; /* 防止国旗被压缩 */
}

.ticker-item-details {
    flex: 0 1 auto; /* 改变flex属性，不再占据所有空间 */
    min-width: 0; /* 允许内容在必要时收缩 */
    max-width: 40%; /* 限制最大宽度 */
    margin-right: 10px; /* 添加右边距 */
    display: flex; /* 添加flex布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 所有子元素左对齐 */
    text-align: left;
}

.ticker-item-country {
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 3px;
    text-align: left; /* 确保左对齐 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    flex-wrap: wrap; /* 保持允许换行 */
    width: 100%; /* 占满容器宽度 */
    gap: 3px; /* 减小间距 */
    line-height: 1.3; /* 添加行高控制 */
}

.ticker-item-product {
    font-size: 0.9em;
    color: var(--dark-gray);
    text-align: left; /* 确保产品文字也是左对齐 */
    width: 100%; /* 占满容器宽度 */
}

.ticker-item-time {
    font-size: 0.8em;
    color: var(--accent-color);
    white-space: nowrap;
    flex-shrink: 0; /* 防止被压缩 */
    margin-right: 10px; /* 添加右边距 */
}

.ticker-item-status {
    margin-left: 15px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    background-color: #e6f7ff;
    color: var(--primary-color);
    margin-right: 0; /* 完全移除右侧边距 */
}

/* 删除这里重复的.ticker-item-status样式定义（约在第760行） */
/* 只保留以下特定状态的样式 */

.ticker-item-status.shipped {
    background-color: #e6f7ff;
    color: #0070f3;
}

.ticker-item-status.processing {
    background-color: #fff7e6;
    color: #fa8c16;
}

/* 删除已送达状态的样式 */
.ticker-item-status.delivered {
    background-color: #f6ffed;
    color: #52c41a;
}

/* 大宗订单标签样式 */
.ticker-item-bulk,
.bulk-type,
.ticker-item-b2b {
    display: inline-flex; /* 使用inline-flex */
    align-items: center;
    justify-content: center;
    padding: 1px 4px; /* 减小内边距 */
    border-radius: 3px;
    font-size: 0.7em; /* 减小字体 */
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2; /* 控制行高 */
}

.ticker-item-bulk {
    background-color: #f5222d;
    color: white;
}

.bulk-type {
    background-color: #faad14;
    color: white;
}

.ticker-item-b2b {
    background-color: #1890ff;
    color: white;
}

/* 产品详情页样式 */
.product-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 80px 0 40px;
}

.breadcrumb {
    margin-bottom: 20px;
    font-size: 0.9em;
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s;
}

.breadcrumb a:hover {
    color: #fff;
}

.breadcrumb span {
    color: #fff;
}

.product-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.product-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
}

.product-detail {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.product-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.product-gallery {
    flex: 1;
    min-width: 300px;
}

.main-image {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    /* 修改为矩形而非正方形 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-image img {
    /* 控制图片尺寸，保持宽度不变，减小高度 */
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 250px; /* 减小最大高度，原来没有限制 */
    display: block;
    object-fit: contain; /* 确保图片保持比例且完全显示 */
}

.thumbnail-gallery {
    display: none; /* 隐藏缩略图区域 */
}

.thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
}

.thumbnail.active {
    border-color: var(--primary-color);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    flex: 1;
    min-width: 300px;
}

.product-description {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px; /* 调整为上方位置的间距 */
}

/* 隐藏产品特点部分 */
.product-features {
    display: none;
}

.product-specs {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.product-info h2 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.product-features ul {
    list-style: none;
}

.product-features li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.product-features li i {
    color: var(--primary-color);
    margin-right: 10px;
}

.specs-table {
    width: 100%;
    border-collapse: collapse;
}

.specs-table th,
.specs-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.specs-table th {
    width: 30%;
    color: var(--secondary-color);
    font-weight: 600;
}

.product-selector {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.product-selector label {
    font-weight: 600;
    margin-right: 15px;
    color: var(--primary-color);
}

.product-dropdown {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
    min-width: 250px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-dropdown:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* 子型号选择器样式 */
.sub-model-selector {
    margin: 15px 0;
    padding: 12px;
    background-color: #f0f7ff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.sub-model-selector label {
    font-weight: 600;
    margin-right: 15px;
    color: var(--primary-color);
}

.sub-model-dropdown {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
    min-width: 250px;
    font-size: 15px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sub-model-dropdown:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
    outline: none;
}

/* 兼容墨盒选择器样式 */
.ink-cartridge-selectors {
    margin-top: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.brand-selector,
.series-selector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-width: 250px;
}

.brand-selector label,
.series-selector label {
    font-weight: 600;
    margin-right: 15px;
    color: var(--primary-color);
    min-width: 80px;
}

.brand-dropdown,
.series-dropdown {
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
    flex: 1;
    min-width: 200px;
}

@media (max-width: 768px) {
    .ink-cartridge-selectors {
        flex-direction: column;
    }
    
    .brand-selector,
    .series-selector {
        width: 100%;
    }
}

.product-cta {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.related-products {
    padding: 80px 0;
    background-color: #fff;
}

.related-products-slider {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    overflow-x: visible;
    padding: 20px 0;
}

.related-product-item {
    min-width: unset;
    background-color: #f9f9f9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

.related-product-item:hover {
    transform: translateY(-3px);
}

.related-product-item.no-image {
    height: auto;
    min-height: 150px; /* 设置一个最小高度，确保按钮和文字有足够空间 */
}

.related-product-item img {
    width: 100%;
    height: 140px;
    object-fit: contain;
}

.related-product-item h3 {
    margin: 10px 0 5px;
    color: var(--secondary-color);
    font-size: 14px;
    text-align: center;
}

.related-product-item p {
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--dark-gray);
    font-size: 12px;
    text-align: center;
}

.related-product-item .btn {
    margin: 5px auto;
    margin-top: auto;
    padding: 6px 12px;
    font-size: 12px;
    display: block;
    width: 80%;
    text-align: center;
}

/* 联系页面样式 */
.page-header {
    background-color: var(--primary-color);
    color: #fff;
    padding: 80px 0 40px;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* PC端表单弹出框背景遮罩 */
.form-overlay-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

.form-overlay-backdrop.show {
    display: block;
}

/* 表单蒙版样式 */
.form-overlay {
    position: fixed; /* 改为固定定位 */
    top: 50%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 精确居中 */
    width: 500px; /* 设置固定宽度 */
    height: auto; /* 自动高度 */
    max-width: 90%; /* 最大宽度限制 */
    background-color: rgba(0, 86, 179, 0.95);
    border-radius: 12px;
    z-index: 1000; /* 提高层级 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex; /* 使用flex布局 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 添加关闭按钮样式 */
.form-overlay-close {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 35px;
    height: 35px;
    color: white;
    font-size: 28px;
    line-height: 35px;
    text-align: center;
    cursor: pointer;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: background-color 0.3s ease;
}

.form-overlay-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.form-overlay-content {
    text-align: center;
    color: white;
    padding: 20px;
    max-width: 80%;
}

.form-overlay h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: white;
}

.form-overlay p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.social-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

.btn-facebook {
    background-color: #3b5998;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-facebook:hover {
    background-color: #2d4373;
    transform: translateY(-2px);
}

/* 发展历程页面样式 */
.page-header {
    margin-top: 80px;
    background-color: var(--secondary-color);
    color: var(--light-text);
    padding: 60px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.page-header p {
    font-size: 1.2em;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.9;
}

/* 时间线样式 */
.timeline-section {
    padding: 80px 0;
    background-color: var(--light-gray);
}

.timeline-container {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.timeline-year {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--light-text);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: bold;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    text-align: center;
}

.timeline-year .current-year {
    font-size: 0.8em;
    margin-top: 5px;
    background-color: var(--accent-color);
    padding: 3px 8px;
    border-radius: 10px;
}

.timeline-content {
    width: 45%;
    padding-top: 50px;
}

.timeline-item:nth-child(odd) .timeline-content {
    margin-left: auto;
}

.timeline-card {
    background-color: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.timeline-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.4em;
}

.timeline-card p {
    color: var(--text-color);
    line-height: 1.6;
}

.timeline-card.highlight {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.timeline-card.highlight h3 {
    color: var(--light-text);
}

.timeline-card.highlight p {
    color: var(--light-text);
    opacity: 0.9;
}

/* 时间线项目的连接线 */
.timeline-item:nth-child(odd) .timeline-content:before {
    content: '';
    position: absolute;
    top: 70px;
    right: 100%;
    width: 20px;
    height: 4px;
    background-color: var(--primary-color);
}

.timeline-item:nth-child(even) .timeline-content:before {
    content: '';
    position: absolute;
    top: 70px;
    left: 100%;
    width: 20px;
    height: 4px;
    background-color: var(--primary-color);
}

/* 响应式时间线 */
@media (max-width: 768px) {
    .timeline-line {
        left: 30px;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 30px;
    }
    
    .timeline-year {
        left: 30px;
        transform: translateX(-50%);
    }
    
    .timeline-content {
        width: calc(100% - 60px);
        margin-left: 45px !important;
    }
    
    .timeline-item:nth-child(odd) .timeline-content:before,
    .timeline-item:nth-child(even) .timeline-content:before {
        left: -25px;
        right: auto;
        width: 25px;
    }
}

.contact-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.contact-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.contact-form {
    flex: 2;
    min-width: 400px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.info-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 15px;
    margin-top: 5px;
}

.info-item h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.info-item p {
    color: #666;
    margin: 0;
}

.whatsapp-button {
    margin-top: 30px;
}

.btn-whatsapp {
    background-color: #25D366;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-2px);
}

.btn-whatsapp i {
    font-size: 1.2rem;
}

.contact-form h2,
.contact-info h2 {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.form-group {
    margin-bottom: 20px;
    width: calc(50% - 10px);
    display: inline-block;
    vertical-align: top;
}

.form-group.full-width {
    width: 100%;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group .required {
    color: #e74c3c;
}

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

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.form-group button {
    margin-top: 10px;
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
    }
    
    .form-group {
        width: 100%;
    }
}

/* 合作伙伴页面样式 */
.partners-intro {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.partners-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

.stat-item {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 30px 20px;
    margin: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 3em;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1.1em;
    color: var(--secondary-color);
}

/* 品牌客户样式 */
.brand-partners {
    padding: 80px 0;
}

.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.brand-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    background-color: white;
    border-radius: 8px;
    transition: all 0.3s ease;
    padding: 20px;
}

.brand-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* 品牌logo图片样式 */
.partner-logo-img {
    max-width: 80%;
    max-height: 80px;
    object-fit: contain;
}

.brand-logo {
    text-align: center;
}

.brand-logo i {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.brand-logo span {
    font-size: 1.2em;
    color: var(--secondary-color);
    font-weight: 600;
}

/* 全球分销网络样式 */
.distribution-network {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.map-container {
    margin: 50px 0;
    text-align: center;
}

.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.placeholder-map {
    height: 400px;
    background-color: #e9ecef;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: #6c757d;
    border-radius: 8px;
}

.network-regions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

.region-item {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 30px 20px;
    margin: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.region-item:hover {
    transform: translateY(-5px);
}

.region-icon {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.region-item h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}

/* B端门店展示样式 */
.b-end-stores {
    padding: 80px 0;
}

.stores-showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
}

.store-category {
    flex: 1;
    min-width: 250px;
    text-align: center;
    padding: 40px 30px;
    margin: 15px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.store-category:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.store-category:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--primary-color);
}

.category-icon {
    font-size: 3em;
    color: var(--primary-color);
    margin-bottom: 25px;
}

.store-category h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
    font-size: 1.5em;
}

.store-count {
    margin-top: 20px;
    font-size: 1.1em;
    color: var(--dark-gray);
}

.store-count span {
    font-weight: 700;
    color: var(--primary-color);
}

/* 合作案例轮播样式 */
.partner-cases {
    padding: 80px 0;
    background-color: #f8f9fa;
}

.cases-slider {
    margin-top: 50px;
    position: relative;
    min-height: 250px; /* 设置最小高度，根据实际内容调整 */
}

.case-slide {
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    margin: 20px;
    position: absolute; /* 使用绝对定位 */
    width: calc(100% - 40px); /* 减去左右margin */
    left: 0;
    top: 0;
    opacity: 0; /* 默认隐藏 */
    visibility: hidden; /* 默认隐藏 */
    transition: opacity 0.5s ease, visibility 0.5s ease; /* 添加过渡效果 */
}

.case-quote {
    position: relative;
    padding-left: 30px;
    margin-bottom: 30px;
}

.case-quote i {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.5em;
    color: var(--primary-color);
}

.case-quote p {
    font-size: 1.2em;
    line-height: 1.6;
    font-style: italic;
    color: var(--dark-gray);
}

.case-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.case-company {
    font-weight: 600;
    color: var(--secondary-color);
}

.case-location {
    color: var(--primary-color);
}

.case-slide.active {
    opacity: 1;
    visibility: visible;
}

/* 合作流程样式 */
.partnership-process {
    padding: 80px 0;
}

.process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 50px;
    position: relative;
}

.process-steps:before {
    content: '';
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #e9ecef;
    z-index: 0;
}

.process-step {
    flex: 1;
    min-width: 200px;
    text-align: center;
    padding: 20px;
    margin: 10px;
    position: relative;
    z-index: 1;
}

.step-number {
    font-size: 2.5em;
    font-weight: 700;
    color: #e9ecef;
    margin-bottom: 20px;
}

.step-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
    background-color: white;
    margin: 0 auto 20px;
    font-size: 2em;
    color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
}

.process-step h3 {
    margin-bottom: 15px;
    color: var(--secondary-color);
}