@charset "UTF-8";
@import url("https://at.alicdn.com/t/c/font_4106663_adsmvb8gs3u.css?spm=a313x.manage_type_myprojects.i1.9.27b23a81hs4ybZ&file=font_4106663_adsmvb8gs3u.css");
@keyframes kf-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes kf-fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@font-face {
  font-family: "MiSans-Normal";
  src: url("../fonts/MiSans/MiSans-Normal.ttf") format("truetype");
}
html {
  /*font-size: 6.25%;*/
  font-size: 7.25%;
  font-family: "MiSans-Normal" !important;
}

@media only screen and (max-width: 1500px) {
  html {
    font-size: 7%;
  }
}
body {
  font-size: 14rem;
  font-family: "MiSans-Normal" !important;
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  /*定义滚动条轨道 内阴影+圆角*/
  /*定义滑块 内阴影+圆角*/
}
body::-webkit-scrollbar {
  width: 5rem;
  height: 5rem;
  background-color: #F5F5F5;
}
body::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6rem #F5F5F5;
  border-radius: 10rem;
  background-color: rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
  border-radius: 10rem;
  -webkit-box-shadow: inset 0 0 6rem #555;
  background-color: rgba(0, 0, 0, 0.3);
}

[data-href] {
  cursor: pointer;
}

.show-pc {
  display: inherit;
}

.show-mobile {
  display: none;
}

.lay-img {
  cursor: pointer;
}

.layui-tab .layui-tab-title li {
  font-size: 16rem !important;
}

.layui-tab-item {
  font-size: 16rem !important;
}

.lay-search {
  display: none;
  inset: 0;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}
.lay-search > div {
  display: flex;
  justify-content: center;
}
.lay-search .box {
  margin-top: 20vh;
}
.lay-search .box .search {
  display: flex;
  border-radius: 5rem;
  overflow: hidden;
}
.lay-search .box .search input {
  width: 40vw;
  padding: 15rem;
  background: rgba(255, 255, 255, 0.7);
  color: black;
  font-size: 18rem;
}
.lay-search .box .search input::placeholder {
  color: rgba(0, 0, 0, 0.6);
}
.lay-search .box .search .search-btn {
  height: 51rem;
  background: #008cd6;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 25rem;
  cursor: pointer;
}
.lay-search .box .search .search-btn i {
  font-size: 24rem;
}

/*搜索*/
.search-stet {
  display: flex;
  flex-wrap: wrap;
  gap: 10rem;
  font-size: 18rem;
  margin-bottom: 40rem;
}
.search-stet > div {
  display: flex;
  align-items: center;
}
.search-stet > div .layui-badge {
  margin: 0 5rem;
}

.search-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rem;
}
.search-list .item-index {
  display: inline-block;
  background: linear-gradient(45deg, #008cd6, #5dc7ff);
  color: white;
  font-style: initial;
  width: 20rem;
  height: 20rem;
  text-align: center;
  border-radius: 2rem;
}

body[data-mode=home] header.show-pc {
  position: fixed;
  background: transparent;
  box-shadow: none;
}
body[data-mode=home] header.show-pc .nav li a, body[data-mode=home] header.show-pc i {
  color: white;
}
body[data-mode=home] header.show-pc input {
  background: transparent;
  color: white;
}
body[data-mode=home] header.show-pc ::-webkit-input-placeholder {
  color: white;
}
body[data-mode=home] header.show-pc .logo-img {
  display: none;
}
body[data-mode=home] header.show-pc .logo-img3 {
  display: inline-block;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.9);
  transition: 0.5s;
}
header.show-pc {
  height: 80rem;
}
header.show-pc .logo-img {
  height: 60rem;
}
header.show-pc .logo-img3 {
  height: 60rem;
  display: none;
}
header.show-pc .nav {
  display: flex;
  height: 80rem;
  line-height: 80rem;
}
header.show-pc .nav li {
  margin: 0 20rem;
  position: relative;
}
header.show-pc .nav li a {
  color: #222;
  font-size: 18rem;
  font-weight: 500;
}
header.show-pc .nav li a:hover {
  color: #008cd6;
}
header.show-pc .nav li .nav-child {
  position: absolute;
  background-color: #008cd6;
  border-radius: 0 0rem 2rem 2rem;
  display: none;
}
header.show-pc .nav li .nav-child .nav-list {
  padding: 5rem 0;
}
header.show-pc .nav li .nav-child .nav-item {
  position: relative;
}
header.show-pc .nav li .nav-child .nav-item a {
  padding: 0rem 20rem;
  line-height: 40rem;
  white-space: nowrap;
  color: #fff;
  font-size: 16rem;
  font-weight: 500;
  transform: 1s;
  display: block;
}
header.show-pc .nav li .nav-child .nav-item:hover {
  background-color: white;
}
header.show-pc .nav li .nav-child .nav-item:hover > a {
  color: #008cd6;
}
header.show-pc .nav li .nav-child .nav-item:hover .nav-item-child {
  display: block;
}
header.show-pc .nav li .nav-child .nav-item .nav-item-child {
  position: absolute;
  left: 100%;
  top: -5rem;
  background-color: #008cd6;
  border-radius: 0 0rem 2rem 2rem;
  display: none;
  transition: 1s;
}
header.show-pc .nav li .nav-child .nav-item .nav-item-child .child-list {
  padding: 5rem 0;
}
header.show-pc .nav li .nav-child .nav-item .nav-item-child .child-item:hover {
  background-color: white;
}
header.show-pc .nav li .nav-child .nav-item .nav-item-child .child-item:hover > a {
  color: #008cd6;
}
header.show-pc .nav li:hover a, header.show-pc .nav li.active a {
  color: #008cd6;
}
header.show-pc .search {
  display: flex;
  align-items: center;
}
header.show-pc .search .input-wrap {
  width: 0rem;
  overflow: hidden;
}
header.show-pc .search input {
  animation-duration: 1s;
  border-radius: 25rem;
  padding: 5rem 10rem;
  width: 100%;
  box-sizing: border-box;
  border: 1rem solid #ddd;
}
header.show-pc .search i {
  font-size: 24rem;
  margin-left: 10rem;
  cursor: pointer;
}
header.show-mobile {
  height: 50rem;
  position: sticky;
  top: 0;
}
header.show-mobile .logo-img {
  height: 40rem;
}
header.show-mobile .action {
  display: flex;
}
header.show-mobile .action i {
  margin-left: 15rem;
}
header.show-mobile .nav-wrap {
  position: fixed;
  transition: 1s;
  width: 100%;
  left: -100%;
  height: 100vh;
  overflow: scroll;
}
header.show-mobile .nav-wrap.active {
  left: 0rem;
}
header.show-mobile .nav {
  width: 200rem;
  overflow: scroll;
  height: calc(100vh - 50rem);
  background-color: rgba(0, 0, 0, 0.9);
  padding-top: 10rem;
}
header.show-mobile .nav li {
  padding: 10rem 20rem;
  margin: 0;
  position: relative;
}
header.show-mobile .nav li a {
  color: white;
  font-size: 16rem;
  font-weight: 500;
  margin-bottom: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header.show-mobile .nav li a:hover {
  color: #008cd6;
}
header.show-mobile .nav li .nav-child .nav-list {
  padding: 5rem 0;
}
header.show-mobile .nav li .nav-child .nav-item {
  padding: 0rem 20rem;
  line-height: 20rem;
  white-space: nowrap;
}
header.show-mobile .nav li .nav-child .nav-item a {
  color: #fff;
  font-size: 14rem;
}
header.show-mobile .nav li:hover a, header.show-mobile .nav li.active a {
  color: #008cd6;
}

.pageSwiper .home-banner, .pageSwiper .about-us, .pageSwiper .home-news, .pageSwiper .home-product, .pageSwiper .home-solution {
  min-height: calc(100vh - 80px);
}
.pageSwiper .home-banner {
  height: calc(100vh - 80px);
}

.home-banner {
  box-sizing: border-box;
}
.home-banner .banner-wrap, .home-banner .swiper, .home-banner .swiper-wrapper {
  height: 100%;
}
.home-banner .swiper-slide {
  height: 100%;
  position: relative;
}
.home-banner .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  min-width: fit-content;
}
.home-banner .swiper-slide .txt-box {
  position: absolute;
  bottom: 40rem;
  left: 40rem;
  display: flex;
}
.home-banner .swiper-slide .txt-box > div {
  background-color: #008cd6;
  color: white;
  height: 50rem;
  line-height: 50rem;
  text-align: center;
  font-size: 18rem;
  padding: 0 20rem;
  border-radius: 2rem;
  cursor: pointer;
}
.home-banner .swiper-slide .txt-box > div i {
  font-size: 24rem;
}
.home-banner .swiper-pagination {
  text-align: left;
  padding-left: 40rem;
}
.home-banner .swiper-pagination .swiper-pagination-bullet {
  width: 40rem;
  border-radius: 2rem;
  height: 5rem;
  background-color: #fff;
  opacity: 0.3;
}
.home-banner .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.about-us {
  background-size: cover;
  padding: 100rem 0;
  box-sizing: border-box;
}
.about-us .about-wrap {
  width: 50%;
}
.about-us .title-box .title {
  font-size: 36px;
}
.about-us .title-box .sub-title {
  margin: 5px 0;
  font-size: 24px;
  color: #b0a4a4;
}
.about-us .title-box .line {
  height: 4px;
  width: 120px;
  background-color: #008cd6;
}
.about-us .info-box .title {
  margin-top: 20rem;
  margin-bottom: 40rem;
  font-size: 40rem;
}
.about-us .info-box .content {
  font-size: 16rem;
  line-height: 28rem;
}
.about-us .info-box .btn-box {
  margin-top: 40rem;
}
.about-us .info-box .btn-box i {
  font-size: 12rem;
}

.home-news {
  background-size: cover;
  padding: 100rem 0;
  box-sizing: border-box;
}
.home-news .title-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.home-news .title-wrap .title-box .title {
  font-size: 36px;
}
.home-news .title-wrap .title-box .sub-title {
  margin: 5px 0;
  font-size: 24px;
  color: #b0a4a4;
}
.home-news .title-wrap .title-box .line {
  height: 4px;
  width: 120px;
  background-color: #008cd6;
}
.home-news .details-wrap {
  margin-top: 40rem;
  display: flex;
  justify-content: space-between;
}
.home-news .details-wrap .left-box {
  min-width: 45%;
  width: 45%;
}
.home-news .details-wrap .left-box .img-box img {
  width: 100%;
  height: 400rem;
  object-fit: cover;
}
.home-news .details-wrap .left-box .content {
  font-size: 16rem;
  line-height: 24rem;
  margin: 15rem 0;
  height: 72rem;
  overflow: hidden;
}
.home-news .details-wrap .right-box {
  width: calc(55% - 40rem);
}
.home-news .details-wrap .right-box .news-list .item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-bottom: 10rem;
}
.home-news .details-wrap .right-box .news-list .item .date-wrap {
  width: 100rem;
  min-width: 100rem;
  background-color: white;
  border-radius: 5rem;
  display: flex;
  height: 70rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.home-news .details-wrap .right-box .news-list .item .date-wrap .day {
  font-size: 24rem;
  margin-bottom: 2rem;
}
.home-news .details-wrap .right-box .news-list .item .date-wrap .year-month {
  font-size: 18rem;
}
.home-news .details-wrap .right-box .news-list .item .info-wrap {
  width: calc(100% - 120rem);
}
.home-news .details-wrap .right-box .news-list .item .info-wrap .title {
  font-size: 20rem;
  margin-bottom: 10rem;
}
.home-news .details-wrap .right-box .news-list .item .info-wrap .content {
  color: gray;
  font-size: 15rem;
}

.home-product {
  background-size: cover;
  padding: 100rem 0;
  position: relative;
  box-sizing: border-box;
}
.home-product .mask {
  width: 50%;
  position: absolute;
  height: 100%;
  right: 0;
  top: 0;
  background-color: white;
  z-index: 0;
  background-size: cover;
}
.home-product .title-wrap .title-box .title {
  font-size: 36px;
}
.home-product .title-wrap .title-box .sub-title {
  margin: 5px 0;
  font-size: 24px;
  color: #b0a4a4;
}
.home-product .title-wrap .title-box .line {
  height: 4px;
  width: 120px;
  background-color: #008cd6;
}
.home-product .product-wrap {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.home-product .product-wrap .left-box {
  width: 50%;
  box-sizing: border-box;
  padding-right: 100rem;
  position: relative;
  z-index: 1;
}
.home-product .product-wrap .left-box .content {
  line-height: 28rem;
  margin: 40rem 0;
  font-size: 16rem;
}
.home-product .product-wrap .left-box .product-tabs {
  display: flex;
  margin: 30rem 0;
}
.home-product .product-wrap .left-box .product-tabs .product-tab-item {
  line-height: 35rem;
  background: white;
  color: #222;
  border-radius: 2rem;
  margin-right: 20rem;
  padding: 0 15rem;
  transition: 0.2s;
  cursor: pointer;
}
.home-product .product-wrap .left-box .product-tabs .product-tab-item:hover, .home-product .product-wrap .left-box .product-tabs .product-tab-item.active {
  background: #008cd6;
  color: white;
}
.home-product .product-wrap .left-box .product-img-list {
  display: flex;
  flex-wrap: wrap;
  gap: 40rem 50rem;
}
.home-product .product-wrap .left-box .product-img-list .item {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-product .product-wrap .left-box .product-img-list .item:hover .img-box, .home-product .product-wrap .left-box .product-img-list .item.active .img-box {
  background-color: #06adf2;
}
.home-product .product-wrap .left-box .product-img-list .item .img-box {
  height: 100rem;
  width: 100rem;
  border-radius: 50%;
  overflow: hidden;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-product .product-wrap .left-box .product-img-list .item .img-box img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.home-product .product-wrap .left-box .product-img-list .item .txt {
  margin-top: 20rem;
}
.home-product .product-wrap .right-box {
  position: relative;
  z-index: 1;
  width: 50%;
  box-sizing: border-box;
  padding-left: 100rem;
}
.home-product .product-wrap .right-box .title {
  font-size: 32rem;
  border-bottom: 1rem solid #008cd6;
  display: flex;
}
.home-product .product-wrap .right-box .title > div {
  padding: 10rem 15rem;
}
.home-product .product-wrap .right-box .title .one {
  background: #008cd6;
  color: white;
}
.home-product .product-wrap .right-box .img-box {
  /*height: 400rem;*/
  margin: 20rem 0;
  width: 100%;
  overflow: hidden;
}
.home-product .product-wrap .right-box .img-box > div {
  width: 45%;
  display: inline-block;
  margin: 0rem;
  overflow: hidden;
  padding: 0rem;
  box-sizing: border-box;
  vertical-align: middle;
}
.home-product .product-wrap .right-box .img-box > div:nth-of-type(2) {
  width: 54%;
}
.home-product .product-wrap .right-box .img-box img {
  max-height: 360rem;
  max-width: 90%;
}
.home-product .product-wrap .right-box .img-box .product-btns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem;
}
.home-product .product-wrap .right-box .img-box .product-btns .product-link-btn {
  height: 40rem;
  border: 1rem solid #ddd;
  background: white;
  border-radius: 2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 15rem;
  line-height: 40rem;
  text-align: center;
  cursor: pointer;
}
.home-product .product-wrap .right-box .img-box .product-btns .product-link-btn:hover {
  background: #008cd6;
  color: white;
}
.home-product .product-wrap .right-box .content {
  line-height: 28rem;
  margin-bottom: 40rem;
  font-size: 16rem;
}
.home-product .product-wrap .show-box {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
  transition: 1s;
}
.home-product .product-wrap .show-box .img-box img {
  width: 220rem;
}
.home-product .product-wrap .show-box.kf-fadeIn {
  opacity: 1;
}
.home-product .product-wrap .show-box.kf-fadeOut {
  opacity: 0;
}

.home-solution {
  background-size: cover;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}
.home-solution .title-wrap .title-box .title {
  font-size: 36px;
  color: white !important;
}
.home-solution .title-wrap .title-box .sub-title {
  margin: 5px 0;
  font-size: 24px;
  color: white;
}
.home-solution .title-wrap .title-box .line {
  height: 4px;
  width: 120px;
  background-color: white;
}
.home-solution .circle-box {
  position: absolute;
  left: 0;
  top: 190rem;
  z-index: 1;
}
.home-solution .circle-box .first {
  height: 800rem;
  width: 800rem;
  border: 1rem solid #008cd6;
  border-radius: 50%;
  position: relative;
  left: -450rem;
}
.home-solution .circle-box .circle-solution {
  color: white;
  font-size: 20rem;
  position: relative;
  height: 800rem;
  width: 800rem;
  position: absolute;
  top: 0rem;
}
.home-solution .circle-box .circle-solution .item {
  transform-origin: 0rem 400rem;
  margin-left: -40rem;
  position: absolute;
  left: 0rem;
  top: 0;
}
.home-solution .circle-box .circle-solution .item > div {
  display: flex;
  transform-origin: 0rem;
  align-items: center;
  cursor: pointer;
}
.home-solution .circle-box .circle-solution .item > div i {
  color: #008cd6;
  margin-right: 10rem;
  font-size: 24rem;
  transition: 1s;
}
.home-solution .circle-box .circle-solution .item > div span {
  transition: 1s;
}
.home-solution .circle-box .circle-solution .item > div .ping {
  width: 8rem;
  height: 8rem;
  border: 1rem solid #008cd6;
  border-radius: 50%;
  margin-right: 40rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.home-solution .circle-box .circle-solution .item > div .ping div {
  height: 2rem;
  width: 2rem;
  background-color: #008cd6;
  border-radius: 50%;
}
.home-solution .circle-box .circle-solution .item:hover i,
.home-solution .circle-box .circle-solution .item:hover span {
  transform: scale(1.2);
}
.home-solution .circle-box .circle-solution .item:hover i {
  margin-right: 20rem;
}
.home-solution .solution-wrap {
  display: flex;
  padding: 150rem 0;
  position: relative;
  z-index: 1;
}
.home-solution .solution-wrap .left-box {
  width: 50%;
  position: relative;
}
.home-solution .solution-wrap .left-box .layui-carousel {
  display: none;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5rem;
  padding: 15rem;
  min-height: 500rem;
  position: relative;
  margin-top: 20rem;
}
.home-solution .solution-wrap .left-box .layui-carousel .card-wrap {
  padding: 15rem;
  border-radius: 5rem;
}
.home-solution .solution-wrap .left-box .layui-carousel .img-box img {
  width: 100%;
  border-radius: 2rem;
  height: 250rem;
  object-fit: cover;
}
.home-solution .solution-wrap .left-box .layui-carousel .title {
  font-size: 20rem;
  margin-bottom: 10rem;
  color: #222 !important;
}
.home-solution .solution-wrap .left-box .layui-carousel .content {
  line-height: 20rem;
  margin: 10rem 0;
  font-size: 14rem;
  height: 80rem;
  overflow: hidden;
}
.home-solution .solution-wrap .left-box .layui-carousel .btn-box {
  position: absolute;
  bottom: 40rem;
  width: 100%;
  right: 20rem;
}
.home-solution .solution-wrap .right-box {
  width: 50%;
  margin-left: 10%;
}
.home-solution .solution-wrap .right-box .card-wrap {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10rem;
  padding: 40rem;
  min-height: 600rem;
  position: relative;
}
.home-solution .solution-wrap .right-box .card-wrap .img-box img {
  width: 100%;
  border-radius: 2rem;
  height: 300rem;
  object-fit: cover;
}
.home-solution .solution-wrap .right-box .card-wrap .title {
  font-size: 30rem;
  margin-bottom: 20rem;
}
.home-solution .solution-wrap .right-box .card-wrap .content {
  line-height: 28rem;
  margin: 20rem 0;
  font-size: 18rem;
}
.home-solution .solution-wrap .right-box .card-wrap .btn-box {
  position: absolute;
  bottom: 40rem;
  width: 100%;
  right: 40rem;
}

.home-slogan {
  background-size: cover;
  padding: 150rem 0;
  position: relative;
  text-align: center;
  color: white;
}
.home-slogan .txt {
  font-size: 30rem;
  margin: 0 150rem;
}
.home-slogan i {
  font-size: 30rem;
}

footer {
  background-color: #1a1a1a;
  padding-top: 80rem;
  color: gray;
}
footer .footer-wrap {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rem;
}
footer .footer-wrap .logo-img img {
  width: 300rem;
}
footer .footer-wrap .nav-list {
  display: flex;
  gap: 0 60rem;
}
footer .footer-wrap .nav-list .title {
  font-size: 20rem;
  margin-bottom: 15rem;
  color: #ddd;
}
footer .footer-wrap .nav-list .children .children-item {
  font-size: 14rem;
  line-height: 28rem;
}
footer .footer-wrap .nav-list .children .children-item a {
  color: gray;
}
footer .footer-wrap .copy-wrap .qwcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
footer .footer-wrap .copy-wrap .qwcode-box img {
  width: 100rem;
}
footer .footer-wrap .copy-wrap .qwcode-box .txt {
  margin-top: 10rem;
}
footer .copyright-box {
  text-align: center;
  border-top: 1rem solid #404040;
  padding: 20rem 0;
}

.top-banner-box {
  height: 420rem;
  background-size: cover;
}
.top-banner-box .title-wrap {
  position: relative;
  top: 150rem;
}
.top-banner-box .title-wrap .title-box .title {
  font-size: 50rem;
  color: #00ffff;
}
.top-banner-box .title-wrap .title-box .sub-title {
  margin: 5rem 0;
  font-size: 24rem;
  color: white;
}

.common-body {
  margin-top: 20rem;
  margin-bottom: 40rem;
}
.common-body .body-wrap {
  display: flex;
  justify-content: space-between;
}
.common-body .body-wrap .left-nav {
  width: 300rem;
  z-index: 2;
  position: relative;
  top: -80rem;
}
.common-body .body-wrap .left-nav .nav-wrap .title {
  height: 60rem;
  font-size: 24rem;
  background-color: #008cd6;
  color: white;
  text-align: center;
  line-height: 60rem;
  border-radius: 10rem 10rem 0 0;
}
.common-body .body-wrap .left-nav .nav-wrap .list {
  background-color: white;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row {
  padding: 20rem;
  border-bottom: 1rem solid #f2f2f2;
  display: flex;
  align-items: center;
  transition: 0.5s;
  justify-content: space-between;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row .arrow {
  margin-right: 20rem;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row .more {
  cursor: pointer;
  transition: 0.5s;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row .more.on {
  transform: rotate(180deg);
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row a {
  font-size: 16rem;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row.active, .common-body .body-wrap .left-nav .nav-wrap .list .item .row:hover {
  background-color: rgba(0, 140, 214, 0.1);
  color: #008cd6;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .row.active a, .common-body .body-wrap .left-nav .nav-wrap .list .item .row:hover a {
  color: #008cd6;
  font-weight: bold;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item:last-child {
  border-bottom: none;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child {
  display: none;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item {
  padding-left: 80rem;
  font-size: 14rem;
  line-height: 40rem;
  border-bottom: 1rem solid #f2f2f2;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item.active, .common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item:hover {
  background-color: rgba(0, 140, 214, 0.06);
  color: #008cd6;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item.active a, .common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item:hover a {
  color: #008cd6;
  font-weight: bold;
}
.common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item.active .arrow, .common-body .body-wrap .left-nav .nav-wrap .list .item .crumbs-child .child-list .child-item:hover .arrow {
  opacity: 1;
}
.common-body .body-wrap .left-nav-search {
  width: 300rem;
  z-index: 2;
  position: relative;
  top: -80rem;
}
.common-body .body-wrap .left-nav-search .search-form {
  height: 60rem;
  padding: 0 20rem;
  background-color: #008cd6;
  line-height: 60rem;
  border-radius: 10rem 10rem 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-body .body-wrap .left-nav-search .search-form input {
  border: none;
  border-bottom: 1rem solid rgba(255, 255, 255, 0.5);
  background-color: transparent;
  height: 35rem;
  color: white;
  text-align: left;
}
.common-body .body-wrap .left-nav-search .search-form i {
  color: white;
  margin-left: 20rem;
}
.common-body .body-wrap .left-nav-search .search-form input::placeholder {
  color: white;
}
.common-body .body-wrap .left-nav-search .row-wrap {
  padding: 20rem;
  background: white;
}
.common-body .body-wrap .left-nav-search .row-wrap .drop-down-list .item {
  margin-bottom: 15rem;
}
.common-body .body-wrap .left-nav-search .row-wrap .drop-down-list .label {
  font-size: 16rem;
  color: #7e7290;
  margin-bottom: 10rem;
}
.common-body .body-wrap .left-nav-search .row-wrap .category-list {
  margin-top: 20rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10rem 15rem;
}
.common-body .body-wrap .left-nav-search .row-wrap .category-list .item {
  border: 1rem solid #e5e7eb;
  text-align: center;
  padding: 5rem;
  border-radius: 5rem;
  transition: background-color 0.5s;
  cursor: pointer;
}
.common-body .body-wrap .left-nav-search .row-wrap .category-list .item.active, .common-body .body-wrap .left-nav-search .row-wrap .category-list .item:hover {
  border-color: #ffb800;
  background-color: #ffb800;
  color: white;
}
.common-body .body-wrap .left-nav-search .arrow-box {
  background-color: white;
  display: flex;
  justify-content: center;
  border-radius: 0 0 15rem 15rem;
  padding-bottom: 10rem;
}
.common-body .body-wrap .left-nav-search .arrow-box i {
  font-size: 30rem;
  transition: 1s;
}
.common-body .body-wrap .left-nav-search .arrow-box.active {
  padding-top: 10rem;
}
.common-body .body-wrap .left-nav-search .arrow-box.active i {
  transform: rotate(180deg);
}
.common-body .body-wrap .article-wrap {
  width: calc(100% - 320rem);
  background-color: white;
}
.common-body .body-wrap .article-wrap .crumbs-box {
  padding: 20rem;
  border-bottom: 1rem solid #f2f2f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.common-body .body-wrap .article-wrap .crumbs-box .title {
  font-size: 20rem;
  color: #008cd6;
}
.common-body .body-wrap .article-wrap .crumbs-box .crumbs-wrap {
  display: flex;
  align-items: center;
  color: #7e7290;
}
.common-body .body-wrap .article-wrap .crumbs-box .crumbs-wrap .item {
  margin-right: 5rem;
}
.common-body .body-wrap .article-wrap .crumbs-box .crumbs-wrap a {
  color: #7e7290;
}
.common-body .body-wrap .article-wrap .crumbs-box .crumbs-wrap i {
  margin: 0 5rem;
  font-size: 80%;
}
.common-body .body-wrap .article-wrap .product-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .product-box .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30rem;
}
.common-body .body-wrap .article-wrap .product-box .list .item {
  border-radius: 5rem;
  overflow: hidden;
  cursor: pointer;
}
.common-body .body-wrap .article-wrap .product-box .list .item .img-box {
  height: 200rem;
  overflow: hidden;
  padding: 15rem;
  box-sizing: border-box;
  background: #f2f2f2;
}
.common-body .body-wrap .article-wrap .product-box .list .item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: 0.5s;
}
.common-body .body-wrap .article-wrap .product-box .list .item .title {
  padding: 15rem;
  color: #7e7290;
  font-size: 16rem;
  transition: 0.5s;
  text-align: center;
}
.common-body .body-wrap .article-wrap .product-box .list .item:hover .img-box img {
  transform: scale(1.1);
}
.common-body .body-wrap .article-wrap .product-box .list .item:hover .title {
  background-color: #008cd6;
  color: white;
}
.common-body .body-wrap .article-wrap .product-box .product-details video {
  height: 350px;
  object-fit: cover;
}
.common-body .body-wrap .article-wrap .product-box .product-details .show-box {
  display: flex;
  justify-content: space-between;
  background-image: url(/images/prbg2.png);
  background-position: bottom;
  background-size: cover;
}
.common-body .body-wrap .article-wrap .product-box .product-details .show-box .img-box {
  width: 400rem;
  height: 300rem;
}
.common-body .body-wrap .article-wrap .product-box .product-details .show-box .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.common-body .body-wrap .article-wrap .product-box .product-details .show-box .info-box {
  width: calc(100% - 420rem);
  padding: 20rem 20rem 20rem 0;
}
.common-body .body-wrap .article-wrap .product-box .product-details .show-box .info-box .label {
  font-size: 16rem;
  line-height: 28rem;
  margin-bottom: 10rem;
}
.common-body .body-wrap .article-wrap .product-box .product-details .product-more {
  margin-top: 20rem;
}
.common-body .body-wrap .article-wrap .product-box .product-details .product-more .layui-this {
  background-color: #008cd6;
  color: white;
  border-radius: 5rem 5rem 0 0;
}
.common-body .body-wrap .article-wrap .product-box .product-details .product-more .layui-this::after {
  border-color: #008cd6;
}
.common-body .body-wrap .article-wrap .product-box .product-details .product-more .layui-tab-content img {
  max-width: 100%;
}
.common-body .body-wrap .article-wrap .product-box .other-attach-list .item {
  display: flex;
  margin: 20rem 0;
}
.common-body .body-wrap .article-wrap .product-box .other-attach-list .item .img-box {
  width: 25%;
}
.common-body .body-wrap .article-wrap .product-box .other-attach-list .item .info-box {
  width: 75%;
  padding-left: 20rem;
}
.common-body .body-wrap .article-wrap .product-box .other-attach-list .item .info-box .title {
  font-size: 24rem;
}
.common-body .body-wrap .article-wrap .product-box .other-attach-list .item .info-box .content {
  line-height: 1.5;
  font-size: 16rem;
  margin-top: 10rem;
}
.common-body .body-wrap .article-wrap .article-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .article-box .title {
  font-size: 24rem;
  font-weight: bold;
  text-align: center;
}
.common-body .body-wrap .article-wrap .article-box .time {
  color: #7e7290;
  font-size: 16rem;
  text-align: center;
  margin-top: 10rem;
}
.common-body .body-wrap .article-wrap .article-box .content {
  margin-top: 20rem;
  line-height: 1.5;
  font-size: 16rem;
}
.common-body .body-wrap .article-wrap .article-box .content img {
  max-width: 100%;
  height: inherit;
  margin: 20rem 0;
  border-radius: 5rem;
  display: inline;
}
.common-body .body-wrap .article-wrap .news-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .news-box .list .item {
  display: flex;
  border-bottom: 1rem solid #f2f2f2;
  padding: 20rem;
  cursor: pointer;
}
.common-body .body-wrap .article-wrap .news-box .list .item .img-box {
  width: 200rem;
  min-width: 200rem;
  margin-right: 20rem;
  height: 102rem;
}
.common-body .body-wrap .article-wrap .news-box .list .item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.common-body .body-wrap .article-wrap .news-box .list .item .details-wrap {
  width: calc(100% - 200rem);
}
.common-body .body-wrap .article-wrap .news-box .list .item .title {
  font-size: 22rem;
  font-weight: bold;
  margin-bottom: 10rem;
}
.common-body .body-wrap .article-wrap .news-box .list .item .content {
  line-height: 24rem;
  height: 48rem;
  overflow: hidden;
  font-size: 16rem;
}
.common-body .body-wrap .article-wrap .news-box .list .item .time {
  color: #7e7290;
  margin-top: 5rem;
}
.common-body .body-wrap .article-wrap .news-box .list .item:hover {
  background-color: rgba(0, 140, 214, 0.1);
}
.common-body .body-wrap .article-wrap .solution-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .solution-box .list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item {
  overflow: hidden;
  cursor: pointer;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .img-box {
  height: 220rem;
  overflow: visible;
  position: relative;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .img-box img {
  height: 300rem;
  width: 100%;
  object-fit: cover;
  transition: 0.5s;
  border-radius: 5rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box .row-wrap {
  position: relative;
  border-radius: 2rem;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rem;
  transition: 0.5s;
  color: #7e7290;
  background-color: white;
  display: block;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box .title {
  font-size: 18rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box .sub-title {
  font-size: 14rem;
  margin-top: 10rem;
  line-height: 24rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box .btn-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 10rem;
}
.common-body .body-wrap .article-wrap .solution-box .list .item .content-box .btn-box a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120rem;
  margin-left: 20rem;
  height: 40rem;
  line-height: 40rem;
  border: 1rem solid #008cd6;
  border-radius: 2rem;
  color: #008cd6;
}
.common-body .body-wrap .article-wrap .solution-box .list .item:hover .img-box img {
  transform: scale(1.1);
}
.common-body .body-wrap .article-wrap .solution-box .list .item:hover .content-box .row-wrap {
  background-color: #008cd6;
  color: white;
}
.common-body .body-wrap .article-wrap .solution-box .list .item:hover .content-box .row-wrap a {
  color: white;
  border-color: white;
}
.common-body .body-wrap .article-wrap .download-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .download-box .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rem;
}
.common-body .body-wrap .article-wrap .download-box .list .item {
  border-radius: 5rem;
  background-color: #f2f2f2;
  padding: 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.common-body .body-wrap .article-wrap .download-box .list .item .ext-box .icon-wrap {
  border-radius: 5rem;
  /*background-color: $colorMain;*/
  width: 120rem;
  height: 120rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  color: white;
  text-align: center;
  line-height: center;
}
.common-body .body-wrap .article-wrap .download-box .list .item .ext-box .icon-wrap i {
  font-size: 40rem;
}
.common-body .body-wrap .article-wrap .download-box .list .item .title {
  font-size: 16rem;
  margin: 10rem 0;
}
.common-body .body-wrap .article-wrap .download-box .list .item .file-info {
  color: #7e7290;
  font-size: 13rem;
  display: flex;
  justify-content: space-around;
  width: 50%;
  flex-wrap: wrap;
}
.common-body .body-wrap .article-wrap .download-box .list .item .article-title {
  color: #7e7290;
  font-size: 13rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-top: 5rem;
}
.common-body .body-wrap .article-wrap .download-box .list .item .btn-box {
  margin-top: 20rem;
}
.common-body .body-wrap .article-wrap .contact-box {
  padding: 20rem;
}
.common-body .body-wrap .article-wrap .contact-box .layui-form-item {
  display: flex;
}
.common-body .body-wrap .article-wrap .contact-box .contact-info {
  margin-top: 20rem;
  display: flex;
  justify-content: space-between;
}
.common-body .body-wrap .article-wrap .contact-box .contact-info .row-wrap {
  min-width: 30%;
}
.common-body .body-wrap .article-wrap .contact-box .contact-info .row-wrap .title {
  border-bottom: 2rem solid #ddd;
  padding-bottom: 10rem;
  display: flex;
  align-items: center;
  font-size: 18rem;
  font-weight: bold;
}
.common-body .body-wrap .article-wrap .contact-box .contact-info .row-wrap .title i {
  font-size: 30rem;
  color: #008cd6;
  margin-right: 15rem;
}
.common-body .body-wrap .article-wrap .contact-box .contact-info .row-wrap .txt {
  padding-top: 20rem;
  font-size: 16rem;
  line-height: 24rem;
  color: #7e7290;
}
.common-body .body-wrap .article-wrap .contact-box .dot-list {
  margin-top: 20rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
}
.common-body .body-wrap .article-wrap .contact-box .dot-list .item {
  border-radius: 5rem;
  background-color: #f2f2f2;
  padding: 20rem;
  line-height: 24rem;
  width: 100%;
  overflow: hidden;
}
.common-body .body-wrap .article-wrap .contact-box .dot-list .item .title {
  font-size: 20rem;
  margin-bottom: 10rem;
}
.common-body .body-wrap .article-wrap .contact-box .dot-list .item i {
  color: #008cd6;
  margin-right: 10rem;
  font-weight: bold;
}
.common-body .body-wrap .article-wrap .contact-box .form-header {
  margin-bottom: 50rem;
}
.common-body .body-wrap .article-wrap .contact-box .form-header .title {
  font-size: 32rem;
  margin-bottom: 10rem;
}
.common-body .body-wrap .article-wrap .contact-box .form-header .sub-title {
  font-size: 16rem;
  color: #7e7290;
  line-height: 32rem;
}
.common-body .body-wrap .article-wrap .contact-box .form-header .phone {
  font-size: 24rem;
  color: #008cd6;
}
.common-body .body-wrap .article-wrap .contact-box .input-label {
  font-size: 18rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.7);
  margin-bottom: 10rem;
}

.solution-body .intro-wrap {
  display: flex;
  justify-content: center;
  position: relative;
  top: -100rem;
  margin-bottom: -50rem;
}
.solution-body .intro-wrap .row-wrap {
  width: 60%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5rem;
  padding: 20rem 40rem 60rem 40rem;
  position: relative;
}
.solution-body .intro-wrap .row-wrap .title-wrap .title {
  font-size: 30rem;
  text-align: center;
}
.solution-body .intro-wrap .row-wrap .title-wrap .sub-title {
  font-size: 16rem;
  margin-top: 10rem;
  line-height: 24rem;
}
.solution-body .intro-wrap .row-wrap .btn-group {
  position: absolute;
  width: 100%;
  bottom: -20rem;
  left: 0;
  padding: 0 75rem;
  display: flex;
  justify-content: space-between;
  gap: 20rem;
}
.solution-body .intro-wrap .row-wrap .btn-group .tab-btn {
  height: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2rem;
  border: 1rem solid #008cd6;
  background-color: white;
  padding: 0 20rem;
  font-size: 16rem;
  transition: 0.5s;
  cursor: pointer;
}
.solution-body .intro-wrap .row-wrap .btn-group .tab-btn.active, .solution-body .intro-wrap .row-wrap .btn-group .tab-btn:hover {
  background-color: #008cd6;
  color: white;
}
.solution-body .details-wrap {
  background-color: white;
  padding: 40rem;
  border-radius: 5rem;
  margin-bottom: 20rem;
}
.solution-body .details-wrap .content-item {
  font-size: 15rem;
  line-height: 1.5;
}
.solution-body .details-wrap .details-title {
  border-bottom: 1rem solid #008cd6;
  margin-bottom: 20rem;
}
.solution-body .details-wrap .details-title span {
  display: inline-block;
  line-height: 40rem;
  background-color: #008cd6;
  color: white;
  font-size: 18rem;
  padding: 5rem 30rem;
}
.solution-body .details-wrap .label-title {
  color: #008cd6;
  font-size: 20rem;
  margin: 20rem 0;
}
.solution-body .details-wrap .label-title .layui-icon {
  font-size: 20rem;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item {
  margin-bottom: 50rem;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body {
  display: flex;
  justify-content: space-between;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body .img-box {
  min-width: 400rem;
  width: 400rem;
  height: 300rem;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: fit-content;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body .info-box {
  padding-left: 20rem;
  width: calc(100% - 400rem);
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body .info-box .title {
  font-size: 20rem;
  margin-bottom: 10rem;
}
.solution-body .details-wrap .solution-scene .scene-list .scene-item .scene-body .info-box .content {
  font-size: 16rem;
  color: #7e7290;
  line-height: 28rem;
}
.solution-body .details-wrap .solution-case .show-box {
  display: flex;
}
.solution-body .details-wrap .solution-case .show-box .info-wrap {
  width: 50%;
}
.solution-body .details-wrap .solution-case .show-box .intro {
  padding: 15rem;
  background-color: #f2f2f2;
}
.solution-body .details-wrap .solution-case .show-box .intro .title {
  font-size: 22rem;
  margin-bottom: 10rem;
}
.solution-body .details-wrap .solution-case .show-box .intro .content {
  font-size: 16rem;
  line-height: 28rem;
}
.solution-body .details-wrap .solution-case .show-box .img-swiper {
  width: 50%;
  padding-left: 20rem;
}
.solution-body .details-wrap .solution-case .show-box .img-swiper .swiper-slide {
  text-align: center;
}
.solution-body .details-wrap .solution-case .show-box .img-swiper img {
  max-width: 100%;
  height: 300rem;
  object-fit: cover;
}
.solution-body .details-wrap .solution-case .show-box .img-swiper .swiper-button-next, .solution-body .details-wrap .solution-case .show-box .img-swiper .swiper-button-prev {
  border: 1rem solid #008cd6;
}
.solution-body .details-wrap .solution-case .show-box .img-swiper .swiper-button-next::after, .solution-body .details-wrap .solution-case .show-box .img-swiper .swiper-button-prev::after {
  font-size: 20rem;
}
.solution-body .details-wrap .solution-case .case-list {
  margin-top: 40rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40rem;
}
.solution-body .details-wrap .solution-case .case-list .case-item {
  position: relative;
}
.solution-body .details-wrap .solution-case .case-list .case-item .img-box {
  height: 400rem;
  width: 100%;
  overflow: hidden;
}
.solution-body .details-wrap .solution-case .case-list .case-item .img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 1s;
}
.solution-body .details-wrap .solution-case .case-list .case-item .title {
  position: absolute;
  width: 100%;
  line-height: 50rem;
  background-color: #008cd6;
  text-align: center;
  color: white;
  bottom: 0;
  left: 0;
  font-size: 20rem;
}
.solution-body .details-wrap .solution-case .case-list .case-item:hover img {
  transform: scale(1.1);
}
.solution-body .details-wrap .solution-case .trait-content img {
  max-width: 100%;
}

.info-history2 {
  margin-top: 80rem;
  height: calc(100vh - 80rem);
  position: relative;
}
.info-history2 .bg-img {
  background-image: url("/images/banner/about_banner.jpg");
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100%;
  height: calc(100vh - 80rem);
  z-index: 0;
  filter: blur(5rem);
}
.info-history2 .history2-wrap {
  display: flex;
  padding: 40rem 0;
  height: calc(100vh - 80rem);
  position: relative;
  z-index: 1;
}
.info-history2 .history2-wrap .title {
  min-width: 20%;
  padding: 50rem 0;
  font-size: 44rem;
  font-weight: bold;
}
.info-history2 .history2-wrap .txt-swiper2 {
  min-width: 40%;
  max-width: 40%;
  padding: 50rem 0;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper {
  height: 100%;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper .swiper-slide {
  overflow: auto;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper ::-webkit-scrollbar-track {
  width: 3px;
  background: rgba(16, 31, 28, 0.1);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper ::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.5);
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
  transition: background-color 0.3s;
  cursor: pointer;
}
.info-history2 .history2-wrap .txt-swiper2 .swiper ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.3);
}
.info-history2 .history2-wrap .txt-swiper2 .list {
  padding-right: 40rem;
  font-size: 16rem;
  line-height: 28rem;
}
.info-history2 .history2-wrap .txt-swiper2 .list ul {
  width: inherit !important;
}
.info-history2 .history2-wrap .txt-swiper2 .list li {
  position: relative;
  /*      color: #fff;*/
  padding-left: 30rem;
  margin-bottom: 16rem;
}
.info-history2 .history2-wrap .txt-swiper2 .list li::before {
  content: "";
  display: inline-block;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background-color: #00bdff;
  margin-right: 10rem;
}
.info-history2 .history2-wrap .history-swiper2 {
  min-width: 40%;
  position: relative;
  padding: 50rem 0;
}
.info-history2 .history2-wrap .history-swiper2 .swiper {
  height: 100%;
}
.info-history2 .history2-wrap .history-swiper2 .swiper .swiper-slide {
  display: flex;
  font-size: 24rem;
  align-items: center;
  color: rgba(0, 64, 191, 0.7);
  transition: 1s;
  cursor: pointer;
}
.info-history2 .history2-wrap .history-swiper2 .swiper .swiper-slide .pin {
  margin-right: 15rem;
  height: 10rem;
  width: 10rem;
  background: #0040bf;
  border-radius: 50%;
}
.info-history2 .history2-wrap .history-swiper2 .swiper .swiper-slide.swiper-slide-active .year {
  font-size: 52rem;
  background: linear-gradient(to right, #00bdff, #0040bf);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  font-family: "Harmony-Bold";
}
.info-history2 .history2-wrap .history-swiper2 .line {
  width: 1rem;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #0040bf, transparent);
  position: absolute;
  left: 5rem;
  top: 0;
}

.development-box {
  margin-top: 80rem;
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.development-box canvas {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}
.development-box .title-wrap {
  text-align: center;
  padding: 50rem 0;
}
.development-box .title-wrap .title {
  font-size: 32rem;
  margin-bottom: 10rem;
}
.development-box .title-wrap .sub-title {
  color: #7e7290;
}
.development-box .wrap {
  position: relative;
  z-index: 1;
}
.development-box .wrap .line {
  width: 1rem;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #0040bf, transparent);
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
}
.development-box .wrap .development-list {
  padding: 50rem 0;
  width: 100%;
  position: relative;
  z-index: 1;
  height: calc(100vh - 170rem);
  overflow: scroll;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.development-box .wrap .development-list::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.development-box .wrap .development-list .item {
  display: flex;
}
.development-box .wrap .development-list .item .pin {
  margin-right: 15rem;
  height: 10rem;
  width: 10rem;
  background: #008cd6;
  border-radius: 50%;
  border: 5rem solid white;
  box-shadow: 0 0 1rem 1rem #ddd;
  box-sizing: content-box;
  position: relative;
  top: 20rem;
  margin: 0rem 50rem;
}
.development-box .wrap .development-list .item .zhanwei {
  width: calc(50% - 58rem);
}
.development-box .wrap .development-list .item .info {
  width: calc(50% - 58rem);
}
.development-box .wrap .development-list .item .info .title {
  color: #0d60a2;
  line-height: 50rem;
  transition: all 1s;
  position: relative;
  display: block;
  text-decoration: none;
  font-family: lato;
  text-transform: uppercase;
  padding: 4rem 0;
  font-size: 30rem;
  cursor: pointer;
}
.development-box .wrap .development-list .item .info .title:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1rem;
  top: 100%;
  left: 0;
  background: #3498db;
  transition: transform 0.5s;
  transform: scaleX(0);
  transform-origin: right;
}
.development-box .wrap .development-list .item .info .title:hover {
  transform: translateY(-15rem);
}
.development-box .wrap .development-list .item .info .title:hover:after {
  transform: scaleX(1);
  transform-origin: left;
}
.development-box .wrap .development-list .item .info .content {
  color: #666;
  margin-top: 5rem;
  line-height: 28rem;
  font-size: 16rem;
}
.development-box .wrap .development-list .item:nth-child(odd) {
  flex-direction: row-reverse;
}
.development-box .wrap .development-list .item:nth-child(odd) .info {
  text-align: right;
}