﻿
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		transform: translateX(-20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
}
@-webkit-keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
		transform: translateX(20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(20px);
		-ms-transform: translateX(20px);
		transform: translateX(20px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes pulse {
	0% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
		transform: scale(1.1)
	}
	100% {
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}

@-webkit-keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		transform: translateX(-2000px)
	}
	100% {
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes slideInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
		-ms-transform: translateX(-2000px);
		transform: translateX(-2000px)
	}
	100% {
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
}




@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-40px);
		transform: translateY(-40px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-40px);
		-ms-transform: translateY(-40px);
		transform: translateY(-40px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0)
	}
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes leftbuild {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-40px);
		transform: translateX(-40px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		transform: translateX(0)
	}
}

@keyframes leftbuild {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-40px);
		-ms-transform: translateX(-40px);
		transform: translateX(-40px)
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0)
	}
}

@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.6);
		-ms-transform: scale(.6);
		transform: scale(.6)
	}
	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		transform: scale(1.05)
	}
	70% {
		-webkit-transform: scale(.8);
		transform: scale(.8)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.6);
		-ms-transform: scale(.6);
		transform: scale(.6)
	}
	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05)
	}
	70% {
		-webkit-transform: scale(.9);
		-ms-transform: scale(.9);
		transform: scale(.9)
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		transform: scale(1)
	}
}

.bounceIn {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn
}

@-webkit-keyframes lightSpeedIn {
	0% {
		-webkit-transform: translateX(100%) skewX(-20deg);
		transform: translateX(100%) skewX(-20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(-10%) skewX(20deg);
		transform: translateX(-10%) skewX(20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(-5deg);
		transform: translateX(0%) skewX(-5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

@keyframes lightSpeedIn {
	0% {
		-webkit-transform: translateX(100%) skewX(-20deg);
		-ms-transform: translateX(100%) skewX(-20deg);
		transform: translateX(100%) skewX(-20deg);
		opacity: 0
	}
	60% {
		-webkit-transform: translateX(-10%) skewX(20deg);
		-ms-transform: translateX(-10%) skewX(20deg);
		transform: translateX(-10%) skewX(20deg);
		opacity: 1
	}
	80% {
		-webkit-transform: translateX(0%) skewX(-5deg);
		-ms-transform: translateX(0%) skewX(-5deg);
		transform: translateX(0%) skewX(-5deg);
		opacity: 1
	}
	100% {
		-webkit-transform: translateX(0%) skewX(0deg);
		-ms-transform: translateX(0%) skewX(0deg);
		transform: translateX(0%) skewX(0deg);
		opacity: 1
	}
}

.lightSpeedIn {
	-webkit-animation-name: lightSpeedIn;
	animation-name: lightSpeedIn;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out
}

@-webkit-keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		transform: perspective(400px) rotateX(90deg);
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-10deg);
		transform: perspective(400px) rotateX(-10deg)
	}
	70% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg)
	}
	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		transform: perspective(400px) rotateX(0deg);
		opacity: 1
	}
}

@keyframes flipInX {
	0% {
		-webkit-transform: perspective(400px) rotateX(90deg);
		-ms-transform: perspective(400px) rotateX(90deg);
		transform: perspective(400px) rotateX(90deg);
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(400px) rotateX(-10deg);
		-ms-transform: perspective(400px) rotateX(-10deg);
		transform: perspective(400px) rotateX(-10deg)
	}
	70% {
		-webkit-transform: perspective(400px) rotateX(10deg);
		-ms-transform: perspective(400px) rotateX(10deg);
		transform: perspective(400px) rotateX(10deg)
	}
	100% {
		-webkit-transform: perspective(400px) rotateX(0deg);
		-ms-transform: perspective(400px) rotateX(0deg);
		transform: perspective(400px) rotateX(0deg);
		opacity: 1
	}
}

/*首页*/
/*.animation.banner-content .tltl{
	animation: fadeInUp .3s .3s linear both
}*/
.animation .xinwen-img {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
}
/*.animation .right-text {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
}*/

.animation .right-text .top-content{animation: fadeInUp .3s .3s linear both}
/*.animation .right-text div:nth-child(2){}*/
.animation .right-text .center-content p{animation: fadeInUp .3s .3s linear both}
.animation .right-text .center-content p:nth-child(2){animation-delay: .4s ;}
.animation .right-text .center-content p:nth-child(3){animation-delay: .5s;}
.animation .right-text .center-content p:nth-child(4){animation-delay: .6s;}

.animation .right-text .center-content.bottom-content p{animation: fadeInUp .3s .3s linear both}
.animation .right-text .center-content.bottom-content p:nth-child(2){animation-delay: .4s;}
.animation .right-text .center-content.bottom-content p:nth-child(3){animation-delay: .5s;}

.animation .left-document{animation: fadeInLeft 1s 1s linear  both}
.animation .right-document{animation: fadeInRight 1s 1s linear  both}

/*.animation .left-content .big-tit{animation:fadeIn 1s 1s linear  both}*/
.animation .left-content{animation:fadeInUp .6s .6s linear  both}
.animation .left-content .big-tit{animation:fadeInUp .6s .6s linear  both}
.animation .left-content .title{animation:fadeInUp .6s .6s linear  both}
.animation .right-content{animation:fadeInUp .6s .6s linear  both}

.animation.style-body li{animation:fadeInUp .5s .5s linear  both}
.animation.style-body li:nth-child(2){animation-delay:.6s;}
.animation.style-body li:nth-child(3){animation-delay:.7s;}
.animation.style-body li:nth-child(4){animation-delay:.8s;}
.animation.style-body li:nth-child(5){animation-delay:.9s;}
.animation.style-body li:nth-child(6){animation-delay:1s;}
.animation.style-body li:nth-child(7){animation-delay:1.1s;}
.animation.style-body li:nth-child(8){animation-delay:1.2s;}
.animation .left-box{animation: fadeInLeft .3s .3s linear  both}
.animation .right-box{animation: fadeInRight .3s .3s linear  both}




/*关于顶呱呱*/
.animation .inter-big-tit{animation:fadeInLeft .5s .5s linear  both}
.animation .inter-small-tit{animation:fadeInLeft .5s .5s linear  both}
.animation .about-us-left-img{animation: fadeInLeft .5s .5s linear both}
.animation .about-us-right{animation: fadeInRight .5s .5s linear both}
.animation .ceo-speech-box-content-tit{animation: fadeInUp .3s .3s linear both}
.animation .ceo-text{animation: fadeInUp .6s .6s linear both}
.animation .autograph{animation: fadeInUp .9s .9s linear both}
.animation .big-til{animation:fadeInUp .5s .5s linear  both}
.animation .small-til{animation:fadeInLeft .5s .5s linear  both}
.animation .xian-til{animation:fadeInLeft .5s .5s linear  both}
.animation.about-culture ul.culture1 li{animation: fadeInUp .3s .3s linear both;}
.animation.about-culture ul.culture1 li:nth-child(2){animation-delay: .9s;}
.animation.about-culture ul.culture1 li:nth-child(3){animation-delay: 1.5s;}
.animation.about-culture ul.culture2 li{animation: fadeInUp .6s .6s linear both;}
.animation.about-culture ul.culture2 li:nth-child(2){animation-delay: 1.2s;}
.animation.adout_maincenseven li{animation: fadeInUp .3s .3s linear both}
.animation.adout_maincenseven li:nth-child(2){animation-delay: .6s;}
.animation.adout_maincenseven li:nth-child(3){animation-delay: .9s;}
.animation.adout_maincenseven li:nth-child(4){animation-delay: 1.2s;}
.animation.adout_maincenseven li:nth-child(5){animation-delay: 1.5s;}


/*服务液态*/
/*.inter-titl {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
.animation.inter-titl, 
.animation .inter-titl {
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
}*/

.animation .inter-titl{animation: fadeInUp .3s .3s linear both;}

/*.animation.counter-01 div{animation: fadeInUp .3s .3s linear both;}
.animation.counter-01 div:nth-child(2){animation-delay: .6s;}
.animation.counter-01 div:nth-child(3){animation-delay: .7s;}
.animation.counter-01 div:nth-child(4){animation-delay: .8s;}
.animation.counter-01 div:nth-child(5){animation-delay: .9s;}
.animation.counter-01 div:nth-child(6){animation-delay: 1s;}
.animation.counter-01 div:nth-child(7){animation-delay: 1.1s;}*/

.animation.counter-02 li{animation: fadeInUp .5s .5s linear both;}
.animation.counter-02 li:nth-child(2){animation-delay: .6s;}
.animation.counter-02 li:nth-child(3){animation-delay: .9s;}
.animation.counter-02 li:nth-child(4){animation-delay: 1.2s;}
.animation.counter-02 li:nth-child(5){animation-delay: 1.5s;}

.animation.counter-03 li{animation: fadeInUp .3s .3s linear both;}
.animation.counter-03 li:nth-child(2){animation-delay: .6s;}
.animation.counter-03 li:nth-child(3){animation-delay: .9s;}
.animation.counter-03 li:nth-child(4){animation-delay: 1.2s;}
.animation.counter-03 li:nth-child(5){animation-delay: 1.5s;}

.animation.counter-04 li{animation: fadeInUp .3s .3s linear both;}
.animation.counter-04 li:nth-child(2){animation-delay: .6s;}
.animation.counter-04 li:nth-child(3){animation-delay: .9s;}
.animation.counter-04 li:nth-child(4){animation-delay: 1.2s;}
.animation.counter-05 li:nth-child(5){animation-delay: 1.5s;}
/*.animation.counter-02 li {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
	-webkit-animation-iteration-count:1;
	animation-iteration-count:1;
}
.animation.counter-02 li:nth-child(2) {
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}
.animation.counter-02 li:nth-child(3) {
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}
.animation.counter-02 li:nth-child(4) {
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
}*/