#header {
  
}

#hero #container {
  text-align: left;
  transform: translateY(-60%);
}

#hero .bg2 {
  position: absolute;
  right: 7.5%;
  top: 5%;
  height: 90%;
  z-index: -1;
}

#hero {
  height: 60vh;
  padding: 0;
  min-height: 485px;
}

#hero .topTitle {
  font-size: 48px;
  font-weight: bold;
}

#hero p {
  margin: 0;
  width: 65%;
}

#hero .carousel-indicators li {
  width: 45px;
  height: 5px;
}


#hero .carousel-indicators {
  position: absolute;
  justify-content: flex-start;
  left: calc((100% - 1170px) / 2 + 10px);
  bottom: 100px;
  margin: 0;
}


#hero .container {
  text-align: left;
  transform: translateY(-45%);
}


#hero h2 {
  font-size: 48px;
  font-weight: bold;
}











.animate__animated {
  color: #fff;
}
#link {
  text-align: center;
  padding: 100px 0;
  width: 100%;
  min-width: 1360px;
  position: relative;
}
#link1 {
  display: none;
}

#link img {
  width: 100vw;
  min-width: 1360px;
}

#link .topText {
  display: flex;
  position: absolute;
  left: -2%;
  width: 95%;
  top: calc(172px + 3vw);
}

#link .topText .textBox p:first-child {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

#link .topText .textBox p:last-child {
  font-size: 12px;
  color: gray;
}

#link .bottomLeftText,
#link .bottomRightText {
  position: absolute;
  bottom: 17%;
}

#link .bottomLeftText p:first-child,
#link .bottomRightText p:first-child {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

#link .bottomLeftText p:last-child,
#link .bottomRightText p:last-child {
  font-size: 12px;
  color: gray;
}

#link .bottomLeftText {
  left: 36.3%;
}

#link .bottomRightText {
  right: 37.6%;
}



@media screen and (max-width: 1361px) {
  #link .topText {
    top: 210px;
  }

  #link .bottomLeftText {
    left: 36%;
  }
  
  #link .bottomRightText {
    right: 37%;
  }
}

@media screen and (min-width: 1362px) and (max-width: 1680px) {
  #link .topText .textBox p:first-child {
    font-size: 18px;
  }
  
  #link .topText .textBox p:last-child {
    font-size: 12px;
  }

  #link .bottomLeftText p:first-child,
  #link .bottomRightText p:first-child {
    font-size: 18px;
  }

  #link .bottomLeftText p:last-child,
  #link .bottomRightText p:last-child {
    font-size: 12px;
  }

  #link .bottomLeftText {
    left: 36.5vw;
  }

  #link .bottomRightText {
    right: 37.3vw;
  }
}

@media screen and (min-width: 1681px) {
  #link .topText .textBox p:first-child {
    font-size: 20px;
  }
  
  #link .topText .textBox p:last-child {
    font-size: 14px;
  }

  #link .bottomLeftText p:first-child,
  #link .bottomRightText p:first-child {
    font-size: 20px;
  }

  #link .bottomLeftText p:last-child,
  #link .bottomRightText p:last-child {
    font-size: 14px;
  }

  #link .bottomLeftText {
    left: 36.5vw;
  }

  #link .bottomRightText {
    right: 37.5vw;
  }
}






#link h2 {
  color: black;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 40px;
}

#link .topText .textBox {
  text-align: right;
  width: 16.6%;
}

#link .topText .textBox:nth-child(1) {
  transform: translateX(-12px);
}

#link .topText .textBox:nth-child(2) {
  transform: translateX(-6px);
}

#link .topText .textBox:nth-child(3) {
  transform: translateX(-2px);
}

#link .topText .textBox:last-child {
  transform: translateX(10px);
}













#about {
  padding-top: 100px;
  background: #fff;
}
#about .title {
  color: #10161A;
}

#about h2 {
  font-size: 32px;
  font-weight: 400;
}














#solution {
  padding-top: 100px;
}
#solution .solutionBox1 .right .item p:first-child{
    color: #44A058;
}

#solution h2 {
  color: black;
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 40px;
}

#solution .solutionBox {
  background-color: #F6F9FC;
  clear: both;
  margin-bottom: 20px;
  height: 385px;
  width: 100vw;
  min-width: 1200px;
}

#solution .solutionBox .enterpriseImg,
#solution .solutionBox .governmentImg {
  height: 385px;
  float: left;
}


#solution .solutionBox .right {
  height: 100%;
  display: grid;
  grid-template-rows: 45% 45%;
  grid-template-columns: 48% 48%;
  grid-gap: 9.5% 3.5%;
  padding: 20px;
  margin-right: 0;
}

#solution .solutionBox .moveRight,
#solution .solutionBox .moveLeft {
  transition: all .5s ease-in-out;
}


#solution .content {
  position: relative;
}

#solution .solutionBox .sidebarText,
#solution .solutionBox .sidebarText2 {
  position: absolute;
  font-size: 26px;
  color: #fff;
  font-weight: 400;
}

#solution .solutionBox .sidebarText {
  top: 172px;
  left: 21px;
}

#solution .solutionBox .sidebarText2 {
  bottom: 158px;
  left: 21px;
}



#solution .solutionBox .item {
  width: 100%;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: rgba(3, 0, 194, 0.062) 0px 1px 4px;
  display: flex;
  position: relative;
}

#solution .solutionBox .item p:first-child {
  font-size: 20px;
  color: #5b8bf7;
  margin-bottom: 15px;
  font-weight: bold;
}

#solution .solutionBox .item p:nth-child(2) {
  color: gray;
  line-height: 2;
  font-size: 14px;
}


@keyframes move {
  0% { left: 0vw; }
  12.5% { left: -100vw; }
  37.5% { left: -200vw; }
  50% { left: -300vw; }
  62.5% { left: -400vw; }
  75% { left: -500vw; }
  87.5% { left: -600vw; }
  100% { left: -700vw; }
}

#solution .item .textLeft {
  width: 100%;
}

#solution .item .textRight {
  width: 100%;
}

#solution .item .expand {
  display: none;
  width: 50%;
}


#solution .expand .line {
  top: 17%;
  height: 15vh;
  min-height: 125px;
  width: 1px;
  border: 2px solid #5b8bf7;
  position: absolute;
  left: 50%;
}

#solution .expand .iconAndText {
  position: absolute;
  width: 30%;
  top: 50%;
  transform: translateY(-50%);
  left: 55%;
  display: flex;
}

#solution .expand .iconAndText p {
  margin: 0;
}

#solution .expand .iconAndText .text {
  margin-bottom: 5px;
}

#solution .expand .iconAndText .text:last-child {
  margin-bottom: 0;
}


#solution .expand img {
  width: 10.5px;
  height: 14px;
  transform: translateY(55%);
  margin-right: 9px;
  float: left;
}

#solution .expand .expandBg {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: none;
  right: -13px;
  top: 0;
}



#client {
  overflow: hidden;
  padding: 80px 0 100px 0;
  position: relative;
  height: 450px;
}

#client h2 {
  font-size: 32px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 50px;
}

#client:hover .carousel {
  animation-play-state: paused;
}

#client .carousel {
  position: absolute;
  width: 1300vw;
  transition: all .5s;
  animation: move 20s ease-in-out infinite;
}

#client .carousel .item {
  width: 100vw;
  display: flex;
  justify-content: center;
  float: left;
  text-align: center;
  height: 20vh;
}

#client .carousel .item img {
  margin: auto 0;
  margin-right: 3vw;
}

#client .carousel .item img:last-child {
  margin-right: 0;
}

#client .carousel img {
  width: 5vw;
}

#client > img {
  position: absolute;
  width: 5vw;
  top: 52%;
  cursor: pointer;
  z-index: 999;
}

#client .backImg {
  left: 20px;
}

#client .nextImg {
  right: 20px;
}
#about1 {
  display: none;
}

#solution .enterpriseImg1 ,.governmentImg1 {
  display: none;
}
.msidebarText {
  display: none;
}

@media only screen and (max-width: 550px) {
  
	#hero .topTitle {
		font-size: 32px;
	}
  #hero p {
    width: 90%;
  }
  #link {
    display: none;
  }
  #about {
    display: none;
  }
  #about1 img{
    width: 100%;
    height: auto;
  }
  #about1 {
    display: block;
  }
  #about1 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  #about1 h2 {
    
    
  }
  #link1 .content {
    position: relative;
  }
  #link1 .content p {
    position: absolute;
    font-size: 14px;
    font-weight: bold;
  }
  .text1 {
    top: 31%;
    left: 18%;
  }
  .text2 {
    top: 64%;
    left: 18%;
  }
  .text3 {
    right: 1%;
    top: 14%;
  }
  .text4 {
    right: 1%;
    top: 30%;
  }
  .text5 {
    right: 1%;
    top: 45%;
  }
  .text6 {
    right: 1%;
    top: 62%;
  }
  .text7 {
    right: 1%;
    top: 78%;
  }
  .text8 {
    right: 1%;
    top: 94%;
  }
  #about1 h2 {
    font-size: 32px;
    font-weight: 400;
  }
  #link1 {
    padding: 40px 20px 40px 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #link1 h2 {
    color: black;
    font-size: 18px;
    text-align: center;
    font-weight: 400;
    margin-bottom: 40px;
  }
  #link1 img {
    width: 100%;
    height: auto;
  }
  #solution .solutionBox {
    margin-bottom: 0px;
    height: auto;
    width: 100vw;
    min-width: 0;
    position: relative;
  }
  #solution .sidebarText {
    display: none;
  }
  #solution .enterpriseImg ,.governmentImg {
    display: none;
  }
  #solution .enterpriseImg1 ,.governmentImg1 {
    display: block;
    width: 100%;
    height: 74px;
  }
  .msidebarText {
    display: block;
    position: absolute;
    left: 55%;
    top: 12px;
    font-size: 20px;
    color: #fff;
    font-weight: 400;
  }
  #solution .solutionBox .right {
    height: 100%;
    display: grid;
    grid-template-rows: 48% 48%;
    grid-template-columns: 48% 48%;
    grid-gap: 4% 3.5%;
    padding: 20px;
    margin-right: 0;
  }
  #solution .solutionBox .item p:first-child {
    font-size: 16px;
    text-align: center;
  }
  #solution .solutionBox .item p:nth-child(2) {
    text-align: center;
  }
  #client {
    display: none;
  }
}