/* 外层容器 - 宽度1280px，响应式缩放 */
        .he-container {
            display: grid;
            grid-template-columns: calc(min(800px, 100%)) 1fr; /* 左侧最大800px */
            grid-template-rows: 1fr;
            gap: 20px;
            max-width: 1280px;
            width: 100%;
            margin: 0 auto;
            height: auto;
        }
        /* 左侧轮播容器 - 800×800，1:1比例，灰色背景，无内边距 */
        .he-left-carousel {
            background-color: #f0f2f5;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            width: 100%;
            aspect-ratio: 1/1;
            max-width: 800px;
            max-height: 800px;
            padding: 0 !important; /* 无内边距，图片满屏 */
        }
        /* ?? 轮播容器改造：支持平滑滑动 ?? */
        .he-carousel-wrap {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            transition: transform 0.6s ease-in-out; /* 平滑滑动过渡 */
        }
        .he-carousel-item {
            flex: 0 0 100%; /* 每个轮播项占100%宽度 */
            width: 100%;
            height: 100%;
        }
        .he-carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 满屏，裁剪多余 */
        }
        /* 轮播圆点按钮 */
        .he-carousel-dots {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            padding: 8px 16px;
            background-color: rgba(0,0,0,0.0);
            border-radius: 20px;
            z-index: 10;
        }
        .he-dot {
            width: 80px;
            height: 4px;
            background-color: #ddd;
            border-radius: 2px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .he-dot.active {
            background-color: #960000;
        }
        .he-dot:hover {
            background-color: #960000;
            opacity: 0.8;
        }
        /* 右侧容器 - 高度与左侧平齐 */
        .he-right-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            height: calc(min(800px, 100vw - 40px));
            max-height: 800px;
            width: 100%;
        }
        /* 右上角容器 - 460×460，1:1比例，黄色背景，无内边距（图片满屏） */
        .he-top-right {
            background-color: #ffd100;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            aspect-ratio: 1/1; /* 1:1保证正方形 */
            max-width: 460px; /* 改为460px */
            max-height: 460px; /* 改为460px */
            flex-shrink: 0;
            padding: 0 !important; /* 移除内边距，图片满屏 */
        }
        /* 右上角图片 - 满屏460×460容器 */
        .he-top-right img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 满屏，裁剪多余，无留白 */
        }
        /* 右下角两个卡片 - 高度填满剩余空间 */
        .he-bottom-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            flex-grow: 1;
            height: calc(100% - min(460px, 57.5%)); /* 匹配右上角460px高度 */
        }
        .he-card {
            border-radius: 16px;
            position: relative;
            overflow: hidden;
            height: 100%;
            cursor: pointer;
        }
        .he-card img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 满屏 */
            transition: all 0.3s ease; /* 图片过渡更丝滑 */
        }
        /* ?? 精致圆润的“查看”按钮 + 精美字体 ?? */
        .he-view-btn {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 88px; /* 宽度微调更协调 */
            height: 40px; /* 高度增加更饱满 */
            background-color: #ffffff;
            border-radius: 20px; /* 大圆角更圆润 */
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影 */
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 丝滑过渡曲线 */
            z-index: 10;
            border: none;
            outline: none;
            /* 字体美化核心 */
            font-family: "PingFang SC", "Ma Shan Zheng", "Microsoft YaHei", sans-serif;
            font-size: 15px; /* 字体大小优化 */
            color: #333333; /* 深灰文字更高级 */
            font-weight: 500;
            letter-spacing: 1px; /* 字间距更舒适 */
            text-align: center;
        }
        /* hover效果：高级渐变+细腻交互 */
        .he-card:hover .he-view-btn {
            background-color: #960000; /* 主色 */
            color: #ffffff;
            transform: translateY(-3px); /* 轻微上浮 */
            box-shadow: 0 6px 18px rgba(150, 0, 0, 0.2); /* 同色系阴影 */
        }
        /* 图片hover微光效果 */
        .he-card:hover img {
            opacity: 0.92;
            transform: scale(1.02); /* 图片轻微放大 */
        }
        /* 链接样式 */
        .he-card-link {
            text-decoration: none;
            display: block;
            height: 100%;
        }
        /* 响应式适配 */
        @media (max-width: 992px) {
            .he-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto;
            }
            .he-right-container {
                height: auto;
            }
            .he-bottom-right {
                height: 300px;
            }
            /* 移动端按钮适配 */
            .he-view-btn {
                width: 78px;
                height: 36px;
                font-size: 14px;
                border-radius: 18px;
                letter-spacing: 0.8px;
            }
        }
		/* 以he开头的类名，实现上下30px内边距留白 */
.he-padding-y-30 {
  /* 核心：上下30px，左右0 */
  padding: 30px 0;
  /* 可选：添加边框/背景便于查看效果 */
  /* border: 1px solid #eee; */
  /* background: #f9f9f9; */
}



/* 全局图片超大圆角（img标签直接样式，无需改标签名，通过属性控制） */
	.he-img {
		border-radius: 80px !important; /* 增大圆角至24px */
		overflow: hidden;
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* 小图标/Logo 圆角（适度调整） */
	.he-navbar-brand .he-img,
	.he-footer-logo-box .he-img,
	.he-navber-social .he-img,
	.he-footer-social .he-img {
		border-radius: 80px !important; /* 小图标圆角12px */
	}

	/* 横幅大图超大圆角 */
	.he-story-banner__img {
		border-radius: 80px !important; /* 横幅图圆角32px */
	}
	
	
	/* 内容区域（居中排版） */
        .he-story-content {
            padding: 60px 80px;
            color: #333;
        }
        .he-story-content__title {
            font-size: 28px;
            font-weight: normal;
            text-align: center;
            margin-bottom: 30px;
        }
        .he-story-content__desc {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 20px;
        }
		 /* 页面容器（控制整体宽度并居中） */
        .he-story-page {
            max-width: 950px; /* 核心居中宽度，和图中内容区一致 */
            margin: 0 auto;   /* 水平居中 */
            background-color: #fff;
        }
		
		
		/* 面包屑容器：he_story 开头，默认背景，增加上下间距 */
        .he_story-breadcrumb {
            background: initial; /* 透明/默认背景 */
            font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; /* 美化字体 */
            padding: 20px 0; /* 大幅增加上下间距，比原来更宽松 */
            position: relative; /* 为分割线定位做准备 */
            margin: 10px 0; /* 与其他元素的上下间距 */
        }

        /* 全屏宽度的分割线 */
        .he_story-breadcrumb::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: #e5e7eb; /* 浅灰色细线 */
        }

        /* 面包屑列表：增加左右内边距，优化对齐 */
        .he_story-breadcrumb-list {
            display: flex;
            align-items: center;
            list-style: none;
            padding: 0 20px; /* 增加左右内边距，避免贴边 */
        }

        /* 面包屑项：优化间距 */
        .he_story-breadcrumb-item {
            display: flex;
            align-items: center;
            line-height: 1.5; /* 优化行高，字体更舒展 */
        }

        /* 「当前位置：」文本样式 */
        .he_story-breadcrumb-item:first-child span {
            font-size: 16px; /* 基础字体大小 */
            color: #666; /* 浅灰色，区分于链接 */
            margin-right: 8px; /* 与后续内容的间距 */
        }

        /* 分隔符样式：优化大小和间距 */
        .he_story-breadcrumb-sep {
            margin: 0 12px; /* 增加分隔符左右间距 */
            color: #999; /* 更柔和的分隔符颜色 */
            font-size: 16px; /* 分隔符字体大小 */
        }

        /* 可点击链接样式：美化字体和大小 */
        .he_story-breadcrumb-link {
            color: #333; /* 默认文字颜色 */
            text-decoration: none;
            font-size: 16px; /* 链接字体大小，比原来更协调 */
            font-weight: 500; /* 轻微加粗，提升可读性 */
            padding: 6px 4px; /* 增加点击区域，hover更友好 */
            transition: all 0.2s ease; /* 过渡动画更顺滑 */
        }

        /* 链接 hover 效果：指定颜色 #960000 */
        .he_story-breadcrumb-link:hover {
            color: #960000; /* 鼠标悬浮红色 */
           
        }

        /* 当前页样式：优化字体 */
        .he_story-breadcrumb-current {
            color: #666;
            font-size: 16px;
            font-weight: 500;
            padding: 6px 4px;
        }
		
		
		
		
		
		
		/* 基础重置 - 仅作用于组件内 */
.he_story_full_container * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全屏外层容器 */
.he_story_full_container {
    width: 100%;
    padding: 40px 20px; /* 全屏左右留白，适配手机 */
    background-color: #f9f9f9; /* 页面背景色，突出白色卡片 */
    font-family: "Microsoft Yahei", "微软雅黑", Arial, sans-serif;
}

/* 内容核心容器 - 最大宽度1200px，居中，响应式 */
.he_story_container {
    max-width: 1200px; /* PC端最大宽度1200px */
    width: 100%; /* 自适应宽度 */
    margin: 0 auto; /* 始终居中 */
}

/* 标题样式 - 响应式字号 */
.he_story_title {
    font-size: clamp(28px, 4vw, 42px); /* 手机28px，PC最大42px */
    font-weight: 600;
    color: #333;
    text-align: center;
    margin-bottom: clamp(30px, 5vw, 60px); /* 响应式间距 */
    letter-spacing: 4px;
    position: relative;
}
.he_story_title::after {
    content: "";
    display: block;
    width: 80px;
    height: 4px;
    background-color: #960000;
    margin: 20px auto 0;
}

/* 白色背景框 - 响应式内边距 */
.he_story_list_box {
    background-color: #fff;
    border-radius: 8px; /* 轻微圆角更现代 */
    padding: clamp(30px, 6vw, 70px) clamp(20px, 7vw, 80px); /* 响应式内边距 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 列表样式 */
.he_story_list {
    list-style: none;
}

/* 列表项 - 响应式间距 */
.he_story_item {
    padding: clamp(20px, 3vw, 35px) 0;
    border-bottom: 1px solid #e5e5e5;
}
.he_story_item:last-child {
    border-bottom: none;
}

/* 列表链接 - 响应式字号 */
.he_story_link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: clamp(14px, 2.5vw, 20px);
    line-height: 1.6;
    transition: color 0.3s ease;
}
.he_story_link:hover {
    color: #960000;
}

/* 圆点装饰 - 响应式大小 */
.he_story_dot {
    margin-right: clamp(12px, 2vw, 20px);
    font-size: clamp(15px, 3vw, 20px);
    font-weight: bold;
    color: #666;
}

/* 列表文本 */
.he_story_text {
    flex: 1;
    /* 手机端文字换行省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 右侧箭头 - 响应式大小 */
.he_story_arrow {
    font-size: clamp(10px, 2vw, 18px);
    color: #999;
    transition: color 0.3s ease;
    /* 手机端箭头不换行 */
    flex-shrink: 0;
}
.he_story_link:hover .he_story_arrow {
    color: #960000;
}

/* 查看更多按钮 - 响应式 */
.he_story_more {
    text-align: center;
    margin-top: clamp(20px, 5vw, 50px);
}
.he_story_more_link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #fff;
	background-color: #960000;
    font-size: clamp(14px, 2vw, 18px);
    padding: clamp(8px, 1.5vw, 12px) clamp(20px, 3vw, 30px);
    border: 1px solid #eee;
    border-radius: 40px;
    transition: all 0.3s ease;
}
.he_story_more_link:hover {
    color: #fff;
    border-color: #fff;
    background-color: #000;
}

/* 查看更多箭头 - 响应式大小 */
.he_story_more_arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 2vw, 24px);
    height: clamp(20px, 2vw, 24px);
    border: 1px solid #ccc;
    border-radius: 50%;
    font-size: clamp(12px, 1.5vw, 14px);
    margin-left: clamp(8px, 1vw, 12px);
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.he_story_more_link:hover .he_story_more_arrow {
    border-color: #960000;
    color: #960000;
}

/* 手机端特殊适配（屏幕小于768px） */
@media (max-width: 768px) {
    /* 手机端取消标题字间距，避免拥挤 */
    .he_story_title {
        letter-spacing: 2px;
    }
    /* 手机端列表文本允许换行 */
    .he_story_text {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }
    /* 手机端箭头与文字间距更小 */
    .he_story_arrow {
        margin-left: 10px;
    }
}