.index-container .left-image {
  position: relative;
  width: 38%;
  height: 100%;
  float: left;
  overflow: hidden;
  background: url(../images/photo1.jpg) center center no-repeat;
  background-size: cover;
}
.left-image .image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}
@keyframes slideshow-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  15% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  20% {
    opacity: 0;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes slideshow-2 {
  20% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  35% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  40% {
    opacity: 0;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes slideshow-3 {
  40% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  55% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  60% {
    opacity: 0;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes slideshow-4 {
  60% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  80% {
    opacity: 0;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes slideshow-5 {
  80% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  95% {
    opacity: 1;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
}
.img1 {
  animation: slideshow-1 16s linear infinite;
  z-index: 4;
}
.img2 {
  animation: slideshow-2 16s linear infinite;
  z-index: 3;
}
.img3 {
  animation: slideshow-3 16s linear infinite;
  z-index: 2;
}
.img4 {
  animation: slideshow-4 16s linear infinite;
  z-index: 1;
}
.img5 {
  animation: slideshow-5 16s linear infinite;
  z-index: 0;
}
.index-container .right-wrap {
  float: left;
  height: 100%;
  min-width: 400px;
}
.right-wrap .index-text {
  position: relative;
  margin-left: 40px;
  top: 50%;
  font-family: "Source Han Sans",Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;
  font-size: 30px;
  margin-top: -65px;
  line-height: 40px;
  letter-spacing: 1px;
}
.right-wrap .next {
  position: absolute;
  bottom: 50px;
  left: 50%;
  width: 30px;
  height: 30px;
  background: url("../images/arrow.png") no-repeat center center;
  background-size: 30px;
}
.section.second {
  background: #fafafa;
}
.more-wrap {
  text-align: center;
  margin-top: 100px;
}
.more-wrap .more {
  position: relative;
  background: #282828;
  padding: 12px 55px;
  color: #fff;
  font-size: 18px;
}
.more-wrap.white {
  margin-top: 140px;
}
.more-wrap.white .more {
  background: #fff;
  color: #242424;
}
.banner-wrap {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding-top: 140px;
}
.banner-title {
  font-size: 34px;
  text-align: center;
}
.banner-items {
  display: flex;
  margin-top: 40px;
}
.banner-items .banner-item {
  height: 280px;
  width: 380px;
  margin: 0 5px;
  position: relative;
}
.banner-item p {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: -50px;
  font-size: 20px;
}
.banner-item.ui {
  background: url("../images/item-ui.png") center center no-repeat;
  background-size: 100% auto;
}
.banner-item.html5 {
  background: url("../images/item-h5.png") center center no-repeat;
  background-size: 100% auto;
}
.banner-item.brand {
  background: url("../images/item-brand.png") center center no-repeat;
  background-size: 100% auto;
}
.section.third {
  background: url("../images/background-third.jpg") center center no-repeat;
  background-size: cover;
}
.third .banner-wrap .banner-title {
  color: #fff;
}
.banner-item.shape {
  min-width: 180px;
  background: url("../images/item-shape.png") center center no-repeat;
  background-size: auto 100%;
}
.shape .title {
  top: 50%;
  color: #fff;
  font-size: 24px;
  line-height: 40px;
  margin-top: -20px;
}
.shape .sub-title {
  min-width: 180px;
  padding: 0;
  color: #fff;
  list-style: none;
  position: absolute;
  bottom: -100px;
  text-align: center;
  left: 50%;
  margin-left: -90px;
  font-size: 16px;
  line-height: 24px;
}
.last {
  background: #fafafa;
}
.last .banner-items {
  margin-top: 40px;
}
.wechat-qrcode {
  padding: 4px;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid #f5f5f5;
  border-radius: 2px;
}
.wechat-qrcode img {
  width: 160px;
  height: 160px;
}
.wechat-qrcode p {
  line-height: 30px;
  margin: 0;
}
.last .footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 240px;
  background: #f2f2f2;
}
.footer .banner-wrap {
  padding-top: 0;
}
.footer .banner-items {
  margin-top: 20px;
}
.footer .banner-title {
  padding-top: 20px;
}
.footer .banner-item {
  height: 60px;
}
.footer .banner-item p {
  font-size: 14px;
  bottom: -20px;
}
.footer .banner-item .company-name {
  bottom: -40px;
}
.footer .banner-item.bainu {
  background: url("../images/partner/bainu-logo.png") center center no-repeat;
  background-size: 40px auto;
}
.footer .banner-item.ehshig {
  background: url("../images/partner/ehshig-logo.png") center center no-repeat;
  background-size: 40px auto;
}
.footer .banner-item.mongoltube {
  background: url("../images/partner/mongoltube-logo.png") center center no-repeat;
  background-size: 40px auto;
}
.footer .copyright {
  background: #171717;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 40px;
}