.qf-strength,
.qf-strength *{
  box-sizing:border-box;
  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
}

.qf-strength{
  padding:52px 18px;
  background:#f6f6f8;
  color:#111;
}

.qf-strength__in{
  max-width:1440px;
  margin:auto;
}

.qf-strength h2{
  margin:0 0 34px;
  font-size:40px;
  font-weight:300;
}


/* =========================
   顶部大图
========================= */

.qf-strength__hero{
  overflow:hidden;
  border-radius:6px 6px 0 0;
}

.qf-strength__hero img{
  display:block;
  width:100%;
  aspect-ratio:2.45/1;
  object-fit:cover;
}


/* =========================
   六项工厂实力
========================= */

.qf-strength__facts{
  display:grid;
  grid-template-columns:repeat(6,1fr);

  gap:0;

  padding:24px 18px;

  background:
    linear-gradient(
      135deg,
      #1268ec,
      #0738bd
    );

  color:#fff;

  border-radius:0 0 6px 6px;

  overflow:visible;
}


.qf-strength__fact{
  position:relative;

  text-align:center;

  padding:4px 18px;

  z-index:1;
}


/* 每项之间白色分隔线 */

.qf-strength__fact:not(:last-child)::after{
  content:"";

  position:absolute;

  right:0;
  top:10%;

  width:1px;
  height:80%;

  background:
    rgba(255,255,255,.45);
}


/* 标题 */

.qf-strength__fact b{
  display:block;

  margin:0 0 6px;

  font-size:16px;

  font-weight:700;
}


/* 描述 */

.qf-strength__fact span{
  display:block;

  font-size:15px;
  line-height:1.4;

  font-weight:300;
}


/* =========================================
   六项实力 Hover 联动
========================================= */

@media (min-width:901px) and (hover:hover) and (pointer:fine){

  .qf-strength__fact{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease,
      filter .32s ease;

    transform-origin:center center;
  }


  .qf-strength__fact b{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease;
  }


  .qf-strength__fact span{
    transition:
      transform .38s cubic-bezier(.22,.61,.36,1),
      opacity .32s ease;
  }


  /* 鼠标进入蓝色区域后，
     所有项目先缩小、变淡 */

  .qf-strength__facts:hover
  .qf-strength__fact{
    transform:scale(.91);
    opacity:.48;
    filter:saturate(.85);
  }


  /* 当前项目放大 */

  .qf-strength__facts
  .qf-strength__fact:hover{
    transform:scale(1.12);
    opacity:1;
    filter:none;
    z-index:10;
  }


  /* 当前标题再突出一点 */

  .qf-strength__facts
  .qf-strength__fact:hover b{
    transform:scale(1.06);
  }


  /* 当前描述轻微放大 */

  .qf-strength__facts
  .qf-strength__fact:hover span{
    transform:scale(1.02);
  }

}


/* =========================
   下方四张图片
========================= */

.qf-strength__gallery{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;

  margin-top:14px;
}


.qf-strength__card{
  overflow:hidden;

  border-radius:6px;

  background:#fff;
}


/* 图片容器 */

.qf-strength__photo{
  width:100%;

  aspect-ratio:.9/1;

  overflow:hidden;

  background:#eee;
}


.qf-strength__photo img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .35s ease;
}


/* 鼠标经过轻微放大 */

.qf-strength__card:hover
.qf-strength__photo img{
  transform:scale(1.04);
}


/* 下方文字 */

.qf-strength__label{
  padding:13px 8px;

  text-align:center;

  color:#0759ff;

  font-size:16px;

  font-weight:700;
}


/* =========================
   平板
========================= */

@media(max-width:900px){

  .qf-strength__facts{
    grid-template-columns:
      repeat(3,1fr);
  }


  .qf-strength__fact::after{
    display:block;
  }

  .qf-strength__fact:nth-child(3n)::after{
    display:none;
  }


  .qf-strength__gallery{
    grid-template-columns:
      repeat(2,1fr);
  }

}


/* =========================
   手机
========================= */

@media(max-width:600px){

  .qf-strength{
    padding:34px 14px;
  }


  .qf-strength h2{
    margin-bottom:22px;

    font-size:30px;
  }


  .qf-strength__hero img{
    aspect-ratio:1.45/1;
  }


  .qf-strength__facts{
    grid-template-columns:
      repeat(2,1fr);

    padding:16px 8px;
  }


  .qf-strength__fact{
    padding:8px 12px;
  }


  .qf-strength__fact::after{
    display:none;
  }

  .qf-strength__fact:nth-child(odd)::after{
    content:"";

    display:block;

    position:absolute;

    right:0;
    top:10%;

    width:1px;
    height:80%;

    background:
      rgba(255,255,255,.45);
  }


  .qf-strength__fact b,
  .qf-strength__label{
    font-size:16px;
  }


  .qf-strength__fact span{
    font-size:16px;
  }


  .qf-strength__gallery{
    gap:8px;
  }


  .qf-strength__label{
    padding:10px 5px;

    min-height:58px;
  }

}