
/* 确保轮播容器有正确的尺寸和样式 */
.tb-custome-wraper {
    width: 100%;
    height: auto; /* 根据需要调整高度 */
    position: relative;
    overflow: hidden;
}

/* 确保轮播项正确显示 */
.swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持图片比例 */
}

/* 导航按钮和分页器样式 */
.swiper-pagination {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
}

.swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.1);
    color: white;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    z-index: 10;
}

.swiper-prev {
    left: 10px;
}

.swiper-next {
    right: 10px;
}

/* 确保轮播容器有正确的尺寸和样式 */



    /* 代理品牌-基础样式：总宽1290px居中（PC端） */
    .newpp-tb-container {
        width: 1290px;
        margin: 0 auto;
        padding: 50px 0;
        box-sizing: border-box;
    }
    /* 标题样式（PC端） */
    .newpp-brand-title {
        text-align: center;
        margin-bottom: 50px;
    }
    .newpp-brand-title h2 {
        font-size: 28px;
        color: #202935;
        position: relative;
        display: inline-block;
        margin: 0;
    }
    .newpp-brand-title h2::after {
        content: "";
        width: 30px;
        height: 4px;
		border-radius:4px;
        background: #336799;
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
    }
    .newpp-brand-title p {
        font-size: 16px;
        color: #666;
        margin-top: 15px;
        margin-bottom: 0;
        line-height: 1.5;
    }
    /* 滚动容器：控制显示范围（PC端） */
    .newpp-brand-scroll-box {
        width: 100%;
        height: 320px; /* 增加高度，容纳品牌名 */
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        align-items: center;
        box-shadow: 0 6px 16px rgba(0,0,0,0.06);
        /*background: #fafafa;*/
        touch-action: pan-y; /* 优化移动端触摸体验 */
		
    }
    /* 品牌轨道容器：PC端隐藏，移动端用于包裹轨道 */
    .newpp-brand-track-container {
        display: none; /* 默认隐藏（PC端用单个轨道） */
        position: absolute;
        top: 10%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
    }
	/* 单排轨道通用样式：删除错误定位，改为统一居中 */
	.newpp-brand-track {
		display: flex;
		padding-left: 15px; /* PC端左内边距保留 */
		padding-right: 15px; /* 新增右内边距，避免右侧图片被遮挡 */
		gap: 40px; /* PC端品牌间距 */
		position: absolute;
		top: 20%; /* 垂直居中基准点 */
		left: 0;
		transform: translateY(-50%); /* 垂直居中核心：向上偏移自身50% */
		height: 180px; /* 匹配品牌容器高度 */
		transition: transform 0.6s ease;
		width: fit-content; /* 让轨道宽度自适应内容，避免滚动异常 */
	}



    /* 单品牌容器：PC端固定尺寸，包含图片和文字 */
    .newpp-brand-item {
        width: 285px; /* PC端固定宽度，4个+间距=1290px */
        height: 180px;
        flex-shrink: 0; /* 禁止收缩，保证尺寸一致 */
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column; /* 垂直排列：图片+文字 */
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        background: #fff;
        padding: 0px 10px;
        box-sizing: border-box;
    }
    .newpp-brand-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        background: #ffffff;
    }
    /* 品牌图片样式 */
    .newpp-brand-img {
        width: 100%;
        height: 120px; /* 固定图片高度 */
        object-fit: contain;
        margin-bottom: 10px;
        transition: opacity 0.3s ease;
    }
    .newpp-brand-img:hover {
        opacity: 0.9;
    }
    /* 品牌名样式：文字截断 */
    .newpp-brand-name {
        font-size: 14px;
        color: #666;
        text-align: center;
        width: 100%;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
        margin: 0;
        line-height: 1.4;
    }

    /* 左右切换按钮（通用） */
    .newpp-switch-btn {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        border: none;
        background: rgba(255,255,255,0.95);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }
    .newpp-btn-prev { left: 25px; }
    .newpp-btn-next { right: 25px; }
    .newpp-switch-btn svg {
        width: 22px;
        height: 22px;
        fill: #336799;
        transition: fill 0.3s ease;
    }
    .newpp-switch-btn:hover {
        background: #336799;
        transform: translateY(-50%) scale(1.08);
    }
    .newpp-switch-btn:hover svg { fill: #fff; }
    .newpp-switch-btn:disabled {
        background: rgba(255,255,255,0.6);
        cursor: not-allowed;
        transform: translateY(-50%);
    }
    .newpp-switch-btn:disabled svg { fill: #ccc; }


    /* ===================== 移动端自适应样式（核心：一排布局）===================== */
    @media (max-width: 1290px) {
        .newpp-tb-container {
            width: 100%;
            padding: 60px 15px;
        }
        .newpp-brand-track {
            padding-left: 20px;
            gap: 20px;
        }
    }

    @media (max-width: 768px) { /* 平板及以下：一排显示1个 */
        /* 标题适配 */
        .newpp-brand-title {
            margin-bottom: 35px;
        }
        .newpp-brand-title h2 {
            font-size: 22px;
        }
        .newpp-brand-title h2::after {
            width: 30px;
            bottom: -4px;
        }
        .newpp-brand-title p {
            font-size: 14px;
            padding: 0 10px;
            line-height: 1.4;
        }

        /* 滚动容器：高度匹配单个品牌+文字 */
        .newpp-brand-scroll-box {
            height: 220px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 0 15px;
            box-sizing: border-box;
        }

        /* 显示轨道容器（包裹单排轨道） */
        .newpp-brand-track-container {
            display: block;
			
        }

        /* 隐藏PC端单个轨道 */
        #newpp-brandTrackPC {
            display: none;
        }
		


		/* 移动端轨道样式：单独调整内边距和间距 */
		#newpp-brandTrackMobile {
			display: flex;
			padding-left: 15px; /* 移动端左内边距，与容器内边距呼应 */
			padding-right: 15px; /* 移动端右内边距，确保图片居中 */
			gap: 15px; /* 移动端品牌间距 */
			height: 150px;
			top: 50%; /* 强制垂直居中，覆盖PC端可能的错误值 */
		}


		
		/* 单品牌容器：PC端固定尺寸，包含图片和文字 */
		.newpp-brand-item {
			width: 230px; /* PC端固定宽度，4个+间距=1290px */
			flex-shrink: 0; /* 禁止收缩，保证尺寸一致 */
			border-radius: 6px;
			box-shadow: 0 3px 10px rgba(0,0,0,0.05);
			display: flex;
			flex-direction: column; /* 垂直排列：图片+文字 */
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			background: #fff;
			padding: 0px 10px;
			box-sizing: border-box;
		}
		
		
        .newpp-brand-img {
            height: 100px; /* 缩小图片高度 */
            margin-bottom: 8px;
        }
        .newpp-brand-name {
            font-size: 13px;
        }

        /* 切换按钮：调整位置和尺寸 */
        .newpp-switch-btn {
            width: 42px;
            height: 42px;
        }
        .newpp-btn-prev { left: 12px; }
        .newpp-btn-next { right: 12px; }
        .newpp-switch-btn svg {
            width: 18px;
            height: 18px;
        }
    }

    @media (max-width: 480px) { /* 手机设备：微调尺寸 */
        .newpp-brand-title h2 {
            font-size: 20px;
        }
        .newpp-brand-title p {
            font-size: 13px;
        }
		/* 单品牌容器：PC端固定尺寸，包含图片和文字 */
		.newpp-brand-item {
			width: 185px; /* PC端固定宽度，4个+间距=1290px */
			flex-shrink: 0; /* 禁止收缩，保证尺寸一致 */
			border-radius: 8px;
			box-shadow: 0 3px 10px rgba(0,0,0,0.05);
			display: flex;
			flex-direction: column; /* 垂直排列：图片+文字 */
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			background: #fff;
			padding: 0px 10px;
			box-sizing: border-box;
		}
		
		/* 移动端轨道样式：单独调整内边距和间距 */
		#newpp-brandTrackMobile {
			display: flex;
			padding-left: 15px; /* 移动端左内边距，与容器内边距呼应 */
			padding-right: 15px; /* 移动端右内边距，确保图片居中 */
			gap: 15px; /* 移动端品牌间距 */
			height: 150px;
			top: 50%; /* 强制垂直居中，覆盖PC端可能的错误值 */
		}
		/* 品牌图片样式 */
		.newpp-brand-img {
			width: 100%;
			height: 100px; /* 固定图片高度 */
			object-fit: contain;
			margin-bottom: 10px;
			transition: opacity 0.3s ease;
		}
        /* 滚动容器：稍减高度 */
        .newpp-brand-scroll-box {
            height: 160px;
        }

        /* 移动端单品牌：进一步缩小 */
        .newpp-brand-item {
            height: 130px;
        }
        .newpp-brand-img {
            height: 85px;
        }

        /* 切换按钮：再缩小尺寸 */
        .newpp-switch-btn {
            width: 38px;
            height: 38px;
        }
        .newpp-btn-prev { left: 5px; }
        .newpp-btn-next { right: 5px; }
    }

    /* 代理品牌-基础样式：总宽1290px居中（PC端） */
	
	
	

    /*公司简介- 模块整体样式（保持原有布局，新增动画相关设置） */
    .company-intro {
        background-image: linear-gradient(135deg, #2c3e50, #3498db);
        background-image: url('/tem/images/company.jpg'); /* 本地背景图 */
        background-size: cover;
        background-position: center;
        background-blend-mode: overlay;
		
        color: #fff;
        padding: 80px 20px 100px;
        text-align: center;
        position: relative;
        min-height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden; /* 隐藏动画元素加载时的初始状态（避免溢出） */
    }
    
    /* 1. 背景图片加载动画：从模糊到清晰 + 淡入 */
    .company-intro::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/tem/images/company.jpg'); /* 本地背景图 */
        background-size: cover;
        background-position: center;
        z-index: -1;
		
        opacity: 0.2; /* 初始透明 */
        filter: blur(20px); /* 初始高模糊 */
        /* 加载动画：1.5秒内完成清晰+淡入 */
        animation: imgFadeIn 1.5s ease forwards;
    }
    
    /* 2. 标题加载动画：从下方上移 + 淡入 */
    .intro-title {
        font-size: 28px;
        margin-bottom: 60px;
        position: relative;
        display: inline-block;
        font-weight: 600;
        opacity: 0; /* 初始透明 */
        transform: translateY(30px); /* 初始在下方30px处 */
        /* 加载动画：0.8秒内完成上移+淡入，延迟0.3秒（等背景图开始动画后） */
        animation: fadeUp 0.8s ease forwards 0.3s;
    }
    .intro-title::after {
        content: "";
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width:30px;
        height: 4px;
		border-radius:4px;
        background: #fff;
        opacity: 0; /* 下划线初始透明 */
        /* 下划线动画：与标题同步显示 */
        animation: lineFade 0.8s ease forwards 0.3s;
    }
    
    /* 3. 介绍文本加载动画（可选，与标题节奏一致） */
    .intro-desc {
        max-width: 800px;
        margin: 0 auto 50px;
        line-height: 1.8;
        font-size: 18px;
        letter-spacing:2px;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease forwards 0.6s; /* 延迟0.6秒 */
    }
    
    
    .icons-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 40px;
      margin-bottom: 40px;
    }
    
    .icon-card {
        flex: 0 0 200px;
        padding: 10px;
        opacity: 0;
        transform: translateY(20px);
        /* 三个图标依次延迟动画，增强层次感 */
        animation: fadeUp 0.8s ease forwards;
    }
    
    
    .icon-card:nth-child(1) { animation-delay: 0.9s; } /* 第一个图标延迟0.9秒 */
    .icon-card:nth-child(2) { animation-delay: 1.1s; } /* 第二个延迟1.1秒 */
    .icon-card:nth-child(3) { animation-delay: 1.3s; } /* 第三个延迟1.3秒 */
    .icon-box {
        width: 80px;
        height: 80px;
        margin: 0 auto 15px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        transition: all 0.3s ease;
    }
    .icon-box:hover {
        transform: scale(1.1);
        background: rgba(255, 255, 255, 0.4);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .icon-text {
        font-size: 18px;
        font-weight: 500;
    }
    .icon-card a{ text-decoration:none; color:#FFFFFF; }
    .icon-card a:hover{ text-decoration:none; color:#a6c2ff; }
    /* 4. 「了解更多」按钮加载动画：从透明到显示 + 轻微缩放 */
    .more-btn {
        padding: 12px 30px;
        background: #fff;
        color: #3498db;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        margin: 0 auto;
        outline: none;
        opacity: 0; /* 初始透明 */
        transform: scale(0.9); /* 初始缩小到0.9倍 */
        /* 按钮动画：0.8秒内完成缩放+淡入，延迟1.5秒（最后显示） */
        animation: btnFade 0.8s ease forwards 1.5s;
    }
    .more-btn:hover {
        background: #eaeaea;
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* -------------------------- 定义所有加载动画 -------------------------- */
    /* 背景图片：模糊度降低 + 透明度增加 */
    @keyframes imgFadeIn {
        to {
            opacity: 0.1; /* 最终透明度（与原样式一致） */
            filter: blur(15px); /* 最终模糊度（与原样式一致） */
        }
    }
    
    /* 标题/文本/图标：上移 + 透明度增加 */
    @keyframes fadeUp {
        to {
            opacity: 1; /* 最终完全显示 */
            transform: translateY(0); /* 最终回到原位置 */
        }
    }
    
    /* 标题下划线：透明度增加 */
    @keyframes lineFade {
        to {
            opacity: 1;
        }
    }
    
    /* 按钮：缩放恢复 + 透明度增加 */
    @keyframes btnFade {
        to {
            opacity: 1;
            transform: scale(1); /* 最终恢复原大小 */
        }
    }
    
    
    
    /* 响应式媒体查询（适配手机、平板） */
    @media (max-width: 768px) {
    .icon-card {
    flex: 0 0 150px;
    }
    .icon-box {
    width: 60px;
    height: 60px;
    font-size: 28px;
    }
    .intro-title {
    font-size: 24px;
    }
    .intro-desc {
    font-size: 14px;
    }
    }
    @media (max-width: 576px) {
		.icons-container {
		align-items: center;
		gap: 20px;
		/*background-color:#FF0000;*/
		}
		.icon-card {
		flex: 0 0 120px;
		/*background-color:#0000CC;*/
		padding: 10px;
		opacity: 0;
		transform: translateY(20px);
		/* 三个图标依次延迟动画，增强层次感 */
		animation: fadeUp 0.8s ease forwards;
		} 
    
    }
    /*公司简介- 模块整体样式（保持原有布局，新增动画相关设置） */
	
	
	

/* 推荐品牌模块-基础样式 */
.recom-brand-wrap {
    background: #fff;
    padding: 80px 0;
    margin-top: 0px;
    position: relative;
    overflow: hidden;
}

.recom-brand-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/tem/images/banner-network-img2.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.3;
    filter: blur(12px);
    z-index: 0;
}

.recom-brand-container {
    width: 1290px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* 推荐品牌标题样式 */
.recom-brand-title {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: titleFadeIn 0.8s ease forwards 0.3s;
}
.recom-brand-title h2 {
    font-size: 28px;
    color: #202935;
    display: inline-block;
    margin: 0;
    padding-bottom: 12px;
    font-weight: 600;
    position: relative;
}
.recom-brand-title h2::after {
    content: "";
    width: 30px;
    height: 4px;
    border-radius: 4px;
    background: #336799;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    animation: lineFadeIn 0.6s ease forwards 0.6s;
}

/* 推荐品牌滚动容器 */
.recom-brand-scroll-box {
    width: 100%;
    height: 320px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
    touch-action: pan-y;
}

/* 推荐品牌轨道容器（移动端） */
.recom-brand-track-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

/* 推荐品牌轨道通用样式 */
.recom-brand-track {
    display: flex;
    padding: 0 15px;
    gap: 40px;
    position: absolute;
    top: 20%;
    left: 0;
    transform: translateY(-50%);
    height: 180px;
    transition: transform 0.6s ease;
    width: fit-content;
}

/* 推荐品牌单个容器 */
.recom-brand-item {
    width: 285px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;
}
.recom-brand-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    background: #ffffff;
}

/* 推荐品牌LOGO样式 */
.recom-brand-img-container {
    width: 100%;
    max-width: 251px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recom-brand-img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    filter: saturate(0.9);
}
.recom-brand-item:hover .recom-brand-img {
    filter: saturate(1.1);
    opacity: 0.9;
}

/* 推荐品牌名称样式 */
.recom-brand-name {
    font-size: 14px;
    color: #666;
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}
.recom-brand-item:hover .recom-brand-name {
    color: #336799;
}

/* 推荐品牌图片加载失败样式 */
.recom-brand-img[onerror] {
    background: transparent;
    border: 1px solid #eee;
    border-radius: 4px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 推荐品牌左右切换按钮 */
.recom-switch-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.recom-btn-prev { left: 25px; }
.recom-btn-next { right: 25px; }
.recom-switch-btn svg {
    width: 22px;
    height: 22px;
    fill: #336799;
    transition: fill 0.3s ease;
}
.recom-switch-btn:hover {
    background: #336799;
    transform: translateY(-50%) scale(1.08);
}
.recom-switch-btn:hover svg { fill: #fff; }
.recom-switch-btn:disabled {
    background: rgba(255,255,255,0.6);
    cursor: not-allowed;
    transform: translateY(-50%);
}
.recom-switch-btn:disabled svg { fill: #ccc; }

/* 推荐品牌动画关键帧 */
@keyframes titleFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes lineFadeIn {
    to {
        opacity: 1;
        width: 40px;
    }
}

/* 推荐品牌响应式适配 */
@media (max-width: 1290px) {
    .recom-brand-container {
        width: 100%;
        padding: 0 15px;
    }
    .recom-brand-track {
        gap: 20px;
    }
}

@media (max-width: 768px) {
   .recom-brand-track-container {
        display: block;
		position: absolute;
		top: 10%;
		left: 0;
		width: 100%;
		transform: translateY(-50%);
			
    }

	.recom-brand-track {
		display: flex;
		padding: 0 15px;
		gap: 40px;
		position: absolute;
		top: 20%;
		left: 0;
		transform: translateY(-50%);
		height: 180px;
		transition: transform 0.6s ease;
		width: fit-content;
	}
	.recom-brand-img-container {
		width: 100%;
		max-width: 251px;
		/*margin-bottom: 5px;*/
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 推荐品牌名称样式 */
	.recom-brand-name {
		font-size: 13px;
		color: #666;
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
		transition: color 0.3s ease;
	}
    .recom-brand-title {
        margin-bottom: 35px;
    }
    .recom-brand-title h2 {
        font-size: 22px;
    }
    .recom-brand-title h2::after {
        width: 30px;
        bottom: -4px;
    }

    .recom-brand-scroll-box {
        height: 220px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }


    #recom-brandTrackPC {
        display: none;
    }

    #recom-brandTrackMobile {
        gap: 15px;
        height: 150px;
    }

    .recom-brand-item {
        width: 230px;
    }

    .recom-brand-img {
        height: 100px;
        margin-bottom: 3px;
    }

    .recom-brand-name {
        font-size: 13px;
    }

    .recom-switch-btn {
        width: 42px;
        height: 42px;
    }
    .recom-btn-prev { left: 12px; }
    .recom-btn-next { right: 12px; }
    .recom-switch-btn svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .recom-brand-track-container {
        display: block;
		position: absolute;
		top: 10%;
		left: 0;
		width: 100%;
		transform: translateY(-50%);
			
    }

	.recom-brand-track {
		display: flex;
		padding: 0 15px;
		gap: 40px;
		position: absolute;
		top: 20%;
		left: 0;
		transform: translateY(-50%);
		height: 180px;
		transition: transform 0.6s ease;
		width: fit-content;
	}
	.recom-brand-img-container {
		width: 100%;
		max-width: 251px;
		/*margin-bottom: 5px;*/
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 推荐品牌名称样式 */
	.recom-brand-name {
		font-size: 13px;
		color: #666;
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
		transition: color 0.3s ease;
	}
    .recom-brand-title h2 {
        font-size: 20px;
    }

    .recom-brand-scroll-box {
        height: 180px;
    }

    .recom-brand-item {
        width: 185px;
        height: 150px;
    }

    .recom-brand-img {
        height: 85px;
    }

    .recom-switch-btn {
        width: 38px;
        height: 38px;
    }
    .recom-btn-prev { left: 5px; }
    .recom-btn-next { right: 5px; }
}

 /* 新增：代理品牌查看更多按钮样式 */
    .newpp-brand-more {
        text-align: center; /* 按钮居中 */
        margin-top: 30px; /* 与滚动区域保持间距 */
    }
    .newpp-brand-more-btn {
        display: inline-block;
        padding: 12px 30px;
        background: #336799;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        border-radius: 4px;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .newpp-brand-more-btn:hover {
        background: #28547d;
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(51, 103, 153, 0.2);
    }
    /* 移动端适配 */
    @media (max-width: 768px) {
        .newpp-brand-more {
            margin-top: 25px;
        }
        .newpp-brand-more-btn {
            padding: 10px 24px;
            font-size: 14px;
        }
    }
/* 推荐品牌模块-基础样式 */



/*新闻中心- 容器样式 */
	.container {
		width: 100%;
		max-width: 1290px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.news-container {
		width: 100%;
		margin: 0 auto;
		margin-top:30px;
	}

	/* 双栏布局 - 响应式控制 */
	.news-content {
		display: flex;
		flex-direction: column;
		gap: 20px; /* 移动端上下模块间距 */
	}

	@media (min-width: 768px) {
		.news-content {
			flex-direction: row;
			gap: 30px; /* 桌面端中间空隙 */
		}
	}

	/* 左右模块样式 */
	.news-module {
		width: 100%;
	}
	
	.news-module:first-child .news-item {
		transform: translateX(-50px); /* 初始位置向左偏移50px */
	}	
	.news-module:last-child .news-item {
		transform: translateX(50px); /* 初始位置向右偏移50px */
	}
	
	@keyframes converge {
		to {
			opacity: 1;
			transform: translateX(0); /* 最终回到正常位置 */
		}
	}

/*        @keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}*/

	@media (min-width: 768px) {
		.news-module {
			width: 50%;
		}
	}

	/* 模块标题样式 - 美化版 */
	.module-title {
		font-size: 18px;
		color: #FFFFFF; /* 文字改为白色，与蓝色背景对比更清晰 */
		margin-bottom: 20px;
		padding: 10px 15px; /* 增加内边距，让标题更饱满 */
		border-radius: 6px; /* 圆角与下方新闻卡片呼应 */
		background: linear-gradient(135deg, #336799 0%, #055385 100%); /* 渐变色背景，增强质感 */
		box-shadow: 0 2px 6px rgba(51, 103, 153, 0.2); /* 轻微阴影，提升层次感 */
		display: flex;
		align-items: center;
		margin-left: 0; /* 取消原左侧偏移，与容器对齐 */
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease; /* 过渡动画基础 */
		
		/* 标题加载动画核心属性 */
		opacity: 0; /* 默认透明，等待动画触发 */
		animation: titleFadeInUp 0.6s ease forwards; /* 绑定动画，0.6秒完成，结束后保持最终状态 */
		animation-delay: 0.1s; /* 延迟0.1秒启动，避免与页面整体加载过于拥挤 */
	}
	
	/* 大屏幕标题动画同步优化 */
	@media (min-width: 1024px) {
		.module-title {
			font-size: 20px;
			padding: 12px 20px;
			/* 大屏可适当延长动画时间，更显从容 */
			animation-duration: 0.7s;
		}
	}
	
	
	.module-title:hover {
		background: linear-gradient(135deg, #165DFF 0%, #336799 100%); /*  hover时反转渐变方向 */
		box-shadow: 0 4px 10px rgba(51, 103, 153, 0.3); /* 增强阴影，突出交互感 */
		transform: translateY(-2px); /* 轻微上移，模拟“浮动”效果 */
	}
	/* 标题左侧小三角装饰（增强辨识度） */
	.module-title::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 4px;
		height: 20px;
		background-color: #FFD166; /* 亮黄色小三角，点缀视觉焦点 */
		border-radius: 0 2px 2px 0;
	}
	
	/* 标题图标样式优化 */
	.module-title .icon {
		color: #FFFFFF; /* 图标改为白色，与背景统一 */
		margin-right: 10px; /* 增加图标与文字间距 */
		font-size: 20px; /* 放大图标，增强视觉引导 */
		width: 1.2em; /* 统一图标尺寸 */
		height: 1.2em;
	}
	
	/* 大屏幕（电脑端）标题优化 */
	@media (min-width: 1024px) {
		.module-title {
			font-size: 20px;
			padding: 12px 20px; /* 大屏增加内边距，更显大气 */
		}
		.module-title .icon {
			font-size: 22px;
		}
		.module-title::before {
			height: 24px; /* 大屏同步放大三角装饰 */
		}
	}
	
	/* 小屏幕（手机端）标题优化 */
	@media (max-width: 767px) {
		.module-title {
			padding: 8px 12px; /* 小屏减少内边距，节省空间 */
		}
		.module-title .icon {
			margin-right: 8px;
		}
	}

	/* 自定义图标样式 */
	.icon {
		display: inline-block;
		width: 1em;
		height: 1em;
		position: relative;
	}

	.icon-building::before {
		content: "";
		position: absolute;
		width: 1em;
		height: 0.8em;
		border: 2px solid currentColor;
		border-top: none;
		border-radius: 0 0 2px 2px;
	}

	.icon-building::after {
		content: "";
		position: absolute;
		width: 0.6em;
		height: 0.4em;
		background-color: currentColor;
		top: 0.2em;
		left: 0.2em;
	}

	.icon-line-chart::before {
		content: "";
		position: absolute;
		width: 1em;
		height: 1em;
		border-bottom: 2px solid currentColor;
		border-left: 2px solid currentColor;
		bottom: 0;
		left: 0;
	}

	.icon-line-chart::after {
		content: "";
		position: absolute;
		width: 0.8em;
		height: 0.8em;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		border-top-right-radius: 3px;
		top: 0;
		right: 0;
	}

	.icon-calendar::before {
		content: "";
		position: absolute;
		width: 1em;
		height: 0.8em;
		border: 2px solid currentColor;

		border-radius: 2px;
	}

	.icon-calendar::after {
		content: "";
		position: absolute;
		width: 0.6em;
		height: 0.2em;
		background-color: currentColor;
		top: 0.2em;
		left: 0.2em;
	}
	/* 标题加载动画关键帧 - 从下往上淡入 */
	@keyframes titleFadeInUp {
		from {
			opacity: 0; /* 初始完全透明 */
			transform: translateY(20px); /* 初始向下偏移20px */
		}
		to {
			opacity: 1; /* 最终完全可见 */
			transform: translateY(0); /* 最终回到正常位置 */
		}
	}
	
	/* 可选：若想让左右标题动画方向区分（左标题从左入，右标题从右入） */
	@keyframes titleFadeInLeft {
		from {
			opacity: 0;
			transform: translateX(-20px); /* 左标题初始向左偏移 */
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes titleFadeInRight {
		from {
			opacity: 0;
			transform: translateX(20px); /* 右标题初始向右偏移 */
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	/* 新闻列表样式 */
	.news-list {
		display: flex;
		flex-direction: column;
		gap: 18px; /* 新闻之间的间隔 */
	}

	/* 单条新闻样式 */
	.news-item {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.04);
		opacity: 0;
		transform: translateY(20px);
		/*animation: fadeInUp 0.5s ease forwards;*/
		animation: converge 0.5s ease forwards; /* 使用汇聚动画 */
	}



	/* 新闻图片容器 - 500:318比例 */
	.news-img-box {
		width: 100%;
		border-radius: 6px;
		overflow: hidden;
		position: relative;
		padding-top: 63.6%; /* 318/500 = 0.636 = 63.6% - 移动端比例 */
	}

	.news-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.news-img:hover {
		transform: scale(1.05);
	}

	/* 新闻文字区域 */
	.news-text {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}


	/*新闻标题颜色*/
	.news-title {
		font-size: 16px;
		color: #336799;
		text-decoration: none;
		transition: color 0.3s ease;
	}

	.news-title:hover {
		color: #165DFF;
	}

	.news-time {
		font-size: 14px;
		color: #9CA3AF;
		display: flex;
		align-items: center;
		gap: 4px;
		margin-top:10px;
	}

	/* 适配中等屏幕 - 修复电脑版图片显示问题 */
	@media (min-width: 768px) {
		.news-item {
			flex-direction: row;
			gap: 15px;
			padding: 20px;
			min-height: 180px; /* 确保有足够高度容纳图片 */
		}
		.news-img-box {
			width: 35%;
			padding-top: 0; /* 移除移动端的比例设置 */
			height: 140px; /* 设置固定高度，确保图片可见 */
			flex-shrink: 0; /* 防止图片容器被压缩 */
		}
		.news-text {
			width: 65%;
			justify-content: center;
		}
	}

	/* 适配大屏幕 */
	@media (min-width: 1024px) {
		.module-title {
			font-size: 20px;
		}
		.news-title {
			font-size: 18px;
		}
		.news-img-box {
			height: 120px; /* 大屏幕可适当增加高度 */
		}
	}
/*新闻中心- 容器样式 */