/* ==========  a_system  ========== */
.container {
  max-width: 72.9167vw !important;
}
.a_system {
  width: 100%;
  padding-top: 7.5vw;
}
.a_system:nth-child(2) {
  padding-top: 4.1667vw;
}

/* --- 标题 --- */
.a_system .modalXH_title {
  color: #fff;
  font-size: 2.9167vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 84px */
}

/* --- 描述 --- */
.a_system .a_system_des {
  color: #fff;
  font-size: 1.0417vw;
  line-height: 150%;
  margin: 2.5vw 0;
}

/* --- 图片 / 视频 容器 --- */
.a_system .a_system_img {
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.a_system .a_system_img img,
.a_system .a_system_img video {
  width: 100%;
}
.a_system .a_system_img .a_system_name {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.4583vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 42px */
  margin-top: 1.0417vw;
}
.a_system .a_system_img .alarms {
  margin-bottom: 4.1667vw;
}
.a_system .a_system_img .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5vw;
  height: 5vw;
  cursor: pointer;
}

/* --- 多图区域 --- */
.a_system .multi-imgs {
  display: flex;
  gap: 2.5vw;
}
.a_system .multi-imgs .a_system_img img {
  border-radius: 0.625vw;
}

/* --- 图文左右画廊 --- */
.a_system .gallery {
  display: flex;
  margin-top: 4.1667vw;
}
.a_system .gallery .left {
  max-width: 32.5vw;
  margin-right: 4.1667vw;
  margin-left: 2.0833vw;
}
.a_system .gallery .left img {
  width: 100%;
  height: 18.75vw;
  object-fit: cover;
  border-radius: 0.5208vw;
}
.a_system .gallery .right {
  flex: 1;
  margin: 0;
  margin-right: 2.0833vw;
}
.a_system .gallery .right:first-child {
  padding-top: 0;
}
.a_system .gallery .right li {
  padding: 1.0417vw;
  border-bottom: 0.0521vw solid #32394f;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.a_system .gallery .right li:first-child {
  padding-top: 0;
}
.a_system .gallery .right li .title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.a_system .gallery .right li .title-box .name {
  width: 85%;
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 33px */
  color: #fff;
  cursor: default;
}
.a_system .gallery .right li .title-box .icon-back {
  cursor: pointer;
  padding: 0.4167vw;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
}
.a_system .gallery .right li .title-box .icon-back .iconfont {
  font-size: 1.25vm;
  color: #fff;
  line-height: 1;
}
.a_system .gallery .right li .two-point {
  width: 0.0521vw;
  height: 1.0127vw;
  background-color: #757575;
  margin-right: 0.8333vw;
}
.a_system .gallery .right li .desc-box {
  display: flex;
  flex-direction: column;
  gap: 0.625vw;
} 
.a_system .gallery .right li .two-name {
  width: fit-content;
  color: #fff;
  -webkit-text-stroke-width: 0.0505vw;
  -webkit-text-stroke-color: #fff;
  font-size: 1.2153vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.a_system .gallery .right li .description {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  display: flex;
}
.a_system .gallery .right li .description .point {
  width: 0.4167vw;
  height: 0.4167vw;
  border-radius: 50%;
  margin-right: 0.8333vw;
  margin-top: 0.4688vw;
  font-size: unset;
  background-color: #439ef9;
}
.a_system .gallery .right li .description span {
  width: calc(100% - 1.25vw);
  color: rgba(250, 250, 250, 0.67);
  font-size: 0.9375vw;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 27px */
}
.a_system .gallery .right li.active .description {
  margin-top: 1.4063vw;
  max-height: 10.4167vw;
}

/* --- 图文左右互换（isTwo） --- */
.a_system .isTwo {
  display: flex;
}
.a_system .isTwo .left,
.a_system .isTwo .right {
  display: flex;
  flex-direction: column;
}
.a_system .isTwo .description {
  display: none !important;
}
.a_system .isTwo .left {
  order: 3;
  margin-right: 0;
  width: 55.56%;
  max-width: 37.9167vw;
}
.a_system .isTwo .left img {
  width: 100%;
  height: 19.01vw;
  object-fit: cover;
}
.a_system .isTwo .right {
  width: 40%;
  max-width: 30vw;
  order: 2;
  margin-right: 2.5vw;
}
.a_system .isTwo .right li {
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  border-bottom: 0.0521vw solid #32394f;
  background: #111627;
  padding: 1.5365vw;
  height: fit-content;
  max-height: fit-content;
  transition: all .6s ease;
}
.a_system .isTwo .right li .two-name {
  margin-right: 2.9167vw;
  color: #757575;
  -webkit-text-stroke-color: #757575;
}
.a_system .isTwo .right li .name {
  font-size: 0.9375vw;
  font-family: "Montserrat-SemiBold";
  color: #757575;
}
.a_system .isTwo .right li .desc-box .desc {
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 0.8333vw;
  display: none;
}
.a_system .isTwo .right li.active .desc-box .desc {
  display: block;
}

.a_system .isTwo .right li.active .two-point {
  background-color: #439ef9;
}
.a_system .isTwo .right li.active .two-name {
  color: #439ef9;
  -webkit-text-stroke-color: #439ef9;
}
.a_system .isTwo .right li.active .name {
  color: #439ef9;
}

/* 独立 isTwo 画廊（兼容原 .gallery.isTwo） */
.a_system .gallery.isTwo {
  display: flex;
  justify-content: space-between;
}
.a_system .gallery.isTwo .left {
  order: 3;
  max-width: 32.9167vw;
  margin-right: 0;
  margin-left: 0;
}
.a_system .gallery.isTwo .right {
  height: fit-content;
  order: 2;
  width: 100%;
  max-width: 100%;
  margin-right: 2.5vw;
}
.a_system .gallery.isTwo .right li {
  padding: 1.25vw;
}
.a_system .gallery.isTwo .right li .title-box {
  width: 100%;
}
.a_system .gallery.isTwo .right li .title-box .name {
  width: 100%;
}
.a_system .gallery.isTwo .right li .description {
  display: none !important;
}


.a_system .gallery.isTwo .right li:last-child {
  border-bottom: none;
}
.a_system .gallery.isTwo .right li.active .name {
  color: #439ef9 !important;
}
.a_system .gallery.isTwo .right li.active .description {
  display: none !important;
}
.a_system .gallery.isTwo .right li.active {
  max-height: fit-content;
  padding: 1.0417vw 1.25vw;
}

/* ==========  wizseek  ========== */
.wizseek {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wizseek .a_system_des {
  margin-top: 2.0833vw;
  margin-bottom: 4.1667vw;
}
.title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.title-box .iconfont{
  font-size: 0.8333vw;
}
/* ==========  keyBenefit  ========== */
.keyBenefit {
  padding-top: 7.2917vw;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.keyBenefit .gallery {
  margin-top: 2.0833vw;
}
.modalXH {
  /* background-image: url("https://www2.dahuasecurity.com/asset/upload/uploads/image/20250825/BG-HOMEPAGE-(1).png"); */
  padding-bottom: 10.4167vw;
}

/* --------- banner --------- */
.modalXH_banner {
  position: relative;
}
.modalXH_banner img {
  width: 100%;
  /* height: 100%; */
}
.modalXH_banner_btn {
  position: absolute;
  max-width: 72.9167vw;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.modalXH_banner_btn_a {
  position: absolute;
  border-radius: 3.4375vw;
  background: linear-gradient(90deg, #1083fd 0%, #6507dd 100%);
  box-shadow: 0 0.4167vw 0.7344vw 0 rgba(9, 5, 40, 0.1),
    0.2604vw 0.3125vw 0.3646vw 0 rgba(196, 232, 255, 0.65) inset;
  bottom: 7.1354vw;
  color: #fff;
  width: 9.5833vw;
  height: 2.7083vw;
  font-size: 0.9375vw;
  font-weight: 600;
  text-align: center;
  padding: 0.7292vw 1.1458vw;
  text-shadow: 0 0.1042vw 0.2083vw rgba(10, 69, 179, 0.5);
}

/* --------- content --------- */
.modalXH_content {
  max-width: 72.9167vw;
}
.modalV-title {
  margin-top: 7.5vw;
  margin-bottom: 2.5vw;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 2.9167vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}
.wizseek {
  width: fit-content;
  max-width: 27.0833vw;
  display: flex;
  margin: 0 auto;
  padding-top: 7.5vw;
  justify-content: center;
}
.alarms-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 7.5vw;
}
.alarms-logo span {
  font-size: 3.6458vw;
  font-style: normal;
  font-weight: 700;
  line-height: 150%; /* 105px */
  background: linear-gradient(90deg, #bc5aff 0%, #34acff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modalXH_title {
  color: #fff;
  font-size: 2.9167vw;
  font-weight: 700;
  line-height: 150%;
}

/* --------- 产品列表 --------- */
.productsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.0833vw 2.0833vw;
  margin-top: 1.6667vw;
}
.productsItem {
  border-radius: 0.625vw;
  border: 0.0521vw solid #32394f;
  background: #141928;
  padding: 1.25vw 0;
  text-align: center;
}
.productsItem p {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 1.1458vw;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
.productsItem img {
  margin: 1.1458vw auto;
  width: 100%;
  max-width: 8.9583vw;
  height: 8.9583vw;
}
.viewMore {
  padding: 0.4167vw 1.4583vw;
  border-radius: 3.2292vw;
  background: #1f2c3f;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 30px */
  width: fit-content;
  margin: 0 auto;
  margin-top: 1.25vw;
  display: block;
  box-shadow: unset;
  transition: all 0.3s linear;
}
.viewMore:hover {
  color: #fff;

  border-radius: 3.4375vw;
  background: linear-gradient(90deg, #1083fd 0%, #6507dd 100%);
  box-shadow: 0 0.4167vw 0.0459vw 0 rgba(9, 5, 40, 0.1),
    0.2604vw 0.3125vw 0.3646vw 0 rgba(112, 123, 129, 0.5) inset;
  cursor: pointer;
}

/* ==================================================
   响应式
================================================== */
@media screen and (max-width: 1440px) {
  .modalXH {
    padding-bottom: 6.1111vw;
  }
  .productsList {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .productsList {
    grid-template-columns: repeat(1, 1fr);
    gap: 4.2666vw;
    margin-top:6.4vw;
  }
  .productsItem .viewMore {
    padding: 1.6vw 7.4667vw;
    font-size: 3.7333vw;
    border-radius: 6.4vw;
    margin-top: 3.2vw;
  }
  .alarms-logo {
    margin-top: 8.5333vw;
    margin-bottom: 8.5333vw;
  }
  .alarms-logo img {
    max-width: 12.8vw;
  }
  .alarms-logo span {
    font-size: 6.4vw;
  }
  .modalV-title {
    font-size: 8.5333vw;
    margin-top: 16vw;
  }
  .wizseek {
    max-width: 100%;
  }
  .container {
    max-width: 100%!important;
  }
  .a_system .modalXH_title {
    font-size: 4.2666vw;
  }
  .modalXH_banner {
    margin-top: 12.8vw;
  }
  .a_system .a_system_des {
    font-size: 3.733vw;
  }
  .a_system .multi-imgs {
    flex-direction: column;
  }
  .a_system .a_system_img .a_system_name {
    font-size: 3.733vw;;
  }
  .a_system .gallery {
    flex-direction: column;
  }
  .a_system .gallery .left {
    max-width: 100%;
    margin: 0;
  }
  .a_system .gallery .left img {
    height: 48vw;
    border-radius: 3.2vw;
  }
  .a_system .gallery .right {
    margin-right: 0;
  }
  .a_system .gallery .right li .title-box .name {
    font-size: 4.2666vw;
  }
  .a_system .gallery .right li .description span {
    font-size: 3.733vw;
  }
  .a_system .gallery .right li .title-box .icon-back {
    padding: 8px;
  }
  .a_system .gallery .right li .title-box .icon-back .iconfont {
    font-size: 3.733vw;
  }
  .a_system .gallery .right li {
    padding: 3.733vw;;
  }
  .a_system .gallery .right li:first-child {
    padding-top: 3.733vw;
  }
  .a_system .gallery .right li .description .point {
    width: 1.6vw;
    height: 1.6vw;
    margin-right: 1.6vw;
    margin-top: 1.6vw;
  }
  .a_system .gallery.isTwo .right {
    margin-right: 0;
  }
  .a_system .gallery.isTwo .right li.active {
    padding: 3.733vw;
  }
  .a_system .gallery.isTwo .right li {
    padding: 3.733vw;
  }
  .a_system .gallery .right li .two-point {
    width: 1px;
    height: 4.2666vw;
    margin-right: 1.6vw;
  }
  .a_system .isTwo .right li .two-name {
    font-size: 4.2666vw;
  }
  .a_system .gallery .right li .desc-box {
    gap: 3.2vw;
  }
  .a_system .isTwo .right li .name {
    font-size: 4.2666vw;
  }
  .a_system .isTwo .right li .desc-box .desc {
    font-size: 3.733vw;
  }
  .a_system .gallery.isTwo .left {
    max-width: 100%;
    width: 100%;
    margin-top: 3.733vw;
  }
  .productsItem {
    padding: 4.2666vw;
  }
  .productsItem p {
    font-size: 4.2666vw;
  }
  .productsItem img {
    max-width: 17.066vw;
    height: 17.066vw;
    margin: 2.1333vw;
  }
}