/* ==================== 

   响应式主样式表

   ==================== */



/* CSS变量定义 */

:root {

    --primary-color: #18469b;

    --secondary-color: #06509e;

    --accent-color: #8ec428;

    --text-color: #333;

    --text-light: #666;

    --text-lighter: #999;

    --bg-light: #f5f5f5;

    --bg-gray: #eaeaea;

    --white: #fff;

    --border-color: #ddd;

    --max-width: 1200px;

    --spacing-xs: 8px;

    --spacing-sm: 15px;

    --spacing-md: 30px;

    --spacing-lg: 50px;

    --spacing-xl: 80px;

}



/* ==================== 

   通用样式

   ==================== */



/* 标题样式 */

.section-title {

    text-align: center;

    padding: 30px 0  ;

    position: relative;

}



.page-section-title::after {

    content: "";

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 3px;

    background: var(--primary-color);

}



.section-title.light {

    color: var(--white);

}



.section-title.light::after {

    background: var(--white);

}



.title-main {

    display: block;

    font-size: 32px;

    font-weight: bold;

    color: var(--primary-color);

    margin-bottom: 10px;

}



.section-title.light .title-main {

    color: var(--white);

}



.title-sub {

    display: block;

    font-size: 16px;

    color: var(--text-light);

    margin-bottom: 10px;

}



.section-title.light .title-sub {

    color: rgba(255, 255, 255, 0.8);

}



.title-phone {

    display: inline-block;

    font-size: 16px;

    font-weight: bold;

    color: var(--white);

    background: var(--accent-color);

    padding: 8px 20px;

    border-radius: 20px;

    margin-top: 15px;

}



/* ==================== 

   头部样式

   ==================== */



.header {

    background: var(--white);

}



.top-bar {

    background: #f2f2f2;

    color: #343434;

    padding: 6.5px 0;

    font-size: 14px;

    overflow: hidden;

}



.header-main {

    padding: 20px 0;

    border-bottom: 1px solid var(--border-color);

}



.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.logo {

    display: flex;

    align-items: center;

    gap: 15px;

}



.logo img {

    height: 70px;

    width: auto;

}



.tagline {

    font-size: 14px;

    color: var(--text-light);

}



.tagline span {

    display: block;

    font-size: 16px;

    font-weight: bold;

    color: var(--text-color);

    margin-bottom: 3px;

}



.phone {

    text-align: right;

}



.phone span {

    display: block;

    font-size: 14px;

    color: var(--text-light);

    margin-bottom: 5px;

}



.phone a {

    font-size: 24px;

    font-weight: bold;

    color: var(--primary-color);

}



/* 主导航 */

.main-nav {

    background: rgb(24,70,155);

    position: relative;

    height: 60px;

    line-height: 60px;

}



.mobile-logo {

    display: none;

}



.mobile-menu-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    padding: 15px;

    background: transparent;

    border: none;

    cursor: pointer;

}



.mobile-menu-toggle span {

    display: block;

    width: 25px;

    height: 3px;

    background: var(--white);

    transition: all 0.3s;

}



.nav-menu {

    display: flex;

    width: 100%;

    justify-content: space-between;

    list-style: none;

}



.nav-menu > li {

    position: relative;

    flex: 0 0 auto;

    margin-left: -1px;

}



.nav-menu > li > a {

    display: block;

    padding: 0 20px;

    color: var(--white);

    font-size: 16px;

    text-align: center;

    position: relative;

    z-index: 4;

    text-decoration: none;

    transition: background 0.3s;

}



/* 菜单悬停动画效果 */

.nav-menu > li::after {

    content: '';

    position: absolute;

    width: 100%;

    height: 0;

    background-color: #8ec428;

    bottom: 0;

    left: 0;

    transition: height 0.3s;

    z-index: 1;

}



.nav-menu > li:hover::after,

.nav-menu > li.active::after {

    height: 100%;

}



.nav-menu > li > a:hover {

    background: transparent;

}



/* 下拉菜单 */

.submenu {

    display: none;

    position: absolute;

    top: 60px;

    left: 0;

    background: rgba(0,0,0,0.8);

    min-width: 200px;

    width: max-content;

    max-width: 320px;

    text-align: center;

    padding: 0 0 10px 0;

    z-index: 100;

}



.has-submenu:hover .submenu {

    display: block;

}



.submenu li {

    height: auto;

    background: none;

    margin-left: 0;

}



.submenu li a {

    display: block;

    padding: 10px 18px !important;

    height: auto;

    line-height: 1.4;

    width: auto;

    color: var(--white);

    font-size: 14px;

    border-bottom: none;

    transition: background 0.3s;

}



.submenu li a:hover {

    background: #8ec428;

    color: var(--white);

}



/* ==================== 

   Banner轮播

   ==================== */



.hero-banner {

    position: relative;

    overflow: hidden;

}



.banner-swiper {

    width: 100%;

    height: auto;

}



.banner-swiper .swiper-slide {

    position: relative;

}



.banner-swiper img {

    width: 100%;

    height: auto;

    display: block;

}



.banner-swiper .swiper-pagination {

    bottom: 20px;

}



.banner-swiper .swiper-pagination-bullet {

    width: 12px;

    height: 12px;

    background: var(--white);

    opacity: 0.6;

}



.banner-swiper .swiper-pagination-bullet-active {

    opacity: 1;

    background: var(--primary-color);

}



/* ==================== 

   搜索框

   ==================== */



.search-section {

    background: var(--bg-gray);

    padding: 20px 0;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}



.search-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 15px;

}



.keywords {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

    order: 1;

}



.search-form {

    display: flex;

    gap: 0;

    order: 2;

}



.search-input {

    width: 300px;

    height: 45px;

    padding: 0 15px;

    border: 1px solid var(--border-color);

    font-size: 14px;

}



.search-btn {

    height: 45px;

    padding: 0 25px;

    background: var(--primary-color);

    color: var(--white);

    font-size: 16px;

    font-weight: bold;

    transition: background 0.3s;

}



.search-btn:hover {

    background: var(--secondary-color);

}



.keywords {

    display: flex;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;

}



.keywords span {

    font-weight: bold;

    color: var(--text-color);

}



.keywords a {

    color: var(--text-light);

    font-size: 14px;

}



.keywords a:hover {

    color: var(--primary-color);

}



/* ==================== 

   服务模块

   ==================== */



.services-section {

    background: #f0f5f9;

    padding: 60px 0 80px;

    position: relative;

}



.services-section .container {

    position: relative;

    z-index: 1;

}



.services-section .section-title {

    margin-bottom: 50px;

}



.services-title-wrapper {

    padding: 0 0 30px;

    text-align: center;

}



/* 服务模块 - 三分栏布局 */

.services-layout {

    display: grid;

    grid-template-columns: 280px 1fr 280px;

    gap: 30px;

    margin-top: -50px;

    align-items: start;

}



.services-left,

.services-right {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.services-center {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 10px;

    align-self: center;

}



.services-center img {

    width: 100%;

    height: auto;

    border-radius: 5px;

}



.service-item {

    background: var(--white);

    padding: 30px;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

    transition: transform 0.3s;

}



.service-item:hover {

    transform: translateY(-5px);

}



.service-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 15px;

}



.service-icon {

    width: 50px;

    height: 50px;

    background: var(--text-color);

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: background 0.3s;

}



.service-icon img {

    width: 30px;

    height: auto;

}



.service-item:hover .service-icon {

    background: var(--secondary-color);

}



.service-item h3 {

    font-size: 20px;

    font-weight: bold;

    color: var(--text-color);

    transition: color 0.3s;

}



.service-item:hover h3 {

    color: var(--secondary-color);

}



.service-item p {

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-light);

}



/* ==================== 

   产品中心

   ==================== */



.products-section {

    padding: 60px 0;

    background: var(--white);

}



.products-layout {

    display: grid;

    grid-template-columns: 320px 1fr;

    gap: 30px;

    margin-top: 30px;

}



/* 侧边栏 */

.products-sidebar {

    background: var(--bg-light);

    border-radius: 8px;

    overflow: hidden;

}



.sidebar-title {

    background: var(--primary-color);

    padding: 25px 20px;

    text-align: center;

    position: relative;

}



.sidebar-title a {

    color: var(--white);

    font-size: 24px;

    font-weight: bold;

    display: block;

    position: relative;

}



.sidebar-title a::before,

.sidebar-title a::after {

    content: "";

    position: absolute;

    top: 50%;

    width: 60px;

    height: 1px;

    background: var(--white);

}



.sidebar-title a::before {

    left: 0;

}



.sidebar-title a::after {

    right: 0;

}



.sidebar-title span {

    display: block;

    font-size: 12px;

    opacity: 0.8;

    margin-top: 8px;

    text-transform: uppercase;

    letter-spacing: 1px;

}



.sidebar-menu {

    padding: 0;

}



.menu-group {

    position: relative;

}



.menu-title {

    padding: 15px 20px;

    cursor: pointer;

    font-size: 16px;

    font-weight: bold;

    position: relative;

    transition: all 0.3s;

}



.menu-title a {

    color: var(--text-color);

    display: block;

}



.menu-title::after {

    content: '>';

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 14px;

    transition: transform 0.3s;

}



.menu-group:hover .menu-title::after {

    transform: translateY(-50%) rotate(90deg);

}



/* 默认灰色背景 */

.menu-title {

    background: #e8e8e8;

    border-bottom: 1px solid #fff;

}



.menu-group:hover .menu-title {

    background: #8ec428;

}



.menu-group:hover .menu-title a {

    color: var(--white);

}



.menu-group ul {

    display: none;

    padding: 0;

    background: #f5f5f5;

}



.menu-group li {

    border-bottom: 1px dashed #ddd;

}



.menu-group li a {

    display: block;

    padding: 12px 20px 12px 35px;

    color: var(--text-color);

    font-size: 14px;

    transition: color 0.3s;

    position: relative;

}



.menu-group li a::before {

    content: '...';

    position: absolute;

    left: 20px;

    color: #999;

}



.menu-group li a:hover {

    color: var(--primary-color);

}



/* 产品主区域 */

.products-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid var(--border-color);

    padding: 0;

    border-radius: 5px;

    margin-bottom: 20px;

    overflow: hidden;

}



.products-header h3 {

    margin: 0;

}



.products-header h3 a {

    display: block;

    padding: 15px 30px;

    background: var(--primary-color);

    color: var(--white);

    font-size: 16px;

    font-weight: bold;

}



.header-right {

    display: flex;

    align-items: center;

    gap: 30px;

}



.hotline {

    padding: 0 20px;

}



.hotline span {

    color: var(--text-color);

    font-size: 16px;

}



.hotline strong {

    color: var(--accent-color);

    font-size: 22px;

    margin-left: 10px;

    font-weight: bold;

}



.more-link {

    padding: 0 20px;

    color: var(--text-color);

    font-size: 14px;

}



/* 产品轮播 */

.featured-product {

    margin-bottom: 20px;

}



.product-showcase {

    background: var(--white);

    border: 1px solid var(--border-color);

    padding: 20px;

    border-radius: 5px;

}



.product-slide {

    display: none;

}



.product-slide.active {

    display: grid;

    grid-template-columns: 450px 1fr;

    gap: 20px;

}



.product-image img {

    width: 100%;

    height: 350px;

    object-fit: cover;

}



.product-info {

    padding: 10px 0;

}



.product-info h4 {

    font-size: 26px;

    font-weight: bold;

    color: var(--text-color);

    margin-bottom: 15px;

    padding-bottom: 15px;

    border-bottom: 2px solid var(--bg-light);

}



.product-info p {

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-light);

    margin-bottom: 20px;

    max-height: 150px;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 5;

    -webkit-box-orient: vertical;

}



.detail-btn {

    display: inline-block;

    padding: 10px 25px;

    background: var(--primary-color);

    color: var(--white);

    border-radius: 20px;

    font-size: 14px;

    transition: background 0.3s;

}



.detail-btn:hover {

    background: var(--secondary-color);

    color: var(--white);

}



/* 产品网格 */

.product-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin-top: 20px;

}



.product-card {

    position: relative;

    border: 1px solid var(--border-color);

    border-radius: 5px;

    overflow: hidden;

    transition: transform 0.3s;

}



.product-card:hover {

    transform: translateY(-5px);

}



.product-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    display: block;

}



.card-info {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    background: rgba(0, 0, 0, 0.5);

    padding: 15px;

    transition: all 0.3s;

}



.card-info h4 {

    font-size: 16px;

    font-weight: bold;

    color: var(--white);

    margin-bottom: 0;

    transition: color 0.3s;

}



.card-actions {

    display: none;

    gap: 10px;

    margin-top: 10px;

}



.product-card:hover .card-info {

    background: var(--primary-color);

    padding: 15px;

}



.product-card:hover h4 {

    color: var(--white);

}



.product-card:hover .card-actions {

    display: flex;

}



.card-actions a {

    flex: 1;

    padding: 8px;

    text-align: center;

    background: var(--white);

    color: var(--primary-color);

    font-size: 13px;

    border-radius: 3px;

    transition: all 0.3s;

}



.card-actions a:hover {

    background: var(--accent-color);

    color: var(--white);

}



/* ==================== 

   四大优势

   ==================== */



.advantages-section {

    background: linear-gradient(135deg, #18469b 0%, #0a2a5e 100%);

    padding: 60px 0;

}



.advantage-item {

    padding: 40px 0;

    border-bottom: 1px solid rgba(255,255,255,0.1);

}



.advantage-item:last-child {

    border-bottom: none;

}



.advantage-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    align-items: center;

}



.advantage-item.reverse .advantage-content {

    direction: rtl;

}



.advantage-item.reverse .advantage-content > * {

    direction: ltr;

}



.advantage-header {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}



.advantage-number {

    width: 50px;

    height: 50px;

    background: linear-gradient(135deg, #18469b 0%, #0a2a5e 100%);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--white);

    font-size: 24px;

    font-weight: bold;

    flex-shrink: 0;

}



.advantage-title h3 {

    font-size: 32px;

    font-weight: bold;

    color: var(--white);

    margin-bottom: 5px;

}



.advantage-title em {

    font-size: 14px;

    color: rgba(255,255,255,0.6);

    text-transform: uppercase;

    letter-spacing: 2px;

}



.advantage-list {

    list-style: none;

}



.advantage-list li {

    color: var(--white);

    font-size: 15px;

    line-height: 1.8;

    padding-left: 25px;

    position: relative;

    margin-bottom: 10px;

}



.advantage-list li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 10px;

    width: 8px;

    height: 8px;

    background: var(--accent-color);

    border-radius: 50%;

}



.advantage-image img {

    width: 100%;

    height: auto;

    border-radius: 8px;

}



.advantage-cta {

    display: inline-block;

    margin-top: 20px;

    padding: 12px 30px;

    background: #35529f;

    color: var(--white);

    font-size: 16px;

    font-weight: bold;

    border-radius: 25px;

    transition: background 0.3s;

}



.advantage-cta:hover {

    background: var(--secondary-color);

    color: var(--white);

}



/* ==================== 

   广告横幅

   ==================== */



.promo-banner {

    margin-top: 40px;

}



.promo-banner img {

    width: 100%;

    height: auto;

}



/* ==================== 

   应用案例

   ==================== */



.cases-section {

    padding: 60px 0;

    background: var(--white);

}



 



.cases-tabs {

    display: flex;

    justify-content: center;

    gap: 15px;

    margin-top: 30px;

    margin-bottom: 30px;

    flex-wrap: wrap;

}



.tab-btn {

    padding: 10px 25px;

    border: 1px solid var(--border-color);

    border-radius: 25px;

    background: var(--white);

    color: var(--text-color);

    font-size: 16px;

    cursor: pointer;

    transition: all 0.3s;

}



.tab-btn:hover,

.tab-btn.active {

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}



.case-panel {

    display: none;

}



.case-panel.active {

    display: block;

}



.case-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.case-card {

    overflow: hidden;

    border-radius: 8px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    transition: transform 0.3s;

}



.case-card:hover {

    transform: translateY(-5px);

}



.case-image {

    width: 100%;

    height: 250px;

    background-size: cover;

    background-position: center;

    transition: transform 0.5s;

}



.case-card:hover .case-image {

    transform: scale(1.1);

}



.case-info {

    background: var(--bg-gray);

    padding: 20px;

    transition: background 0.3s;

}



.case-card:hover .case-info {

    background: var(--primary-color);

}



.case-info h3 {

    font-size: 16px;

    font-weight: 500;

    color: var(--text-color);

    transition: color 0.3s;

}



.case-card:hover .case-info h3 {

    color: var(--white);

}



/* ==================== 

   服务流程

   ==================== */



.process-section {

    padding: 60px 0;

    background: var(--white);

}



.process-grid {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 20px;

    margin-top: 50px;

}



.process-item {

    text-align: center;

    position: relative;

    padding: 20px 10px;

    transition: all 0.3s;

}



.process-item::after {

    content: "→";

    position: absolute;

    right: -15px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 24px;

    color: var(--primary-color);

}



.process-item:last-child::after {

    display: none;

}



.process-item i {

    width: 100px;

    height: 100px;

    line-height: 100px;

    font-size: 40px;

    color: var(--primary-color);

    border: 4px solid var(--primary-color);

    border-radius: 50%;

    margin: 0 auto 20px;

    display: block;

    transition: all 0.3s;

}



.process-item:hover i {

    background: #8ec428;

    border-color: #8ec428;

    color: var(--white);

}



.process-item span {

    display: block;

    font-size: 15px;

    font-weight: bold;

    color: var(--text-color);

    transition: color 0.3s;

    line-height: 1.6;

}



.process-item:hover span {

    color: var(--text-color);

}



/* ==================== 

   关于我们

   ==================== */



.about-section {

    position: relative;

    padding: 80px 0;

    background: url(../image/aboutbg.jpg) no-repeat center;

    background-size: cover;

    margin-bottom: 30px;

}



.about-content {

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 50px;

    align-items: center;

}



.about-text h2 {

    font-size: 32px;

    color: var(--primary-color);

    line-height: 1.5;

    padding-bottom: 20px;

    border-bottom: 2px solid var(--primary-color);

    margin-bottom: 20px;

}



.about-text h2 em {

    display: block;

    font-size: 36px;

    font-weight: normal;

    color: var(--text-lighter);

    text-transform: uppercase;

    margin-bottom: 10px;

}



.about-desc {

    margin-bottom: 25px;

}



.about-desc p {

    font-size: 15px;

    line-height: 1.8;

    color: var(--text-color);

}



.about-cta {

    display: inline-block;

    padding: 12px 30px;

    border: 2px solid var(--text-lighter);

    color: var(--text-color);

    font-size: 16px;

    border-radius: 5px;

    transition: all 0.3s;

}



.about-cta:hover {

    border-color: var(--primary-color);

    color: var(--primary-color);

}



.about-image {

    position: relative;

}



.about-image img {

    width: 100%;

    height: auto;

    border: 5px solid var(--white);

    box-shadow: 0 5px 20px rgba(0,0,0,0.2);

}



.about-image::before {

    content: "";

    position: absolute;

    top: -20px;

    right: -20px;

    width: 100%;

    height: 100%;

    border: 3px solid var(--primary-color);

    z-index: -1;

}



/* 画廊 */

.gallery-section {

    padding:  0;

    background: var(--white);

}



.gallery-section .container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 15px;

}



.gallery-tabs {

    display: flex;

    gap: 20px;

    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom: 1px solid var(--border-color);

}



.gallery-tab {

    font-size: 20px;

    color: var(--text-lighter);

    padding-bottom: 10px;

    border-bottom: 3px solid transparent;

    cursor: pointer;

    transition: all 0.3s;

}



.gallery-tab:hover,

.gallery-tab.active {

    color: var(--primary-color);

    border-bottom-color: var(--primary-color);

    font-weight: bold;

}



.gallery-content {

    position: relative;

}



.gallery-panel {

    display: none;

}



/* hover时显示对应的panel */

.gallery-tab:hover + .gallery-content .gallery-panel,

.gallery-panel.active {

    display: block;

}



.gallery-panel .swiper {

    padding-bottom: 50px;

}



.gallery-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

}



.gallery-item {

    overflow: hidden;

}



.gallery-item img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 5px;

    transition: transform 0.3s;

}



.gallery-item:hover img {

    transform: scale(1.1);

}



.gallery-item span {

    display: block;

    text-align: center;

    padding: 10px;

    color: var(--text-lighter);

    font-size: 14px;

    border-bottom: 2px solid var(--text-color);

}



.gallery-item span a {

    color: var(--text-lighter);

}



.gallery-item:hover span {

    border-bottom-color: var(--primary-color);

}



.gallery-item:hover span a {

    color: var(--primary-color);

}



/* ==================== 

   新闻资讯

   ==================== */



.news-section {

    padding: 60px 0;

    background: var(--white);

}



.news-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    margin-top: 30px;

    max-width: 100%;

    overflow: hidden;

}



.news-main,

.news-sidebar {

    max-width: 100%;

    overflow: hidden;

}



.news-category {

    margin-bottom: 20px;

}



.category-title {

    font-size: 22px;

    font-weight: 500;

    color: var(--text-color);

    padding-left: 45px;

    background: url(../image/newsico.png) left center no-repeat;

    display: inline-block;

}



.news-item {

    display: flex;

    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid var(--border-color);

    max-width: 100%;

    overflow: hidden;

}



.news-date {

    width: 80px;

    min-width: 80px;

    height: 80px;

    border: 1px solid var(--border-color);

    background: var(--bg-light);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition: all 0.3s;

    flex-shrink: 0;

}



.news-date strong {

    font-size: 32px;

    font-weight: bold;

    color: var(--text-color);

    line-height: 1;

}



.news-date span {

    font-size: 14px;

    color: var(--text-lighter);

    margin-top: 5px;

}



.news-item:hover .news-date {

    background: var(--secondary-color);

    border-color: var(--secondary-color);

}



.news-item:hover .news-date strong,

.news-item:hover .news-date span {

    color: var(--white);

}



.news-content {

    flex: 1;

    min-width: 0;

    border: 1px solid var(--border-color);

    padding: 15px;

    overflow: hidden;

}



.news-content h3 {

    font-size: 16px;

    font-weight: bold;

    color: var(--text-color);

    margin-bottom: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.news-content h3:hover {

    color: #ffae00;

}



.news-content p {

    font-size: 14px;

    line-height: 1.6;

    color: var(--text-lighter);

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* 新闻侧边栏 */

.news-featured {

    padding-top: 20px;

    max-width: 100%;

    overflow: hidden;

}



.featured-image {

    overflow: hidden;

    margin-bottom: 20px;

    border-radius: 5px;

}



.featured-image img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    transition: transform 0.6s;

}



.featured-image:hover img {

    transform: scale(1.1);

}



.news-questions li {

    margin-bottom: 15px;

    padding-left: 35px;

    position: relative;

}



.news-questions li::before {

    content: "Q";

    position: absolute;

    left: 0;

    top: 0;

    width: 28px;

    height: 28px;

    background: var(--secondary-color);

    color: var(--white);

    text-align: center;

    line-height: 28px;

    font-size: 14px;

    font-weight: bold;

}



.news-questions h3 {

    font-size: 15px;

    font-weight: bold;

    color: var(--text-color);

    margin-bottom: 8px;

}



.news-questions h3:hover {

    color: #ffae00;

}



.news-questions span {

    font-size: 13px;

    color: var(--text-lighter);

    display: block;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



/* ==================== 

   底部

   ==================== */



.footer {

    background: var(--secondary-color);

    color: var(--white);

}



.footer-content {

    display: grid;

    grid-template-columns: 380px 200px 200px auto;

    gap: 30px;

    padding: 40px 0;

}



.footer-company {

    position: relative;
	 padding: 20px;
}


 


.footer-company h4 {

    font-size: 24px;

    font-weight: 700;

    margin: 30px 0 15px 0;

}



.footer-company h5 {

    font-size: 15px;

    font-weight: 700;

    margin: 15px 0 8px;

}



.footer-phone {

    border: 1px solid rgba(255,255,255,0.3);

    padding: 10px;

    text-align: center;
    

}



.footer-phone a {

    font-size: 22px;

    font-weight: bold;

    color: var(--white);

}



.footer-nav,

.footer-contact {

    position: relative;
     padding: 20px;

}


 



.footer h3 {

    font-size: 16px;

    font-weight: 700;

    margin-bottom: 25px;

}



.footer-nav a {

    display: block;

    color: rgba(255,255,255,0.6);

    font-size: 14px;

    margin-bottom: 8px;

    transition: color 0.3s;

}



.footer-nav a:hover {

    color: #ffae00;

}



.footer-contact p {

    font-size: 14px;

    line-height: 1.8;

    color: var(--white);

    margin-bottom: 5px;

}



.footer-qrcode {

    text-align: center;

}



.footer-qrcode img {

    width: 90px;

    height: 90px;

    margin: 15px 0 0;

}



.footer-qrcode p {

    font-size: 14px;

    color: var(--white);

}



.footer-bottom {

    background: #081a3d;

    padding: 15px 0;

    text-align: center;

    font-size: 13px;

    color: rgba(255,255,255,0.6);

}



.footer-bottom a {

    color: rgba(255,255,255,0.5);

}



.footer-bottom a:hover {

    color: rgba(255,255,255,0.8);

}



/* ==================== 

   手机端底部菜单

   ==================== */



.mobile-bottom-nav {

    display: none;

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: var(--white);

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

    z-index: 9999;

    padding: 8px 0;

    border-top: 1px solid var(--border-color);

}



.bottom-nav-item {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 8px 0;

    color: var(--text-color);

    text-decoration: none;

    transition: color 0.3s;

}



.bottom-nav-item i {

    font-size: 20px;

    margin-bottom: 4px;

    color: var(--text-lighter);

    transition: color 0.3s;

}



.bottom-nav-item span {

    font-size: 12px;

    color: var(--text-lighter);

    transition: color 0.3s;

}



.bottom-nav-item:hover,

.bottom-nav-item:active {

    color: var(--primary-color);

}



.bottom-nav-item:hover i,

.bottom-nav-item:active i {

    color: var(--primary-color);

}



.bottom-nav-item:hover span,

.bottom-nav-item:active span {

    color: var(--primary-color);

}



.bottom-nav-item.active {

    color: var(--primary-color);

}



.bottom-nav-item.active i {

    color: var(--primary-color);

}



.mobile-bottom-nav.active span {

    color: var(--primary-color);

    font-weight: bold;

}



/* ==================== 

   手机端侧滑菜单

   ==================== */



.mobile-nav-drawer {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 10000;

}



.mobile-nav-drawer.active {

    display: block;

}



.drawer-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    opacity: 0;

    transition: opacity 0.3s;

}



.mobile-nav-drawer.active .drawer-overlay {

    opacity: 1;

}



.drawer-content {

    position: absolute;

    top: 0;

    right: 0;

    width: 80%;

    max-width: 320px;

    height: 100%;

    background: var(--white);

    transform: translateX(100%);

    transition: transform 0.3s ease-out;

    overflow-y: auto;

    box-shadow: -2px 0 10px rgba(0,0,0,0.1);

}



.mobile-nav-drawer.active .drawer-content {

    transform: translateX(0);

}



.drawer-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px;

    background: var(--primary-color);

    color: var(--white);

    position: sticky;

    top: 0;

    z-index: 1;

}



.drawer-header h3 {

    font-size: 18px;

    font-weight: bold;

    margin: 0;

}



.drawer-close {

    background: transparent;

    border: none;

    color: var(--white);

    font-size: 24px;

    cursor: pointer;

    padding: 5px;

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.mobile-nav-menu {

    list-style: none;

    padding: 0;

    margin: 0;

}



.mobile-nav-item {

    border-bottom: 1px solid #f0f0f0;

}



.m-nav-link {

    display: flex;

    align-items: center;

    padding: 12px 20px;

    color: var(--text-color);

    text-decoration: none;

    transition: background 0.3s;

    cursor: pointer;

    line-height: 2;

}



.m-nav-link:hover,

.m-nav-link:active {

    background: #f5f5f5;

}



.m-nav-link span {

    flex: 1;

    font-size: 15px;

}



.m-nav-link .arrow {

    width: auto;

    margin-right: 0;

    font-size: 12px;

    color: #999;

    transition: transform 0.3s;

}



.mobile-nav-item.has-submenu.active .arrow {

    transform: rotate(180deg);

}



.mobile-submenu {

    list-style: none;

    padding: 0;

    margin: 0;

    background: #f9f9f9;

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.3s ease-out;

}



.mobile-nav-item.has-submenu.active .mobile-submenu {

    max-height: 500px;

}



.mobile-submenu li {

    border-bottom: 1px solid #eee;

}



.mobile-submenu li:last-child {

    border-bottom: none;

}



.mobile-submenu a {

    display: block;

    padding: 0px 20px 0px 56px;

    color: var(--text-lighter);

    text-decoration: none;

    font-size: 14px;

    transition: all 0.3s;

}



.mobile-submenu a:hover,

.mobile-submenu a:active {

    background: #f0f0f0;

    color: var(--primary-color);

    padding-left: 60px;

}



/* ==================== 

   响应式设计

   ==================== */



/* 平板设备 (768px - 1024px) */

@media screen and (max-width: 1024px) {

    /* 服务内容 */

    .services-layout {

        grid-template-columns: 1fr;

        margin-top: 30px;

        gap: 20px;

    }

    

    .services-center {

        order: -1;

        grid-template-columns: repeat(2, 1fr);

    }

    

    .services-left,

    .services-right {

        flex-direction: row;

        flex-wrap: wrap;

    }

    

    .service-item {

        flex: 1;

        min-width: 250px;

    }

    

    .products-layout {

        grid-template-columns: 1fr;

    }

    

    .products-sidebar {

        margin-bottom: 30px;

    }

    

    .product-slide.active {

        grid-template-columns: 350px 1fr;

    }

    

    .product-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .advantage-content {

        gap: 30px;

    }

    

    .case-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .process-grid {

        grid-template-columns: repeat(3, 1fr);

    }

    

    .process-item::after {

        display: none;

    }

    

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .footer-content {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .footer-company::before,

    .footer-nav::before,

    .footer-contact::before {

        display: none;

    }

}



/* 移动设备 (< 768px) */

@media screen and (max-width: 768px) {

    /* 显示底部菜单 */

    .mobile-bottom-nav {

        display: flex;

    }

    

    /* 给body添加底部padding,避免内容被底部菜单遮挡 */

    body {

        padding-bottom: 60px;

    }

    

    /* 服务内容 */

    .services-section {

        padding: 40px 0 60px;

    }

    

    .services-layout {

        grid-template-columns: 1fr;

        margin-top: 20px;

        gap: 15px;

    }

    

    .services-center {

        order: -1;

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    

    .services-left,

    .services-right {

        flex-direction: column;

    }

    

    .service-item {

        width: 100%;

    }

    

    /* 标题 */

    .title-main {

        font-size: 24px;

    }

    

    .title-sub {

        font-size: 14px;

    }

    

    /* 头部 */

    .top-bar {

        display: none;

    }

    

    .header-main {

        display: none;

    }

    

    /* 主导航 */

    .main-nav {

        position: relative;

        background: var(--white);

        box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    }

    

    .main-nav .container {

        display: flex;

        flex-direction: column;

        padding: 0;

    }

    

    /* 手机端导航内容区 - logo和菜单按钮 */

    .nav-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        padding: 10px 15px;

        gap: 15px;

    }

    

    .mobile-logo {

        display: block;

        flex-shrink: 0;

    }

    

    .mobile-logo img {

        max-height: 40px;

        width: auto;

    }

    

    /* 导航 */

    .mobile-menu-toggle {

        display: flex;

    }

    

    .mobile-menu-toggle span {

        background: var(--text-color);

    }

    

    .nav-menu {

        display: none;

        flex-direction: column;

        background: rgba(0, 0, 0, 0.85);

        position: absolute;

        top: 100%;

        left: 0;

        right: 0;

        z-index: 1000;

        padding: 10px 0;

    }

    

    .nav-menu.active {

        display: flex;

    }

    

    .nav-menu > li > a {

        color: var(--white);

        padding: 15px 20px;

        border-bottom: 1px solid rgba(255,255,255,0.1);

    }

    

    .submenu {

        position: static;

        box-shadow: none;

        background: rgba(0,0,0,0.1);

    }

    

    .has-submenu:hover .submenu {

        display: none;

    }

    

    .has-submenu.active .submenu {

        display: block;

    }

    

    /* 搜索 */

    .search-box {

        flex-direction: column;

        align-items: stretch;

    }

    

    .search-form {

        flex-direction: column;

    }

    

    .search-input {

        width: 100%;

    }

    

    .keywords {

        justify-content: center;

    }

    

    /* 服务 */

    .services-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    /* 产品 */

    .product-slide.active {

        grid-template-columns: 1fr;

    }

    

    .product-grid {

        grid-template-columns: 1fr;

    }

    

    .products-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    

    .hotline {

        order: -1;

    }

    

    /* 优势 */

    .advantage-content {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .advantage-item.reverse .advantage-content {

        direction: ltr;

    }

    

    /* 案例 */

    .case-grid {

        grid-template-columns: 1fr;

    }

    

    .cases-tabs {

        gap: 10px;

    }

    

    .tab-btn {

        padding: 8px 15px;

        font-size: 14px;

    }

    

    /* 流程 */

    .process-grid {

        grid-template-columns: repeat(3, 1fr);

        gap: 15px;

    }

    

    .process-item i {

        width: 80px;

        height: 80px;

        line-height: 80px;

        font-size: 32px;

    }

    

    /* 关于我们 */

    .about-section {

        padding: 40px 0;

    }

    

    .about-content {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    

    .about-text h2 {

        font-size: 24px;

    }

    

    .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    

    /* 新闻 */

    .news-layout {

        grid-template-columns: 1fr;

    }

    

    .news-item {

        flex-direction: column;

    }

    

    .news-date {

        width: 100%;

        flex-direction: row;

        justify-content: flex-start;

        padding: 10px;

        gap: 10px;

    }

    

    /* 底部 */

    .footer-content {

        grid-template-columns: 1fr;

        gap: 20px;

    }

    

    .footer-company,

    .footer-nav,

    .footer-contact {

        text-align: center;

    }

    

    .footer-phone {

        max-width: 300px;

        margin: 0 auto;

    }

}



/* 小型移动设备 (< 480px) */

@media screen and (max-width: 480px) {

    .title-main {

        font-size: 20px;

    }

    

    .services-grid {

        margin-top: -30px;

    }

    

    .service-item {

        padding: 20px;

    }

    

    .gallery-grid {

        grid-template-columns: 1fr;

    }

    

 

    .cases-tabs {

        flex-direction: column;

    }

    

    .tab-btn {

        width: 100%;

    }

}



/* ==================== 

   栏目页样式

   ==================== */



/* 顶部Tab导航 */

.about-tabs-section {

    background: #f5f5f5;

    border-bottom: 1px solid #e0e0e0;

}



.tabs-nav {

    display: flex;

    justify-content: center;

}



.tab-item {

    flex: 1;

    padding: 15px 30px;

    text-align: center;

    color: var(--text-color);

    text-decoration: none;

    font-size: 15px;

    font-weight: 500;

    background: #f5f5f5;

    border-right: 1px solid #e0e0e0;

    transition: all 0.3s;

}



.tab-item:last-child {

    border-right: none;

}



.tab-item:hover {

    background: var(--primary-color);

    color: var(--white);

}



.tab-item.active {

    background: var(--primary-color);

    color: var(--white);

    position: relative;

}



.tab-item.active::after {

    content: '';

    position: absolute;

    bottom: -1px;

    left: 50%;

    transform: translateX(-50%);

    width: 0;

    height: 0;

    border-left: 8px solid transparent;

    border-right: 8px solid transparent;

    border-bottom: 8px solid var(--primary-color);

}



/* 关于内容区 - 栏目页/内容页 */

.page-content {

    background: var(--white);

    padding: 40px;



    margin: 0 auto;

    line-height: 1.8;

}



.page-content h1 {

    font-size: 32px;

    color: var(--text-color);

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 2px solid var(--primary-color);

}



.page-content p {

    font-size: 16px;

    color: var(--text-color);

    margin-bottom: 20px;

    text-indent: 2em;

}



.about-content strong {

    color: var(--primary-color);

}



/* 联系页面内容 */

.contact-us-content {

    max-width: 1000px;

    margin: 0 auto;

}



.contact-intro {

    display: flex;

    gap: 30px;

    margin-bottom: 40px;

    padding-bottom: 30px;

    border-bottom: 1px solid #e0e0e0;

}



.contact-image {

    flex-shrink: 0;

    width: 200px;

    height: 150px;

    overflow: hidden;

    border-radius: 5px;

}



.contact-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.contact-text {

    flex: 1;

}



.contact-text h2 {

    font-size: 24px;

    color: var(--primary-color);

    margin-bottom: 15px;

}



.contact-text .sub-title {

    font-size: 14px;

    color: var(--text-lighter);

    font-weight: normal;

}



.contact-text p {

    font-size: 14px;

    color: var(--text-color);

    line-height: 1.8;

}



.contact-details {

    border: 1px solid #e0e0e0;

    padding: 30px;

}



.contact-row {

    display: flex;

    gap: 60px;

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px dashed #e0e0e0;

}



.contact-row:last-child {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}



.contact-item {

    flex: 1;

    display: flex;

    align-items: center;

    gap: 15px;

}



.contact-item i {

    font-size: 32px;

    color: var(--primary-color);

    width: 40px;

    text-align: center;

}



.contact-item span {

    font-size: 14px;

    color: var(--text-color);

    line-height: 1.6;

}



/* 栏目横幅 */

.category-banner {

    width: 100%;

    overflow: hidden;

}



.category-banner .banner-image {

    width: 100%;

}



.category-banner .banner-image img {

    width: 100%;

    height: auto;

    display: block;

}



/* 面包屑导航 */

.breadcrumb-section {

    background: #f5f5f5;

    padding: 15px 0;

    border-bottom: 1px solid #e0e0e0;

}



.breadcrumb {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    color: var(--text-lighter);

}



.breadcrumb i {

    color: var(--primary-color);

}



.breadcrumb a {

    color: var(--text-color);

    text-decoration: none;

    transition: color 0.3s;

}



.breadcrumb a:hover {

    color: var(--primary-color);

}



.breadcrumb .current {

    color: var(--primary-color);

    font-weight: bold;

}



/* 栏目内容布局 */

.category-content {

    padding: 40px 0;

    background: var(--white);

}



.category-layout {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 30px;

}



/* 新闻页面布局:左内容+右边栏 */

.category-news-layout {

    display: grid;

    grid-template-columns: 1fr 280px;

    gap: 30px;

}



/* 左侧边栏 */

.category-sidebar {

    position: sticky;

    top: 20px;

    align-self: start;

}



.category-sidebar-menu {

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    overflow: hidden;

    margin-bottom: 20px;

}



.category-sidebar-title {

    background: var(--primary-color);

    color: var(--white);

    padding: 15px 20px;

    font-size: 16px;

    font-weight: bold;

    margin: 0;

}



.sidebar-nav {

    padding: 0;

}



.sidebar-nav .menu-group {

    border-bottom: 1px solid #f0f0f0;

}



.sidebar-nav .menu-group:last-child {

    border-bottom: none;

}



.sidebar-nav .menu-title {

    padding: 15px 20px;

    background: #fff;

    cursor: pointer;

    transition: all 0.3s;

    user-select: none;

}



.sidebar-nav .menu-title a {

    color: var(--text-color);

    text-decoration: none;

    font-weight: 600;

    font-size: 15px;

    display: block;

}



.sidebar-nav .menu-group.active .menu-title {

    background: var(--primary-color);

}



.sidebar-nav .menu-group.active .menu-title a {

    color: var(--white);

}



.sidebar-nav .menu-title:hover {

    background: var(--primary-color);

}



.sidebar-nav .menu-group.active .menu-title:hover {

    background: #005a9c;

}



.sidebar-nav .menu-title {

    position: relative;

    padding-right: 45px;

}



.sidebar-nav .menu-title::after {

    content: '›';

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    font-size: 20px;

    color: var(--text-lighter);

    transition: all 0.3s;

}



.sidebar-nav .menu-group.active .menu-title::after {

    content: '‹';

    transform: translateY(-50%) rotate(-90deg);

    color: var(--white);

}



.sidebar-nav ul {

    list-style: none;

    padding: 0;

    margin: 0;

    display: none;

    background: #fff;

}



.sidebar-nav .menu-group.active ul {

    display: block;

}



.sidebar-nav ul li {

    border-bottom: 1px solid #f5f5f5;

}



.sidebar-nav ul li:last-child {

    border-bottom: none;

}



.sidebar-nav ul li a {

    display: block;

    padding: 12px 20px 12px 40px;

    color: var(--text-color);

    text-decoration: none;

    font-size: 14px;

    transition: all 0.3s;

    position: relative;

}



.sidebar-nav ul li a::before {

    content: "";

    position: absolute;

    left: 25px;

    top: 50%;

    transform: translateY(-50%);

    width: 4px;

    height: 4px;

    background: #ccc;

    border-radius: 50%;

    transition: all 0.3s;

}



.sidebar-nav ul li a:hover {

    color: var(--primary-color);

    background: #f9f9f9;

    padding-left: 45px;

}



.sidebar-nav ul li a:hover::before {

    background: var(--primary-color);

}



/* 侧边联系信息 */

.sidebar-contact {

    background: #f9f9f9;

    border: 1px solid var(--border-color);

    border-radius: 5px;

    padding: 20px;

    text-align: center;

}



.contact-title {

    font-size: 16px;

    color: var(--text-color);

    margin-bottom: 10px;

    font-weight: bold;

}



.contact-phone {

    font-size: 24px;

    color: var(--primary-color);

    font-weight: bold;

    margin-bottom: 15px;

}



.contact-info {

    text-align: left;

    font-size: 13px;

    color: var(--text-lighter);

    line-height: 1.8;

}



.contact-info p {

    margin: 5px 0;

}



/* 右侧内容区 */

.category-main {

    min-height: 500px;

}



/* 产品网格 */

.products-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin-bottom: 40px;

}



/* 新闻列表 */

.news-list {

    margin-bottom: 40px;

}



/* 文章内容 */

.article-content {

    background: var(--white);

    padding: 40px;

    line-height: 1.8;

}



.article-content h1 {

    font-size: 32px;

    color: var(--text-color);

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 2px solid var(--primary-color);

}



.article-content p {

    font-size: 16px;

    color: var(--text-color);

    margin-bottom: 20px;

    text-indent: 2em;

}



.article-content strong {

    color: var(--primary-color);

}



.news-list {

    margin-bottom: 40px;

}



/* 栏目页新闻列表 - 使用article-前缀避免与首页news-冲突 */

.article-item {

    border: 1px solid #e0e0e0;

    padding: 0;

    margin-bottom: 20px;

    transition: all 0.3s;

    background: var(--white);

    overflow: hidden;

}



.article-item:hover {

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    border-color: var(--primary-color);

}



.article-link {

    display: grid;

    grid-template-columns: 200px 1fr 130px;

    text-decoration: none;

    color: inherit;

    align-items: stretch;

}



.article-image {

    width: 200px;

    height: 150px;

    overflow: hidden;

    background: #f5f5f5;

}



.article-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s;

}



.article-item:hover .article-image img {

    transform: scale(1.05);

}



.article-item-content {

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px;

    overflow: hidden;

}



.article-content h3 {

    font-size: 18px;

    color: var(--text-color);

    margin: 0 0 10px 0;

    font-weight: bold;

    line-height: 1.5;

    transition: color 0.3s;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.article-item:hover .article-item-content h3 {

    color: var(--primary-color);

}



.article-item-content p {

    font-size: 14px;

    color: #666;

    line-height: 1.6;

    margin: 0;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.article-meta {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    padding: 20px 15px;

    border-left: 1px solid #e0e0e0;

    gap: 10px;

    overflow: hidden;

}



.article-date {

    font-size: 14px;

    color: #999;

    white-space: nowrap;

}



.btn-more {

    display: inline-block;

    padding: 6px 20px;

    border: 1px solid var(--primary-color);

    color: var(--primary-color);

    font-size: 14px;

    text-align: center;

    transition: all 0.3s;

    white-space: nowrap;

}



.article-item:hover .btn-more {

    background: var(--primary-color);

    color: var(--white);

}



/* 产品详情页 */

.product-detail {

    background: var(--white);

}



.product-overview {

    display: flex;

    gap: 30px;

    padding: 30px;

    border: 1px solid #e0e0e0;

    margin-bottom: 40px;

}



.product-gallery {

    flex-shrink: 0;

    width: 400px;

}



.main-image {

    width: 100%;

    height: 300px;

    overflow: hidden;

    border: 1px solid #e0e0e0;

    margin-bottom: 10px;

}



.main-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.thumb-images {

    display: flex;

    gap: 10px;

}



.thumb {

    width: 90px;

    height: 70px;

    object-fit: cover;

    cursor: pointer;

    border: 2px solid transparent;

    transition: border-color 0.3s;

}



.thumb:hover,

.thumb.active {

    border-color: var(--primary-color);

}



.detail-product-info {

    flex: 1;
}



.detail-product-info h1 {

    font-size: 24px;

    color: var(--text-color);

    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom: 2px solid var(--primary-color);

}



.product-features {

    margin-bottom: 30px;

}



.product-features p {

    font-size: 14px;

    color: var(--text-color);

    line-height: 2;

    margin-bottom: 10px;

}



.product-consult {

    display: flex;

    align-items: center;

    gap: 30px;

    padding: 20px;

    background: #f9f9f9;

    border-radius: 5px;

}



.consult-phone {

    display: flex;

    align-items: center;

    gap: 15px;

}



.consult-phone i {

    font-size: 36px;

    color: var(--primary-color);

}



.consult-phone div {

    display: flex;

    flex-direction: column;

}



.consult-phone span {

    font-size: 14px;

    color: var(--text-lighter);

}



.consult-phone a {

    font-size: 20px;

    color: var(--primary-color);

    font-weight: bold;

    text-decoration: none;

}



.consult-btn {

    padding: 12px 25px;

    background: var(--primary-color);

    color: var(--white);

    text-decoration: none;

    border-radius: 3px;

    font-size: 16px;

    transition: background 0.3s;

}



.consult-btn:hover {

    background: #005a9c;

}



/* 产品章节 */

.product-section {

    margin-bottom: 40px;

}



.page-section-title {

    font-size: 24px;

    color: var(--primary-color);

    margin-bottom: 25px;

    padding-bottom: 15px;

    border-bottom: 2px solid #e0e0e0;

    position: relative;

}



.page-section-title i {

    margin-right: 10px;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -2px;

    left: 50%;

    transform: translateX(-50%);

    width: 100px;

    height: 2px;

    background: var(--primary-color);

}



.en-title {

    font-size: 16px;

    color: #ccc;

    font-weight: normal;

}



.section-content h3 {

    font-size: 20px;

    color: var(--text-color);

    margin-bottom: 10px;

}



.en-subtitle {

    font-size: 14px;

    color: #ccc;

    font-weight: normal;

}



.sub-desc {

    font-size: 14px;

    color: var(--text-lighter);

    margin-bottom: 20px;

}



.intro-text {

    font-size: 14px;

    line-height: 1.8;

    color: var(--text-color);

    overflow-wrap: break-word;

    word-break: break-word;

    max-width: 100%;

}


.intro-text span[style*="nowrap"] {

    text-wrap-mode: wrap !important;

    white-space: normal !important;

    word-break: break-word !important;

    overflow-wrap: break-word !important;

}



.intro-text p {

    margin-bottom: 15px;

}



.intro-text strong {

    color: var(--primary-color);

}



.principle-image {

    width: 100%;

    height: auto;

    display: block;

    margin-top: 20px;

}



.product-item {

    background: var(--white);

    border: 1px solid var(--border-color);

    border-radius: 5px;

    overflow: hidden;

    transition: all 0.3s;

}



.product-item:hover {

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    transform: translateY(-5px);

}



.product-link {

    display: block;

    text-decoration: none;

    color: inherit;

}



.product-image {

    width: 100%;

    height: 200px;

    overflow: hidden;

    background: #f5f5f5;

}



.product-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s;

}



.product-item:hover .product-image img {

    transform: scale(1.1);

}



.product-title {

    padding: 15px;

    font-size: 15px;

    font-weight: bold;

    color: var(--text-color);

    text-align: center;

    margin: 0;

    transition: color 0.3s;

}



.product-item:hover .product-title {

    color: var(--primary-color);

}



/* 分页 */

.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    padding: 20px 0;

}



.pagination .total {

    color: var(--text-lighter);

    font-size: 14px;

}



.pagination .page-item {

    display: inline-block;

    padding: 8px 15px;

    border: 1px solid var(--border-color);

    border-radius: 3px;

    color: var(--text-color);

    text-decoration: none;

    font-size: 14px;

    transition: all 0.3s;

}



.pagination .page-item:hover {

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}



.pagination .page-item.active {

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}



/* 栏目页响应式 */

@media screen and (max-width: 1024px) {

    .category-layout {

        grid-template-columns: 1fr;

    }

    

    .category-sidebar {

        position: static;

    }

    

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}



@media screen and (max-width: 768px) {

    .category-content {

        padding: 20px 0;

    }

    

    .products-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;

    }

    

    .product-image {

        height: 150px;

    }

    

    .product-title {

        font-size: 14px;

        padding: 10px;

    }

}



@media screen and (max-width: 480px) {

    .products-grid {

        grid-template-columns: 1fr;

    }

}





/* 响应式 - 新闻列表 */

@media screen and (max-width: 768px) {

    .news-item {

        padding: 15px;

    }

    

    .news-link {

        flex-direction: column;

    }

    

    .news-image {

        width: 100%;

        height: 180px;

    }

    

    .read-more {

        align-self: flex-start;

        margin-top: 10px;

    }

    

    .article-content {

        padding: 20px;

    }

    

    .article-content h1 {

        font-size: 24px;

    }

    

    .contact-page {

        grid-template-columns: 1fr;

    }

}



/* 相册网格 */

.photo-gallery {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

}



.photo-item {

    background: var(--white);

    border: 1px solid #e0e0e0;

    overflow: hidden;

    transition: all 0.3s;

}



.photo-item:hover {

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

}



.photo-item img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;

    transition: transform 0.3s;

}



.photo-item:hover img {

    transform: scale(1.05);

}



.photo-caption {

    padding: 12px;

    text-align: center;

    font-size: 14px;

    color: var(--text-color);

    background: #f9f9f9;

}



@media screen and (max-width: 768px) {

    .photo-gallery {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .tabs-nav {

        flex-wrap: wrap;

    }

    

    .tab-item {

        flex: 1 1 33.333%;

        font-size: 13px;

        padding: 12px 15px;

    }

    

    .contact-intro {

        flex-direction: column;

    }

    

    .contact-image {

        width: 100%;

        height: 200px;

    }

    

    .contact-row {

        flex-direction: column;

        gap: 15px;

    }

}



@media screen and (max-width: 480px) {

    .photo-grid {

        grid-template-columns: 1fr;

    }

}



/* 文章详情 */

.article-detail {

    background: var(--white);

    padding: 40px;

    max-width: 900px;

    margin: 0 auto;

}



.article-detail h1 {

    font-size: 28px;

    color: var(--text-color);

    margin-bottom: 20px;

    text-align: center;

    line-height: 1.4;

}



.article-meta {

    display: flex;

    justify-content: center;

    gap: 20px;

    padding: 10px 0 20px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e0e0e0;

    color: var(--text-lighter);

    font-size: 13px;

}



.article-summary {

    background: #f9f9f9;

    border: 1px solid #e0e0e0;

    padding: 15px 20px;

    margin-bottom: 30px;

    font-size: 14px;

    line-height: 1.6;

    color: var(--text-color);

}



.article-summary strong {

    color: var(--primary-color);

}



.article-summary p {

    display: inline;

    margin: 0;

}



.article-body {

    font-size: 16px;

    line-height: 1.8;

    color: var(--text-color);

}



.article-body p {

    margin-bottom: 20px;

    text-indent: 2em;

}



.article-nav {

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid #e0e0e0;

}



.article-nav p {

    margin-bottom: 10px;

    font-size: 14px;

    color: var(--text-color);

}



.article-nav a {

    color: var(--primary-color);

    text-decoration: none;

}



.article-nav a:hover {

    text-decoration: underline;

}



.back-btn {

    display: inline-block;

    padding: 8px 20px;

    background: var(--primary-color);

    color: var(--white);

    text-decoration: none;

    border-radius: 3px;

    transition: background 0.3s;

    margin-top: 15px;

}



.back-btn:hover {

    background: #005a9c;

}



/* 相关推荐 */

.related-news {

    margin-top: 40px;

    padding-top: 30px;

    border-top: 1px solid #e0e0e0;

}



.related-news h3 {

    font-size: 20px;

    color: var(--text-color);

    margin-bottom: 20px;

    padding-bottom: 10px;

    border-bottom: 1px dashed #e0e0e0;

}



.related-news ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.related-news li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px dashed #e0e0e0;

}



.related-news li:last-child {

    border-bottom: none;

}



.related-news li a {

    color: var(--text-color);

    text-decoration: none;

    font-size: 14px;

    transition: color 0.3s;

}



.related-news li a:hover {

    color: var(--primary-color);

}



.related-news li span {

    color: var(--text-lighter);

    font-size: 13px;

}



@media screen and (max-width: 768px) {

    .article-detail {

        padding: 20px;

    }

    

    .article-detail h1 {

        font-size: 22px;

    }

    

    .product-overview {

        flex-direction: column;

    }

    

    .product-gallery {

        width: 100%;

    }

    

    .product-consult {

        flex-direction: column;

        align-items: flex-start;

    }

}



/* ==================== 

   灯箱 Lightbox

   ==================== */

.lightbox-overlay {

    display: none;

    position: fixed;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(0, 0, 0, 0.92);

    z-index: 10000;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: opacity 0.3s ease;

}

.lightbox-overlay.active {

    display: flex;

    opacity: 1;

}

.lightbox-content {

    position: relative;

    max-width: 90vw;

    max-height: 90vh;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.lightbox-content img {

    max-width: 100%;

    max-height: 85vh;

    object-fit: contain;

    border-radius: 4px;

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);

}

.lightbox-title {

    color: #fff;

    text-align: center;

    margin-top: 15px;

    font-size: 16px;

    padding: 8px 20px;

    background: rgba(255,255,255,0.1);

    border-radius: 4px;

}

.lightbox-close {

    position: absolute;

    top: -40px;

    right: -10px;

    width: 36px;

    height: 36px;

    background: rgba(255,255,255,0.2);

    border: none;

    color: #fff;

    font-size: 24px;

    line-height: 1;

    cursor: pointer;

    border-radius: 50%;

    transition: all 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}

.lightbox-close:hover {

    background: rgba(255,255,255,0.4);

    transform: rotate(90deg);

}

.lightbox-prev,

.lightbox-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 48px;

    height: 48px;

    background: rgba(255,255,255,0.15);

    border: none;

    color: #fff;

    font-size: 22px;

    cursor: pointer;

    border-radius: 50%;

    transition: all 0.2s;

    display: flex;

    align-items: center;

    justify-content: center;

}

.lightbox-prev { left: 20px; }

.lightbox-next { right: 20px; }

.lightbox-prev:hover,

.lightbox-next:hover {

    background: rgba(255,255,255,0.35);

}

.lightbox-counter {

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,0.7);

    font-size: 14px;

    padding: 4px 12px;

    background: rgba(0,0,0,0.5);

    border-radius: 12px;

}

@media (max-width: 600px) {

    .lightbox-prev { left: 8px; width: 38px; height: 38px; font-size: 18px; }

    .lightbox-next { right: 8px; width: 38px; height: 38px; font-size: 18px; }

}