@-webkit-keyframes smallUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes smallUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes smallLeft {
  from {
    -webkit-transform: translate3d(-5rem, 0, 0);
    transform: translate3d(-5rem, 0, 0);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes smallLeft {
  from {
    -webkit-transform: translate3d(-5rem, 0, 0);
    transform: translate3d(-5rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes smallRight {
  from {
    -webkit-transform: translate3d(5rem, 0, 0);
    transform: translate3d(5rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes smallRight {
  from {
    -webkit-transform: translate3d(5rem, 0, 0);
    transform: translate3d(5rem, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

/* 水平居合 */
@-webkit-keyframes mypulse {
  0% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes mypulse {
  0% {
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    /* opacity: 1; */
  }
  40% {
    /* opacity: 1; */
  }
  to {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

.mypulse {
  -webkit-animation-name: mypulse;
  animation-name: mypulse;
}
/* 中间渐变展开 */
@-webkit-keyframes stretch {
  from {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

@keyframes stretch {
  from {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
  }
}

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

@-webkit-keyframes abc {
  from {
    width: 0;
  }
  to {
  }
}

@keyframes abc {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.abc {
  -webkit-animation-name: abc;
  animation-name: abc;
}
/* 从上往下 */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
/* 从下网上 */
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 5%, 0);
    transform: translate3d(0, 5%, 0);
    visibility: visible;
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

/* 大小大 */
@-webkit-keyframes twinkling {
  0% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transform: scale(0.93);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0.7;
    filter: alpha(opacity=100);
    -webkit-transform: scale(0.93);
  }
}

@keyframes twinkling {
  0% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-transform: scale(0.93);
  }
  50% {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0.7;
    filter: alpha(opacity=100);
    -webkit-transform: scale(0.93);
  }
}

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

.animation2 {
  -webkit-animation: twinkling 2.1s infinite ease-in-out;
  animation: twinkling 2.1s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/* 淡入 */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 40%, 0);
    transform: translate3d(0, 40%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -40%, 0);
    transform: translate3d(0, -40%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-20%, 0, 0);
    transform: translate3d(-20%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(40%, 0, 0);
    transform: translate3d(40%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(15px, 0, 0);
    transform: translate3d(15px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 0, 0);
    transform: translate3d(-100px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(15px, 0, 0);
    transform: translate3d(15px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-15px, 0, 0);
    transform: translate3d(-15px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(-15px, 0, 0);
    transform: translate3d(-15px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
    transform: translate3d(-5px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}



@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

.an_fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
  transition-duration: 2s;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20%, 0, 0);
		transform: translate3d(-20%, 0, 0)
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0)
	}
}



.up_oder01 {
	-webkit-animation-name: up_oder01;
	animation-name: up_oder01
}
@keyframes up_oder01 {
	0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder02 {
	-webkit-animation-name: up_oder02;
	animation-name: up_oder02;
  animation-duration: 1s;
}
@keyframes up_oder02 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 2.5rem, 0);
    transform: translate3d(0, 2.5rem, 0);
  }

  10%{
    opacity: 0;
    -webkit-transform: translate3d(0, 2.5rem, 0);
    transform: translate3d(0, 2.5rem, 0);
  }

  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder03 {
	-webkit-animation-name: up_oder03;
	animation-name: up_oder03;
  animation-duration: 2s;
}
@keyframes up_oder03 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 3.5em, 0);
    transform: translate3d(0, 3.5rem, 0);
  }
  20%{
    opacity: 0;
    -webkit-transform: translate3d(0, 3.5rem, 0);
    transform: translate3d(0, 3.5rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder04 {
	-webkit-animation-name: up_oder04;
	animation-name: up_oder04;
  animation-duration: 2.6s;
}
@keyframes up_oder04 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 4.5em, 0);
    transform: translate3d(0, 4.5rem, 0);
  }
  30%{
    opacity: 0;
    -webkit-transform: translate3d(0, 4.5rem, 0);
    transform: translate3d(0, 4.5rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder05 {
	-webkit-animation-name: up_oder05;
	animation-name: up_oder05;
  animation-duration: 3.2s;
}
@keyframes up_oder05 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 5.5em, 0);
    transform: translate3d(0, 4.5rem, 0);
  }
  40%{
    opacity: 0;
    -webkit-transform: translate3d(0, 5.5rem, 0);
    transform: translate3d(0, 5.5rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder06 {
	-webkit-animation-name: up_oder06;
	animation-name: up_oder06;
  animation-duration: 3.4s;
}
@keyframes up_oder06 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 4em, 0);
    transform: translate3d(0, 4rem, 0);
  }
  40%{
    opacity: 0;
    -webkit-transform: translate3d(0, 4rem, 0);
    transform: translate3d(0, 4rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder07 {
	-webkit-animation-name: up_oder07;
	animation-name: up_oder07;
  animation-duration: 3.6s;
}
@keyframes up_oder07 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 3rem, 0);
  }
  50%{
    opacity: 0;
    -webkit-transform: translate3d(0, 2rem, 0);
    transform: translate3d(0, 2rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.up_oder08 {
	-webkit-animation-name: up_oder08;
	animation-name: up_oder08;
  animation-duration: 3.8s;
}
@keyframes up_oder08 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0);
  }
  60%{
    opacity: 0;
    -webkit-transform: translate3d(0, 1.5rem, 0);
    transform: translate3d(0, 1.5rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.up_oder09 {
	-webkit-animation-name: up_oder09;
	animation-name: up_oder09;
  animation-duration: 4s;
}
@keyframes up_oder09 {
	0%{
    opacity: 0;
    -webkit-transform: translate3d(0, 1rem, 0);
    transform: translate3d(0, 1rem, 0);
  }
  70%{
    opacity: 0;
    -webkit-transform: translate3d(0, 1rem, 0);
    transform: translate3d(0, 1rem, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Left01 {
  -webkit-animation-name: oder_Left01;
  animation-name: oder_Left01;
  animation-duration: 1.3s;
}
@keyframes oder_Left01 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-4rem,0 , 0);
    transform: translate3d(-4rem, 0, 0);
  }
  5%{
    opacity: 0;
    -webkit-transform: translate3d(-4rem,0 , 0);
    transform: translate3d(-4rem, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Left02 {
  -webkit-animation-name: oder_Left02;
  animation-name: oder_Left02;
  animation-duration: 2.2s;
}
@keyframes oder_Left02 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-4rem,0 , 0);
    transform: translate3d(-4rem, 0, 0);
  }
  15%{
    opacity: 0;
    -webkit-transform: translate3d(-4rem, 0, 0);
    transform: translate3d(-4rem, 20, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Left03 {
  -webkit-animation-name: oder_Left03;
  animation-name: oder_Left03;
  animation-duration: 3s;
}
@keyframes oder_Left03 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem,0 , 0);
    transform: translate3d(-4.5rem, 0, 0);
  }
  30%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem, 0, 0);
    transform: translate3d(-4.5rem, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Left04 {
  -webkit-animation-name: oder_Left04;
  animation-name: oder_Left04;
  animation-duration: 3s;
}
@keyframes oder_Left04 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem,0 , 0);
    transform: translate3d(-4.5rem, 0, 0);
  }
  45%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem, 0, 0);
    transform: translate3d(-4.5rem, 20, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Left05 {
  -webkit-animation-name: oder_Left05;
  animation-name: oder_Left05;
  animation-duration: 3s;
}
@keyframes oder_Left05 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem,0 , 0);
    transform: translate3d(-4.5rem, 0, 0);
  }
  55%{
    opacity: 0;
    -webkit-transform: translate3d(-4.5rem, 0, 0);
    transform: translate3d(-4.5rem, 20, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.oder_Right03 {
  -webkit-animation-name: oder_Right03;
  animation-name: oder_Right03;
  animation-duration: 3s;
}
@keyframes oder_Right03 {
  0%{
    opacity: 0;
    -webkit-transform: translate3d(4.5rem,0 , 0);
    transform: translate3d(4.5rem, 0, 0);
  }
  30%{
    opacity: 0;
    -webkit-transform: translate3d(4.5rem, 0, 0);
    transform: translate3d(4.5rem, 0, 0);
  }
  100%{
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}


.open_left01 {
  -webkit-animation-name: open_left01;
  animation-name: open_left01;
  animation-duration: 1.7s;
}



@keyframes open_left01 {
  0%{
    /* opacity: 0; */
    width:0%;
  }
  
  100%{
    opacity: 1;
    width: 40.33em;;
  }
}

.fadeIn01 {
	-webkit-animation-name: fadeIn01;
	animation-name: fadeIn01;
  animation-delay:.5s;
  animation-duration: 1.5s;
}

.fadeIn02 {
	-webkit-animation-name: fadeIn01;
	animation-name: fadeIn01;
  animation-delay:1s;
  animation-duration: 1.5s;
}

.fadeIn03 {
	-webkit-animation-name: fadeIn01;
	animation-name: fadeIn01;
  animation-delay:1.5s;
  animation-duration: 1.5s;
}

.fadeIn04 {
	-webkit-animation-name: fadeIn01;
	animation-name: fadeIn01;
  animation-delay:2s;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeIn01 {
	0% {
		opacity: 0
	}
	to {
		opacity: 1
	}
}

/* 特定向上 向下出现 */

.special_up01 {
	-webkit-animation-name: special_up01;
	animation-name: special_up01;
  animation-delay:.6s;
  animation-duration: 1;
}
@keyframes special_up01 {
	0% {
    opacity: 0;
    -webkit-transform: translate3d( 1.5rem, 100%,0);
    transform: translate3d(1.5rem,100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.special_fadeIn01 {
	-webkit-animation-name: fadeIn01;
	animation-name: fadeIn01;
  animation-duration: 2s;
}

.special_dow01 {
	-webkit-animation-name: special_dow01;
	animation-name: special_dow01;
  animation-delay:.6s;
  animation-duration: 1s;
}

@keyframes special_dow01 {
	0% {
    opacity: 0;
    -webkit-transform: translate3d( 1.5rem, -100%,0);
    transform: translate3d(1.5rem,-100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}




/* 文字展示 */
@media screen and (max-width: 1200px) {
  .up_oder01 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
  }
  @keyframes up_oder01 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d(0, 1.5rem, 0);
      transform: translate3d(0, 1.5rem, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  
  .up_oder02 {
    -webkit-animation-name:up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  .up_oder03 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration:1s;
  }
  
  .up_oder04 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  
  .up_oder05 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  
  .up_oder06 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  .up_oder07 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  .up_oder08 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  .up_oder09 {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
    animation-duration: 1s;
  }
  .open_left01 {
    -webkit-animation-name: smallUp;
    animation-name: smallUp;
    animation-duration: 1.7s;
  }

  .smallRight {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
  }

  .smallLeft {
    -webkit-animation-name: up_oder01;
    animation-name: up_oder01;
  }

  @keyframes special_up01 {
    0% {
      opacity: 0;
      -webkit-transform: translate3d( 100%, 1.5rem,0);
      transform: translate3d(100%,1.5rem, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  @keyframes special_dow01 {
    0% {
      opacity: 0;
      --webkit-transform: translate3d( -100%, 1.5rem,0);
      transform: translate3d(-100%,1.5rem, 0);
    }
    100% {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
}