@charset "utf-8";
/*-------------------------
主页样式表
编辑：20230318，黄灿平
--------------------------*/

/*-------------------------
banner
编辑：20260719，黄灿平
--------------------------*/
.banner{ position:relative; width:100%; overflow:hidden;}
.indexBanner{ width:100%; margin:0 auto;}
.indexBanner img{ width:100%; height:auto;}
.indexBanner .swiper-button-white{
    padding:15px 26px; 
    border-radius:4px;
    background:rgba(0,0,0, 0.1);
    opacity: 0.1;
    /* --- 过渡：为所有变化提供平滑动画 --- */
    transition:
        opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease;
    /* 初始轻微上移，配合淡入 */
    /*transform: translateY(6px);*/
    /* 保证按钮可点 */
    pointer-events: auto;
}
.indexBanner:hover .swiper-button-white{ 
    opacity: 1;
    /* 归位 */
    transform: translateY(0);
    /* 轻微阴影 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
}
.indexBanner:hover .swiper-button-white:hover{ 
    background:rgba(0,0,0, 0.5);
    /* 轻微放大和阴影增强，提升交互感 */
    /*transform: translateY(-2px) scale(1.02);*/
    /*box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);*/
    /* 可单独调整过渡速度，让变化更敏捷 */
    transition-duration: 0.25s;
}
.indexBanner .swiper-pagination-bullet{ width:20px; height:2px;}
.indexBanner>.swiper-pagination-bullets .swiper-pagination-bullet{ margin:0;}
.indexBanner .swiper-wrapper .swiper-slide{ background-position:center center; background-repeat:no-repeat}


.IndexCp{ 
    min-height:800px;
    background-image: url('../img/index/CpBg.jpg');
    background-size: 100% auto; /* 宽度100%，高度自动等比 */
    background-repeat: no-repeat;
    background-position: center top; /* 可调整位置，常用 center */
}
/*-------------------------
标语
编辑：20260720，黄灿平
--------------------------*/
.IndexBr{ width:1280px; margin:0 auto;}
.IndexBr ul{
    display: flex;
    /* 开启弹性布局 */
    flex-wrap: nowrap;
    /* 不换行，强制一行 */
    gap: 20px;
    /* 列间距（可选） */
    align-items: flex-start;
    /*对齐 —— 关键属性 */
}
.IndexBr ul li{
    padding:20px;
    flex: 1 1 0;
    /* 等宽分配剩余空间 */
    /* 等价于 flex: 1; 但更明确表示基础宽度为 0 */
    min-width: 0;
    /* 防止内容溢出撑大 flex-basis */
}
.IndexBr ul li h3{ padding:50px 0 20px 0; text-align:center; font-size:18px; color:#333;}
.IndexBr ul li h3:before{ display:block; font-size:48px; padding:10px 0; line-height:50px;}
.IndexBr ul li p{ font-size:14px; color:#777; line-height:25px;}

/*-------------------------
产品展示
编辑：20260720，黄灿平
--------------------------*/
/*--头部--*/
.IndexCpH{ position:relative; width:1280px; margin:0 auto;}
.IndexCpH:before{ position:absolute; right:-50px; top:-60px; z-index:1; display:block; content:""; width:550px; height:550px; background:url(../img/index/1.png) no-repeat;}
.IndexCpH h2{ padding:80px 0 20px 0; font-size:36px; font-weight:700; color:#333333;}
.IndexCpH h2 span{ color:#c70000;}
.IndexCpH h3{ font-size:28px; font-weight:500; color:#666666;}
.IndexCpH p{ padding:50px 0 70px 0; max-width:600px; line-height:25px; font-size:14px; color:#999999;}
/*--内容--*/
.IndexCpB{
    min-height:600px;
    background-image: url('../img/index/Cp.jpg');
    background-size: 100% auto; /* 宽度100%，高度自动等比 */
    background-repeat: no-repeat;
    background-position: center top; /* 可调整位置，常用 center */
}
.IndexCpB .b{ width:1280px; margin:0 auto;}
/*--切换头部--*/
.IndexCpB ul{
    display: flex;
    /* 开启弹性布局 */
    flex-wrap: nowrap;
    /* 不换行，强制一行 */
    gap: 20px;
    /* 列间距（可选） */
    align-items: flex-start;
    /*对齐 —— 关键属性 */
}
.IndexCpB ul.tab-nav li{ padding:50px 0;}
.IndexCpB ul.tab-nav li span{ display:block; padding:20px 30px; color:#ffffff; font-size:16px; font-weight:500;
    cursor: pointer;
    transition: all 0.30s ease;
    user-select: none;
    position: relative;
}
.IndexCpB ul.tab-nav li.active span, .IndexCpB ul.tab-nav li:hover span{ color:#333; border-radius:2px; background:#fff;}
/*--切换内容--*/
#productSwiper.swiper-container{
    width: 100%;
    overflow: hidden;
    /* 固定高度，避免 fade 切换时高度抖动 */
    /*height: 460px;*/
}
#productSwiper ul{
    display: flex;
    flex-wrap: wrap;            /* 允许换行 */
    justify-content: flex-start; /* ★ 左对齐（从左侧开始排列） */
    align-content: flex-start;    /* 多行整体顶部对齐 */
    gap: 20px;                 /* 行间距和列间距均为 10px（可根据需要调整） */
}
#productSwiper ul li{
    /* 平均宽度：每行4列，减去3个列间距（gap） */
    flex: 0 0 calc((100% - 3 * 20px) / 4);
    box-sizing: border-box;
    background: #f5f5f5;
    padding: 0 0 20px 0;
    height: 435px;
}
#productSwiper ul li a{ display:block;}
#productSwiper ul li a.proMain-a{ width:100%;}
#productSwiper ul li a.proMain-a img{ width:100%; height:305px}
#productSwiper ul li h3{ font-size:16px; font-weight:500; color:#333; padding:20px 20px 10px 20px;}
#productSwiper ul li p{ padding:0 20px 0 20px; color:#7c7c7c;}
.IndexCpB .swiper-pagination{ display: none;}

/*-------------------------
关于我们
编辑：20260727，黄灿平
--------------------------*/
.IndexAbout{ margin:50px 0 0 0; 
    background-image: url('../img/index/aboutBG.jpg');
    background-size: 100% auto;   /* 宽度 100%，高度 auto（等比） */
    background-repeat: no-repeat; /* 避免平铺 */
    background-position: center top;  /* 居中显示（可选） */
    background-color: #fff;
}
.IndexAboutB{ position:relative; width:1280px; margin:0 auto; padding:110px 0 160px 770px; box-sizing: border-box;}
.IndexAboutB:before{ position:absolute; left:0; top:180px; z-index:2; display:block; width:700px; height:443px; content:""; border-radius:10px;
    background-image: url('../img/index/about.jpg');
    background-size: 100% auto;   /* 宽度 100%，高度 auto（等比） */
    background-repeat: no-repeat; /* 避免平铺 */
    background-position: center top;  /* 居中显示（可选） */
}
.IndexAboutB h2{ padding:80px 0 20px 0; font-size:36px; font-weight:700; color:#333333;}
.IndexAboutB h2 span{ color:#c70000;}
.IndexAboutB h3{ font-size:28px; font-weight:500; color:#666666;}
.IndexAboutB p{ padding:50px 0 70px 0; line-height:25px; font-size:14px; color:#999999;}
.IndexAboutB a{ position:relative; display:inline-block; width:200px; height:50px; margin-right: 20px; line-height:50px; text-align:center; border:1px solid #333;
    /* 背景：白色底色 + 渐变覆盖层 */
    background-color: #ffffff;
    background-image: linear-gradient(to right, #C70000, #C70000);
    background-size: 0% 100%;    /* 初始宽度为0，隐藏渐变 */
    background-repeat: no-repeat;
    /* 过渡：所有属性变化时平滑动画 */
    transition: background-size 0.6s ease,
    border-color 0.6s ease,
    color 0.6s ease;
}
.IndexAbout a:hover{
    background-size: 100% 100%;   /* 渐变完全展开，覆盖白色背景 */
    border-color: #C70000;        /* 边框变为红色 */
    color: #ffffff;              /* 文字变白 */
}
.IndexAboutB a:before{ transform: scaleX(-1); display: inline-block; position:absolute; right:20px; top:0;}

/*-------------------------
新闻中心
编辑：20260727，黄灿平
--------------------------*/
.IndexNews{
    min-height:700px;
    background-image: url('../img/index/newsBG.jpg');
    background-size: 40% auto;   /* 宽度 100%，高度 auto（等比） */
    background-repeat: no-repeat; /* 避免平铺 */
    background-position: left top;  /* 居中显示（可选） */
}
.IndexNewsB{ position:relative; width:1280px; margin:0 auto;}
.IndexNewsB:before{
    position:absolute; left:0; top:180px; z-index:2; display:block; width:700px; height:443px; content:""; border-radius:10px;
    background-image: url('../img/index/news.jpg');
    background-size: 100% auto;   /* 宽度 100%，高度 auto（等比） */
    background-repeat: no-repeat; /* 避免平铺 */
    background-position: center top;  /* 居中显示（可选） */
}
.IndexNewsB .h{}
.IndexNewsB .h h2{ padding:80px 0 20px 0; font-size:36px; font-weight:700; color:#ffffff;}
.IndexNewsB .h h2 span{ color:#ffffff;}
.IndexNewsB .h h3{ font-size:28px; font-weight:500; color:#ffffff;}
/*--切换头部--*/
.IndexNewsL{ position:absolute; right:0; top:150px; width:500px;}
.IndexNewsL>ul{
    display: flex;
    /* 开启弹性布局 */
    flex-wrap: nowrap;
    /* 不换行，强制一行 */
    gap: 20px;
    /* 列间距（可选） */
    align-items: flex-start;
    /*对齐 —— 关键属性 */
}
.IndexNewsL>ul.tab-nav li{ padding:30px 0;}
.IndexNewsL>ul.tab-nav li span{ display:block; padding:15px 30px; color:#333333; font-size:16px; font-weight:500;
    cursor: pointer;
    transition: all 0.30s ease;
    user-select: none;
    position: relative;
}
.IndexNewsL>ul.tab-nav li.active span, .IndexNewsL>ul.tab-nav li:hover span{ color:#fff; border-radius:2px; background:#c70000;}
/*--切换内容--*/
#newsSwiper.swiper-container{
    width: 100%;
    overflow: hidden;
}
#newsSwiper ul{}
#newsSwiper ul li{
    position: relative;
    box-sizing: border-box;
    padding: 0 0 20px 0;
}
#newsSwiper ul li a{ display:block; font-size:16px; font-weight:400; color:#333;}
#newsSwiper ul li a:hover{ color:#c70000;}
#newsSwiper ul li span{ position:absolute; right:0; top:0; color:#999999;}
.IndexNewsL .swiper-pagination{ display: none;}