﻿.topCont {
  position: relative;
  width: 100%;
  height: auto;
  background: url(../images/banner.jpg) center no-repeat;
  background-size: cover;
}

.menu {
  position: relative;
  width: 100%;
}

.showBanner {
  position: relative;
  margin: 70px auto 0;
  z-index: 0;
  height: 400px;
  padding-bottom: 110px;
}


/* .qiguan {
  margin: 70px auto 0;
  padding-bottom: 110px;
}

.homes {
  margin: 120px auto 0;
  padding-bottom: 60px;
} */

.menu {
  z-index: 10
}

.menuC,
.menuF {
  background: #18191b
}

.picB {
  width: 400px;
  height: 400px;
}

.outCicle {
  text-align: center;
}

.bIcon {
  position: absolute;
  cursor: pointer;
}

.icon_ele {
  width: 90px;
  height: 59px;
  left: 156px;
  top: 164px;
}


.icon_app {
  width: 60px;
  left: 340px;
  top: 150px;
}

.icon_solu {
  width: 97px;
  left: 170px;
  top: 10px;
}

.icon_tui {
  width: 97px;
  left: 4px;
  top: 149px;
}

.icon_dev {
  width: 97px;
  left: 261px;
  top: 293px;
  display:none;
}
.icon_vi{
  width: 60px;
  left: 150px;
  top: 310px;
}

.textCicle {
  position: absolute;
  right: 0px;
  top: 80px;
  color: #fff;
}

.textCicle div {
  position: absolute;
  right: 0px;
  top: 80px;
  font-size: 40px;
  width: 340px;
  text-align: right;
  margin-top: 24px;
  padding-right: 17%;
  color: #ea5903;
  float: right;
}


.textCicle img {
  width: 60%;
  float: right;
}



@keyframes qw {
  0% {
    transform: rotateZ(0deg)
  }

  100% {
    transform: rotateZ(-360deg)
  }
}

@-webkit-keyframes qw {
  0% {
    -webkit-transform: rotateZ(0deg)
  }

  100% {
    -webkit-transform: rotateZ(-360deg)
  }
}

@-moz-keyframes qw {
  0% {
    -moz-transform: rotateZ(0deg)
  }

  100% {
    -moz-transform: rotateZ(-360deg)
  }
}

@-o-keyframes qw {
  0% {
    -o-transform: rotateZ(0deg)
  }

  100% {
    -o-transform: rotateZ(-360deg)
  }
}

/* 上下浮子 */

.floater {
  animation-name: floater;
  -webkit-animation-name: floater;

  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;

  visibility: visible !important;
}

@keyframes floater {
  0% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(8%);
  }

  100% {
    transform: translateY(0%);
  }
}

@-webkit-keyframes floater {
  0% {
    -webkit-transform: translateY(0%);
  }

  50% {
    -webkit-transform: translateY(8%);
  }

  100% {
    -webkit-transform: translateY(0%);
  }
}


.innerMenu,
.innerCont {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}


.logo,
.qiguans {
  width: 166px;
  height: 80px;
  float: left;
  padding-left: 100px;
}

.logo a {
  cursor: default;
}

.logo img {
  display: block;
  padding: 15px 0 0 0;
}

.qiguans img {
  display: block;
  padding: 0 0 0 0;
}

.navMenu {
  /* float: right; */
  position:relative;
  right: 0;
  /* position: relative; */
  height: 50px;
  line-height: 50px;
  text-align: right; 
  padding-top:0px;
  /* margin-right: 100px; */
}

.navList li {
  float: left;
  margin-left: 50px;
}

.navList li.on a {
  display: block;
  height: 50px;
  color: #5890cc;
  border-bottom: 2px solid #5890cc
}

.navMenu a {
  color: #fff
}


.icon_contact {
  position: absolute;
  right: 0;
  top: 26px;
  width: 130px;
  height: 18px;
  cursor: pointer;
}

.icon_tel {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
}

.icon_qq {
  position: absolute;
  left: 32px;
  top: 0;
  width: 18px;
  height: 18px;
}

.icon_wx {
  position: absolute;
  left: 66px;
  top: 0;
  width: 24px;
  height: 18px;
}

.icon_sina {
  position: absolute;
  right: 0;
  top: 0;
  width: 26px;
  height: 18px;
}

.showCont {
  display: none;
  z-index: 2;
  position: absolute;
  top: 70px;
  right: 30px;
  padding: 20px;
  text-align: center;
  background: #fff;
  border: 1px solid #5890cc;
  border-radius: 6px;
}

.icon_ang {
  display: block;
  position: absolute;
  left: 50%;
  top: -5px;
  width: 5px;
  height: 5px;
  background: url(../images/ang.png) center no-repeat;
}

.showCont {
  line-height: 26px
}

.subMenu {
  display: none;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 170px;
  background: #1c1d1f
    /*background: rgba(0,0,0,0.8);*/
}

.subNav {
  display: none;
  position: absolute;
  top: 0;
  padding: 20px 0;
}

.nav_solu {
  left: 390px
}

.nav_serv {
  left: 500px
}

.subNav li {
  width: 140px;
  line-height: 26px;
  text-align: center;
}

.subNav a {
  color: #999
}

.subNav li.on a,
.subNav li:hover a {
  color: #fff
}

.ins_intro {
  position: absolute;
  left: 0;
  top: -73px;
  height: 146px;
  background: #fff;
  -o-box-shadow: 6px 10px 12px rgba(33, 33, 33, 0.4);
  -moz-box-shadow: 6px 10px 12px rgba(33, 33, 33, 0.2);
  -ms-box-shadow: 6px 10px 12px rgba(33, 33, 33, 0.2);
  -webkit-box-shadow: 6px 10px 12px rgba(33, 33, 33, 0.2);
  box-shadow: 6px 10px 12px rgba(33, 33, 33, 0.2);
}


.ins_intro li {
  float: left;
  width: 275px;
  text-align: center;
  cursor: pointer;
}

.ins_intro li img {
  padding: 20px 0;
  transition: all 0.5s ease-in-out 0.1s;
  -webkit-transition: all 0.5s ease-in-out 0.1s;
  -moz-transition: all 0.5s ease-in-out 0.1s;
  -o-transition: all 0.5s ease-in-out 0.1s;
}

.ins_intro li:hover img {
  transform: rotate(360deg) scale(1.1);
  -webkit-transform: rotate(360deg) scale(1.1);
  -moz-transform: rotate(360deg) scale(1.1);
  -o-transform: rotate(360deg) scale(1.1);
  -ms-transform: rotate(360deg) scale(1.1)
}

.companyDiv {
  width: 1100px;
  margin: 0 auto;
}

.companyDiv img {
  width: 100%;
}


.companyName {
  color: #ea5903;
  font-family: 微软雅黑;
  font-size: 30px;
  font-weight: 550;
  padding-bottom: 20px;
}

.companyDescription {
  font-family: 微软雅黑;
  font-size: 20px;
  font-weight: 400;
  line-height: 40px;
}

.bottomImageDiv {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bottomImageDiv .bottomImage {
  width: 100%;
}

.bottomImageDiv .dwD {
  background: #fff;
  padding: 5px 15px;
  border-radius: 4px;
  line-height: 25px;
  display: none;
  margin-left: 10px;
  font-size: 14px;
}

.dwD p {
  font-size: 12px;
}

.bottomImageDiv .seles {
  position: absolute;
  left: 37.7%;
  top: 18.5%;
  display: flex;
  align-items: center;
}

.bottomImageDiv .dingwei {
  width: 35px;
}

.dw1 {
  display: block;
}

.dw2 {
  display: none;
}


.bottomImageDiv .seles:hover .dwD,
.bottomImageDiv .seles:hover .dw2 {
  display: block;
}

.bottomImageDiv .seles:hover .dw1 {
  display: none;
}


.imageList {
  position: absolute;
  margin-top: calc(-100vw * 10 * 739 / 1723 / 20);
  width: 100%;
  overflow-x: clip;
  display: flex;
  justify-content: center;
}

.imageList .parallelogram {
  position: relative;
  width: calc(100vw / 4 - 2.3vw);
  height: calc(100vw * 9 * 739 / 1723 / 24);
  transform: skew(-20deg, 0deg);
  background: #fff;
  margin: 0 4px;
}

.imageList .allelo {
  width: 30px;
  height: calc(100vw * 9 * 739 / 1723 / 24);
  transform: rotate(1deg);
  background: #fff;
}

.imageList .parallelogram {
  cursor: pointer;
}

.imageList .parallelogram:hover {
  background: rgba(255, 255, 255, 0.4);
}

.imageList a {
  cursor: default;
}

.imageList .parallelogram .logo-img {
  height: calc(100vw * 739 / 1723 / 3);
  transform: skew(20deg);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}


.imageList1 .parallelogram .logo-img {
  height: calc(100vw * 739 / 1723 / 5.5);
}

.imageList1 .parallelogram .logo-img1 {
  height: calc(100vw * 739 / 1723 / 4);
}

.appendInfo {
  text-align: center;
  padding: 30px 20px 30px 20px;
  color: #212480;
  font-family: 微软雅黑;
  font-size: 12px;
  font-weight: 450;
  line-height: 24px;
}

.imageData {
  position: absolute;
  margin-top: calc(-100vw * 11 * 739 / 1723 / 19);
  text-align: center;
  width: 100%;
  overflow-x: clip;
  display: flex;
  justify-content: space-around;
}

.imageData .image-item {
  width: 100%;
}

.imageData .imageItem1 {
  width: 66%;
}

.imageData .image-item .logo-img {
  width: 100%;
  height: 100%;
}

.imageData .swiper-prev,
.imageData .swiper-next {
  width: 50px;
  position: absolute;
  top: 40%;
  z-index: 10;
  display: none;
}

.imageData .swiper-prev {
  left: 2%;
}

.imageData .swiper-next {
  right: 2%;
}

.imageData .swiper-next img,
.imageData .swiper-prev img {
  width: 100%;
  height: 100%;
}



.appendInfo a {
  color: #212480;
  font-family: 微软雅黑;
  font-size: 12px;
  font-weight: 450;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.nav-item {
  position: relative;
}

.nav-item .secondNavti,
.on .secondNavti {
  display: none;
  width: 160px;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 100;
 
}

.nav-item .secondNavti p,
.on .secondNavti p {
  line-height: 30px;
  color: #999;
  cursor: pointer;
  font-size: 12px;
  left:0;
}

@media screen and (max-width: 1200px) {

  .bottomImageDiv .seles {
    left: 37.5%;
    top: 18.5%;
  }

  .bottomImageDiv .seles:hover {
    top: 18%;
  }

  .imageData {
    min-width: 1100px;
    overflow: hidden;
  }
}

@media screen and (min-width: 1200px) {
  .showBanner {
    width: 1100px;
  }

  .innerMenu,
  .innerCont {
    width: 1100px;
  }

  .bottomImageDiv .seles {
    left: 38%;
    top: 20%;
  }

  .bottomImageDiv .seles:hover {
    top: 19%;
  }
}

.menu-box {
  float: right;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 10px 50px;
  grid-gap: 20px;

}
.lang-box  {
  float: right;
  /* left: 10px; */
  top: 4px;
  margin-right: 0px;
  line-height: 40px;
  height: 40px;
  text-align: right;
  /* border-radius: 50px; */
  overflow: hidden;
  /* padding: 0; */
  /* border: #ddd solid 1px; */
  z-index: 99999;
}
 .lang-sub {
  float: right;
  background-image: url(../images/triplexgroup/nav_line.png);
  background-repeat: no-repeat;
  background-position: left center;
  margin-left: 10px;
}

.lang-box on  {
  font-size: 14px;
  padding-left: 5px;
  display: inline-block;
  
  height: 40px;
  line-height: 40px;
  border-top: none;
  text-align: right;
  font-family: 'ITCAVANTGARDESTD-BK', Arial, sans-serif;
  color: #5890cc;
 
}

.lang-box  a {
font-size: 14px;
padding-left: 5px;
display: inline-block;

height: 40px;
line-height: 40px;
border-top: none;
text-align: right;
color: #fbfdfc;
font-family: 'ITCAVANTGARDESTD-BK', Arial, sans-serif;
}
@media screen and (min-width: 1500px) {
  .showBanner {
    width: 1100px;
  }

  .innerMenu,
  .innerCont {
    width: 1100px;
    font-size: 16px;
  }

  .bottomImageDiv .seles {
    left: 38.3%;
    top: 21.7%;
  }

  .bottomImageDiv .seles:hover {
    top: 21.7%;
  }



  /* .picB {
    width: 400px;
    height: 400px;
  }

  .icon_ele {
    width: 90px;
    height: 59px;
    left: 256px;
    top: 160px;
  }

  .icon_app {
    width: 60px;
    left: 430px;
    top: 160px;
  }

  .icon_solu {
    width: 107px;
    left: 250px;
    top: -7px;
  }

  .icon_tui {
    width: 107px;
    left: 85px;
    top: 149px;
  }

  .icon_dev {
    width: 107px;
    left: 265px;
    top: 328px;
  } */

}

