@charset "utf-8";
/* CSS Document */

 /* 图标链接基础样式 */
         
 
.self-ellipsis-1 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.self-ellipsis-2 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.self-ellipsis-3 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.self-ellipsis-4 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.self-ellipsis-5 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.self-ellipsis-6 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.self-ellipsis-7 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.self-ellipsis-8 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 8; -webkit-box-orient: vertical; }
.self-ellipsis-9 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 9; -webkit-box-orient: vertical; }
.self-ellipsis-10 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 10; -webkit-box-orient: vertical; }
.self-ellipsis-11 { display: -webkit-box !important; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp: 11; -webkit-box-orient: vertical; }

.project-block-four .content-box .float-text.xiaobiaoti{
	position:relative;
	font-weight:400;
	font-size:16px;
	color:#ffffff;
	line-height:30px;
	margin-top:0px;
	text-transform:capitalize;
}
/*home鼠标经过*/
/*home鼠标经过*/
.yj-box{
    position:absolute;
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    transition: transform 0.4s ease;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    z-index: 41; /* 增加层级 */
    pointer-events: none; /* 允许点击穿透 */
}
.project-block_two-image:hover .yj-box{
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}
.yj-box:before{
    position:absolute;
    content:'';
    left:0px;
    top:0px;
    right:0px;
    bottom:0px;
    z-index:1;
    opacity:0.80;
    background-color:var(--main-color);
}
.yj-box .cart-option{
    position:relative;
    top:50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 0;
    margin: 0;
    z-index: 2; /* 新增：确保按钮容器在背景层之上 */
}
.yj-box .cart-option li{
    position:relative;
    margin:0px 3px;
    color:var(--black-color);
    display:inline-block;
}
.yj-box .cart-option li a{
    position:relative;
    color:var(--white-color); /* 关键改：换成白色，和主色背景对比度更高 */
    display:block;
    transition:all 0.3s ease;
    pointer-events: auto; /* 恢复箭头链接点击 */
    z-index: 42; /* 确保箭头在顶层 */
    width: 80px; /* 新增：给箭头容器设宽高 */
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 新增：专门控制 SVG 箭头的样式 */
.yj-box .cart-option li a img{
    width: 40px; /* 箭头宽度，可根据需要调整 */
    height: 40px; /* 箭头高度，和宽度保持一致 */
    object-fit: contain; /* 保证 SVG 不变形 */
    filter: brightness(0) invert(1); /* 强制把 SVG 变成白色（不管原图颜色） */
}
.yj-box .cart-option li a:hover{
    /*  hover 时可以调亮或换颜色 */
    transform: scale(1.1); /* 新增：hover 放大，更醒目 */
}
.yj-box .cart-option li a:hover img{
    filter: brightness(0.8) invert(1); /* hover 时箭头稍暗，有交互反馈 */
}
.project-block_two-image:hover .yj-box{
    opacity:1;
}
.overlay-link{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40; /* 低于 yj-box，高于其他元素 */
    display: block;
}
/* 父容器需要相对定位，让绝对定位的子元素生效 */
.project-block_two-image{
    position:relative;
    width: 100%;
}
/*鼠标经过更换产品图片*/
.project-block_two-content {
    z-index: 44;
}
.cbp-image-hover{
    display:block;
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    transition:all .5s;
    opacity:0;
    transform: scale(1.05);
    background: #fff;
    text-align: center;
    z-index:39;
    pointer-events: none; /* 图片层不阻挡点击 */
}
/* 关键：hover 触发条件改为外层容器 */
.project-block_two-image:hover .cbp-image-hover{
    opacity:1;
    transform: scale(1);
}
/* 确保 hover 层里的图片填满容器 */
.cbp-image-hover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 修复文字溢出问题 */
.self-ellipsis-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 确保主图片容器正确层级 */
.project-block_two-image .image-container {
    position: relative;
    display: inline-block;
    width: 100%;
    z-index: 1;
}
/*home鼠标经过更换产品图片*/


.yj a:hover {
    color: var(--main-color) !important; /* !important 覆盖行内样式的 color:#666666 */
    /* 可选：添加过渡效果，颜色变化更顺滑 */
    transition: color 0.3s ease;
}

/*内banner*/
.banner-nei {
  /* 1. 定义容器的显示尺寸（根据你的实际需求调整） */
  width: 100%;          /* 宽度占满父容器，也可以设固定值如 1200px */
  height: 500px;        /* 设置固定高度，这是控制显示区域的核心 */
  
  /* 2. 核心的背景图片配置 */ 
  background-position: center center;  /* 图片居中显示，优先展示核心区域 */
  background-size: cover;              /* 图片等比例缩放，覆盖整个容器（最常用） */
  background-repeat: no-repeat;        /* 禁止图片重复平铺 */
  
  /* 3. 可选增强：处理容器溢出和定位 */
  overflow: hidden;     /* 防止图片缩放后超出容器 */
  position: relative;   /* 如果banner内有文字等元素，方便绝对定位 */
}

/* 可选：响应式适配（不同屏幕尺寸调整） */
@media (max-width: 768px) {
  .banner-nei {
    height: 250px;      /* 移动端缩小高度 */
    background-position: 70% center; /* 可选：调整移动端的图片显示焦点 */
  }
}
/*内banner end*/