/* About 页面特定样式 */

.about-page {
    padding-top: 0; /* 为 fixed header 留出空间 */
    background-color: #ffffff; /* 修改为白色背景，移除原有的浅紫/蓝色背景 */
}

/* 覆盖复用的首页 Hero 样式 */
.about-page .hero-title-container {
    margin-bottom: 0.16rem;
}

.about-page .hero-desc-wrapper {
    margin-bottom: 0;
}

.about-page .hero-desc {
    font-size: .24rem; /* 根据Figma 20px */
    color: #FFFFFF;
    line-height: 1.6;
    font-weight:400;
}

@media (max-width: 768px) {
    .about-page .hero-title-container.mobile-title h1 {
        font-size: .64rem !important; /* 移动端标题字号缩小 */
    }
    .about-page .hero-title-container.mobile-title h1 span span {
        height: 0.6em !important;
    }
    .about-page .hero-desc {
        font-size: .28rem !important; /* 移动端描述字号缩小 */
        font-family: 'HarmonyOS Sans SC', sans-serif;
    }
}

@media (min-width: 769px) {
    .about-page .hero-title-container {
        margin-bottom: 0.24rem;
    }
}

/* 2. 集团实力背书 */
.endorsement-section {
    padding: 0.6rem 0;
    background-color: #ffffff;
    position: relative;
    z-index: 2;
}

.endorsement-container {
    height: 1.34rem;
    padding: 0 2.04rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.endorsement-col1 {
    width: 5.52rem;
    flex-shrink: 0;
}

.endorsement-link {
    color: inherit;
    display: block;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    z-index: 3;
}

.endorsement-link:hover h2 {
    color: #0037C3;
}

.endorsement-col1 h2 {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.48rem;
    font-weight: normal;
    color: #000000;
    line-height: 1.2;
    word-wrap: break-word;
}

.endorsement-col1 h2 .mobile-only {
    display: none;
}

.endorsement-col1 h2 .pc-only {
    display: inline;
}

.endorsement-col1 .en-title {
    font-family: Arial, sans-serif;
    font-size: 0.24rem;
    color: #505050;
}

.endorsement-divider {
    width: 0.04rem;
    height: 1.34rem;
    background-color: #0037C3;
    flex-shrink: 0;
}

.endorsement-col2 {
    width: 4.24rem;
    flex-shrink: 0;
}

.endorsement-col2 p {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.24rem;
    color: #000000;
    line-height: 1.6;
}

.endorsement-col3 {
    width: 3.60rem;
    flex-shrink: 0;
}

.endorsement-col3 p {
    font-size: 0.18rem;
    color: #505050;
    line-height: 1.6;
}

/* Feature Sections (01, 02, 03, 04) */
.features-wrapper {
    background-color: transparent;
    padding-bottom: 1.2rem;
    overflow: hidden; /* 隐藏轮播超出的部分 */
    position: relative;
    /* 修复 pointer-events，确保能监听到鼠标事件 */
    pointer-events: auto;
    cursor: grab; /* 提示可以拖拽 */
}

.features-wrapper:active {
    cursor: grabbing; /* 拖拽时的鼠标样式 */
}

.features-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.feature-section {
    flex: 0 0 100%;
    width: 100%;
    padding: 0.8rem 0 0.4rem 0;
    position: relative;
}

.bg-circle-left {
    position: absolute;
    width: 7.02rem;
    height: 7.02rem;
    left: 0;
    top: 1.6rem;
    background-color: #2B67FF;
    opacity: 0.1;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none; /* 防止遮挡交互 */
}

.bg-circle-right {
    position: absolute;
    width: 5.57rem;
    height: 5.57rem;
    right: 0;
    top: 2.33rem;
    background-color: #ECECEC;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none; /* 防止遮挡交互 */
}

.feature-container {
    position: relative;
    z-index: 1;
    padding: 0 2.04rem;
}

.feature-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.feature-num {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 1.6rem;
    color: #0037C3;
    line-height: 1;
}

.feature-word {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 1.6rem;
    color: #D9D9D9;
    line-height: 1;
    text-transform: uppercase;
}

.feature-divider {
    width: 100%;
    height: 0.04rem;
    background-color: #0037C3;
    margin-top: 0.24rem;
    margin-bottom: 0.48rem;
}

.feature-content {
    display: flex;
    align-items: stretch;
    gap: 0.88rem;
}

.feature-image-wrapper {
    position: relative;
    width: 7.44rem;
    height: 5.58rem;
    border-radius: 0.48rem;
    overflow: hidden;
    flex-shrink: 0;
}

.feature-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider-dots {
    position: absolute;
    bottom: 0.32rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.12rem;
    align-items: center;
}

.slider-dots .dot {
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dots .dot.active {
    background-color: #2B67FF;
    border: 0.02rem solid #FFFFFF;
    box-sizing: border-box;
}

.feature-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.feature-title {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.48rem;
    font-weight: normal;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 0.36rem;
}

.feature-title .highlight {
    color: #0037C3;
}

.feature-desc p {
    font-family: Arial, sans-serif;
    font-size: 0.18rem;
    color: #505050;
    line-height: 1.6;
    margin-bottom: 0.16rem;
}

.feature-desc p:last-child {
    margin-bottom: 0;
}

/* 移动端适配 */
@media (max-width: 1024px) {
    .feature-content {
        flex-direction: column;
        gap: 0.4rem;
    }
    .feature-image-wrapper {
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
    }
    .feature-num, .feature-word {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    /* 移动端：横向手势滑动切换，不与页面纵向滚动联动 */
    .features-wrapper {
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        cursor: default;
        touch-action: pan-x pan-y;
        padding-bottom: 0;
    }

    .features-wrapper::-webkit-scrollbar {
        display: none;
    }

    .features-wrapper:active {
        cursor: default;
    }

    .features-track {
        transform: none !important;
        transition: none;
    }

    .feature-section {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .feature-container {
        padding: 0 16px;
    }

    .endorsement-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.24rem; /* 24px间距 */
        height: auto; /* 移动端高度自适应 */
        padding: 0 16px; /* 增加移动端左右间距 */
    }

    .endorsement-divider {
        display: none; /* 移动端隐藏分割线 */
    }

    .endorsement-col1, .endorsement-col2, .endorsement-col3 {
        width: 100%;
        margin-left: 0;
    }

 
    .endorsement-col1 .en-title {
        display: inline;
        font-size: .28rem; /* 英文与中文同大 */
        font-weight: bold;
        color: #000000;
    }

    .endorsement-col1 h2 .mobile-only {
        display: inline;
    }

    .endorsement-col1 h2 .pc-only {
        display: none;
    }

    .endorsement-col2 p {
        font-size: .48rem; /* 24px */
    }

    .endorsement-col3 p {
        font-size: .28rem; /* 14px */
    }

    /* 团队移动端适配 */
    .team-section h2 {
        font-size: 32px;
        margin-bottom: 0.24rem;
    }

    .team-desc {
        font-size: .28rem !important;
        padding: 0 0.12rem;
        margin-bottom: 0.4rem;
    }

    /* 移动端保留横向画廊排布，按比例缩小 */
    .team-gallery-wrapper {
        padding: 0.1rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .team-gallery-wrapper::-webkit-scrollbar {
        display: none;
    }

    .team-gallery {
        gap: 0.12rem; /* 缩小间距 */
        margin-top: 0.2rem;
    }

    .gallery-item {
        border-radius: 0.24rem; /* 缩小圆角 */
    }

    /* 移动端图片尺寸缩放 */
    .gallery-item.item-1, .gallery-item.item-5 {
        width: 1.2rem;
        height: 0.9rem;
    }

    .gallery-item.item-2, .gallery-item.item-4 {
        width: 1.8rem;
        height: 1.35rem;
    }

    .gallery-item.main-item {
        width: 2.8rem;
        height: 2.1rem;
    }

    /* 背景圆在移动端重新定位和调整大小 */
    .bg-circle-left {
        width: 3.6rem;
        height: 3.6rem;
        left: -2.67rem;
        top: 0.33rem;
    }
    
    .bg-circle-right {
        width: 2.8rem;
        height: 2.8rem;
        right: auto;
        left: 2.79rem;
        top: 3.85rem;
    }

    /* 移动端头部 01 ONE 字号 */
    .feature-num {
        font-size: 48px;
    }
    
    .feature-word {
        font-size: 48px;
    }

    /* 蓝色分割线间距 */
    .feature-divider {
        height: 0.02rem;
        margin-top: 0.12rem;
        margin-bottom: 0.24rem;
    }

    /* 移动端图文间距和排版 */
    .feature-content {
        gap: 0.36rem; /* 对应 36px 间距 */
    }

    .feature-image-wrapper {
        border-radius: 0.24rem;
        aspect-ratio: 343 / 257; /* 按照移动端设计图比例 */
    }

    .feature-title {
        font-size: .48rem; /* 移动端标题字号 */
        margin-bottom: 0.12rem;
    }

    .feature-desc p {
        font-size: .28rem; /* 移动端正文字号 */
        line-height: 1.6;
    }
}


/* Csisp的资质与团队 */
.team-section {
    padding: 1.2rem 0;
    text-align: center;
    background-color: #FFFFFF;
    overflow: hidden;
}

.team-container {
    padding: 0 2.04rem;
}

.team-section h2 {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.64rem;
    text-align: center;
    color: #000000;
    font-weight: normal;
    margin-bottom: 0.36rem;
}

.team-section h2 .highlight {
    color: #0037C3;
}

.team-desc {
    font-size: 14px;
    color: #505050;
    line-height: 1.6;
    max-width: 12rem;
    margin: 0 auto 0.6rem;
}

.team-gallery-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 0.2rem 0;
    height: 5.02rem; /* 强制锁定容器高度 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.team-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.24rem;
    width: max-content; /* 让轨道足够宽 */
    margin-top: 0.6rem;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    transition: all 0.5s ease-in-out; /* 添加平滑滚动动画 */
    margin: 0 auto;
    min-height: 4.62rem; /* 设定容器高度，避免被子元素高度变化撑开 */
}

.gallery-item {
    border-radius: 0.48rem;
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.5s ease-in-out; /* 添加尺寸和透明度变化的动画 */
    cursor: pointer;
    margin: auto 0; /* 自动上下居中 */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 尺寸与层级 */
.gallery-item.item-1, .gallery-item.item-5 {
    width: 3.6rem;
    height: 2.7rem;
    opacity: 0.8;
}

.gallery-item.item-2, .gallery-item.item-4 {
    width: 4.24rem;
    height: 3.18rem;
    opacity: 0.9;
}

.gallery-item.main-item {
    width: 6.16rem;
    height: 4.62rem;
    box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.1);
    z-index: 2;
    opacity: 1;
}

/* 可持续发展目标承诺 */
.sustainability-section {
    padding: 1.2rem 0;
    background-color: #FFFFFF; /* 修复为白色背景 */
}

.sustainability-container {
    padding: 0 2.04rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}

.sustainability-header {
    display: flex;
    flex-direction: column;
    gap: 0.36rem;
    align-items: center;
}

.sustainability-header h2 {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.64rem;
    color: #000000; /* PC端标题恢复黑色 */
    font-weight: normal;
    text-align: center;
    line-height: 1.2;
}

.sustainability-header h2 span {
    color: #0037C3;
}

.sustainability-header p {
    font-size: 0.18rem;
    color: #505050;
    line-height: 1.6;
    text-align: center;
}

.sustainability-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sustainability-item {
    display: flex;
    align-items: center;
    height: 3.2rem;
}

.item-icon {
    width: 3.2rem;
    height: 3.2rem;
    flex-shrink: 0;
}

.item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.item-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.24rem;
    padding-left: 1.04rem;
    max-width: 10.88rem;
}

.item-content h3 {
    font-family: 'PangMenZhengDaoBiaoTiTiMianFeiBan-4', sans-serif;
    font-size: 0.48rem;
    color: #000000; /* 列表标题恢复黑色 */
    font-weight: normal;
    line-height: 1.4;
}

.item-content h3 span {
    color: #0037C3; /* 标题后半部分为蓝色 */
}

.item-content p {
    font-size: 0.18rem;
    color: #505050;
    line-height: 1.6;
}

@media (max-width: 768px) {
    /* 可持续发展目标承诺移动端适配 */
    .sustainability-section {
        background-color: #FFFFFF; /* 移动端背景保持白色 */
        padding: 0.8rem 0;
    }

    .sustainability-container {
        gap: 0.48rem;
        padding: 0 16px; /* 增加移动端左右内边距 */
    }

    .sustainability-header h2 {
        font-size: .64rem;
        color: #000000; /* 移动端标题保持黑色 */
        padding: 0 16px; /* 标题也增加左右边距，防止贴边 */
    }

    .sustainability-header p {
        font-size: .28rem;
        color: #505050;
        padding: 0 16px; /* 描述文字增加左右边距 */
    }

    .sustainability-item {
        flex-direction: column;
        height: auto;
        gap: 0.24rem;
        margin-bottom: 0.48rem;
        padding: 0 16px; /* 给每个子项目增加左右边距 */
    }

    .item-icon {
        width: 1.6rem;
        height: 1.6rem;
    }

    .item-content {
        padding-left: 0;
        text-align: center;
        align-items: center;
        gap: 0.16rem;
    }

    .item-content h3 {
        font-size: .48rem;
        color: #000000; /* 移动端子标题整体黑色 */
    }

    .item-content h3 span {
        color: #0037C3; /* 移动端子标题后半部分蓝色 */
    }

    .item-content p {
        font-size: .28rem;
        text-align: left; /* 保持段落左对齐 */
    }
}

/* 响应式适配 */
@media (max-width: 1024px) {
    .endorsement-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .endorsement-divider {
        width: 100%;
        height: 2px;
    }
    
    .origin-container {
        flex-direction: column;
    }
    
    .origin-bg-text {
        position: static;
        flex-direction: row;
        align-items: baseline;
        gap: 0.2rem;
        margin-bottom: 0.4rem;
    }
    
    .sustainability-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .about-hero {
        height: 4rem;
    }
    
    .about-hero-text h1 {
        font-size: 48px;
    }
    
    .gallery-track {
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 5%;
        scroll-snap-type: x mandatory;
    }
    
    .gallery-item {
        scroll-snap-align: center;
        flex-shrink: 0;
    }
}
@media (max-width: 768px) {
    .endorsement-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .feature-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .team-container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .sustainability-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 769px) {
    .about-page .hero-section .hero-content {
        align-items: flex-start;
    }

    .about-page .hero-title-container.pc-title {
        padding-left: 0.18rem;
        margin-bottom: 0.18rem;
    }

    .about-page .hero-desc-wrapper.pc-desc {
        position: relative;
        max-width: 9.6rem;
        padding-left: 0.18rem;
        margin-top: 0.18rem !important;
    }

    .about-page .hero-title > span > span[style*="background-color"] {
        left: 0 !important;
        width: 100% !important;
        height: 0.62rem !important;
    }

    .about-page .hero-desc {
        padding-left: 0;
    }
}