/* 定义CSS变量 */
:root {
  --custom-text-size0: 0.5rem;
  --custom-text-size1: 0.22rem;
  --custom-line-height-15: 1.5;
}

/* 全局样式 */
.humanistic_care {
  width: 100%;
  overflow: hidden;
}

.pc-pad {
  display: block;
}

.mb-only {
  display: none;
}

/* 通用部分样式 */
.humanistic_care section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* 背景图片样式 */
.humanistic_care .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* 内容容器样式 */
.humanistic_care .content {
  position: relative;
  z-index: 2;
  width: 50%;
  height: 100%;
  color: #fff;
  text-align: left;
  padding-left: 50%;
}

/* 通用标题样式 */
.humanistic_care .title-large {
  font-size: var(--custom-text-size0);
  font-weight: bold;
  margin-bottom: 0.42rem;
  text-transform: uppercase;
  /* letter-spacing: 2px; */
}

/* 通用文本样式 */
.humanistic_care .text-small {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
  text-align: justify;
  /* max-width: 800px; */
  margin: 0 auto;
}

/* 文本容器样式 */
.humanistic_care .text-container {
  /* max-width: 800px; */
  margin: 0 auto;
  text-align: left;
  /* padding-left: 2rem; */
}

/* 文本项样式 */
.humanistic_care .text-item {
  /* margin-bottom: .1rem; */
  display: flex;

}

.humanistic_care .text-icon {
  font-size: var(--custom-text-size0);
  /* font-weight: bold; */
  margin-right: 0.1rem;
}



.humanistic_care .text-item p {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
}

/* 统计数据样式 */
.humanistic_care .stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.humanistic_care .stat-item {
  text-align: center;
}

.humanistic_care .number {
  font-size: var(--custom-text-size0);
  font-weight: bold;
  margin-bottom: .14rem;
}

.humanistic_care .label {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
}

/* 发动机图片样式 */
.humanistic_care .engine-image {
  max-width: 400px;
  margin-top: 2rem;
}

/* .part0 PC版样式调整 */

.humanistic_care .part0 {
  justify-content: flex-end;
}

.humanistic_care .part0 .content {
  position: absolute;
  right: 0.8rem;
  top: 40%;
  transform: translateY(-50%);
  width: 45%;
  max-width: 7.5rem;
  padding: 0.2rem 0;
  height: auto;
}

.humanistic_care .part0 .title-large {
  font-size: var(--custom-text-size0);
  margin-bottom: 0.18rem;
  text-align: left;
  text-transform: uppercase;
}

.humanistic_care .part0 .text-small {
  font-size: var(--custom-text-size1);
  text-align: justify;
  line-height: var(--custom-line-height-15);
}

/* Part1 - People-first care stats */
.humanistic_care .part1 .content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.humanistic_care .part1 .part1-panel {
  width: 100%;
  max-width: 7.33rem;
  padding: 0.6rem;
}

.humanistic_care .stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  padding: 0 0.3rem;
}

.humanistic_care .part1 .stat-item {
  text-align: center;
}

.humanistic_care .stat-value {
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  justify-content: center;
}
.humanistic_care .stat-value .icon{
  width: 0.64rem;
  height: 0.64rem;
  margin-right: 0.16rem;
  margin-left: 0.26rem;
}
.humanistic_care .stat-value span{
  width: 66%;
  display: inline-block;
  text-align: left;
}
.humanistic_care .stat-label {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
  opacity: 0.9;
}

.humanistic_care .text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
 flex-wrap: wrap;
  gap: 0.2rem;
  justify-content: center;
  align-items: center;
}

.humanistic_care .text-list .text-item {
  align-items: flex-start;
  /* margin: 4%; */
  width: 40%;
  padding: 0.2rem;
  background-color: #022b1e;
  border-radius:0.18rem;
  min-height: 1.64rem;
}

/* Part2 - ISO 45001 */
.humanistic_care .part2 .content {
  display: flex;
  align-items: center;
  padding-right: 50%;
  padding-left: inherit;
}

.humanistic_care .iso-card {
  width: 100%;
  max-width: 8.4rem;
  padding: 0.6rem;
  text-align: center;
}

.humanistic_care .iso-title {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  line-height: 1.1;
}
.humanistic_care .iso-text {
  text-align: left;
}

.humanistic_care .iso-subtitle {
  font-size: var(--custom-text-size1);
  margin-bottom: 0.4rem;
}

.humanistic_care .iso-metrics {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.humanistic_care .metric-item {
  flex: 1;
  min-width: 45%;
}

.humanistic_care .metric-value {
  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1.1;
}

.humanistic_care .metric-label {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
}

.humanistic_care .iso-text p {
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
  margin-bottom: 0.5rem;
}
.humanistic_care .part3 .content{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.humanistic_care .welfare-card{
  width: 100%;
  max-width: 8rem;
  padding: 0.6rem;
}

.humanistic_care .welfare-text{
  text-align: left;
}

.humanistic_care .welfare-values{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
}

.humanistic_care .value-block .value{
  font-size: 0.56rem;
  font-weight: 700;
}

.humanistic_care .value-block .value span{
  font-size: var(--custom-text-size1);
  font-weight: 400;
  margin-left: 0.08rem;
}

.humanistic_care .value-block .label{
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
}

.humanistic_care .welfare-text p{
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
  margin-bottom: 0.5rem;
}

.humanistic_care .part4{
  align-items: flex-end;
}

.humanistic_care .part4 .content{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 50%;
  padding-left: 0;
  padding-right: 50%;
}
.humanistic_care .part4 .rural-text p{
  text-align: left;
  /* margin-top: 0.98rem; */
  margin-top: 0.78rem;
}

.humanistic_care .rural-card{
  max-width: 6.5rem;
  padding: 0.5rem 0.6rem;
  text-align: center;
}

.humanistic_care .rural-card .value{
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.1;
}

.humanistic_care .rural-card .value span{
  font-size: var(--custom-text-size1);
  margin-left: 0.08rem;
}

.humanistic_care .rural-card .label{
  font-size: var(--custom-text-size1);
  margin-bottom: 0.2rem;
}

.humanistic_care .rural-card p{
  font-size: var(--custom-text-size1);
  line-height: var(--custom-line-height-15);
  margin: 0;
}
/* 动画效果 - 仅保留过渡类，移除初始隐藏状态 */
.fade-in {
  /* 移除初始隐藏状态，让元素默认显示 */
  opacity: 1;
  transform: translateY(0);
}

/* 保留transition类但不再使用它们 */
.delay-1, .delay-2 {
  /* 这些类现在不产生任何效果，但保留以避免引用错误 */
  display: block;
}

/* 整合的响应式设计 - 移动设备样式 */
@media (max-width: 768px) {

  /* .part0 手机版样式 */
  .humanistic_care section {
      width: 100%;
      height: auto;
      min-height: 100vh;
      align-items: flex-end;
  }
  .humanistic_care .bg {
      width: 100%;
      height: auto;
      min-height: 100vh;
  }

  .humanistic_care .stats {
      flex-direction: column;
      /* gap: 2rem; */
  }

  .humanistic_care .number,
  .humanistic_care .number.decimal {
      font-size: var(--custom-text-size0)
  }

  .humanistic_care .text-container {
      padding-left: 0;
  }

  .humanistic_care .engine-image {
      max-width: 250px;
  }

  .humanistic_care .part0 {
      flex-direction: column;
      justify-content: flex-end;
      background-color: #3d3e43;
      height: 14.4rem;
  }
  .humanistic_care .part0 .bg{
      height: auto;

  }

  .humanistic_care .part0 .content {
      width: 100%;
      max-width: 90%;
      left: 50%;
      right: auto;
      top: 60%;
      transform: translateX(-50%);
      padding: 0 0.5rem;
  }
  .humanistic_care .part1{background-color: #1e4438; height: 16rem;}
  .humanistic_care .part1 .content {
      justify-content: center;
      width: 100%;
      height: 16rem;
      padding: 0;
      padding-bottom: 1rem;
      align-items:flex-end;
  }

  .humanistic_care .part1 .part1-panel {
      width: 100%;
      max-width: 90%;
      padding: 0;
  }

  .humanistic_care .stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .humanistic_care .part1{background-color: #1e4437;}
  .humanistic_care .part2{background-color: #547b9a; height: 14.4rem;}
  .humanistic_care .part3{background-color: #69b0dc; height: 14.4rem;}
  .humanistic_care .part2 .content,
  .humanistic_care .part3 .content
 {
      justify-content: center;
      width: 100%;
      padding: 0;
      padding-bottom: 1rem;
      align-items:flex-end;
  }
  .humanistic_care .part4{display: block;}
  .humanistic_care .part4 .content {
    justify-content: center;
    height: auto;
    width: 100%;
    padding: 0;
    padding-top: 2.34rem;
    text-align: center;
    color: #000;
  }
  .humanistic_care .part4 .bg{height: 100%;}
  .humanistic_care .iso-card,
  .humanistic_care .welfare-card{
      width: 100%;
      max-width: 90%;
  }
  .humanistic_care .welfare-card,
  .humanistic_care .rural-card {
      padding: 0;
  }

  .humanistic_care .iso-metrics {
      gap: 0.3rem;
  }

  /* 通用响应式样式 */



  /* 显示/隐藏不同设备的图片 */
  .pc-pad {
      display: none;
  }

  .mb-only {
      display: block;
  }
}

/* 非移动设备默认显示/隐藏样式 */