@charset "UTF-8";

.alarm-product {
  margin-top: 4.375vw !important;
  margin-bottom: 6.25vw;
}
.alarm-product video{
  cursor: pointer;
}
.alarm-product-banner {
  width: 100%;
  height: 33.8542vw;
}
.alarm-product-banner img {
  width: 100%;
  height: 100%;
}
.alarm-product .alarm-product-introduce {
  color: #231815;
  text-align: center;
  font-family: Montserrat;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin: 2.5vw auto 6.25vw;
}

.alarm-product-title {
  color: #231815;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-style: normal;
  line-height: 150%;
  font-size: 3.125vw;
  text-transform: capitalize;
  margin-bottom: .8333vw;
}
.alarm-product-subTitle {
  color: #231815;
  text-align: center;
  font-family: Montserrat;
  font-size: 1.0417vw;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

/* ========== 视频Tab切换区域 ========== */
.video-tab-container {
  display: flex;
  gap: 2.0833vw;
  margin-top: 2.0833vw;
}

/* 左侧菜单 */
.video-tab-menu {
  width: 18.6458vw;
  flex-shrink: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.video-tab-menu li {
  padding: 0.8333vw;
  border-bottom: 0.05208vw solid #a9a9a9;
  cursor: pointer;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
  min-height: 5.1042vw;
}
.video-tab-menu li span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: #231815;
  font-family: "Montserrat-SemiBold";
  font-size: 1.1458vw;
  font-style: normal;
  line-height: 150%;
  max-height: 3.4375vw;
  word-break: break-word;
}
.video-tab-menu li.active span {
  color: #3967fb;
}
.video-tab-menu li:hover span {
  color: #3967fb;
}

/* 右侧视频区域 */
.video-tab-player {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 26.0417vw;
}
.video-tab-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.alarm-product .interconnection {
  margin: 6.25vw auto;
}

/* ========== Cross-System Interconnection Tab 区域 ========== */
.interconnection-content {
  margin-top: 2.0833vw;
}

/* 顶部4等分Tab */
.interconnection-tabs {
  display: flex;
}
.interconnection-tab {
  width: 18.75vw;
  height: 4.5833vw;
  padding: 0 ;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}
.interconnection-tab span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: #231815;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: .9375vw;
  font-style: normal;
  line-height: 150%;
  max-height: 3.125vw;
  padding: 0 2.0833vw;
  word-break: break-word;
}
.interconnection-tab.active {
  background: #fafafa;
}
.interconnection-tab.active span {
  color: #3967fb;
  font-family: "Montserrat-SemiBold";
}
.interconnection-tab:hover span {
  color: #3967fb;
}

/* 视频播放器 */
.interconnection-player {
  position: relative;
  width: 100%;
  border-radius: 0.4167vw;
  overflow: hidden;
  background: #fafafa;
  min-height: 39.8438vw;
  padding: 2.0833vw;
}
.interconnection-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.interconnection-player .video-control-btn {
  right: 3.6458vw;
  bottom: 3.6458vw;
}

/* ========== AP Mode 视频区域 ========== */
.ap-mode {
  margin: 0 auto;
}
.ap-mode-content {
  margin-top: 2.0833vw;
}
.apMode-player {
  position: relative;
  width: 75vw;
  height: 33.8542vw;
}
.apMode-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ========== Cloud Update 视频列表区域 ========== */
.alarm-product  .cloud-update{
  margin: 6.25vw auto ;
}
.cloud-update-content {
  display: flex;
  gap: 0.8333vw;
  margin-top: 2.0833vw;
  justify-content: center;
}
.cloud-update-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cloud-update-video {
  position: relative;
  width: 24.4271vw;
  height: 28.6458vw;
  overflow: hidden;
}
.cloud-update-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.cloud-update-title {
  color: #000;
  text-align: center;
  font-family: "Montserrat-SemiBold";
  font-size: 1.25vw;
  font-style: normal;
  line-height: 150%;
  margin-top: 1.25vw;
}


.multi-network{
 margin: 0 auto;
}
.multi-network-content {
  margin-top: 2.0833vw;
}
.multi-network-player {
  position: relative;
  width: 75vw;
  height: 33.8542vw;
}
.multi-network-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* ========== 移动端适配 ========== */
@media (max-width: 768px) {
  .alarm-product {
    margin-top: 12.8vw !important;
    margin-bottom: 21.3333vw;
    overflow: hidden;
  }
  .alarm-product-banner {
    width: 100%;
    height: 64vw;
    padding: 0 6.4vw;
  }
  .alarm-product .alarm-product-introduce {
    font-size: 3.7333vw;
    margin: 10.6667vw auto 21.3333vw;
  }

  .alarm-product-title {
    font-size: 8.5333vw;
    margin-bottom: 6.4vw;
  }
  .alarm-product-subTitle {
    font-size: 3.7333vw;
  }
.alarm-product .interconnection {
    margin: 21.3333vw auto;
}
.ap-mode-content{
  margin-top: 6.4vw;
}
.apMode-player{
  width: 100%;
  height: auto;
}
.alarm-product .cloud-update{
   margin: 21.3333vw auto;
}
.multi-network-content{
  margin-top: 6.4vw;
}
.multi-network-player{
  width: 100%;
  height: auto;
}
.video-tab-panes-wrapper{
  padding: 6.4vw 0 !important;
}
  /* 隐藏PC端菜单和卡片，显示移动端下拉 */
  .video-tab-menu,
  .interconnection-tabs,
  .how-to-video .video-tabs,
  .cloud-update-content {
    display: none;
  }

  /* 视频区域 */
  .video-tab-player {
    min-height: 53.3333vw;
    border-radius: 1.0667vw;
  }

  /* ========== Advanced RF Communication 移动端下拉 ========== */
  .video-tab-container-mob {
    display: flex;
    flex-direction: column;
    /* gap: 5.3333vw; */
    margin-top: 4.2667vw;
  }

  .video-tab-container-mob .video-tab-select {
    width: 100%;
  }

  .video-tab-container-mob .video-tab-select .public-select-title {
    height: 10.6667vw;
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    padding: 0 4.2667vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .video-tab-container-mob .video-tab-select .public-select-title .text {
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
  }

  .video-tab-container-mob .video-tab-select .public-select-title .arrow {
    font-size: 6.4vw;
    transition: transform 0.3s ease;
  }

  .video-tab-container-mob .video-tab-select .public-select-title .arrow.rotate {
    transform: rotate(180deg);
  }

  .video-tab-container-mob .video-tab-select .public-select-list {
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    position: relative;
    margin-top: 2.1333vw;
    max-height: 60vw;
    overflow-y: auto;
    display: none;
    padding: 4.2666vw 0 0;
  }

  .video-tab-container-mob .video-tab-select .public-select-list .public-select-item {
    padding: 0 4.2667vw 4.2667vw;
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
    cursor: pointer;
  }

  .video-tab-container-mob .video-tab-select .public-select-list .public-select-item.active {
    color: #3A66FB;
    font-family: "Montserrat-SemiBold";
  }

  /* ========== Cross-System Interconnection 移动端下拉 ========== */
  .interconnection-mob {
    display: flex;
    flex-direction: column;
    /* gap: 5.3333vw; */
    margin-top: 4.2667vw;
  }

  .interconnection-mob .interconnection-select {
    width: 100%;
  }

  .interconnection-mob .interconnection-select .public-select-title {
    height: 10.6667vw;
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    padding: 0 4.2667vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .interconnection-mob .interconnection-select .public-select-title .text {
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
  }

  .interconnection-mob .interconnection-select .public-select-title .arrow {
    font-size:  6.4vw;
    transition: transform 0.3s ease;
  }

  .interconnection-mob .interconnection-select .public-select-title .arrow.rotate {
    transform: rotate(180deg);
  }

  .interconnection-mob .interconnection-select .public-select-list {
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    position: relative;
    margin-top: 2.1333vw;
    display: none;
    padding:4.2666vw 0 0;
  }

  .interconnection-mob .interconnection-select .public-select-list .public-select-item {
    padding: 0 4.2667vw 4.2667vw;
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
    cursor: pointer;
  }

  .interconnection-mob .interconnection-select .public-select-list .public-select-item.active {
    color: #3A66FB;
    font-family: "Montserrat-SemiBold";
  }

  .interconnection-mob .interconnection-player {
    min-height: 53.3333vw;
    border-radius: 1.0667vw;
    overflow: hidden;
    padding: 0;
  }

  .interconnection-mob .interconnection-player .video-control-btn {
    right: 4.2667vw;
    bottom: 4.2667vw;
  }

  /* ========== How-to-Video 移动端下拉 ========== */
  .how-to-video-select {
    width: 100%;
    margin-top: 6.4vw;
    /* margin-bottom: 4.2667vw; */
  }

  .how-to-video-select .public-select-title {
    height: 10.6667vw;
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    padding: 0 4.2667vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .how-to-video-select .public-select-title .text {
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
    display: flex;
    align-items: center;
    gap: 2.1333vw;
  }

  .how-to-video-select .public-select-title .text .iconfont {
    font-size: 4.2667vw;
  }

  .how-to-video-select .public-select-title .arrow {
    font-size:  6.4vw;
    transition: transform 0.3s ease;
  }

  .how-to-video-select .public-select-title .arrow.rotate {
    transform: rotate(180deg);
  }

  .how-to-video-select .public-select-list {
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    position: relative;
    margin-top: 2.1333vw;
    display: none;
    padding: 4.2666vw 0 0;
  }

  .how-to-video-select .public-select-list .public-select-item {
    padding: 0  4.2667vw  4.2667vw ;
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 2.1333vw;
  }

  .how-to-video-select .public-select-list .public-select-item .iconfont {
    font-size: 4.2667vw;
  }

  .how-to-video-select .public-select-list .public-select-item.active {
    color: #3A66FB;
    font-family: "Montserrat-SemiBold";
  }

  /* ========== Cloud Update 移动端下拉 ========== */
  .cloud-update-content-mob {
    display: flex;
    flex-direction: column;
    margin-top: 6.4vw;
  }

  .cloud-update-content-mob .cloud-update-select {
    width: 100%;
    /* margin-bottom: 4.2667vw; */
  }

  .cloud-update-content-mob .cloud-update-select .public-select-title {
    height: 10.6667vw;
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    padding: 0 4.2667vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cloud-update-content-mob .cloud-update-select .public-select-title .text {
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
  }

  .cloud-update-content-mob .cloud-update-select .public-select-title .arrow {
    font-size:  6.4vw;
    transition: transform 0.3s ease;
  }

  .cloud-update-content-mob .cloud-update-select .public-select-title .arrow.rotate {
    transform: rotate(180deg);
  }

  .cloud-update-content-mob .cloud-update-select .public-select-list {
    background-color: #FAFAFA;
    border: 0.2667vw solid rgba(35, 24, 21, 0.10);
    border-radius: 0;
    position: relative;
    margin-top: 2.1333vw;
    display: none;
    padding: 4.2666vw 0 0;
  }

  .cloud-update-content-mob .cloud-update-select .public-select-list .public-select-item {
    padding: 0 4.2667vw 4.2667vw;
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 3.7333vw;
    line-height: 150%;
    cursor: pointer;
  }

  .cloud-update-content-mob .cloud-update-select .public-select-list .public-select-item.active {
    color: #3A66FB;
    font-family: "Montserrat-SemiBold";
  }

  .cloud-update-content-mob .cloud-update-video-mob {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .cloud-update-content-mob .cloud-update-video-mob video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }

  .cloud-update-content-mob .cloud-update-title-mob {
    color: #000;
    text-align: center;
    font-family: "Montserrat-SemiBold";
    font-size: 4.2667vw;
    font-style: normal;
    line-height: 150%;
    margin-top: 4.2667vw;
  }
  .network-cameras-L4 .container .cameras-content .tab-pane-title{
    text-align: center;
  }
  .alarm-product-mob-title{
    color: #231815;
    font-family: "Montserrat-SemiBold";
    font-size: 8.5333vw;
    font-style: normal;
    line-height: 150%;
    text-transform: capitalize;
    margin: 6.4vw 0 5.8667vw;
    padding: 0 6.4vw;
  }
}