/*联动动画*/



.fadeIn_ld {
  animation: fadeIn_ld 0.4s.2s ease both;
}

@keyframes fadeIn_ld {
  0% {
    opacity: 0;

  }

  100% {
    opacity: 1;

  }
}

.slideInLeft_ld {
  animation: slideInLeft_ld 0.4s.2s ease both;
}

@keyframes slideInLeft_ld {
  0% {
    opacity: 0;
    transform: translateX(-300px)
  }

  100% {
    opacity: 1;
    transform: translateX(0px)
  }
}




.slideInRight_ld {
  animation: slideInRight_ld 0.4s.2s ease both;
}

@keyframes slideInRight_ld {
  0% {
    opacity: 0;
    transform: translateX(300px)
  }

  100% {
    opacity: 1;
    transform: translateX(0px)
  }
}

.slideInTop_ld {
  animation: slideInTop_ld 0.4s.2s ease both;
}

@keyframes slideInTop_ld {
  0% {
    opacity: 0;
    transform: translateY(-300px)
  }

  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}

.slideInBottom_ld {
  animation: slideInBottom_ld 0.4s.2s ease both;

}

@keyframes slideInBottom_ld {
  0% {
    opacity: 0;
    transform: translateY(300px)
  }

  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}

.infomation_wide {
  animation: infomation_wide 0.4s.2s ease both;
  position: absolute;
  width: 140px;
  height: 180px;
  position: absolute;
  z-index: 99;
  background: #ffff;
  left: 49px;
  top: 64px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
}

.infomation_wide div {
  width: 100%;
  font-size: 14px;
  text-align: center;
  color: #333333;
}

.footer {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
  height: 40px;
  justify-content: space-between;
  display: flex;
  background-color: #ffffff;
  z-index: 99;
  font-size: 12px;
  color: #999;
  align-content: center;
  align-items: center;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);

}



.car_001_DC {

  animation: car_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  left: 190px;
  transform: scale(0.9);


}

@keyframes car_001_DC {
  0% {

    left: 190px;
    opacity: 0.6;


  }

  100% {

    left: 0px;
    opacity: 0.6;

  }
}

.car_002_DC {

  animation: car_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 190px;
  opacity: 0.6;
  transform: scale(0.9);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

@keyframes car_002_DC {
  0% {
    transform: scale(0.9);
    left: 190px;
    opacity: 0.6;


  }

  100% {
    transform: scale(1);
    left: 100px;
    opacity: 1;
  }
}

.car_003_DC {

  animation: car_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.9);

}

@keyframes car_003_DC {
  0% {

    left: 0px;
    opacity: 0.6;
  }

  100% {

    left: 190px;
    opacity: 0.6;

  }
}

.FrameDH_T {
  animation: FrameDH_T 0.3s.2s ease both;
  position: absolute;
  z-index: 3;
}

@keyframes FrameDH_T {
  0% {


    opacity: 0;
  }

  100% {


    opacity: 1;
  }
}



.mcar_001_DC {

  animation: mcar_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.6);
  transform-origin: top left;


}

@keyframes mcar_001_DC {
  0% {

    left: 200px;
    opacity: 1;


  }

  100% {

    left: 20px;
    opacity: 1;

  }
}

.mcar_002_DC {

  animation: mcar_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 200px;

  transform: scale(0.6);

}

@keyframes mcar_002_DC {
  0% {
    transform: scale(0.6);
    left: 450px;
    opacity: 1;


  }

  100% {
    transform: scale(1);
    left: 200px;
    opacity: 1;
  }
}

.mcar_003_DC {

  animation: mcar_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.6);

}

@keyframes mcar_003_DC {
  0% {

    left: 700px;
    opacity: 1;
  }

  100% {

    left: 500px;
    opacity: 1;

  }
}

.mcar_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.9);
}

.FrameDH_T {
  animation: FrameDH_T 0.3s.2s ease both;
  position: absolute;
  z-index: 3;
}

@keyframes FrameDH_T {
  0% {


    opacity: 0;
  }

  100% {


    opacity: 1;
  }
}

/*
.ldbg_show {
  z-index: 2;
  animation: ldbg_show 0.4s .2s ease both;
}

@keyframes ldbg_show {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.ldbg_out {
  z-index: 1;
  opacity: 0;

}

@keyframes ldbg_out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
  */

.ldbg_show {
z-index: 10;
opacity: 1;
}



.ldbg_out {
 z-index: 1;
 opacity: 0;


}

.zmpic {
  position: absolute;
  z-index: 10;
  left: 0px;
  top: 0px;
  animation: zmpic 0.4s .2s ease both;
}

@keyframes zmpic {
  0% {
    opacity: 1;



  }

  100% {
    opacity: 0;

  }
}

.fmpic {
  position: absolute;
  z-index: 10;
  left: 0px;
  top: 0px;
  animation: fmpic 0.4s .2s ease both;
}

@keyframes fmpic {
  0% {
    opacity: 0;
    transform: rotateY(180deg);


  }

  100% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.car_001 {

  animation: car_001 0.3s .2s ease both;
}

@keyframes car_001 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.85);
  }
}

.car_002 {

  animation: car_002 0.3s .2s ease both;
}

@keyframes car_002 {
  0% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}





.car_001hh {
  transform-origin: center bottom;
  animation: car_001hh 0.3s .2s ease both;
}

@keyframes car_001hh {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.85);
  }
}

.car_002hh {
  transform-origin: center bottom;
  animation: car_002 0.3s .2s ease both;
}

@keyframes car_002hh {
  0% {
    transform: scale(0.85);
  }

  100% {
    transform: scale(1);
  }
}




/*叠卡效果01 从上往下*/

.dk_01_01 {

  animation: dk_01_01 0.3s.2s ease both;
}


@keyframes dk_01_01 {
  0% {
    left: 0px;
    top: 33px;
    opacity: 0.6;
    transform: scale(0.95);
  }

  100% {
    left: 0px;
    top: 70px;
    opacity: 1;
    transform: scale(1);
  }
}

.dk_01_02 {
  animation: dk_01_02 0.5s.2s ease both;

}

@keyframes dk_01_02 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0.3;
    transform: scale(0.9);
  }

  100% {
    left: 0px;
    top: 33px;
    opacity: 0.6;
    transform: scale(0.95);
  }
}

.dk_01_03 {
  animation: dk_01_03 0.5s.2s ease both;

}


@keyframes dk_01_03 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    left: 0px;
    top: 0px;
    opacity: 0.3;
    transform: scale(0.9);
  }
}


.dk_01_04 {
  animation: dk_01_04 0.5s.2s ease both;
  left: 0px;
  top: 100px;
  opacity: 0;
}

@keyframes dk_01_04 {
  0% {
    left: 0px;
    top: 70px;
    opacity: 1;
    transform: rotate(0deg);
  }

  100% {
    left: -1000px;
    top: 70px;
    opacity: 1;
    transform: rotate(-45deg);
  }
}

/*叠卡效果01 从上往下 end*/


/*叠卡效果02 从下往下*/




.dk_02_01 {

  animation: dk_02_01 0.3s.2s ease both;
}


@keyframes dk_02_01 {
  0% {
    left: 0px;
    top: 33px;
    opacity: 0.6;
    transform: scale(0.95);
  }

  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
    transform: scale(1);
  }
}

.dk_02_02 {
  animation: dk_02_02 0.5s.2s ease both;

}

@keyframes dk_02_02 {
  0% {
    left: 0px;
    top: 65px;
    opacity: 0.3;
    transform: scale(0.9);
  }

  100% {
    left: 0px;
    top: 33px;
    opacity: 0.6;
    transform: scale(0.95);
  }
}

.dk_02_03 {
  animation: dk_02_03 0.5s.2s ease both;

}


@keyframes dk_02_03 {
  0% {
    left: 0px;
    top: 100px;
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    left: 0px;
    top: 65px;
    opacity: 0.3;
    transform: scale(0.9);
  }
}


.dk_02_04 {
  animation: dk_02_04 0.5s.2s ease both;
  left: 0px;
  top: 0px;
  opacity: 0;
}

@keyframes dk_02_04 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 1;
    transform: rotate(0deg);
  }

  100% {
    left: -1000px;
    top: 0px;
    opacity: 1;
    transform: rotate(-45deg);
  }
}

/*叠卡效果02 从下往下 end*/















.dk_04_01 {
  animation: dk_04_01 0.3s.2s ease both;
}

@keyframes dk_04_01 {
  0% {
    right: 0px;
    top: 0px;
    opacity: 1;
  }

  100% {
    right: 0px;
    top: 0px;
    opacity: 1;
  }
}

.dk_04_02 {
  animation: dk_04_02 0.5s.2s ease both;

}

@keyframes dk_04_02 {
  0% {
    right: 60px;
    top: 60px;
    opacity: 0.4;
  }

  100% {
    right: 30px;
    top: 30px;
    opacity: 0.6;
  }
}

.dk_04_03 {
  animation: dk_04_03 0.5s.2s ease both;

}

@keyframes dk_04_03 {
  0% {
    right: 90px;
    top: 90px;
    opacity: 0;
  }

  100% {
    right: 60px;
    top: 60px;
    opacity: 0.4;
  }
}

.dk_04_04 {
  animation: dk_04_04 0.5s.2s ease both;


}

@keyframes dk_04_04 {
  0% {
    right: 0px;
    top: 0px;
    opacity: 1;
  }

  100% {
    right: 1750px;
    top: 0px;
    opacity: 1;
  }
}




















/*叠卡效果03*/

.dk_01 {
  animation: dk_01 0.3s.2s ease both;
}

@keyframes dk_01 {
  0% {
    left: 30px;
    top: 0px;
    opacity: 0.8;
    transform: scale(0.9);
  }

  100% {
    left: 0px;
    top: 0px;
    opacity: 1;
    transform: scale(1);
  }
}

.dk_02 {
  animation: dk_02 0.5s.2s ease both;

}

@keyframes dk_02 {
  0% {
    left: 50px;
    top: 0px;
    opacity: 0.5;
    transform: scale(0.8);
  }

  100% {
    left: 60px;
    top: 0px;
    opacity: 0.8;
    transform: scale(0.9);
  }
}

.dk_03 {
  animation: dk_03 0.5s.2s ease both;

}

@keyframes dk_03 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 0;
    transform: scale(0.7);
  }

  100% {
    left: 116px;
    top: 0px;
    opacity: 0.5;
    transform: scale(0.8);
  }
}

.dk_04 {
  animation: dk_04 0.5s.2s ease both;

}

@keyframes dk_04 {
  0% {
    left: 0px;
    top: 0px;
    opacity: 1;

  }

  100% {
    left: -800px;
    top: 0px;
    opacity: 1;

  }
}

/*叠卡效果03 end*/

/*放大缩小*/
.tada {
  animation: tada 1.2s .2s ease infinite;
}

@keyframes tada {
  0% {
    transform: scale(1)
  }

  10%,
  20% {
    transform: scale(0.9) rotate(-3deg)
  }

  30%,
  50%,
  70%,
  90% {
    transform: scale(1.1) rotate(3deg)
  }

  40%,
  60%,
  80% {
    transform: scale(1.1) rotate(-3deg)
  }

  100% {
    transform: scale(1) rotate(0)
  }
}

/*翻转3D*/
.FZ {
  animation: FZ 2s .10s linear infinite;
  animation-delay: 1s;
}

@keyframes FZ {
  0% {
    transform: rotateY(0deg);
  }

  30% {
    transform: rotateY(180deg);
  }

  60% {
    transform: rotateY(0deg);
  }
}

/*抖动*/
.jello-horizontal {
  animation: jello-horizontal 2s infinite both;
}

@keyframes jello-horizontal {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

/*左右摇摆*/
.shake-lr {

  animation: shake-lr 1.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

@keyframes shake-lr {

  0%,
  100% {

    transform: rotate(0deg);

    transform-origin: 50% 50%;
  }

  10% {

    transform: rotate(8deg);
  }

  20%,
  40%,
  60% {

    transform: rotate(-10deg);
  }

  30%,
  50%,
  70% {

    transform: rotate(10deg);
  }

  80% {

    transform: rotate(-8deg);
  }

  90% {

    transform: rotate(8deg);
  }
}

.left-right {
  animation: left-right 1s infinite both;

  transform-origin: left center;
}

@keyframes left-right {
  0% {
    transform: translateX(0%) scale(0.9);
  }

  50% {
    transform: translateX(30px) scale(0.9);
  }

  100% {
    transform: translateX(0%) scale(0.9);
  }
}



.top-bottom {
  animation: top-bottom 0.8s infinite both;

  transform-origin: left center;
}

@keyframes top-bottom {
  0% {
    transform: translateY(0%) scale(0.9);
  }

  50% {
    transform: translateY(30px) scale(0.9);
  }

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

/*左右摇晃*/
.wobble-hor-bottom {

  animation: wobble-hor-bottom 1.4s infinite both;

}



@keyframes wobble-hor-bottom {

  0%,
  100% {

    transform: translateX(0%);

    transform-origin: 50% 50%;
  }

  15% {

    transform: translateX(-30px) rotate(-6deg);
  }

  30% {

    transform: translateX(15px) rotate(6deg);
  }

  45% {

    transform: translateX(-15px) rotate(-3.6deg);
  }

  60% {

    transform: translateX(9px) rotate(2.4deg);
  }

  75% {

    transform: translateX(-6px) rotate(-1.2deg);
  }
}


/*左侧进入*/
.fadeInRightBig {
  animation: fadeInRightBig 0.4s .2s ease both;
  ;
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(1000px)
  }

  100% {
    opacity: 1;
    transform: translateX(0px)
  }
}

/*右侧进入*/
.fadeInLeftBig {
  animation: fadeInLeftBig 0.4s .2s ease both;
  ;
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    transform: translateX(-1000px)
  }

  100% {
    opacity: 1;
    transform: translateX(0px)
  }
}


/*顶部进入*/
.fadeIntopBig {
  animation: fadeIntopBig 0.4s .2s ease both;
  ;
}

@keyframes fadeIntopBig {
  0% {
    opacity: 0;
    transform: translateY(-1000px)
  }

  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}

/*底部进入*/
.fadeInbottomBig {
  animation: fadeInbottomBig 0.4s .2s ease both;
}

@keyframes fadeInbottomBig {
  0% {
    opacity: 0;
    transform: translateY(1000px)
  }

  100% {
    opacity: 1;
    transform: translateY(0px)
  }
}

.change_s_m2 {
  animation: change_s_m1_m 0.4s ease-in-out both;
}

@keyframes change_s_m1_m {
  0% {
    transform: scale(0.95);
    opacity: 1;
    top: 140;
  }

  100% {
    transform: scale(1);
    opacity: 1;
    top: 210;
  }
}

.change_s_m1 {
  animation: change_s_m1 0.4s ease-in-out both;
}

@keyframes change_s_m1 {
  0% {
    transform: scale(0.95);
    opacity: 1;
    top: 140;
  }

  100% {
    transform: scale(1);
    opacity: 1;
    top: 210;
  }
}

/*背景放大*/
.tbbigs_fd_01 {
  z-index: 10;
  animation: tbbigs_fd_01 0.4s ease-in-out both;
  transform-origin: bottom center;
}

@keyframes tbbigs_fd_01 {
  0% {
    transform: scale(0.01);
  }

  100% {
    transform: scale(1);
  }
}

.tbbigs_fd_02 {
  z-index: 1;
}

/*曲线轮播*/

.lmcar_001_DC {

  animation: mcar_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.3);
  top: 0px;
  transform-origin: center;


}

@keyframes lmcar_001_DC {
  0% {
    top: 0px;
    left: 0px;
    opacity: 0;
    transform: scale(0.3);


  }

  100% {
    top: 0px;
    left: 30px;
    opacity: 1;
    transform: scale(0.3);

  }
}

.lmcar_002_DC {

  animation: lmcar_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 450px;

  transform: scale(0.3);

}

@keyframes lmcar_002_DC {
  0% {
    transform: scale(0.3);

    left: 450px;
    opacity: 1;
    top: 0px;


  }

  100% {
    transform: scale(0.5);
    left: 280px;
    opacity: 1;
    top: 100px;


  }
}

.lmcar_003_DC {

  animation: lmcar_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.5);
  top: 100px;
  transform-origin: center;

}

@keyframes lmcar_003_DC {
  0% {

    left: 700px;
    opacity: 1;
    transform: scale(0.5);
    top: 100px;
  }

  100% {

    left: 620px;
    opacity: 1;
    transform: scale(0.3);
    top: 0px;

  }
}

.lmcar_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
}


/*曲线轮播02*/


.lmcar02_001_DC {

  animation: lmcar02_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.3);
  top: 0px;
  transform-origin: center;


}

@keyframes lmcar02_001_DC {
  0% {
    top: 0px;
    left: 0px;
    opacity: 0;
    transform: scale(0.3);


  }

  100% {
    top: 0px;
    left: 30px;
    opacity: 1;
    transform: scale(0.3);

  }
}

.lmcar02_002_DC {

  animation: lmcar02_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 450px;

  transform: scale(0.3);

}

@keyframes lmcar02_002_DC {
  0% {
    transform: scale(0.3);

    left: 450px;
    opacity: 1;
    top: 0px;


  }

  100% {
    transform: scale(0.5);
    left: 280px;
    opacity: 1;
    top: 100px;


  }
}

.lmcar02_003_DC {

  animation: lmcar02_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.5);
  top: 100px;
  transform-origin: center;

}

@keyframes lmcar02_003_DC {
  0% {

    left: 700px;
    opacity: 1;
    transform: scale(0.5);
    top: 100px;
  }

  100% {

    left: 620px;
    opacity: 1;
    transform: scale(0.3);
    top: 0px;

  }
}

.lmcar02_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
}




/*曲线轮播*/

.lmcar_001_DC {

  animation: mcar_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.3);
  top: 0px;
  transform-origin: center;


}

@keyframes lmcar_001_DC {
  0% {
    top: 0px;
    left: 0px;
    opacity: 0;
    transform: scale(0.3);


  }

  100% {
    top: 0px;
    left: 30px;
    opacity: 1;
    transform: scale(0.3);

  }
}

.lmcar_002_DC {

  animation: lmcar_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 450px;

  transform: scale(0.3);

}

@keyframes lmcar_002_DC {
  0% {
    transform: scale(0.3);

    left: 450px;
    opacity: 1;
    top: 0px;


  }

  100% {
    transform: scale(0.5);
    left: 280px;
    opacity: 1;
    top: 100px;


  }
}

.lmcar_003_DC {

  animation: lmcar_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.5);
  top: 100px;
  transform-origin: center;

}

@keyframes lmcar_003_DC {
  0% {

    left: 700px;
    opacity: 1;
    transform: scale(0.5);
    top: 100px;
  }

  100% {

    left: 620px;
    opacity: 1;
    transform: scale(0.3);
    top: 0px;

  }
}

.lmcar_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
}


/*曲线效果轮播02*/


.lmcar02sec_001_DC {

  animation: lmcar02sec_001_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.3);
  top: 0px;
  transform-origin: center;


}

@keyframes lmcar02sec_001_DC {
  0% {
    top: 0px;
    left: 0px;
    opacity: 0;
    transform: scale(0.3);


  }

  100% {
    top: 0px;
    left: 30px;
    opacity: 1;
    transform: scale(0.3);

  }
}

.lmcar02sec_002_DC {

  animation: lmcar02sec_002_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 10;
  left: 450px;

  transform: scale(0.3);

}

@keyframes lmcar02sec_002_DC {
  0% {
    transform: scale(0.3);

    left: 450px;
    opacity: 1;
    top: 0px;


  }

  100% {
    transform: scale(0.5);
    left: 280px;
    opacity: 1;
    top:-100px;


  }
}

.lmcar02_003sec_DC {

  animation: lmcar02sec_003_DC 0.3s .2s ease both;
  position: absolute;
  z-index: 3;
  transform: scale(0.5);
  top: 100px;
  transform-origin: center;

}

@keyframes lmcar02sec_003_DC {
  0% {

    left: 700px;
    opacity: 1;
    transform: scale(0.5);
    top: 100px;
  }

  100% {

    left: 620px;
    opacity: 1;
    transform: scale(0.3);
    top: 0px;

  }
}

.lmcar02sec_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
}


.lmcarsec_004_DC {

  position: absolute;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
}