/* 品牌发展历程页面样式 */

/* ============================================
   动画效果样式
   ============================================ */

/* 时间轴项目动画基础样式 */
.timeline-item {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
    will-change: opacity, transform;
}

.timeline-item.timeline-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 时间轴内容区域动画基础样式 */
.timeline-content {
    opacity: 0;
    transition: opacity 300ms ease-out;
    will-change: opacity;
}

.timeline-content.timeline-content-visible {
    opacity: 1;
}

/* GPU加速优化 */
.timeline-item,
.timeline-content {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 减少动画偏好用户 */
@media (prefers-reduced-motion: reduce) {
    .timeline-item,
    .timeline-content {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   Banner区域
   ============================================ */

.history-banner {
    width: 100%;
    height: 680px;
    overflow: hidden;
    position: relative;
    margin-top: 80px;
}

.history-banner-image {
    width: 100%;
    height: 100%;
}

.history-banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 面包屑导航 */
.breadcrumb-wrapper {
    background: #fff;
    padding: 20px 0;
    padding-left:200px;
    margin-top:15px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666;
}

.breadcrumb-icon-img {
    width: 12px;
    height: 12px;
    margin-right: 5px;
}

.breadcrumb-text {
    color: #999;
}

.breadcrumb-link {
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-link:hover {
    color: rgba(8, 110, 114, 1);
}

.breadcrumb-link.active {
    color: #333;
    font-weight: 500;
}
.breadcrumb-link.active:hover {
    color: rgba(8, 110, 114, 1);
}

.breadcrumb-separator {
    color: #ccc;
    margin: 0 4px;
}

/* 时间轴区域 */
.history-timeline-section {
    padding: 80px 0 100px;
    background: #fff;
}

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

/* 时间轴线 */
.history-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(8, 110, 114, 0.3) 0%, rgba(8, 110, 114, 1) 50%, rgba(8, 110, 114, 0.3) 100%);
}

/* 时间轴项目 */
.timeline-item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 60px;
    position: relative;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

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

.timeline-content.left {
    text-align: right;
    padding-right: 70px;
}

.timeline-content.right {
    text-align: left;
    padding-left: 70px;
}

/* ============================================
   轴线节点与虚线关联样式
   ============================================ */

/* 左侧内容区域 - 节点与虚线 */
.timeline-content--left {
    text-align: right;
    padding-right: 55px;
    position: relative;
}

.timeline-content--left .timeline-node-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    gap: 10px;
    flex-direction: row-reverse;
}

.timeline-content--left .timeline-dashed-line--left {
    width: 40px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    flex-shrink: 0;
}

.timeline-content--left .timeline-node--left {
    width: 19px;
    height: 19px;
    background-color: rgba(8, 110, 114, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-content--left .timeline-node--left::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: rgba(8, 110, 114, 1);
    border-radius: 50%;
}

/* 右侧内容区域 - 节点与虚线 */
.timeline-content--right {
    text-align: left;
    padding-left: 60px;
    position: relative;
}

.timeline-content--right .timeline-node-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 15px;
    gap: 10px;
}

.timeline-content--right .timeline-dashed-line--right {
    width: 40px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    flex-shrink: 0;
}

.timeline-content--right .timeline-node--right {
    width: 19px;
    height: 19px;
    background-color: rgba(8, 110, 114, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-content--right .timeline-node--right::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: rgba(8, 110, 114, 1);
    border-radius: 50%;
}

/* ============================================
   主轴线样式 - 统一颜色 rgba(8, 110, 114, 1)
   ============================================ */

/* 主轴线背景色统一 */
.history-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: rgba(8, 110, 114, 1);
}

/* 时间轴圆点 - 统一颜色，包含虚线 */
.timeline-dot {
    width: 19px;
    height: 19px;
    background: rgba(8, 110, 114, 0.2);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot::after {
    content: '';
    width: 5px;
    height: 5px;
    background: rgba(8, 110, 114, 1);
    border-radius: 50%;
}

/* 主轴线虚线 - 右侧内容时向右延伸 */
.timeline-item--right .timeline-dot::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: 50px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    margin-left: 5px;
}

/* 主轴线虚线 - 左侧内容时向左延伸 */
.timeline-item--left .timeline-dot::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 50px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    margin-right: 5px;
}

/* 年份图标样式 - 统一设置 */
.timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 82px;
    height: 82px;
    margin-bottom: 15px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
    vertical-align: middle;
}

.timeline-icon img {
    display: block;
    width: 82px;
    height: 82px;
    object-fit: contain;
    object-position: center;
    margin: 0;
    padding: 0;
    margin-top:-34px;
}

/* 左侧图标 - 右对齐，与虚线精确对齐 */
.timeline-icon--left {
    margin-left: auto;
    margin-right: 0;
}

/* 右侧图标 - 左对齐，与虚线精确对齐 */
.timeline-icon--right {
    margin-left: 0;
    margin-right: auto;
}

/* 2009年特殊样式 - 继承通用样式 */
.timeline-item-2009 {
    position: relative;
}

/* 2009年图标位置调整 - 向下移动与虚线对齐 */
.timeline-item-2009 .timeline-icon--left {
    margin-top: 160px;
}

/* 2009年也应用左侧虚线样式 */
.timeline-item-2009.timeline-item--left .timeline-dot::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: 50px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    margin-right: 5px;
}

/* 2009年中心轴线区域 */
.timeline-center-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(8, 110, 114, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* 2009年虚线 - 统一颜色和宽度 */
.timeline-dashed-line-2009 {
    width: 50px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 5px;
}

/* 2009年轴线上的节点 */
.timeline-node-2009 {
    width: 19px;
    height: 19px;
    background-color: rgba(8, 110, 114, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.timeline-node-inner {
    width: 5px;
    height: 5px;
    background-color: rgba(8, 110, 114, 1);
    border-radius: 50%;
}

/* 创始人信息包装器 */
.timeline-founder-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left:122px;
}

/* 创始人旁边的原点 */
.timeline-founder-dot {
    width: 6px;
    height: 6px;
    background-color: rgba(8, 110, 114, 1);
    border-radius: 50%;
    flex-shrink: 0;
}

/* 节点包装器 - 隐藏内容区域内的节点和虚线 */
.timeline-node-wrapper {
    display: none;
}

.timeline-content.left .timeline-node-wrapper {
    display: none;
}

/* 虚线样式 - 统一颜色 */
.timeline-dashed-line {
    width: 40px;
    height: 1px;
    border-top: 1px dashed rgba(8, 110, 114, 0.6);
}

/* 节点标志样式 - 与2009年一致 */
.timeline-node {
    width: 19px;
    height: 19px;
    background-color: rgba(8, 110, 114, 0.2);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-node::after {
    content: '';
    width: 5px;
    height: 5px;
    background-color: rgba(8, 110, 114, 1);
    border-radius: 50%;
}

/* 年份文字样式 - 统一设置 */
.timeline-year-text {
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 40.22px;
    color: rgba(8, 110, 114, 1);
    margin-bottom: 10px;
    margin-top: -5px;
    white-space: nowrap;
}

/* 创始人信息文字 */
.timeline-founder {
    font-family: "Noto Sans SC", "Source Han Sans", "思源黑体", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 36px;
    color: rgba(102, 102, 102, 1);
    white-space: nowrap;
}

/* 普通文本样式 - 统一设置 */
.timeline-text {
    font-family: "Noto Sans SC", "Source Han Sans", "思源黑体", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 36px;
    color: rgba(102, 102, 102, 1);
}

/* 列表样式 */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.timeline-list li {
    font-family: "Noto Sans SC", "Source Han Sans", "思源黑体", "Microsoft YaHei", sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 36px;
    color: rgba(102, 102, 102, 1);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    white-space: nowrap;
}

/* 列表圆点图片 */
.list-dot {
    width: 6px;
    height: 6px;
    margin-top: 15px;
    flex-shrink: 0;
}

/* 2019-2021特殊样式 - 圆点在右侧 */
.timeline-list-dot-right li {
    flex-direction: row-reverse;
    white-space: nowrap;
}

/* 响应式适配 */
@media (max-width: 1200px) {
    .history-banner {
        height: 500px;
    }
    
    .timeline-content.left,
    .timeline-content--left {
        padding-right: 40px;
    }
    
    .timeline-content.right,
    .timeline-content--right {
        padding-left: 40px;
    }
}

@media (max-width: 768px) {
    .history-banner {
        height: 350px;
        margin-top: 60px;
    }
    
    .history-timeline-section {
        padding: 50px 0 70px;
    }
    
    .history-timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 50px;
    }
    
    .timeline-dot {
        left: 20px;
        transform: translateX(-50%);
    }
    
    .timeline-item--right .timeline-dot::before,
    .timeline-item--left .timeline-dot::before {
        display: none;
    }
    
    .timeline-content,
    .timeline-content.left,
    .timeline-content.right,
    .timeline-content--left,
    .timeline-content--right {
        width: 100%;
        padding: 0;
        text-align: left;
    }
    
    .timeline-icon,
    .timeline-icon--left,
    .timeline-icon--right {
        margin-bottom: 10px;
    }
    
    .timeline-icon img,
    .timeline-icon--left img,
    .timeline-icon--right img {
        width: 60px;
        height: 60px;
    }
    
    .timeline-node-wrapper {
        margin-bottom: 10px;
        display: none;
    }
    
    .timeline-dashed-line,
    .timeline-dashed-line--left,
    .timeline-dashed-line--right {
        width: 30px;
    }
    
    .timeline-node,
    .timeline-node--left,
    .timeline-node--right {
        width: 10px;
        height: 10px;
    }
    
    .timeline-content.left .timeline-node-wrapper,
    .timeline-content--left .timeline-node-wrapper {
        flex-direction: row;
    }
    
    .timeline-icon--left {
        margin: 0 0 10px 0;
    }
    
    .timeline-icon--right {
        margin: 0 0 10px 0;
    }
    
    .timeline-list li {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .history-banner {
        height: 250px;
    }
    
    .timeline-icon img,
    .timeline-icon--left img,
    .timeline-icon--right img {
        width: 50px;
        height: 50px;
    }
    
    .timeline-dashed-line,
    .timeline-dashed-line--left,
    .timeline-dashed-line--right {
        width: 20px;
    }
    
    .timeline-desc {
        font-size: 14px;
    }
}