* {
  margin: 0;
  padding: 0;
}

.head-top {
  -webkit-transition: all .67s;
  -moz-transition: all .67s;
  -ms-transition: all .67s;
  -o-transition: all .67s;
  transition: all .6s;
  position: relative;
  will-change: transform auto;
  width: 100%;
  height: var(--height);
  background-size: cover;
  background-position: center center;
  display: flex;
  background-image: url(http://www.zoomsys.com.cn/assets/gywm-banner-a34cc3fc.png);
  height: 450px;
}

.router-link-active {
  color: #70affe !important
}

.head-top img {
  position: absolute;
  left: 16%;
  top: 10px;
  width: 120px;
  height: 35px
}

* {
  margin: 0;
  padding: 0;
}

.text-content {
  font-family: SourceHanSansMedium, sans-serif;
  position: relative;
  height: 100%;
  min-width: 65%;
  margin: 0 auto;
  animation: first-b41e4dee 1s forwards
}

.text-content .title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  font-size: 40px;
  font-family: SourceHanSansBold, sans-serif;
  color: #367eff;
  letter-spacing: 4px;
  top: 40%;
  left: 0
}

.text-content .content {
  position: absolute;
  top: 43%;
  width: 545px;
  margin-top: 30px;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 2px;
  color: #595758;
  font-family: SourceHanSansLight, sans-serif;
  white-space: pre-line
}

.text-content .two {
  font-size: 48px;
  color: #367eff;
  line-height: 64px;
  width: max-content;
  position: absolute;
  display: block;
}

.head-top .nav {
  font-family: SourceHanSansNormal, sans-serif;
  position: absolute;
  right: 13%;
  top: 16px;
  text-align: center;
  display: flex
}

.head-top .nav>div {
  position: relative;
  width: max-content;
  padding: 0 22px
}

.head-top .nav a,
.head-top .nav span {
  font-size: 18px;
  color: #79797b;
  text-decoration: none;
  letter-spacing: 1.5px;
  text-align: center;
  z-index: 10;
  cursor: pointer
}


/* tabs区域 */
.tabsHeard {
  width: 1200px;
  margin: 36px auto 54px;
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid rgb(209, 210, 213);
}

/* tabs内容区域 */
.tabmain {
  width: 1004px;
  margin: 0px auto;

}

.tabmain .contents {
  margin-bottom: 48px;
  width: 100%;
}

.tabmain .contents>div {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.tabmain .contents .icons {
  width: 15px;
  height: 15px;
  background-color: rgb(82, 109, 255);
  display: inline-block;
}

.tabmain .contents .titles {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-family: SourceHanSansNormal, sans-serif;
  margin-left: 18px;
}

.tabmain .text {
  text-align: justify;
  box-sizing: content-box;
  color: rgb(74, 88, 113);
  font-size: 16px;
  line-height: 26px;
  font-family: SourceHanSansLight, sans-serif;
  margin-bottom: 66px;
  width: 100%;
  padding: 10px 20px;
  background-color: rgb(248, 248, 248);
  letter-spacing: 2px;
}

.tabmain .contents>div:nth-child(2) {
  width: 1004px;
  color: rgb(74, 88, 113);
  text-align: justify;
  font-size: 16px;
  line-height: 26px;
  font-family: SourceHanSansLight, sans-serif;
}

.tabmain .neirong {
  letter-spacing: 2px;

}

.tabmain .contents .table {
  width: 800px;
  height: 113px;
  padding-top: 28px;
  padding-bottom: 28px;
  margin: auto;
}

.tabmain .contents table {
  border-collapse: collapse;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  unicode-bidi: isolate;
  border-color: inherit;
}

.tabmain .contents tr:nth-child(2n+1) {
  background-color: rgb(233, 236, 246);
}

.tabmain .contents tr:nth-child(2n) {
  background-color: rgb(207, 214, 236);
}

.tabmain .contents th {
  height: 27px;
  width: 266px;
  text-align: left;
  vertical-align: top;
  padding-left: 10px;
  background-color: rgb(72, 116, 203);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
  margin-bottom: 1px;
  font-size: 17px;
  font-weight: 600;
}

tr {
  display: table-row;
  vertical-align: inherit;
  unicode-bidi: isolate;
  border-color: inherit;
}

.tabmain .title-bottom {
  width: 1004px;
  margin: 32px auto;
  color: rgb(0, 0, 0);
  font-family: SourceHanSansNormal, sans-serif;
  font-size: 22px;
  text-align: center;
}

.tabmain .title-content {
  width: 1004px;
  text-align: center;
  color: rgb(74, 88, 113);
  font-size: 16px;
  line-height: 26px;
  font-family: SourceHanSansLight, sans-serif;
  margin: 48px auto;
}

.tabmain .contents .content-item {
  width: 940px;
  margin: 28px auto 56px;
  display: flex;
  flex-wrap: wrap;
}

.tabmain .contents>.content-item .item {
  width: 233px;
  display: flex;
  margin-bottom: 56px;
  position: relative;
  margin-right: 80px;
  margin-top: 10px;
}

.tabmain .contents>.content-item .icon1 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: rgb(82, 109, 255);
}

.text1 {
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  color: rgb(82, 109, 255);
  position: absolute;
  top: -6px;
  left: 24px;
  font-family: SourceHanSansLight, sans-serif;
}

.line {
  width: 1200px;
  border-bottom: 1px solid rgb(209, 210, 213);
  margin: 0px auto;
}

.add {
  margin-top: 100px;
}

.aptop {
  margin-top: 100px;
}

.item-content {
  width: 1004px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.item-content .item {
  width: 462px;
  margin-bottom: 40px;
}

.item-content .item>div {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.item-content .item .icon {
  width: 15px;
  height: 15px;
  background-color: rgb(82, 109, 255);
  display: inline-block;
}

.item-content .item .titlex {
  color: rgb(0, 0, 0);
  font-size: 20px;
  font-family: SourceHanSansNormal, sans-serif;
  margin-left: 18px;
}

.item-content .item .table {
  width: 462px;
}

.item-content .item th {
  vertical-align: top;
  height: 26px;
  width: 140px;
  font-family: SourceHanSansLight, sans-serif;
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  padding-top: 1px;
  padding-left: 5px;
  background-color: rgb(49, 141, 255);
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
}

.item-content .item tr:nth-child(2n+1) {
  background-color: rgb(234, 250, 253);
}

.item-content .item tr:nth-child(2n) {
  background-color: rgb(230, 234, 254);

}

tr {
  height: 20px;
}

.sectionb {
  width: 1008px;
  margin: 0px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.sectionb .itemy {
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50px;
}

.sectionb .itemy .itemimg {
  width: 83px;
  height: 71px;
}

.title-bottom1 {
  color: rgb(0, 0, 0);
  font-family: SourceHanSansNormal, sans-serif;
  font-size: 22px;
  text-align: center;
  margin: 12px auto 20px;
}

.textn {
  color: rgb(74, 88, 113);
  font-size: 16px;
  text-align: justify;
  line-height: 26px;
  font-family: SourceHanSansLight, sans-serif;
  letter-spacing: 1.5px;
}

.tabsHeard span {
  text-decoration: none;
  min-width: 120px;
  color: rgb(0, 0, 0);
  font-family: SourceHanSansNormal, sans-serif;
  font-size: 22px;
  line-height: 24px;
  text-align: center;
  padding: 20px 5px;
  cursor: pointer;
  /* cursor: pointer; */
  border-bottom: 2px solid transparent;
  /* color: inherit; */
}

.tabsHeard span:hover {
  color: blue;
  /* 鼠标悬停时字体颜色变为蓝色 */
  border-bottom: 2px solid blue;
  /* 鼠标悬停时下边框变为蓝色 */
}

/* 默认隐藏所有 main，除了第一个 */
.tabmain:not(:first-child) {
  display: none;
}

/* 添加.active类以突出显示当前选中的标签 */
.tabsHeard span.active {
  color: blue;
  /* 选中时字体颜色为蓝色 */
  border-bottom: 2px solid blue;
  /* 选中时下边框为蓝色 */
}

.content {
  width: 520px;
  height: 274px;
  margin-bottom: 90px;
  position: relative;
  transition: all .8s;
  cursor: pointer;
  /* background-color: #367eff; */
}

.title {
  position: absolute;
  top: 88px;
  left: 46px;
  font-size: 28px;
  color: #3e3a39;
  font-family: SourceHanSansReguler, sans-serif;
  letter-spacing: 2px;
}

.content-product {
  position: absolute;
  top: 170px;
  left: 46px;
  width: 205px;
  color: #595757;
  font-size: 16px;
  line-height: 24px;
  font-family: SourceHanSansLight, sans-serif;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  letter-spacing: 2px;
  overflow: hidden;
}

.section {
  background-size: cover;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background-image: url(http://www.zoomsys.com.cn/assets/bgi-solution-7377a487.png);
}

.solution {
  text-align: center;
  font-size: 30px;
  color: #000;
  margin: 50px auto 60px;
  font-family: SourceHanSansNormal, sans-serif;
}

.main {
  display: flex;
  width: 1096px;
  margin: 0 auto;
  justify-content: space-between;
}

.section .main .content {
  position: relative;
  width: 233px;
  height: 300px;
  background-color: #fff;
}

.section .main .content .content-title {
  display: flex;
  align-items: center;
  position: absolute;
  top: 46px;
  left: 28px;
  height: auto;

}

.section .main .content .content-title .icon {
  width: 10px;
  height: 10px;

  margin-right: 10px;
}

.section .main .content .content-title .icon,
.section .main .content .content-title .title {
  display: inline-block;
  /* 或者使用 flex 子项 */
  vertical-align: middle;
  /* 确保图标和标题在垂直方向上居中对齐 */
}

.section .main .content .content-title .title {
  /* height: 20px; */
  color: #000;
  font-size: 16px;
  font-family: SourceHanSansMedium, sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
  position: static;

}

.section .main .content .solution-content {
  position: absolute;
  top: 90px;
  left: 20px;
  width: 200px;
  font-size: 16px;
  line-height: 26px;
  color: #7a8ba6;
  font-family: SourceHanSansLight, sans-serif;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.solution {
  text-align: center;
  font-weight: 400;
  font-size: 30px;
  color: #000;
  margin: 50px auto 60px;
  font-family: SourceHanSansCN;
}





a {
  text-decoration: none;
  color: inherit;
}

.section3 {
  margin: 0 auto;
  box-sizing: border-box;
  overflow: hidden;
}

.section3 .solution {
  font-size: 30px;
  color: #000;
  text-align: center;
  margin: 50px auto 60px;
  font-family: SourceHanSansNormal, sans-serif;
}

.section3 .main {
  display: flex;
  width: 830px;
  height: 100px;
  margin: 0 auto 90px;
}

footer {
  width: 100%;
}



footer .con {
  margin: 0 auto;
  width: 1200px;
  display: flex;
  padding: 32px 0;
  justify-content: center;
  border-bottom: 1px solid #e1e1e1;
}

footer .con .item {
  position: relative;
  width: 280px;
}

footer .con .item .titleaa {
  position: absolute;
  left: 80px;
  font-size: 16px;
  font-family: SourceHanSansMedium, sans-serif;
}

footer .con .item .smallTitle {
  position: absolute;
  left: 80px;
  top: 35px;
}

footer .bottom-con {
  position: relative;
  margin: 0 auto;
  height: 300px;
  width: 1200px;
}

footer .bottom-con .logo {
  position: absolute;
  left: 60px;
  top: 45px;
}

footer .bottom-con .erweima {
  position: absolute;
  top: 100px;
  left: 80px;
  width: 100px;
  height: 100px;
}

footer .bottom-con .erweima img {
  width: 100px;
  height: 100px;
  margin-bottom: 5px;
}

footer .bottom-con .erweima .text {
  text-align: center;
  font-size: 14px;
  font-family: SourceHanSansLight, sans-serif;
  color: #595757;
}

footer .bottom-con .links {
  width: 790px;
  position: absolute;
  top: 48px;
  left: 458px;
  display: flex;
  flex-wrap: nowrap
}

footer .bottom-con .links span,
footer .bottom-con .links a {
  display: block;
  min-width: 130px;
  text-decoration: none;
  margin-top: 15px;
  color: #a18ba9;
  text-align: left;
  letter-spacing: 2px;
  width: fit-content
}

footer .botto-copy-right {
  border-top: 1px solid rgba(0, 0, 0, .15);
  padding: 16px 0;
  display: block;
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #a18ba9;
  opacity: .7;
  letter-spacing: 1px
}