/* 头部的导航 */

.navbar-default,
.container-fluid,
.navbar-header,
.navbar-nav {
  min-height: 64px !important;
}

.navbar {
  margin-bottom: 0px !important;
}

.navbar-default {
  background-color: #f0fbff !important;
  border: none;
}

.container-fluid,
.navbar-collapse {
  padding: 0px !important;
}

.nav-header-list li {
  padding: 0px 32px !important;
}

.navbar-nav li {
  min-height: 64px;
  padding-top: 22px !important;
}

.navbar-nav li a {
  font-size: 16px;
  padding: 0px !important;
  color: #000 !important;
}

/* 左侧 */

.logo {
  height: 64px;
  display: flex;
  align-items: center;
}

/*登录和注册 */

.login {
  height: 34px;
  width: 110px;
  color: #000000;
  text-align: center;
  line-height: 34px !important;
  font-size: 16px;
  border: 1px solid #d8d8d8;
  background-color: white;
  margin-right: 10px;
  border-radius: 5px;
  margin-top: -8px !important;
}

.register {
  height: 34px;
  color: #ffffff !important;
  width: 110px;
  background-color: #269e79;
  text-align: center;
  line-height: 34px !important;
  font-size: 16px;
  border: 1px solid #269e79;
  border-radius: 5px;
  margin-top: -8px !important;
}

.right-container li:hover .register {
  background-color: #269e79 !important;
}

.right-container li:hover .login {
  background-color: white !important;
}

/* --------------------------------- */

.active {
  display: block !important;
}

/* banner */

.first-container .banner-module {
  margin-top: 200px;
  display: flex;
  justify-content: space-between;
  height: 380px;
}

.first-container .banner-module .banner-left {
  width: 50%;
}

.first-container .banner-module .banner-right {
  width: 50%;
  position: relative;
}

/* 右侧图片 */

.together {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  z-index: 2;
  animation: together 0.8s ease 0.6s forwards;
  opacity: 0;
}

.together .top {
  position: relative;
  z-index: 1;
}

.together .middle {
  position: absolute;
  top: 57px;
  left: 0px;
  z-index: 0;
}

/* 底图 */

.first-container .banner-module .banner-right .bottom {
  opacity: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 164px;
  animation: bottom 0.8s ease 0.3s forwards;
}

@keyframes bottom {
  from {
    opacity: 0;
    top: 264px;
  }
  to {
    opacity: 1;
    top: 164px;
  }
}

@keyframes together {
  from {
    opacity: 0;
    top: 164px;
  }
  to {
    opacity: 1;
    top: 0px;
  }
}

.first-container .banner-module .banner-left h2 {
  font-size: 48px;
}

.first-container .banner-module .banner-left p {
  font-size: 24px;
  color: #70768e;
  margin: 60px 0px 140px 0px !important;
  opacity: 0;
  animation: downUp 0.8s ease 0.4s forwards;
}

.first-container .banner-module .banner-left a {
  display: inline-block;
  height: 50px;
  width: 180px;
  background-color: #269e79;
  color: #ffffff;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  border-radius: 5px;
  opacity: 0;
  animation: downUp 0.8s ease 0.4s forwards;
}

/* 主体内容区域 */

.mian-content-module {
  margin-top: 150px;
}

/*业务场景*/

.second-container {
  background-image: url('/html/image/svg/second-container.svg');
}

.business-scenario .business-title {
  text-align: center;
  position: relative;
}

.business-scenario .business-title p {
  font-size: 30px;
  font-weight: 400;
}

.business-scenario .business-title span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 7px;
  transform: translate(-50%, 25px);
  background-color: #269e79;
}

.business-scenario .business-tab {
  margin-top: 65px;
  position: relative;
  opacity: 0;
  transform: translateY(100px);
}

.business-scenario .business-tab .tab_list {
  display: flex;
  justify-content: space-between;
}

.business-scenario .business-tab .tab_list li {
  width: 337px;
  height: 171px;
  position: relative;
}

.business-scenario .business-tab .tab_list li:hover a span {
  color: #269e79 !important;
}

.business-scenario .business-tab .tab_list li i {
  display: block;
  width: 0;
  height: 0;
  border-width: 45px;
  border-style: solid;
  border-color: transparent transparent rgba(204, 204, 204, 0.3) transparent;
  position: absolute;
  top: 131px;
  left: 50%;
  transform: translate(-50%);
}

.business-scenario .business-tab > span {
  display: block;
  width: 0;
  height: 0;
  border-width: 45px;
  border-style: solid;
  border-color: transparent transparent rgba(204, 204, 204, 0.3) transparent;
  position: absolute;
}

.hide {
  display: none;
}

.business-scenario .business-tab .tab_list li.margin-right {
  margin: 0px 40px !important;
}

.business-scenario .business-tab .tab_list li a {
  display: block;
  width: 100%;
  height: 171px;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.border {
  border: 1px solid #269e79 !important;
}

.business-scenario .business-tab .tab_list li:hover a {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.3);
}

.business-scenario .business-tab ul li a img {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
}

.business-scenario .business-tab ul li a span {
  color: #000000 !important;
  font-size: 20px;
}

.business-scenario .business-tab .business-tab-content {
  background: rgba(216, 216, 216, 0.5);
  border-radius: 8px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
}

.business-scenario .business-tab .business-tab-content .cloud-desc {
  flex: 1;
}

.business-scenario .business-tab .business-tab-content .cloud-desc h4 {
  width: 100%;
  font-size: 24px;
  margin: 20px 0px 60px 0px !important;
  word-break: break-all;
}

.business-scenario
  .business-tab
  .business-tab-content
  .cloud-desc
  ol
  li:hover
  a {
  color: #269e79 !important;
}

.business-scenario .business-tab .business-tab-content .cloud-desc ol li {
  margin-bottom: 15px !important;
  display: flex;
}

.business-scenario .business-tab .business-tab-content .cloud-desc ol li a {
  width: 100%;
  font-size: 16px;
  color: #70768e;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  word-break: break-all;
}

.reletive-video {
  max-width: 724px;
  max-height: 408px;
  background-color: rgba(204, 204, 204, 0.3);
  margin: 20px 0px;
  text-align: center;
  line-height: 408px;
  word-break: break-all;
  overflow: hidden;
}

.value-delivery {
  margin-top: 50px;
}

.value-delivery .value-delivery-title {
  text-align: center;
  position: relative;
}

.value-delivery .value-delivery-title p {
  font-size: 30px;
  font-weight: 400;
}

.value-delivery .value-delivery-title span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 7px;
  transform: translate(-50%, 25px);
  background-color: #269e79;
}

.value-delivery .value-delivery-content {
  margin-top: 65px;
  background-color: #ffffff;
}

.value-delivery .value-delivery-content ul {
  display: flex;
}

.value-delivery .value-delivery-content ul li {
  position: relative;
  text-align: center;
  display: flex;
  width: 25%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(100px);
}

.value-delivery .value-delivery-content ul li .B-money:hover {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.3);
}

.B-money {
  position: relative;
  width: calc(100% - 3px);
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 10px 10px 10px !important;
}

.value-delivery .value-delivery-content ul li i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0px;
  width: 2px;
  height: 150px;
  background-color: #d8d8d8;
}

.value-delivery .value-delivery-content ul li a img {
  position: absolute;
  top: -50px;
  left: 60px;
  width: 20px !important;
  height: 20px !important;
}

.value-delivery .value-delivery-content ul li a img:last-of-type {
  fill: #269e79 !important;
}

.value-delivery .value-delivery-content ul li a {
  position: relative;
  color: #269e79;
}

.value-delivery .value-delivery-content ul li h4 {
  width: 100%;
  margin-top: 10px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.value-delivery .value-delivery-content ul li img {
  margin-top: 50px;
  width: 60px;
}

.value-delivery .value-delivery-content ul li p {
  max-width: 182px;
  font-size: 14px;
  color: #70768e;
  margin: 20px 0px 40px 0px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
  /* word-break: break-all; */
}

.service-mode {
  margin-top: 50px;
}

.service-mode .service-mode-title {
  text-align: center;
  position: relative;
}

.service-mode .service-mode-title p {
  font-size: 30px;
  font-weight: 400;
}

.service-mode .service-mode-title span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 7px;
  transform: translate(-50%, 25px);
  background-color: #269e79;
}

.service-mode .service-mode-content {
  margin-top: 45px;
}

.service-mode .service-mode-content ul {
  display: flex;
}

.service-mode .service-mode-content ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url('/html/image/png/BGC.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 33.33%;
  padding: 50px 10px !important;
  opacity: 0;
  transform: translateY(100px);
}

.service-mode .service-mode-content ul li:hover {
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.3);
}

.service-mode .service-mode-content ul li h4 {
  word-break: break-all;
}

.margin-num {
  margin: 0px 40px !important;
}

.service-mode .service-mode-content ul li p {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 20px 0px 20px !important;
  text-align: center;
}

.service-mode .service-mode-content ul li a {
  display: block;
  width: 130px;
  height: 40px;
  background-color: #269e79;
  color: #ffffff;
  border-radius: 5px;
  font-size: 16px;
  text-align: center;
  line-height: 40px;
  word-break: break-all;
}

.bgc {
  background-color: #cccccc !important;
}

.fouth-container {
  margin-top: 40px;
  background-color: #f7fcff;
}

.reference-case {
  padding-top: 32px;
}

.reference-case .reference-case-title {
  text-align: center;
  position: relative;
}

.reference-case .reference-case-title p {
  font-size: 30px;
  font-weight: 400;
}

.reference-case .reference-case-title span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 7px;
  transform: translate(-50%, 25px);
  background-color: #269e79;
}

.reference-case .reference-case-content {
  opacity: 0;
  transform: translateY(100px);
}

.reference-case .reference-case-content .reference-case-content-tab ul {
  display: flex;
  justify-content: space-between !important;
}

.reference-case .reference-case-content .reference-case-content-tab ul li {
  width: 204px;
  height: 65px;
  border: 1px solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid #269e79;
}

.reference-case .reference-case-content .reference-case-content-tab ul li img {
  margin-right: 10px;
  vertical-align: bottom;
}

.reference-case .reference-case-content .reference-case-content-tab-body {
  margin-top: 140px;
  position: relative;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things {
  display: flex;
  background: #fff;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-img {
  width: 50%;
  position: relative;
  height: 100%;
  overflow: hidden;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-img
  img {
  width: 100%;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc {
  width: 50%;
  padding: 15px 24px;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  h4 {
  width: 100%;
  font-size: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  p {
  font-size: 14px;
  color: #70768e;
  margin: 40px 0px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  .internet-of-things-desc-list {
  width: 100%;
  background-color: #f5f7fa;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  .internet-of-things-desc-list
  ul
  li:hover
  span {
  color: #269e79 !important;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  .internet-of-things-desc-list
  ul {
  display: flex;
  flex-direction: column;
  padding: 30px 10px 0px 10px !important;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  .internet-of-things-desc-list
  ul
  li {
  margin-bottom: 30px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  .internet-of-things-desc-list
  ul
  li
  a {
  width: 100%;
  color: #000000 !important;
}

.reference-case
  .reference-case-content
  .reference-case-content-tab-body
  .internet-of-things
  .internet-of-things-desc
  > a {
  text-align: right !important;
  color: #269e79;
}

.last-module {
  position: relative;
  margin-top: 40px;
  background-image: url('/html/image/png/begin.png');
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  height: calc(100vw * 428 / 1440);
  opacity: 0;
  transform: translateY(100px);
}

.last-module > a {
  position: absolute;
  width: 150px;
  height: 60px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 120px));
  border-radius: 5px;
  color: #269e79;
  background-color: #ffffff;
  text-align: center;
  font-size: 18px;
  line-height: 60px;
}

.footer-module {
  color: #ffffff;
  display: flex;
  padding: 0px 20px;
}

.footer-module .footer-module-left {
  width: 40%;
}

.footer-module .footer-module-left .footer-logo {
  display: flex;
  align-items: center;
}

.footer-module .footer-module-left .footer-logo img {
  margin-right: 10px;
}

.footer-module .footer-module-left .footer-logo span {
  font-size: 36px;
  color: #ffffff;
}

.footer-module .footer-module-left .footer-date {
  margin: 15px 0px;
}

.footer-module .footer-module-left .footer-date ul li {
  font-size: 14px;
  margin-bottom: 10px !important;
}

.footer-module .footer-module-left .footer-chat {
  position: absolute;
}

.footer-module .footer-module-left .footer-chat ul {
  display: flex;
}

.footer-module .footer-module-left .footer-chat ul li {
  margin-right: 45px !important;
}

.footer-module .footer-module-right {
  width: 60%;
  display: flex;
  padding-top: 5px;
}

.company-title .footALink:hover {
  color: #269e79 !important;
}

.footer-date li a {
  color: #ffffff !important;
}

.footer-date li:hover a {
  color: #269e79 !important;
}

.footer-module .footer-module-right dl {
  width: 33.33%;
}

.footer-module .footer-module-right dl dt {
  margin-bottom: 10px !important;
}

.footer-module .footer-module-right dl dd {
  margin-bottom: 10px !important;
}

.footer-module .footer-module-right dl dd a {
  color: #ffffff !important;
}

.footer-module .footer-module-right dl dd a:hover {
  color: #269e79 !important;
}

.company-title {
  text-align: center;
  margin-top: 50px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #4f4f4f !important;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-size: 24px !important;
}

.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  background-color: #cccccc;
}

.swiper-pagination {
  display: flex;
  position: absolute;
  top: -80px;
  left: 0;
  justify-content: space-between;
}

.pag {
  width: 204px;
  height: 65px;
  line-height: 65px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.pag img {
  margin-right: 5px;
  vertical-align: middle;
}

.pag:hover span {
  color: #269e79 !important;
}

.backTop {
  position: fixed;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 30px;
  background-color: rgba(109, 114, 120, 0.1);
  right: 10px;
  bottom: 100px;
  text-align: center;
  display: none;
  color: white;
  z-index: 999;
}

.backTop img {
  width: 32px;
  height: 32px;
}

.many-animate {
  opacity: 1 !important;
  transform: translateZ(0) scale(1) !important;
  transition: all 1s;
}

.removeAnimate {
  opacity: 0 !important;
  transition: all 1s;
}

/* [data-aos-delay='500'].many-animate {
  transition-delay: 0.5s;
}
[data-aos-delay='1000'].many-animate {
  transition-delay: 1s;
}
[data-aos-delay='1500'].many-animate {
  transition-delay: 1.5s;
} */

.pag-active i {
  position: absolute;
  top: 62px;
  left: 0px;
  background-color: #269e79;
  animation: moveLine 5s;
}

@keyframes moveLine {
  from {
    height: 2px;
    width: 0px;
  }
  to {
    height: 2px;
    width: 100%;
  }
}

@keyframes downUp {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeIn {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 1s;
}

.fadeOut {
  opacity: 0 !important;
  transition: 1s;
}

/* 头部导航的selec下拉菜单 */

.home:hover a,
.join:hover a {
  color: #269e79 !important;
}

/* 头部导航的下三角 */

#product,
#case,
#service {
  position: relative;
}

#product > a::after,
#case > a::after,
#service > a::after {
  content: ' ';
  position: absolute;
  top: 4px;
  right: -18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-left: 1px solid #000;
  border-bottom: 1px solid #000;
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* 鼠标移上改变方向 */

#product:hover > a,
#case:hover > a,
#service:hover > a {
  color: #269e79 !important;
}

#product:hover > a::after,
#case:hover > a::after,
#service:hover > a::after {
  top: 9px !important;
  border-left: 1px solid #269e79;
  border-bottom: 1px solid #269e79;
  transform: rotate3d(0, 0, 1, -225deg) !important;
}

/* 下拉菜单 */

.controlProductShow,
.controlCaseShow,
.controlServiceShow {
  display: none;
  position: relative;
}

.seclectMenuProduct,
.seclectMenuCase,
.selcetMenuService {
  position: fixed;
  left: 0px;
  top: 64px;
  width: 100%;
  height: auto;
  padding: 50px 0px;
  background-color: #ffffff;
  animation: menu 0.2s ease 0.2s forwards;
  opacity: 0;
  border-top: solid 1px rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0px 10px 10px 0px rgb(0 0 0 / 10%);
}

.isScrollBorder {
  -webkit-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.06);
}

.isShow {
  display: block !important;
}

.isHide {
  display: none !important;
}

/* 导航菜单的动画 */

@keyframes menu {
  from {
    transform: translateY(20px) !important;
    /* height: 0px; */
  }
  to {
    opacity: 1;
    transform: translateY(0px) !important;
    /* height: 150px; */
  }
}

.outsideProductContainer,
.outsideCaseContainer,
.outsideServiceContainer {
  display: flex;
}

/* 产品 */

#product .outsideProductContainer > a {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  padding: 10px !important;
  /* overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; */
}

#product .outsideProductContainer > a:hover {
  background-color: #f5f7fa;
}

#product .outsideProductContainer > a:hover span {
  color: #269e79 !important;
}

#product .outsideProductContainer > a span {
  margin-bottom: 20px;
  color: #000000 !important;
  font-weight: bolder;
}

#product .outsideProductContainer > a p {
  color: #b1b7c1;
  font-size: 14px;
  word-break: break-all;
}

/* 解决方案 */

#case .outsideCaseContainer > a {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  padding: 10px !important;
}

#case .outsideCaseContainer > a span {
  margin-bottom: 20px;
  color: #000000 !important;
  font-weight: bolder;
}

#case .outsideCaseContainer > a p {
  color: #b1b7c1;
  font-size: 14px;
  word-break: break-all;
}

#case .outsideCaseContainer > a:hover {
  background-color: #f5f7fa;
}

#case .outsideCaseContainer > a:hover span {
  color: #269e79 !important;
}

/* 服务 */

#service .outsideServiceContainer > a {
  width: 25%;
  display: flex;
  flex-direction: column;
  margin-right: 10px;
  padding: 10px !important;
}

#service .outsideServiceContainer > a:hover {
  background-color: #f5f7fa;
}

#service .outsideServiceContainer > a span {
  margin-bottom: 20px;
  color: #000000 !important;
  font-weight: bolder;
}

#service .outsideServiceContainer > a p {
  color: #b1b7c1;
  font-size: 14px;
  word-break: break-all;
}

#service .outsideServiceContainer > a:hover span {
  color: #269e79 !important;
}

/* 服务导航二级菜单样式 */
.textarea::-webkit-input-placeholder {
  height: 45px;
  line-height: 45px;
  padding-left: 8px;
}