h1,
h2,
h3,
h4,
h5,
h6,
p,
dd,
ol {
    margin: 0;
}

.clearfix {
    zoom: 1;
}

.clear {
    clear: both;
}

.container {
    padding: 0;
    width: 1600px;
    margin: 0 auto;
    overflow: hidden
}

.inContent {
    width: 1600px;
    margin: 0 auto;
    position: relative;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-size: 14px;
    font-family: "微软雅黑";
}

div:focus {
    outline: none;
}

ul,
ol,
body,
html,
p,
dl,
dt,
dd {
    margin: 0;
}

html {
    background: #fff;
    margin: 0 auto;
    font-size: 14px;
    font-family: "微软雅黑";
}

a {
    text-decoration: none;
    color: #333;
    -webkit-transition: color .3s;
    -moz-transition: color .3s;
    transition: color .3s;
    transition: 0.3s;
}

a:hover {
    color: #6eb92d;
}

ul,
li {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
}

img {
    border: 0;
    padding: 0px;
    margin: 0px;
}

input,
textarea,
button {
    border: none;
    outline: none;
    /*去除蓝色边框*/
    margin: 0;
    padding: 0;
}

ol {
    padding: 0
}

.left {
    float: left;
}

.right {
    float: right;
}

.fix::before,
.fix::after {
    display: table;
    clear: both;
    content: '';
}


/* 常量设置 */

.wrap {
    width: 1600px;
    margin: 0 auto;
}

a {
    color: inherit;
}

.placeholder {
    color: #aaa;
}


/*css组件设置*/

.form-control,
.input-group-addon,
.btn {
    border-radius: 2px;
}

.imgZoom img,
.imgY180 img {
    -moz-transition: all .8s ease 0s;
    -ms-transition: all .8s ease 0s;
    -o-transition: all .8s ease 0s;
    -webkit-transition: all .8s ease 0s;
    transition: all .8s ease 0s;
}

.imgZoom {
    overflow: hidden;
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.imgZoom:hover img {
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
}

.imgY180:hover img {
    cursor: pointer;
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}


/*
    设置在弹性容器上的属性
*/

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.align_items_center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.align_items_start {
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

.align_items_end {
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
}

.justify_content_around {
    -webkit-box-pack: center;
    -webkit-justify-content: space-around;
    -ms-flex-pack: center;
    justify-content: space-around;
}

.justify_content_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify_content_start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
}

.justify_content_space_between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify_content_end {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: end;
}

.boxSizing {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.rotate img {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}

.rotate:hover img {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* --- Header Navigation (header-nav) --- */

.header-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    color: #fff;
    box-sizing: border-box;
    transition: all 0.4s ease;
    background-color: transparent;
}

.header-nav.scrolled {
    background-color: #285103;
    padding: 15px 50px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.header-nav.scrolled .lang-switcher,
.header-nav.scrolled .search-btn {
    background: #7cb342;
    /* 颜色稍微加深，确保在白色背景上清晰 */
    color: #fff;
}

.logo-container {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
}

.logo-container img {
    margin-right: 10px;
}

.nav-links {
    display: flex;
    gap: 40px;
}

.nav-links li a {
    font-size: 18px;
    position: relative;
    padding-bottom: 5px;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transition: width 0.3s ease;
}

.nav-links li a:hover::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.lang-switcher {
    font-size: 16px;
    background: #8bc34a;
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


/* 搜索按钮样式 */

.search-btn {
    background: #8bc34a;
    border: none;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-btn:hover {
    background: #7cb342;
}


/* --- 搜索弹窗遮罩层 (search-overlay) --- */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
}

.search-overlay.active {
    opacity: 1;
    visibility: visible;
}


/* 搜索框容器 */

.search-container {
    width: 80%;
    max-width: 800px;
    position: relative;
    transform: translateY(30px);
    transition: transform 0.4s ease;
}

.search-overlay.active .search-container {
    transform: translateY(0);
}

.search-input {
    width: 100%;
    padding: 20px 60px 20px 20px;
    font-size: 32px;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    outline: none;
    transition: border-color 0.3s ease;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.search-input:focus {
    border-bottom-color: #8bc34a;
}


/* 搜索关闭按钮 */

.search-close {
    position: absolute;
    right: 20px;
    top: 30%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.search-close:hover {
    color: #8bc34a;
}

.search-hint {
    margin-top: 15px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
}


/* --- Main Banner Slider (banner-slider) --- */

.banner-slider {
    position: relative;
    width: 100%;
    height: 830px;
    overflow: hidden;
    background-color: #000;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}


/* 第一张幻灯片初始直接可见，杜绝黑屏 */

.banner-slide.first-init {
    opacity: 1;
    visibility: visible;
}

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

.slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.1);
    transition: transform 8s ease-out;
}

.slide-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(135, 195, 74, 0.7) 0%, rgba(135, 195, 74, 0.2) 50%, rgba(135, 195, 74, 0) 100%);
}

.banner-slide.active .slide-bg {
    transform: scale(1);
}

.banner-slide.first-init .slide-bg {
    transform: scale(1.1);
}

.slide-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 12%;
    color: #fff;
    max-width: 800px;
}

.banner-pagination {
    display: flex;
    align-items: baseline;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.1s;
}

.banner-slide.active .banner-pagination,
.banner-slide.first-init-animate .banner-pagination {
    opacity: 1;
    transform: translateY(0);
}

.current-page {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.total-pages {
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 5px;
}

.pagination-progress {
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    margin-top: 10px;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.pagination-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: #8bc34a;
}

.banner-slide.active .pagination-bar,
.banner-slide.first-init-animate .pagination-bar {
    animation: progressFill 5s linear forwards;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.slide-subtitle {
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
}

.slide-title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
}

.slide-year {
    font-size: 36px;
    font-weight: 900;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.7s;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

.banner-slide.active .slide-subtitle,
.banner-slide.active .slide-title,
.banner-slide.active .slide-year,
.banner-slide.first-init-animate .slide-subtitle,
.banner-slide.first-init-animate .slide-title,
.banner-slide.first-init-animate .slide-year {
    opacity: 1;
    transform: translateY(0);
}

.scroll-down-indicator {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    cursor: pointer;
    animation: bounce 2s infinite;
}

.scroll-text {
    font-size: 12px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.8;
}

.scroll-icon {
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-icon::after {
    content: '';
    width: 4px;
    height: 8px;
    background-color: #fff;
    border-radius: 2px;
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


/* --- 关于我们板块样式 --- */

.about-section {
    position: relative;
    width: 100%;
    background: url(../images/aboutbg_03.png) no-repeat center top;
    padding-bottom: 100px;
    overflow: hidden;
    /* 防止波浪溢出 */
    position: relative;
    background-size: auto 100%;
    margin-top: -88px;
}


/* 左侧文字区域 */

.about-text {
    width: 55%;
    margin-top: 250px;
}

.about-section .sub-title {
    display: block;
    font-size: 30px;
    color: #8bc34a;
    /* 浅绿色 */
    margin-bottom: 10px;
    font-weight: 500;
}

.about-section .main-title {
    font-size: 40px;
    color: #333;
    margin: 0 0 30px 0;
    font-weight: bold;
}

.about-section .text-content p {
    font-size: 16px;
    line-height: 26px;
    color: #666;
    text-align: justify;
}


/* 按钮样式 */

.about-section .btn-learn-more {
    display: flex;
    margin-top: 40px;
    padding: 12px 35px;
    background-color: #2e7d32;
    /* 深绿色按钮 */
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    font-size: 16px;
    transition: all 0.3s ease;
    align-items: center;
    width: 210px;
    box-sizing: border-box;
}

.about-section .btn-learn-more img {
    margin-right: 15px;
}

.about-section .btn-learn-more:hover {
    background-color: #1b5e20;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 125, 50, 0.3);
}


/* 右侧图片区域 */

.about-section .about-image {
    width: 45%;
    /* 固定宽度 */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.about-section .about-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 保持图片比例 */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    /* 给图片加一点投影，更有立体感 */
}


/* === 企业数据展示板块 === */

.data-section {
    padding: 0 0 80px 0;
    background-color: #f2f4f6;
}

.data-section .data-container {
    display: flex;
    gap: 30px;
    padding: 0 20px;
    align-items: flex-start;
    /* 关键：让卡片顶部对齐，为 margin-top 提供基准 */
}

.data-section .data-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    flex: 1;
    min-width: 260px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* === 高低错落布局 === */

.data-section .card-2,
.data-section .card-4 {
    margin-top: 60px;
    /* 第2、4张卡片下移60px，形成错落感 */
}

.data-section .data-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.data-section .card-header {
    padding: 20px 24px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.data-section .card-header h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
    font-weight: 500;
}

.data-section .card-number {
    padding: 0 24px 20px;
    font-size: 60px;
    font-weight: bold;
    color: #4CAF50;
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.data-section .card-number .unit {
    font-size: 16px;
    font-weight: normal;
    color: #666;
    margin-left: 8px;
}

.data-section .card-image {
    height: 180px;
    overflow: hidden;
}

.data-section .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.data-section .data-card:hover .card-image img {
    transform: scale(1.05);
}


/* === 核心优势板块样式 === */

.advantage-slider {
    position: relative;
    width: 100%;
    height: 930px;
    overflow: hidden;
}

.advantage-slider .h1 {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    position: relative;
    z-index: 9;
    color: #fff;
    margin-top: 60px;
}

.advantage-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s;
    z-index: 1;
}

.advantage-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.advantage-slide-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: transform 6s ease-out;
}

.advantage-slide.active .advantage-slide-bg {
    transform: scale(1.1);
}

.advantage-arc-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: 2;
    pointer-events: none;
}

.advantage-arc-path {
    stroke-dasharray: 3000;
    stroke-dashoffset: 3000;
    transition: stroke-dashoffset 2s ease-in-out;
}

.advantage-slide.active .advantage-arc-path {
    stroke-dashoffset: 0;
}

.advantage-slide-content {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}

.advantage-slide-content .t2 {
    font-size: 16px;
    margin-top: 20px;width: 80%;
}

.advantage-slide-content h2 {
    font-size: 50px;
    font-weight: bold;
    margin-right: 40px;
}


/* 描述文字：1.2rem = 19.2px (取整为 19px) */

.advantage-slide-content p {
    font-size: 30px;
    opacity: 0.9;
    font-weight: bold;
    text-align: left;
    width: 50%;
}

.advantage-slide-content p span {
    display: block;
}

.data-box .num-scroll {
    font-size: 170px;
    font-weight: bold;
    color: #7bc143;
    line-height: 1;
    font-family: Arial, sans-serif;
}


/* 单位文字：1.2rem = 19.2px (取整为 19px) */

.data-box .unit {
    font-size: 19px;
    margin-left: 5px;
    opacity: 0.8;
}

.advantage-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.advantage-btn img {
    width: 100%;
    height: 100%;
}

.advantage-btn:hover {
    background: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.advantage-slider .prev-btn {
    left: 40px;
}

.advantage-slider .next-btn {
    right: 40px;
}


/* 错落入场动画 */

.advantage-slider .data-box {
    position: absolute;
    bottom: 0;
}

.advantage-slider .data-box .txt {
    font-size: 24px;
}

.anim-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.advantage-slide.active .anim-item {
    opacity: 1;
    transform: translateY(0);
}

.advantage-slide.active .anim-1 {
    transition-delay: 0.2s;
}

.advantage-slide.active .anim-2 {
    transition-delay: 0.4s;
}

.advantage-slide.active .anim-3 {
    transition-delay: 0.6s;
}

.advantage-slide.active .anim-4 {
    transition-delay: 0.8s;
}


/* ---首页 产品中心 --- */

.product-section {
    position: relative;
    padding-bottom: 80px;
    /* 用于定位箭头 */
}


/* --- 头部区域 --- */

.product-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30px;
    /* 给右侧箭头留位置 */
    margin-top: 70px;
}

.product-section .title-group h3 {
    color: #7cb342;
    /* 绿色英文标题 */
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 5px;
}

.product-section .title-group h2 {
    color: #333;
    font-size: 50px;
    font-weight: bold;
}


/* --- 导航箭头 --- */

.product-section .nav-arrows {
    display: flex;
    gap: 10px;
}

.product-section .arrow-btn {
    width: 60px;
    height: 60px;
    background-color: #6eb92d;
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
}

.product-section .arrow-btn:hover {
    opacity: 0.8;
}


/* --- 滚动列表容器 --- */

.product-section .scroll-wrapper {
    overflow: hidden;
    /* 隐藏超出部分 */
    width: 100%;
}

.product-section .product-list {
    display: flex;
    gap: 45px;
    /* 卡片间距 */
    transition: transform 0.5s ease-in-out;
    /* 平滑滚动动画 */
    will-change: transform;
}


/* --- 单个卡片 --- */

.product-section .product-card {
    min-width: calc(23.8% - 15px);
    /* 一行显示4个，减去间距影响 */
    /* 如果屏幕较小，可以调整为 33.33% 或 50% */
    display: flex;
    flex-direction: column;
}

.product-section .card-image {
    width: 100%;
    aspect-ratio: 1 / 1.4;
    object-fit: cover;
    border-radius: 12px;
    /* 图片圆角 */
    margin-bottom: 15px;
    background-color: #f0f0f0;
}

.product-section .card-image img {
    width: 100%;
    height: 100%;
}

.product-section .card-title {
    font-size: 26px;
    font-weight: bold;
    color: #3b4536;
    margin-bottom: 10px;
}

.product-section .card-list {
    list-style: none;
    flex-grow: 1;
    /* 让列表撑开高度，保证底部按钮对齐 */
}

.product-section .card-list li {
    transition: transform 0.3s ease;
}

.product-section .card-list li:hover {
    transform: translateX(5px);
}

.product-section .card-list li {
    font-size: 18px;
    color: #3b4536;
    line-height: 1.8;
}

.product-section .card-footer {
    margin-top: 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.product-section .footer-icon {
    width: 20px;
    height: 20px;
    background-color: #7cb342;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    margin-right: 8px;
}

.product-section .footer-text {
    color: #7cb342;
    font-size: 16px;
}


/* --- 全球布局核心容器 --- */

.global-section {
    position: relative;
    background-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(249, 251, 248, 0.1), rgba(249, 251, 248, 1));
    overflow: hidden;
}


/* --- 头部区域 --- */

.global-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    flex-wrap: wrap;
    margin-top: 80px;
}

.global-section .header-left h2 {
    color: #5c9e31;
    /* 主题绿 */
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.global-section .header-left h1 {
    font-size: 50px;
    color: #333;
    font-weight: bold;
}

.global-section .header-right {
    max-width: 70%;
    color: #666;
    font-size: 16px;
    line-height: 1.8;
    text-align: justify;
}


/* --- 地图容器 (核心) --- */

.global-section .map-container {
    position: relative;
    width: 100%;
    /* 保持宽高比，防止变形，根据你的背景图调整 padding-bottom */
    /* 这里假设地图大概是 2:1 的比例 */
    padding-bottom: 55%;
    background-image: url('../images/Global_07.jpg');
    /* 替换为你的本地图片 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 20px;
}


/* --- 标记点 Wrapper --- */

.global-section .marker-wrapper {
    position: absolute;
    /* 保持入场动画 */
    opacity: 0;
    animation: markerFadeIn 0.8s ease forwards, /* 先执行入场 */
    floating 3s ease-in-out infinite;
}


/* 定义每个标记的位置 (百分比定位) */

.global-section .pos-canada {
    top: 15%;
    left: 18%;
    animation: markerFadeIn 0.8s 0.2s ease forwards, floating 3.5s 1.0s ease-in-out infinite;
}

.global-section .pos-usa {
    top: 28%;
    left: 20%;
    animation: markerFadeIn 0.8s 0.4s ease forwards, floating 4s 1.2s ease-in-out infinite;
    /* 不同的周期(4s)让节奏更乱更自然 */
}

.global-section .pos-south-america {
    top: 60%;
    left: 28%;
    animation: markerFadeIn 0.8s 0.6s ease forwards, floating 3.2s 1.4s ease-in-out infinite;
}

.global-section .pos-europe {
    top: 18%;
    left: 48%;
    animation: markerFadeIn 0.8s 0.8s ease forwards, floating 3.8s 1.6s ease-in-out infinite;
}

.global-section .pos-africa {
    top: 50%;
    left: 52%;
    animation: markerFadeIn 0.8s 1.0s ease forwards, floating 4.2s 1.8s ease-in-out infinite;
}

.global-section .pos-middle-east {
    top: 35%;
    left: 58%;
    animation: markerFadeIn 0.8s 1.2s ease forwards, floating 3.6s 2.0s ease-in-out infinite;
}

.global-section .pos-sea {
    top: 45%;
    left: 82%;
    animation: markerFadeIn 0.8s 1.4s ease forwards, floating 4.5s 2.2s ease-in-out infinite;
}
.global-section .pos-west-asia {
    top: 30%;
    left: 52%;
    animation: markerFadeIn 0.8s 1.6s ease forwards, floating 4.0s 2.0s ease-in-out infinite;
}
.global-section .pos-East-Europe {
    top: 24%;
    left: 45%;
    animation: markerFadeIn 0.8s 1.8s ease forwards, floating 5.0s 2.8s ease-in-out infinite;
}
/* --- 绿色标签按钮 --- */

.global-section .map-tag {
    position: relative;
    background-color: #6eb92d;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 使用弹性贝塞尔曲线，更有质感 */
    display: inline-block;
    box-shadow: 0 4px 10px rgba(109, 189, 69, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-section .map-tag:hover {
    /* 悬停时：放大、变色、阴影加深 */
    transform: scale(1.15) !important;
    background-color: #5c9e31;
    box-shadow: 0 8px 20px rgba(109, 189, 69, 0.6);
}

.global-section .marker-wrapper:hover {
    animation-play-state: paused;
}


/* --- 定位点 (地图上的小圆点) --- */

.global-section .map-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border: 2px solid #6dbd45;
    border-radius: 50%;
    bottom: -40px;
    /* 距离标签的距离 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}


/* 呼吸波纹效果 */

.global-section .map-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #6dbd45;
    animation: ripple 2s infinite;
}


/* --- SVG 连线 --- */

.global-section .connector-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 让鼠标事件穿透 */
    z-index: 1;
}

.global-section .connector-path {
    fill: none;
    stroke: #aaddaa;
    /* 线条颜色 */
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawLine 1.5s ease forwards;
}


/* --- 动画关键帧 --- */

@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
    /* 向上浮动 8px */
    100% {
        transform: translateY(0px);
    }
}

@keyframes markerFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes ripple {
    0% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    100% {
        width: 300%;
        height: 300%;
        opacity: 0;
    }
}


/* --- 首页新闻 --- */


/* --- 头部区域 (Flex布局) --- */

.news-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.news-section .header-left h2 {
    color: #7cb342;
    /* 主题绿色 */
    font-size: 32px;
    font-weight: normal;
    margin-bottom: 5px;
}

.news-section .header-left h1 {
    color: #333;
    font-size: 50px;
    font-weight: bold;
}


/* 右上角“了解更多”按钮 */

.news-section .btn-more {
    background-color: #4a5e46;
    /* 深橄榄绿 */
    color: white;
    text-decoration: none;
    padding: 8px 20px;
    border-radius: 30px;
    /* 胶囊形状 */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    transition: background-color 0.3s;
}

.news-section .btn-more:hover {
    background-color: #364633;
}

.news-section .btn-more span.icon {
    background-color: #7cb342;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}


/* --- 新闻列表容器 (Grid布局) --- */

.news-section .news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 默认3列 */
    gap: 50px;
}


/* --- 单个新闻卡片 --- */

.news-section .news-card {
    border: 1px solid #8bc757;
    /* 极淡的绿色边框 */
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.news-section .news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    border-color: #c5e1a5;
}


/* 图片区域 */

.news-section .card-image {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 30px;
}


/* 内容区域 */

.news-section .card-content {
    padding: 20px;
    flex-grow: 1;
    /* 让内容区撑满剩余空间 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


/* 标题 */

.news-section .card-title {
    font-size: 26px;
    color: #3b4536;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 600;
    /* 限制显示两行，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* 底部信息栏 */

.news-section .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    /* 推到底部 */
}

.news-section .news-date {
    color: #999;
    font-size: 14px;
}


/* 卡片内的绿色小箭头按钮 */

.news-section .card-btn-arrow {
    width: 36px;
    height: 36px;
    background-color: #7cb342;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.news-section .card-btn-arrow:hover {
    background-color: #689f38;
}

.news-section {
    padding-bottom: 100px;
}


/* --- Footer 核心样式 --- */

.site-footer {
    background-color: #3B4538;
    /* 深橄榄绿背景 */
    color: #ffffff;
    padding: 60px 0 20px;
    font-size: 16px;
}


/* --- 顶部 Logo --- */

.site-footer .footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.site-footer .footer-logo img {
    height: 40px;
    /* 根据实际Logo调整 */
    margin-right: 15px;
}

.site-footer .footer-logo span {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
}


/* --- 分割线 --- */

.site-footer .divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin-bottom: 40px;
}


/* --- 主体内容 Grid 布局 --- */

.site-footer .footer-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    /* 左中右比例 */
    gap: 60px;
    margin-bottom: 60px;
}


/* --- 通用标题样式 --- */

.site-footer .col-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
    display: block;
}


/* --- 第一列：联系我们 --- */

.site-footer .contact-list {
    list-style: none;
}

.site-footer .contact-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #e0e0e0;
}

.site-footer .contact-list li img {
    margin-right: 16px;
}


/* --- 第二列：快捷入口 --- */

.site-footer .quick-links {
    list-style: none;
}

.site-footer .quick-links li {
    margin-bottom: 12px;
    font-size: 18px;
}

.site-footer .quick-links a {
    color: #a0a0a0;
    /* 浅灰色链接 */
    text-decoration: none;
    transition: color 0.3s;
}

.site-footer .quick-links a:hover {
    color: #7CB342;
    /* 悬停变绿 */
}


/* --- 第三列：留言表单 --- */

.site-footer .form-intro {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.site-footer .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.site-footer .footer-input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    background-color: #ffffff;
    font-size: 14px;
    outline: none;
    color: #333;
    box-sizing: border-box;
}

.site-footer .footer-input::placeholder {
    color: #999;
}

.site-footer textarea.footer-input {
    height: 100px;
    resize: none;
    /* 禁止拖动大小 */
    margin-bottom: 20px;
}

.site-footer .submit-btn {
    background-color: #7CB342;
    /* 亮绿色按钮 */
    color: white;
    border: none;
    padding: 10px 40px;
    border-radius: 25px;
    /* 圆角胶囊状 */
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.site-footer .submit-btn:hover {
    background-color: #6da03b;
}


/* --- 底部版权 --- */

.site-footer .footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    font-size: 16px;
}

.nybanner .wrap {
    height: 498px;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
}


/* --- 面包屑导航 --- */

.zhf-pdp-breadcrumb {
    font-size: 16px;
    color: #666;
    margin: 30px auto;
    padding-left: 5px;
}

.zhf-pdp-breadcrumb span {
    margin: 0 5px;
    color: #999;
}


/* --- 核心内容区 (Flex布局) --- */

.zhf-pdp-content {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.zhf-pdp-wrapper {
    margin-bottom: 100px;
}


/* --- 左侧侧边栏 --- */

.zhf-pdp-sidebar {
    width: 280px;
    background-color: #f4faef;
    /* 淡绿色背景 */
    border-radius: 16px;
    padding: 60px 20px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.zhf-pdp-menu-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 菜单项居中 */
}

.zhf-pdp-menu-item {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}


/* 选中状态样式 */

.zhf-pdp-menu-item.active a {
    background-color: #7cb342;
    /* 绿色背景 */
    color: #fff;
    border-radius: 20px;
    display: inline-block;
    padding: 8px 0;
    width: 85%;
    /* 胶囊宽度 */
    font-weight: bold;
}

.zhf-pdp-menu-item.active a:hover {
    color: #fff;
}


/* 普通状态样式 */

.zhf-pdp-menu-item a {
    font-size: 16px;
    color: #333;
    display: block;
    padding: 5px 0;
    transition: transform 0.3s ease;
}

.zhf-pdp-menu-item a:hover {
    color: #7cb342;
    transform: translateX(5px);
}


/* --- 关键：侧边栏上下装饰竖线 --- */


/* 上方竖线：定位在第一个元素上方 */

.zhf-pdp-menu-item:first-child::before {
    content: '';
    position: absolute;
    top: -35px;
    right: 50px;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background-color: #7cb342;
}


/* 下方竖线：定位在最后一个元素下方 */

.zhf-pdp-menu-item:last-child::after {
    content: '';
    position: absolute;
    bottom: -25px;
    /* 向下偏移 */
    right: 50px;
    transform: translateX(-50%);
    width: 2px;
    height: 25px;
    background-color: #7cb342;
}


/* --- 右侧产品网格 --- */

.zhf-pdp-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4列布局 */
    gap: 25px;
}

.zhf-pdp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zhf-pdp-img-box {
    width: 100%;
    aspect-ratio: 1 / 1.3;
    /* 正方形图片 */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.zhf-pdp-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.zhf-pdp-card:hover img {
    transform: scale(1.05);
    /* 悬停放大效果 */
}

.zhf-pdp-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    text-align: center;
}


/* --- 分页器 --- */

.zhf-pdp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    gap: 10px;
}

.zhf-pdp-page-btn {
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 4px;
    background: #fff;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 16px;
}

.zhf-pdp-page-btn:hover {
    border-color: #7cb342;
    color: #7cb342;
}

.zhf-pdp-page-btn.active {
    background-color: #7cb342;
    color: #fff;
    border-color: #7cb342;
}


/* --- 关于我们主容器 (zhf-about-section) --- */

.zhf-about-section {
    /* 核心背景：径向渐变，模拟中间白两边绿的效果 */
    background: radial-gradient(ellipse at center, #ffffff 40%, #eef7e6 100%);
    overflow: hidden;
    padding-bottom: 100px;
    /* 防止内容溢出 */
}

.zhf-about-container {
    position: relative;
}


/* --- 顶部标题区 --- */

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

.zhf-about-title {
    font-size: 40px;
    color: #2c3e28;
    /* 深墨绿色 */
    font-weight: normal;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}


/* 标题下方的绿色短横线 */

.zhf-about-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #7cb342;
    /* 品牌绿 */
    margin: 15px auto 0;
}


/* --- 公司简介文本 --- */

.zhf-about-text {
    font-size: 16px;
    line-height: 1.8;
    color: #666;
    text-align: justify;
    margin: 0 auto 80px;
    /* 底部留白给图片区域 */
}


/* --- 核心展示区 (Grid布局) --- */

.zhf-about-showcase {
    display: grid;
    grid-template-columns: 0.5fr 1.3fr 0.5fr;
    /* 左数据-中图-右数据 */
    grid-template-rows: auto auto;
    /* 两行数据 */
    align-items: center;
    position: relative;
    min-height: 500px;
}


/* --- 数据项样式 --- */

.zhf-data-item {
    padding: 20px;
    z-index: 2;
    /* 确保文字在图片上方（如果重叠） */
}


/* 左侧数据靠右对齐（靠近中间图） */

.zhf-data-left {
    padding-right: 40px;
}


/* 右侧数据靠左对齐（靠近中间图） */

.zhf-data-right {
    padding-left: 40px;
}

.zhf-data-number {
    font-size: 56px;
    color: #8bc34a;
    /* 浅绿色数字 */
    font-family: Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 10px;
}

.zhf-data-unit {
    font-size: 16px;
    color: #666;
    font-weight: normal;
    margin-left: 5px;
}

.zhf-data-desc {
    font-size: 24px;
    font-weight: bold;
    color: #244d00;
    line-height: 1.5;
}


/* --- 中间大图容器 --- */

.zhf-center-image-wrapper {
    grid-column: 2 / 3;
    /* 占据中间列 */
    grid-row: 1 / 3;
    /* 跨越两行 */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.zhf-center-image {
    max-width: 100%;
    height: auto;
    /* 增加一点投影让立体感更强 */
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}


/* --- 主容器 (zhf-solution-section) --- */

.zhf-solution-section {
    position: relative;
    width: 100%;
    min-height: 600px;
    /* 根据内容调整高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 80px 20px;
    box-sizing: border-box;
}


/* 1. 视差背景层 */

.zhf-solution-bg {
    position: absolute;
    top: -10%;
    left: -10%;
    right: -10%;
    bottom: -10%;
    /* 这里使用了一张在线的胡萝卜田图片作为示例，请替换为你的本地高清大图 */
    background-image: url('../images/about_10.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    background-attachment: fixed;
}


/* 2. 核心卡片容器 */

.zhf-solution-card {
    position: relative;
    z-index: 1;
    background: rgba(36, 77, 0, 0.5);
    backdrop-filter: blur(10px);
    /* 毛玻璃效果 */
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 60px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}


/* --- 上半部分：标题与介绍 --- */

.zhf-sol-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 50px;
    gap: 40px;
    width: 100%;
}

.zhf-sol-title h2 {
    font-size: 60px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
    width: 100%;
}

.zhf-sol-desc {
    
    font-size: 16px;
    line-height: 1.8;
    color: #fff;
     width: 55%;
    text-align: justify;
}


/* 分割线 */

.zhf-sol-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    margin-bottom: 50px;
    width: 100%;
}


/* --- 下半部分：流程步骤 --- */

.zhf-sol-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.zhf-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: 12px;
    transition: transform 0.3s ease, background 0.3s ease;
    transform: translateY(20px);
}


/* 悬停高级效果 */

.zhf-step-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.zhf-step-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
    margin-top: 16px;
}


/* --- 动画类 (由 JS 触发) --- */

.zhf-step-item.animate-in {
    animation: stepFadeUp 0.6s forwards ease-out;
}

@keyframes stepFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- 容器 --- */

.accordion-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 控制每个大项之间的垂直间距 */
    margin: 100px auto;
}


/* --- 单个组件包裹层 --- */

.accordion-container .accordion-item {
    display: flex;
    flex-direction: column;
}

.accordion-container .accordion-header {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-radius: 8px;
    box-sizing: border-box;
    /* 统一圆角 */
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 26px;
    font-weight: bold;
    /* 默认状态：白底绿框 */
    background-color: #ffffff;
    border: 1px solid #dceec9;
    color: #333333;
}

.accordion-container .accordion-item.active .accordion-header {
    background: linear-gradient(to right, #6eb92d, #244e00);
    border-color: transparent;
    color: #ffffff;
}


/* 右侧图标 (+ / -) */

.accordion-container .icon-toggle {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 使用伪元素画十字 */

.accordion-container .icon-toggle::before,
.accordion-container .icon-toggle::after {
    content: '';
    position: absolute;
    background-color: #6ab02b;
    /* 默认绿色线条 */
    transition: all 0.3s ease;
}


/* 横线 */

.accordion-container .icon-toggle::before {
    width: 16px;
    height: 2px;
}


/* 竖线 */

.accordion-container .icon-toggle::after {
    width: 2px;
    height: 16px;
}


/* 激活状态下图标变白并旋转成减号 */

.accordion-container .accordion-item.active .icon-toggle::before,
.accordion-container .accordion-item.active .icon-toggle::after {
    background-color: #ffffff;
}

.accordion-container .accordion-item.active .icon-toggle::after {
    transform: rotate(90deg);
    /* 竖线旋转重合变成减号 */
}

.accordion-container .accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    border-radius: 8px;
    margin-top: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background-size: cover;
    background-position: center;
    position: relative;
}

.accordion-container .accordion-content .img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}


/* 激活状态下展开 */

.accordion-container .accordion-item.active .accordion-content {
    min-height: 400px;
    /* 足够展示内容的高度 */
    opacity: 1;
    margin-top: 12px;
    /* 与标题栏的间距 */
    padding: 40px;
}


/* 内容排版 */

.accordion-container .content-inner {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.accordion-container .content-title {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 10px;
}

.accordion-container .content-text {
    font-size: 16px;
    line-height: 1.8;
    opacity: 0.9;
    max-width: 40%;
    /* 限制文字宽度，提升阅读体验 */
    text-align: justify;
}


/* --- 主容器 --- */

.timeline-section {
    position: relative;
    width: 100%;
    height: 900px;
    /* 背景图 */
    background: url('../images/about_16.jpg') center/cover no-repeat;
    color: #fff;
}


/* 背景遮罩，让文字更清晰 */

.timeline-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%); */
    z-index: 1;
}

.content-wrapper {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    color: #fff;
}


/* --- 左侧时间轴区域 --- */

.timeline-left {
    width: 200px;
    height: 448px;
    /* 关键：7 × 64px，只露出7个 */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    /* 关键：轨道从顶部开始，别居中 */
    align-self: center;
    /* 整个时间轴在父容器里垂直居中 */
}


/* 时间轴列表轨道 */

.year-list-track {
    display: flex;
    flex-direction: column;
    /* 去掉 gap，改用固定高度控制间距 */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.year-item {
    font-size: 24px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 20px;
    height: 64px;
    /* 关键：每项固定64px，active放大不撑高 */
    box-sizing: border-box;
    flex-shrink: 0;
}


/* 年份左侧的小横线 */

.year-item::before {
    content: '';
    position: absolute;
    left: 0;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s;
}

.year-item:hover {
    color: rgba(255, 255, 255, 0.8);
}


/* 激活状态 */

.year-item.active {
    color: #fff;
    font-size: 36px;
    /* 放大效果 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.year-item.active::before {
    width: 20px;
    height: 3px;
    background: #fff;
}


/* --- 右侧内容区域 --- */

.timeline-right {
    flex: 1;
    padding-left: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* 顶部小标题 */

.section-subtitle {
    font-size: 50px;
    letter-spacing: 2px;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.section-subtitle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 90px;
    height: 4px;
    background: #fff;
}


/* 内容展示区（用于淡入淡出） */

.content-display {
    opacity: 1;
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    gap: 60px;
    justify-content: space-between;
}

.content-display.fade-out {
    opacity: 0;
}

.text-info {
    width: 600px;
}

.big-year {
    font-size: 100px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 20px;
    background: linear-gradient(to bottom, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-text {
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}


/* --- 图片与旋转圆环 --- */

.image-area {
    position: relative;
    width: 560px;
    height: 560px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* 内部圆形图片 */

.circle-img {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 2;
    border: 4px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}


/* 外部旋转虚线圆环 */

.rotating-ring {
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    z-index: 1;
    animation: rotateRing 20s linear infinite;
    /* 旋转动画 */
}


/* 装饰性的小圆点，增加科技感 */

.rotating-ring::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}


/* 定义旋转关键帧 */

@keyframes rotateRing {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* --- 主容器 --- */

.contact-section {
    background: url(../images/lxbg_05.jpg) no-repeat center bottom #eff7e8;
    overflow: hidden;
    padding-bottom: 200px;
}

.cs-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    /* 卡片之间的间距 */
}


/* --- 通用卡片样式 --- */

.cs-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    padding: 40px;
}


/* --- 上半部分：联系信息 --- */

.cs-info-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 两列布局 */
    gap: 25px 40px;
}

.cs-info-item {
    display: flex;
    align-items: center;
    font-size: 30px;
    color: #3b4536;
}

.cs-full-width {
    grid-column: span 2;
    /* 地址占满一行 */
}

.cs-icon-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #6eb92d;
    border-radius: 2px;
    /* 圆角正方形 */
    margin-right: 12px;
    flex-shrink: 0;
}

.cs-label {
    font-weight: 500;
    margin-right: 8px;
}


/* --- 下半部分：表单区域 --- */

.cs-form-header {
    margin-bottom: 40px;
}

.cs-subtitle {
    color: #6eb92d;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: normal;
}

.cs-title {
    font-size: 30px;
    color: #3b4536;
    font-weight: normal;
}


/* 表单网格布局 */

.cs-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cs-row {
    display: flex;
    gap: 40px;
    /* 左右输入框间距 */
}

.cs-col {
    flex: 1;
    /* 左右各占一半 */
    position: relative;
}


/* 输入框样式 (下划线风格) */

.cs-col input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #c5c5c5;
    padding: 10px 0;
    font-size: 20px;
    color: #666;
    background: transparent;
    outline: none;
    transition: border-color 0.3s;
}

.cs-col input:focus {
    border-bottom-color: #6eb92d;
}

.cs-col input::placeholder {
    color: #999;
}


/* 提交按钮区域 */

.cs-submit-area {
    display: flex;
    justify-content: flex-end;
    /* 靠右对齐 */
    margin-top: 10px;
}

.cs-btn-submit {
    background-color: #3b4536;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    /* 胶囊形状 */
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s, transform 0.2s;
}

.cs-btn-submit:hover {
    background-color: #1e2922;
    transform: translateY(-2px);
}


/* --- 基础容器设置 --- */

.newslist-section {
    width: 100%;
    background-color: #f9fbf9;
    /* 极淡的背景色，模拟截图氛围 */
    padding: 0 0 60px 0;
    overflow: hidden;
}

.newslist-section .news-container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    /* 两个新闻条目之间的间距 */
}


/* --- 单个新闻条目 (Flex布局) --- */

.newslist-section .news-item {
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
    gap: 40px;
    /* 日期和内容之间的间距 */
}


/* --- 左侧日期列 --- */

.newslist-section .news-date-col {
    flex-shrink: 0;
    /* 防止日期被压缩 */
    width: 80px;
    text-align: left;
    padding-top: 10px;
    /* 微调对齐 */
}

.newslist-section .news-day {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #333;
    line-height: 1;
    margin-bottom: 5px;
}

.newslist-section .news-month-year {
    display: block;
    font-size: 14px;
    color: #999;
    font-weight: 400;
}


/* --- 右侧内容卡片 --- */

.newslist-section .news-content-card {
    flex-grow: 1;
    display: flex;
    gap: 30px;
    /* 图片和文字的间距 */
    background: #fff;
    /* 如果原图有卡片背景阴影可在此添加，截图看起来比较干净，暂不加阴影 */
}


/* 图片区域 */

.newslist-section .news-img-wrapper {
    flex-shrink: 0;
    width: 320px;
    height: 220px;
    border-radius: 12px;
    /* 圆角 */
    overflow: hidden;
}

.newslist-section .news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.newslist-section .news-img-wrapper:hover img {
    transform: scale(1.05);
    /* 鼠标悬停轻微放大 */
}


/* 文字区域 */

.newslist-section .news-text-area {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

.newslist-section .news-title {
    font-size: 26px;
    font-weight: 700;
    color: #3b4536;
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.newslist-section .news-desc {
    font-size: 16px;
    color: #888;
    line-height: 1.8;
    margin: 0 0 20px 0;
    /* 限制显示两行，超出省略号 (可选) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.newslist-section .news-more-link {
    align-self: flex-start;
    font-size: 18px;
    color: #6ba34e;
    /* 截图中的绿色 */
    text-decoration: none;
    font-weight: bold;
    transition: opacity 0.2s;
}

.newslist-section .news-more-link:hover {
    opacity: 0.7;
}

.news-detail-container {
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.news-detail-container .news-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 12px;
    color: #222;
}

.news-detail-container .news-date {
    text-align: center;
    font-size: 18px;
    color: #888;
    margin-bottom: 24px;
}

.news-detail-container .news-divider {
    height: 1px;
    background-color: #eaeaea;
    margin-bottom: 30px;
}

.news-detail-container .news-content p {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
}

.news-detail-container .news-image {
    max-width: 100%;
    overflow: hidden;
    margin-top: 20px;
}

.news-detail-container .news-image img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.newsnei-section {
    background: radial-gradient(ellipse at center, #ffffff 40%, #eef7e6 100%);
    overflow: hidden;
    padding-bottom: 100px;
}


/* --- 搜索结果页 (search-section) --- */

.search-section {
    width: 100%;
    background-color: #f9fbf9;
    padding: 0 0 60px 0;
    overflow: hidden;
}

.search-section .search-container-page {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* 搜索结果头部：标题 + 结果数 */
.search-result-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0 0 0;
}

.search-result-header .search-title {
    font-size: 28px;
    font-weight: bold;
    color: #222;
    line-height: 1.3;
}

.search-result-header .search-title .keyword {
    color: #7cb342;
}

.search-result-header .search-result-info {
    font-size: 15px;
    color: #888;
}

.search-result-header .search-result-info .num {
    color: #7cb342;
    font-weight: bold;
    margin: 0 4px;
}

/* 二次搜索框 */
.search-refine {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.search-refine:focus-within {
    border-color: #8bc34a;
}

.search-refine input {
    flex: 1;
    padding: 14px 18px;
    font-size: 16px;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
}

.search-refine input::placeholder {
    color: #bbb;
}

.search-refine button {
    padding: 0 28px;
    /*height: 100%;*/
    background: #7cb342;
    color: #fff;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: stretch;
    display: flex;
    align-items: center;
}

.search-refine button:hover {
    background: #689f3c;
}

/* 空状态 */
.search-empty {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.search-empty .empty-icon {
    font-size: 48px;
    color: #cfd8dc;
    margin-bottom: 16px;
}

.search-empty .empty-text {
    font-size: 18px;
    color: #555;
    margin-bottom: 8px;
}

.search-empty .empty-sub {
    font-size: 14px;
    color: #999;
}

.search-empty .empty-sub .keyword {
    color: #7cb342;
    font-weight: bold;
}

/* 搜索结果列表沿用 .newslist-section 的 .news-item 样式 */
.search-section .news-item {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    padding: 30px;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.search-section .news-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.search-section .news-date-col {
    flex-shrink: 0;
    width: 90px;
    text-align: center;
    border-right: 1px solid #eee;
    padding-right: 20px;
}

.search-section .news-day {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: #7cb342;
    line-height: 1.1;
}

.search-section .news-month-year {
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 6px;
}

.search-section .news-content-card {
    flex: 1;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.search-section .news-img-wrapper {
    flex-shrink: 0;
    width: 200px;
    height: 140px;
    overflow: hidden;
    border-radius: 8px;
}

.search-section .news-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.search-section .news-img-wrapper:hover img {
    transform: scale(1.05);
}

.search-section .news-text-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.search-section .news-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.search-section .news-title:hover {
    color: #7cb342;
}

.search-section .news-tag {
    display: inline-block;
    padding: 2px 10px;
    font-size: 12px;
    color: #7cb342;
    background: #eef7e6;
    border-radius: 4px;
    align-self: flex-start;
}

.search-section .news-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-section .news-desc mark,
.search-section .news-title mark {
    background: #fff3a0;
    color: #333;
    padding: 0 2px;
    border-radius: 2px;
}

.search-section .news-more-link {
    font-size: 14px;
    color: #7cb342;
    align-self: flex-start;
    transition: opacity 0.3s ease;
}

.search-section .news-more-link:hover {
    opacity: 0.7;
}