@charset "utf-8";

/* banner */
.g-carousel {
  position: relative;
  margin: 0 auto;
  min-width: 1200px;
  overflow: hidden;
}
.g-carousel .g-carousel-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.g-carousel .g-carousel-content .g-carousel-item {
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
}
.g-carousel .g-carousel-content .g-carousel-item.s-carousel-item {
  margin: 0 auto;
  text-align: center;
}
.g-carousel .g-carousel-content .g-carousel-item.s-carousel-item img {
  height: 400px;
}
.g-carousel .g-arrow {
  position: absolute;
  display: inline-block;
  top: 50%;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 1.7rem;
  background-color: rgba(0,0,0,0.26);
  color: #fff;
}
.g-carousel .g-arrow.s-arrow-pre {
  left: 0;
}
.g-carousel .g-arrow.s-arrow-next {
  right: 0;
}
.g-carousel .g-dots{
  position: absolute;
  left: 360px;
  bottom: 18px;
  font-size: 0;
}
.g-carousel .g-dots .g-dot{
  display: inline-block;
  margin-right: 10px;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  border: 1px solid #fff;
}
.g-carousel .g-dots .g-dot.active{
  background-color: #fff;
}
.banner-content{
  display: inline-block;
  position: absolute;
  left: 360px;
  top: 138px;
  height: 120px;
  line-height: 1;
  text-align: left;
  color: #fff;
}
.banner-content .title{
  font-size: 55px;
  font-weight: 300
}
.banner-content .desc{
  margin-top: 20px;
  font-size: 28px;
  font-weight: 300;
}
/* 优势 */
.advantage{
  height: 470px;
  
}
.advantage .desc{
  margin: 0 auto;
  width: 670px;
  color: #999;
}
.advantage .impression .g-flex-item{
  position: relative;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}
.advantage .impression .g-flex-item .mask{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.advantage .impression .g-flex-item .icon{
  position: relative;
  margin: 34px auto 0;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: 2704px 104px;
  background-blend-mode: lighten;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter{
  background-image: url("../img/icon-three-bg.png");
  background-size: 96px 96px;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line{
  display: inline-block;
  border: 2px solid rgb(5,150,231);
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line:before{
  display: inline-block;
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border: 3px solid rgb(5,150,231);
  border-radius: 20px;
  background-color: #fff;
}

.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-1{
  position: absolute;
  top: 15px;
  left: 47px;
  height: 0;
  border-color: linear-gradient(#047fdf, #06a5ce);
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1):hover .icon-enter .line-1{
  height: 46px;
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-1:before{
  position: absolute;
  top: -13px;
  left: -13px;
  border-color: #047fdf;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1):hover .icon-enter .line-1:before{
  -webkit-transform: translate3d(0, 43px, 0);
          transform: translate3d(0, 43px, 0);
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-2{
  position: absolute;
  bottom: 16px;
  left: 13px;
  height: 0;
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
  -webkit-transform-origin: bottom left;
          transform-origin: bottom left;
  -webkit-transform: rotateZ(55deg);
          transform: rotateZ(55deg);
}
.advantage .impression .g-flex-item:nth-of-type(1):hover .icon-enter .line-2{
  height: 46px;
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-2:before{
  top: -12px;
  left: -14px;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-3{
  position: absolute;
  bottom: 17px;
  right: 17px;
  height: 0;
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  -webkit-transform: rotateZ(-55deg);
          transform: rotateZ(-55deg);
}
.advantage .impression .g-flex-item:nth-of-type(1):hover .icon-enter .line-3{
  height: 44px;
  -webkit-transition: height ease-in-out 1s;
  transition: height ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(1) .icon-enter .line-3:before{
  top: -12px;
  right: -14px;
}
.advantage .impression .g-flex-item:nth-of-type(2) .icon-enter{
  background-image: url("../img/icon-m-t.png");
  background-size: 96px 96px;
}
.advantage .impression .g-flex-item:nth-of-type(2) .icon-enter .rotate{
  width: 96px;
  height: 96px;
  background-image: url("../img/icon-m-bg.png");
  background-size: 96px 96px;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(2):hover .icon-enter .rotate{
  background-image: url("../img/icon-m-bg.png");
  background-size: 96px 96px;
  -webkit-transform: rotateZ(47.5deg);
          transform: rotateZ(47.5deg);
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter{
  background-image: url("../img/icon-screen-bg.png");
  background-size: 96px 96px;
  background-position: center;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter .line{
  position: relative;
  display: inline-block;
  position: absolute;
  width: 60px;
  border-top: 3px solid;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter .line-1{
  top: 38px;
  right: 20px;
  border-top-color: rgb(5,150,231);
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3):hover .icon-enter .line-1{
  width: 5px;
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter .line-1:before{
  display: inline-block;
  content: '';
  position: absolute;
  right: 45px;
  top: -10px;
  width: 10px;
  height: 10px;
  border: 3px solid rgb(5,150,231);
  border-radius: 10px;
  background-color: #fff;
  -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
  -webkit-transition: transform ease-in-out 1s;
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3):hover .icon-enter .line-1:before{
  -webkit-transform: translate3d(45px,0,0);
          transform: translate3d(45px,0,0);
  -webkit-transition: transform ease-in-out 1s;
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter .line-2{
  top: 58px;
  left: 20px;
  border-top-color: rgb(6,168,237);
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3):hover .icon-enter .line-2{
  width: 5px;
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3) .icon-enter .line-2:before{
  display: inline-block;
  content: '';
  position: absolute;
  left: 45px;
  top: -10px;
  width: 10px;
  height: 10px;
  border: 3px solid rgb(6,168,237);
  border-radius: 10px;
  background-color: #fff;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  -webkit-transition: transform ease-in-out 1s;
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(3):hover .icon-enter .line-2:before{
  -webkit-transform: translate3d(-45px,0,0);
          transform: translate3d(-45px,0,0);
  -webkit-transition: transform ease-in-out 1s;
  -webkit-transition: -webkit-transform ease-in-out 1s;
  transition: -webkit-transform ease-in-out 1s;
  transition: transform ease-in-out 1s;
  transition: transform ease-in-out 1s, -webkit-transform ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(4) .icon-enter{
  background-image: url("../img/icon-adv-4.png");
  background-size: 96px 96px;
  background-position: center top;
}
.advantage .impression .g-flex-item:nth-of-type(4) .icon-enter .line{
  display: inline-block;
  position: absolute;
  left: 20px;
  border-top: 3px solid;
}
.advantage .impression .g-flex-item:nth-of-type(4) .icon-enter .line-1{
  top: 49px;
  width: 50px;
  border-top-color: rgb(5,150,231);
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(4) .icon-enter .line-2{
  top: 68px;
  width: 40px;
  border-top-color: rgb(6,168,237);
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(4):hover .icon-enter .line-1{
  width: 2px;
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item:nth-of-type(4):hover .icon-enter .line-2{
  width: 4px;
  -webkit-transition: width ease-in-out 1s;
  transition: width ease-in-out 1s;
}
.advantage .impression .g-flex-item .title{
  margin-top: 12px;
  font-size: 22px;
  font-weight: normal
}
.advantage .impression .g-flex-item .txt{
  margin: 10px auto 0;
  width: 200px;
  line-height: 22px;
  font-size: 14px;
  color: #666;
}
/* about */
.about{
  height: 414px;
  
  color: #fff;
  background: url("../img/banner-about.png") no-repeat center top;
}
.about .main {
  background: inherit;
  height: 100%;
}
.about .desc{
  margin: 3px auto 0;
  width: 920px;
  line-height:28px;
}
.about .impression{
  margin: 21px auto;
  width: 800px;
}
.about .impression .count-item{
  position: relative;
  display: inline-block;
  padding: 0 30px;
  font-size: 0;
}
.about .impression .count-item:nth-last-of-type(2):before{
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border-left: 2px solid #fff;
  height:20px;
}
.about .impression .count-item:nth-last-of-type(2):after{
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  border-left: 2px solid #fff;
  height:20px;
}
.about .impression .count-item .count{
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}
.about .impression .count-item .txt{
  font-size: 14px;
}
.about .btn-know{
  display: inline-block;
  width: 120px;
  height: 36px;
  line-height: 30px;
  border: 2px solid #fff;
  font-size: 0;
  color: #fff;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;
}
.about .btn-know span{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateX(8px);
          transform: translateX(8px);
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
  font-size: 12px;
}
.about .btn-know:hover span{
  -webkit-transform: translateX(-5px);
          transform: translateX(-5px);
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
}
.about .btn-know img{
  display: inline-block;
  vertical-align: middle;
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
}
.about .btn-know:hover img{
  opacity: 1;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
  -webkit-transition: all ease-in 0.2s;
  transition: all ease-in 0.2s;
}
/* cooperator */
.cooperator{
  
}
.cooperator .main {
  background: inherit;
  height: inherit;
}
.cooperator .desc{
  margin: 0 auto;
  width: 920px;
}
.cooperator .impression{
  margin: 30px auto 0;
  width: 1200px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.cooperator .impression .logo-item{
  display: inline-block;
  padding: 10px 53px;
}