@charset "utf-8";
/* banner */
.c-banner{
	width: 100%;
	position: relative;
}
.c-banner img{
	width: 100%;
}
.c-banner .banner ul{
	list-style: none;
	padding-left: 0px;
	margin-bottom: 0px;
}
.c-banner .banner ul li{
	position: absolute;
	display: none;
	opacity: 0;
}
.c-banner .banner ul li:nth-child(1){
	opacity: 1;
	display: block;
}
.c-banner .banner ul li img{
	width: 100%;
	position: absolute;
	top: 0px;
}
.c-banner .banner ul li:first-child img{
	position: relative;
}
.c-banner .nexImg,.c-banner .preImg{
	padding: 25px 10px 25px 10px;
	position: absolute;
	top: 50%;
	margin-top: -53px;
	background: #000000;
	opacity: 0.5;
	border-radius: 5px;
	z-index: 10;
	
}
.c-banner .nexImg:hover,.c-banner .preImg:hover{
	opacity: 0.8;
}
.c-banner .nexImg{
	right: 0px;
}
.c-banner .nexImg img,.c-banner .preImg img{
	
	
}
.c-banner .jumpBtn{
	width: 100%;
	position: absolute;
	bottom: 20px;
	text-align: center;
}
.c-banner .jumpBtn ul{
	margin-bottom: 0px;
	padding: 0px;
}

.c-banner .jumpBtn ul li{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: inline-block;
	background-color: white;
	opacity: 0.9;
	margin-left: 10px;
}
.c-banner .jumpBtn ul li:first-child{
	margin-left: 0px;
}
@media screen and (max-width:768px) {
	.nexImg, .preImg{ display:none}
	.c-banner{
		width: 100%;

		overflow: hidden;
	}
	.c-banner .banner ul li img{
		
	}
	.c-banner .jumpBtn ul li{ width:10px; height:10px}
	.c-banner .jumpBtn{ bottom:10px}
}

/* —— 修复服务卡片把文字裁掉/盖住的问题 —— */
/* 让卡片本身不要裁切子元素 */
figure, .service, .services, .service-item, .server-item, .case-item, .service-card {
  overflow: visible !important;
}

/* 只对装图片的盒子做椭圆裁切（类名可能不同，下面几种都兼容） */
.img, .img-wrap, .pic, .thumb, .service-card .img-wrap {
  overflow: hidden !important;
  border-radius: 9999px; /* 椭圆效果 */
}

/* 确保描述文字可见并在图片下方排版 */
/* figcaption, .caption, .desc, .title, .service-caption {
  display: block !important;
  position: static !important;
  z-index: 1 !important;
  margin-top: 12px !important;
  line-height: 1.5;
  color: #333 !important; /* 避免和背景同色 */
  white-space: normal !important;
} */


/* 服务项目：图片上漂浮名称 */
.service-card .img-wrap{ position:relative; overflow:hidden; border-radius:9999px; }
.service-card img{ display:block; width:100%; height:auto; object-fit:cover; }

/* 方式一：用 <span class="label">文字</span> */
.service-card .label{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:8px 14px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; font-weight:600; line-height:1;
  white-space:nowrap; z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.15);
  pointer-events:none;
}

/* 让图片容器能放置绝对定位元素，同时保持椭圆裁切 */
.case-list-1 .case-img-1.has-label{
  position: relative;
  overflow: hidden;
  border-radius: 9999px;         /* 椭圆效果 */
}

/* 图片自适应铺满 */
.case-list-1 .case-img-1.has-label img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 漂浮的名称标签 */
.case-list-1 .case-label{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 9999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  z-index: 3;
  pointer-events: none;          /* 点击仍然落在链接上 */
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* 隐藏下面那行原标题（仅限这个列表） */
.case-list-1 .case-txt-1{
  display: none;
}

/* 如果你的项目没引 Bootstrap，这里补一个“只读屏读可见”的工具类 */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* 移动端微调标签大小 */
@media (max-width: 768px){
  .case-list-1 .case-label{ padding:6px 10px; font-size:14px; }
}

/* --- 服务项目：图片上的漂浮名称（完整显示+居中） --- */

/* 图片容器：允许放绝对定位标签，同时保持椭圆裁切 */
.case-list-1 .case-img-1{
  position: relative;
  overflow: hidden;
  border-radius: 9999px;
}

/* 若你已加 <span class="case-label">[list:title]</span> */
.case-list-1 .case-img-1 .case-label{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;                /* 在覆盖链接之上显示 */
  pointer-events: none;      /* 点击仍然落到图片的<a>上 */

  display: inline-block;
  padding: 8px 14px;
  width: auto !important;             /* 防止主题给 span 设了固定宽度 */
  max-width: calc(100% - 24px);       /* 超长时不超出椭圆边界 */
  box-sizing: border-box;
  white-space: nowrap;                /* 一行显示 */
  overflow: visible !important;       /* 不被自身裁切 */
  text-overflow: clip;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  text-align: center;                 /* 保底居中 */
}

/* 覆盖整张图片的链接放在标签下面一层，避免遮挡文字 */
.case-list-1 .case-img-1 .case-position{
  position:absolute; inset:0; z-index:2;
}

/* 下方原来的标题：要么隐藏，要么改为居中 */
.case-list-1 .case-txt-1{ display:none; }
/* 如果你想保留它，注释掉上一行，改用这一行： */
/* .case-list-1 .case-txt-1{ text-align:center; overflow:visible; white-space:normal; } */
/* AB模板网 整站模板下载 */
/* 模板：Www.AdminBuy.Cn */
/* 仿站：Fang.AdminBuy.Cn */
/* 素材：Sc.AdminBuy.Cn */
/* js特效：js.AdminBuy.Cn */
/* QQ：9490489 */

/* 服务项目：图片上漂浮名称（稳定版） */
.case-list-1 .case-img-1{
  position: relative;
  overflow: hidden;
  border-radius: 50%;                  /* 真正的椭圆裁切 */
  /* 可选：固定比例，避免图片高矮不一致导致标签位置跳动 */
  /* aspect-ratio: 4 / 3; */
}

.case-list-1 .case-img-1 .case-label{
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 6%, 22px);       /* 稍微往上提，避开椭圆最窄处 */
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;

  display: block;                      /* 让 shrink-to-fit 生效，便于居中 */
  max-width: 78%;                      /* 控制标签宽度，不触碰两侧弧线 */
  padding: 8px 12px;
  text-align: center;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* 覆盖整图的链接层放在下面，避免遮挡标签 */
.case-list-1 .case-img-1 .case-position{ position:absolute; inset:0; z-index:2; }

/* 若你想允许两行显示（名字很长时更友好），加上这个替代行： */
/*
.case-list-1 .case-img-1 .case-label{ white-space: normal; }
*/

/* 服务项目：图片上漂浮名称（index-advantages 版本） */
.index-advantages .index-advantages-li{
  position: relative;
  display: inline-block;
  overflow: hidden;              /* 椭圆裁切 */
  border-radius: 50%;
}

.index-advantages .index-advantages-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 标签：底部居中且不影响点击 */
.index-advantages .service-caption{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;

  display: block;
  max-width: 80%;
  padding: 8px 12px;
  text-align: center;

  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}

/* 覆盖整图的链接放下面，避免挡字 */
.index-advantages .index-advantages-li-txt{ position:absolute; inset:0; z-index:2; }

/* 主题自带的椭圆装饰背景（如果有），放在更底层 */
.index-advantages .advantages-bg-1{ position:absolute; inset:0; z-index:1; }

/* —— 服务项目：把名字漂在图片上 & 修复被裁切/缩进/反斜杠 —— */

/* 1. 外层卡片：保持椭圆裁切，并能放绝对定位元素 */
.index-advantages .index-advantages-li{
  position: relative !important;
  overflow: hidden !important;
  border-radius: 50% !important;
}

/* 2. 图片正常铺满 */
.index-advantages .index-advantages-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* 3. 文字标签：居中、完整显示、在上层，不受主题宽度/缩进影响 */
.index-advantages .service-caption{
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;                 /* 往上提一点，避开椭圆最窄处 */
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;

  display: block !important;
  max-width: 82% !important;               /* 防止碰到两侧弧线 */
  padding: 8px 12px !important;
  margin: 0 !important;
  text-align: center !important;

  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  border-radius: 999px !important;

  /* —— 关键覆盖：防止主题把文字挤没 —— */
  width: auto !important;
  float: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-indent: 0 !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
}

/* 去掉主题加的奇怪引导符/反斜杠 */
.index-advantages .service-caption::before,
.index-advantages .service-caption::after{
  content: none !important;
}

/* 链接盖层放下层，别遮住文字 */
.index-advantages .index-advantages-li-txt{ position:absolute !important; inset:0 !important; z-index:2 !important; }
.index-advantages .advantages-bg-1{ position:absolute !important; inset:0 !important; z-index:1 !important; }


/* —— Banner 强力修复 —— */
.c-banner{ position: relative; overflow: hidden; }
.c-banner .banner{ position: relative; }

/* 让 UL 作为可见区域，有高度（16:9）。老浏览器用 fallback 高度。*/
.c-banner .banner ul{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 16 / 9){
  /* 备用：高度按屏宽 56.25% 计算，并做上/下限 */
  .c-banner .banner ul{ height: 56.25vw; min-height: 260px; max-height: 620px; }
}

/* 每一张轮播图占满容器并默认隐藏，只显示第1张 */
.c-banner .banner ul li{
  position: absolute; inset: 0;            /* 等同 top:0; right:0; bottom:0; left:0; */
  display: none; opacity: 0;
}
.c-banner .banner ul li:nth-child(1){ display: block; opacity: 1; }

/* 图片铺满容器，按 Cover 裁切 */
.c-banner .banner ul li img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* 导航箭头和小圆点在最上层 */
.c-banner .nexImg, .c-banner .preImg, .c-banner .jumpBtn{ z-index: 10; }


/* —— Banner 稳定版 —— */
.c-banner{ position: relative; overflow: hidden; }
.c-banner .banner{ position: relative; }

/* 让 UL 有可见高度（16:9），老浏览器用回退高度 */
.c-banner .banner ul{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
@supports not (aspect-ratio: 16 / 9){
  .c-banner .banner ul{ height: 56.25vw; min-height: 260px; max-height: 620px; }
}

/* 每张图铺满容器，默认隐藏，只显示第1张 */
.c-banner .banner ul li{
  position: absolute; inset: 0;
  display: none; opacity: 0;
}
.c-banner .banner ul li:nth-child(1){ display: block; opacity: 1; }

.c-banner .banner ul li img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* 导航控件在最上层 */
.c-banner .nexImg, .c-banner .preImg, .c-banner .jumpBtn{ z-index: 10; }

.service-list {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: center; /* 水平居中 */
  gap: 20px;
}

.service-item {
  flex: 0 0 calc(25% - 20px); /* 每行 4 个，减去间距 */
  box-sizing: border-box;
  text-align: center;
}


/* —— 只作用于这一块服务列表 —— */
.wrap.wrap-service .index-advantages{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* 让最后一行居中 */
  gap: 20px;                 /* 卡片间距 */
}

.wrap.wrap-service .index-advantages .index-advantages-li{
  display: block;            /* 覆盖主题里可能的 inline/inline-block */
  flex: 0 0 calc(25% - 20px);/* 一行 4 个（减去间距）*/
  box-sizing: border-box;
  position: relative;
  overflow: hidden;          /* 仅在此区块做圆形裁切 */
  border-radius: 50%;
}

/* 平板、手机自适应列数 */
@media (max-width: 1024px){
  .wrap.wrap-service .index-advantages .index-advantages-li{
    flex: 0 0 calc(33.333% - 20px);  /* 平板：3 列 */
  }
}
@media (max-width: 768px){
  .wrap.wrap-service .index-advantages{ gap: 14px; }
  .wrap.wrap-service .index-advantages .index-advantages-li{
    flex: 0 0 calc(50% - 14px);      /* 手机：2 列 */
  }
}

/* 仅限该区块的图片与漂浮标题 */
.wrap.wrap-service .index-advantages .index-advantages-img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.wrap.wrap-service .index-advantages .service-caption{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  display: block;
  max-width: 82%;
  padding: 8px 12px;
  text-align: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-weight: 600;
  line-height: 1.25;
  border-radius: 999px;
  white-space: nowrap;   /* 名字很长时若想换行可改为 normal */
}

/* 链接覆盖层放下层，别挡字 */
.wrap.wrap-service .index-advantages .index-advantages-li-txt{ position:absolute; inset:0; z-index:2; }
.wrap.wrap-service .index-advantages .advantages-bg-1{ position:absolute; inset:0; z-index:1; }


/* —— 服务区块强制 4 列 + 最后一行居中（不依赖外层类名） —— */
.index-advantages{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important; /* 最后一行居中 */
  gap: 20px !important;               /* 卡片间距 */
}

.index-advantages .index-advantages-li{
  /* 一行 4 个：25% 宽度，减去 gap 影响 */
  flex: 0 0 calc(25% - 20px) !important;
  box-sizing: border-box !important;
  display: block !important; /* 覆盖主题可能的 inline/inline-block */
}

/* 平板：3 列 */
@media (max-width: 1024px){
  .index-advantages .index-advantages-li{
    flex: 0 0 calc(33.333% - 20px) !important;
  }
}

/* 手机：2 列，间距略小一些 */
@media (max-width: 768px){
  .index-advantages{ gap: 14px !important; }
  .index-advantages .index-advantages-li{
    flex: 0 0 calc(50% - 14px) !important;
  }
}



/* —— 服务项目：用 Grid 固定 4 列，最后一行自然居中 —— */
.index-advantages{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important; /* 固定4列 */
  column-gap: 24px !important;   /* 横向间距 */
  row-gap: 32px !important;      /* 纵向间距 */
  justify-items: center !important; /* 让每个格里的内容居中（可选） */
}

/* 子项归一：去掉主题可能加的 margin/固定宽度/inline-block */
.index-advantages .index-advantages-li{
  display: block !important;
  width: 100% !important;      /* 占满格子 */
  margin: 0 !important;        /* 清除左右外边距，避免溢出 */
  box-sizing: border-box !important;
  float: none !important;      /* 防止旧主题用 float 布局 */
}

/* 图片保持自适应，避免撑破格子 */
.index-advantages .index-advantages-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* 响应式：平板 3 列、手机 2 列 */
@media (max-width: 1024px){
  .index-advantages{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px){
  .index-advantages{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* 轮播图文字悬浮 */
.c-banner .banner-item {
    position: relative;
}

.c-banner .banner-item img {
    width: 100%;
    display: block;
}

/* 文字整体容器 */
.c-banner .banner-text {
    position: absolute;
    left: 10%;              /* 距离左边 10% */
    top: 40%;               /* 距离上边 40%，大概在中上位置 */
    transform: translateY(-50%);
    color: #ffffff;
    max-width: 40%;         /* 文字区域不超过图片宽度 40% */
    line-height: 1.4;
}

/* 主标题：比如“洛杉矶专业清洁服务” */
.c-banner .banner-text-main {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 3px 12px rgba(0, 0, 0, 0.6);
}

/* 副标题：服务范围/项目说明 */
.c-banner .banner-text-sub {
    font-size: 28px;
    font-weight: 400;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* 手机端字体缩小一点，避免压太满 */
@media (max-width: 768px) {
    .c-banner .banner-text {
        left: 6%;
        top: 35%;
        max-width: 80%;
    }
    .c-banner .banner-text-main {
        font-size: 24px;
    }
    .c-banner .banner-text-sub {
        font-size: 14px;
    }
}




.index-advantages-picture { display:block; }
.index-advantages-picture img { display:block; width:100%; height:auto; }

/* ===== 服务项目（index-advantages）最终稳定版：放在 style_1.css 最底部 ===== */

/* 4列网格（平板3列/手机2列） */
.wrap.wrap-service .index-advantages{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 32px !important;
  justify-items: center !important;
}

@media (max-width: 1024px){
  .wrap.wrap-service .index-advantages{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px){
  .wrap.wrap-service .index-advantages{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* 卡片：椭圆裁切 + 层级 */
.wrap.wrap-service .index-advantages .index-advantages-li{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

/* 图片铺满 */
.wrap.wrap-service .index-advantages .index-advantages-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* 标签漂浮在图上 */
.wrap.wrap-service .index-advantages .service-caption{
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;

  max-width: 82% !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  text-align: center !important;

  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

/* 点击层：不挡字 */
.wrap.wrap-service .index-advantages .index-advantages-li-txt{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}

/* 装饰层：最底 */
.wrap.wrap-service .index-advantages .advantages-bg-1{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* =====================================================================
   BFC PATCH (append to END of style_1.css)
   Purpose: make Service cards stable (image visible + caption overlay),
   without deleting old conflicting rules.
   ===================================================================== */

/* --- Service cards layout: 4 cols (desktop), 3 (tablet), 2 (mobile) --- */
.wrap.wrap-service .index-advantages{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 32px !important;
  justify-items: center !important;
}
@media (max-width: 1024px){
  .wrap.wrap-service .index-advantages{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px){
  .wrap.wrap-service .index-advantages{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 20px !important;
  }
}

/* --- Card container: ellipse crop + stacking context --- */
.wrap.wrap-service .index-advantages .index-advantages-li{
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  overflow: hidden !important;
  border-radius: 9999px !important;
  box-sizing: border-box !important;
}

/* --- Image: always visible and fill container --- */
.wrap.wrap-service .index-advantages .index-advantages-img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* --- Caption: ALWAYS overlay on image (overrides any static rules) --- */
.wrap.wrap-service .index-advantages .service-caption{
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  pointer-events: none !important;

  display: block !important;
  max-width: 82% !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  text-align: center !important;

  background: rgba(0,0,0,.55) !important;
  color: #fff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;

  width: auto !important;
  float: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-indent: 0 !important;
}
/* Remove any theme-added decorative pseudo content */
.wrap.wrap-service .index-advantages .service-caption::before,
.wrap.wrap-service .index-advantages .service-caption::after{
  content: none !important;
}

/* --- Click/hover layers: keep clickable but do NOT cover caption --- */
.wrap.wrap-service .index-advantages .index-advantages-li-txt{
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
}
.wrap.wrap-service .index-advantages .advantages-bg-1{
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}

/* =====================================================================
   END PATCH
   ===================================================================== */
   
/* ===== 修复：关于我们 文本高度溢出图片 ===== */

/* 整个关于我们区域：左右等高 */
.index-video {
  display: flex;
  align-items: stretch; /* 关键：左右等高 */
  gap: 30px;
}

/* 左侧视频图 */
.index-video .video {
  flex: 1;
}

/* 右侧内容 */
.index-video-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 文本区域限制高度 */
.index-bottom-txt-3 {
  flex: 1;
  overflow: hidden;          /* 不允许溢出 */
  line-height: 1.7;
}

/* 移动端恢复原布局 */
@media (max-width: 768px) {
  .index-video {
    display: block;
  }
  .index-bottom-txt-3 {
    overflow: visible;
  }
}

/* ===== 修复：关于我们标题下简介文字溢出 ===== */
.index-title .index-title-h2{
  max-width: 1100px;          /* 你想更窄就改成 900/1000 */
  margin: 0 auto;             /* 居中 */
  padding: 0 16px;            /* 两边留白，防止贴边 */
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;    /* 英文/长词也能换行 */
}

/* 有些主题会把 p/内容区设成不换行，这里兜底 */
.index-title,
.index-title *{
  box-sizing: border-box;
}

/* ===== 彻底修复：关于我们标题下文字过宽 ===== */
.index-title {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.index-title-h2 {
  max-width: 900px;        /* 控制文字行宽（关键） */
  margin: 12px auto 0;
  line-height: 1.7;
  font-size: 15px;
  color: #666;

  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* 修复：关于我们区域两列布局跑偏 / 右侧挤成细条 */
.wrap.wrap-service .index-video{
  overflow: hidden; /* 包住 float，避免高度/位置塌陷 */
}

/* 如果你的模板原本用 float，这样强制回到左右两列 */
.wrap.wrap-service .index-video .video{
  float: left !important;
  width: 48% !important;
  box-sizing: border-box !important;
}

.wrap.wrap-service .index-video .index-video-right{
  float: right !important;
  width: 52% !important;
  box-sizing: border-box !important;
}

/* 防止图片和文字把容器撑爆 */
.wrap.wrap-service .index-video img{
  max-width: 100% !important;
  height: auto !important;
}

/* 你说“文字超出”的那种情况，一般是标题副标题太长 */
.wrap.wrap-service .index-title-h2{
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.8;
  white-space: normal;
}

/* ===============================
   ABOUT US 修复补丁（放到style_1.css最底部）
   =============================== */

/* 强制关于我们两列用 flex，不要 float */
.wrap.wrap-service .index-video{
  display: flex !important;
  gap: 30px !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* 左侧视频 */
.wrap.wrap-service .index-video .video{
  flex: 0 0 48% !important;
  width: auto !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* 右侧内容（防止变成细条） */
.wrap.wrap-service .index-video .index-video-right{
  flex: 1 1 52% !important;
  width: auto !important;
  float: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* 右侧上方两个小图并排 */
.wrap.wrap-service .index-top-img{
  display: flex !important;
  gap: 16px !important;
}
.wrap.wrap-service .index-top-left-img{
  flex: 1 1 0 !important;
}

/* 右侧文字：正常换行，不要变窄后一字一行 */
.wrap.wrap-service .index-bottom-txt-3{
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* 手机端改为上下排列 */
@media (max-width: 768px){
  .wrap.wrap-service .index-video{
    display: block !important;
  }
}

/* ===== About Us（关于我们）最终兜底：防止右侧变细条/布局跑版 ===== */
.wrap.wrap-service .index-video{
  width: 100%;
  overflow: hidden; /* 双保险：即使没加 clearfix 也能包住 */
}

.wrap.wrap-service .index-video .video{
  float: left;
  width: 48%;
  box-sizing: border-box;
}

.wrap.wrap-service .index-video .index-video-right{
  float: right;
  width: 52%;
  box-sizing: border-box;
}

/* 右侧文字允许正常换行，避免被挤成竖排 */
.wrap.wrap-service .index-video .index-bottom-txt-3{
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.8;
}

/* 移动端：改成上下排列 */
@media (max-width: 768px){
  .wrap.wrap-service .index-video .video,
  .wrap.wrap-service .index-video .index-video-right{
    float: none;
    width: 100%;
  }
}

/* ✅ 临时兜底：如果模板引擎把 pboot 标签吐出来，强制不显示 */
.index-video .video .img-box,
.index-video .video{
  position: relative;
}

.index-video .video .img-box *{
  /* 不动图片本身 */
}

.index-video .video{
  overflow: hidden;
}

/* 把吐出来的 {pboot:sort...} 那种文本隐藏（通常在视频图上方形成一行普通文字） */
.index-video .video{
  font-size: 0;
}
.index-video .video img,
.index-video .video .video-box{
  font-size: initial;
}

/* 防止任何 {pboot:sort...} 被当文本时压在图上：让它换行且不覆盖 */
.index-video .video,
.index-video .index-video-right{
  position: relative;
}