:root {
  /* #00965e 25cb68  green-1:#55c927  green-2:#23ff9f
    w文字绿色 #02bb54
    */
  --primary-color: #02bb54;
  --secondary-color: #e3e3e3;
  --text-color-lightest: #e7e9ec;
  /* 白色文字 */
  --text-color-white: #fff;
  /* 主体深色文字 */
  --text-color-darker: #1f2021;
  /* 灰色文字 */
  --text-color-gray: #8b8b8b;
  --text-color-gray2: #aaa;
  /* 深灰色文字 */
  --text-color-dark-gray: #727272;
  /* 浅灰色文字 */
  --text-color-light-gary: #c6c6c6;
  /* 遮罩层颜色 */
  --backdrop-color: rgba(31, 32, 33, 0.75);
  /* 1f2021 */
}

.proview {
  width: unset;
  width: 98%;
  max-width: 1200px;
  /* background-color: violet; */
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  margin-bottom: 60px;
}

.protop {
  margin-bottom: 40px;
}

.protop .protop-title {
  background: url(../images/bg/bg-title.png) repeat-x;
  border-left: 6px solid #02bb54;
  padding: 5px 10px;
  margin-bottom: 30px;
}

.protop .protop-title h1 {
  color: var(--text-color-darker);
  font-size: 1.5rem;
  font-weight: 600;
  text-shadow: 0px 1px 1px #727272;
  letter-spacing: 1px;
}

.protop .protop-imgbox {
  overflow: hidden;
  text-align: center;
  width: 80%;
  margin: 10px auto 30px;
}

.protop .protop-imgbox img {
  /* 图片在一定大小容器内自动缩放 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* 等比例缩放 */
  object-fit: cover;
  /* 顶部居中对齐 */
  object-position: top center;
}

.protop .protop-subtitle {
  padding: 5px 10px;
}

.protop .protop-subtitle p {
  font-size: 1.15rem;
  color: var(--text-color-darker);
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.procontent {
  margin-bottom: 30px;
}

.procontent-item {
  margin-bottom: 50px;
}

.procontent-item hr {
  border: none;
  border-top: 1px dotted #d3d3d3;
  margin-top: 15px;
  margin-bottom: 15px;
  word-wrap: break-word;
  word-break: normal;
}

.procontent-item-title {
  border-left: 6px solid #02bb54;
  border-top: 1px solid var(--text-color-light-gary);
  border-bottom: 1px solid var(--text-color-light-gary);
  padding: 5px 10px;
  margin-bottom: 15px;
}

.procontent-item-title h3 {
  font-size: 1.2rem;
  /* font-weight: 600; */
  color: #02bb54;
}

.procontent-item-smbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
  color: var(--text-color-darker);
  padding-left: 5px;

}

.imgbox-center {
  margin: 10px auto 10px;
}

.textarea-title {
  font-size: 1.1rem;
  /* font-weight: 600; */
  line-height: 30px;
  color: #02bb54;
  letter-spacing: 1px;
}

.textarea-subtitle {
  font-size: 1rem;
  line-height: 1.7rem;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.hh {
  line-height: 2rem;
}

.procontent-item-imgbox {
  background-color: #fff;
  /* border: 1px solid var(--text-color-lightest); */
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* max-height: 280px; */
}

.procontent-item-imgbox p {
  width: 100%;
  text-align: center;
}

.procontent-item-imgbox.cell {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.03);
}

.procontent-item-imgbox img {
  width: 100%;
  object-fit: cover;
}

.columsingle {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.columdouble {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.procontent-item-flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.procontent-item-flexbox .width50 {
  width: 48%;
}

.width50 {
  width: 48%;
}

.width40 {
  width: 38%;
}

.width60 {
  width: 58%;
}

.width30 {
  width: 28%;
}

.width70 {
  width: 68%;
}

.mb30 {
  margin-bottom: 30px;
}

/* .procontent-item-flexbox .width40 {
    width: 38%;
}

.procontent-item-flexbox .width60 {
    width: 58%;
}

.procontent-item-flexbox .width30 {
    width: 28%;
}

.procontent-item-flexbox .width70 {
    width: 68%;
} */

.width80 {
  width: 78%;
  margin: 0 auto;
}

.fz .procontent-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.fz .procontent-item.half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.fz .procontent-item-imgboxes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.fz .procontent-item-textarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.fz .imgbox {
  width: 24%;
  display: flex;
  margin-right: 5px;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
}

.fz .imgbox p {
  text-align: center;
}




.imgbox3 {
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.imgbox3 .procontent-item-imgbox {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  background-color: var(--secondary-color);
  text-align: center;
  padding: 3px;
  /* height: 250px; */
  width: 30%;
}

.imgbox3 .procontent-item-imgbox p {
  height: 28px;
  line-height: 28px;

}

.imgbox21 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
}

.imgbox21 .procontent-item-imgbox {
  margin: 20px;
}

.half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}


/* 监控设备样式 */

.procontent-item.jk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
  background-color: rgba(0, 0, 0, 0.03);
  padding: 10px;
}

.jk2 {
  background-color: rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
}

.jk2 p {
  padding: 10px;
}

.jk3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
}

.procontent-item.jk p {
  line-height: 1.5rem;
  margin-bottom: 5px;
}

.titlejk {
  color: #02bb54;
  font-size: 1.2rem;
  margin-top: 15px;
}

.protop-subtitle.dp5title p {
  color: #02bb54;
  font-weight: bold;
  font-size: 1.5rem;
}


/* 周边产品样式 */

.procontent-zb {
  display: flex;
  flex-direction: column;
}

.procontent-zb .zb-textarea {
  line-height: 2rem;
  margin-bottom: 40px;
}

.proguigetable table {
  width: 98%;
  margin: 30px auto 20px;
  border-spacing: 0;
  border-collapse: collapse;
}

.proguigetable table>thead>tr>th {
  border: 1px solid #b9b7b7;
  padding: 5px;
  line-height: 2rem;
  background-color: #e7e9ec;
}

.proguigetable table>tbody>tr>td {
  border: 1px solid #b9b7b7;
  padding: 5px;
  line-height: 2rem;
}

.td_glay {
  /* background-color: #f3f1f1; */
  min-width: 100px;
}

.smbox-column {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: column;
}

.mb20 {
  margin-bottom: 20px;
}

.imgboxsmall {
  max-width: 280px;
  height: unset;
}

.fleximgbox {
  height: 100%;
}

.koki-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.koki-item h4 {
  border-left: 6px solid #02bb54;
  border-top: 1px solid var(--text-color-light-gary);
  border-bottom: 1px solid var(--text-color-light-gary);
  padding: 5px 10px;
  margin-bottom: 15px;
  width: 100%;
  color: #02bb54;
  font-weight: bold;
  font-size: 1.15rem;
}

.koki-n {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  grid-column-gap: 15px;
  width: 100%;
}

.koki-n .item {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.koki-n .titlesub {
  /* color: #02bb54; */
  font-weight: bold;
}

.koki-n .box-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  justify-items: center;
}

.koki-n .box-img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

/* .box-text {
    width: 100%;
} */

.procontent-footer {
  /* width: 50%; */
  margin: 80px auto 40px;
  display: flex;
  justify-content: space-around;
  justify-items: center;
  gap: 80px;
}

.btn-download,
.btn-back {
  text-align: center;
  width: 300px;
  padding: 15px 35px;
  border: 1px solid #02bb54;
  color: #02bb54;
  font-size: 1rem;
  cursor: pointer;
  /* 去掉按钮蓝色边框（chrom浏览器） */
  outline: none;
  cursor: pointer;
  transition: 0.4s;
}

.btn-more {
  padding: 10px 38px;
  /* background-color: #02bb54; */
  background: none;
  border: 1px solid var(--text-color-light-gary);
  color: var(--text-color-darker);
  font-size: 1.2rem;
  cursor: pointer;
  /* 去掉按钮蓝色边框（chrom浏览器） */
  outline: none;
  cursor: pointer;
  transition: 0.4s;
}

.btn-download:hover,
.btn-back:hover {
  background-color: #02bb54;
  border: 1px solid #02bb54;
  color: #fff;
}

.btn-more:hover {
  background-color: #02bb54;
  border: 1px solid #02bb54;
  color: var(--text-color-darker);
  outline: none;
}

@media (max-width: 900px) {
  .proview {
    width: 95%;
  }

  .procontent-item-flexbox {
    flex-wrap: wrap;
  }

  .procontent-item-flexbox .width50 {
    width: 100%;
  }

  .procontent-item-imgbox {
    max-width: 350px;
    margin: 0 auto;
  }

  .w450 {
    max-width: 450px;
  }

  .procontent-item-smbox {
    grid-template-columns: 1fr;
  }

  .half {
    grid-template-columns: 1fr;
  }

  .width50,
  .width40,
  .width60,
  .width30,
  .width70 {
    width: 100%;
  }

}

@media (max-width: 600px) {
  .logo h1 {
    display: none;
  }

  .protop .protop-title h1 {
    font-size: 1.3rem;
  }

  .protop .protop-imgbox {
    width: 95%;
  }

  .protop {
    margin-bottom: 20px;
  }

  .product-btn {
    margin: 10px 5px;
  }

  .procontent-item.jk,
  .jk3 {
    grid-template-columns: 1fr;
  }

  .procontent-item-flexbox .width40,
  .procontent-item-flexbox .width60,
  .procontent-item-flexbox .width50 {
    width: 98%;
  }

  .protop .protop-subtitle p {
    font-size: 1rem;
  }

  .procontent-footer {
    margin: 20px auto;
  }

  .koki-n .box-img {
    justify-content: center;
    -webkit-justify-content: center;
    margin: 20px;
  }

  .koki-n .box-img img {
    margin-bottom: 10px;
  }
}