.shopAnimation {
  width: 922px;
  height: 552px;
  display: inline-block;
  position: absolute;
  pointer-events: none;
  left: 520px;
  top: 73px
}

.shopAnimation .center_box.center_box_mobile {
  z-index: 10;
  position: relative
}

@-webkit-keyframes bottom_layertop_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(288px, 182px, 0);
    transform: translate3d(288px, 182px, 0)
  }
}

@keyframes bottom_layertop_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(288px, 182px, 0);
    transform: translate3d(288px, 182px, 0)
  }
}

@-webkit-keyframes bottom_layermid_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(288px, 172px, 0);
    transform: translate3d(288px, 172px, 0)
  }
}

@keyframes bottom_layermid_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(288px, 172px, 0);
    transform: translate3d(288px, 172px, 0)
  }
}

@-webkit-keyframes bottom_layer_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(287px, 139px, 0);
    transform: translate3d(287px, 139px, 0)
  }
}

@keyframes bottom_layer_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(287px, 139px, 0);
    transform: translate3d(287px, 139px, 0)
  }
}

@-webkit-keyframes bottom_layer_round_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(226px, 119px, 0);
    transform: translate3d(226px, 119px, 0)
  }
}

@keyframes bottom_layer_round_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(226px, 119px, 0);
    transform: translate3d(226px, 119px, 0)
  }
}

@-webkit-keyframes shop_box_wrap_ani {
  from {
    opacity: 0
  }

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

@keyframes shop_box_wrap_ani {
  from {
    opacity: 0
  }

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

@-webkit-keyframes shop_box_01_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(194px, 190px, 0);
    transform: translate3d(194px, 190px, 0)
  }
}

@keyframes shop_box_01_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(194px, 190px, 0);
    transform: translate3d(194px, 190px, 0)
  }
}

@-webkit-keyframes shop_box_02_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(415px, 58px, 0);
    transform: translate3d(415px, 58px, 0)
  }
}

@keyframes shop_box_02_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(415px, 58px, 0);
    transform: translate3d(415px, 58px, 0)
  }
}

@-webkit-keyframes shop_box_03_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(639px, 150px, 0);
    transform: translate3d(639px, 150px, 0)
  }
}

@keyframes shop_box_03_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(639px, 150px, 0);
    transform: translate3d(639px, 150px, 0)
  }
}

@-webkit-keyframes shop_box_04_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(413px, 316px, 0);
    transform: translate3d(413px, 316px, 0)
  }
}

@keyframes shop_box_04_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(413px, 316px, 0);
    transform: translate3d(413px, 316px, 0)
  }
}

@-webkit-keyframes shop_box_01_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(194px, 180px, 0);
    transform: translate3d(194px, 180px, 0)
  }
}

@keyframes shop_box_01_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(194px, 180px, 0);
    transform: translate3d(194px, 180px, 0)
  }
}

@-webkit-keyframes shop_box_02_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(415px, 48px, 0);
    transform: translate3d(415px, 48px, 0)
  }
}

@keyframes shop_box_02_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(415px, 48px, 0);
    transform: translate3d(415px, 48px, 0)
  }
}

@-webkit-keyframes shop_box_03_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(640px, 176px, 0);
    transform: translate3d(640px, 176px, 0)
  }
}

@keyframes shop_box_03_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(640px, 176px, 0);
    transform: translate3d(640px, 176px, 0)
  }
}

@-webkit-keyframes shop_box_04_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(413px, 306px, 0);
    transform: translate3d(413px, 306px, 0)
  }
}

@keyframes shop_box_04_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    -webkit-transform: translate3d(413px, 306px, 0);
    transform: translate3d(413px, 306px, 0)
  }
}

@-webkit-keyframes iconFloatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: .7;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }
}

@keyframes iconFloatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: .7;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }
}

.shopAnimation .bottom .bottom_layerbtm {
  width: 920px;
  height: 552px;
  background: url('../images/index/bottom_layerbtm.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 1
}

.shopAnimation .bottom .bottom_layertop {
  width: 427px;
  height: 246px;
  background: url('../images/index/bottom_layertop.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 3;
  -webkit-transform: translate3d(288px, -500px, 0);
  transform: translate3d(288px, -500px, 0);
  -webkit-animation: bottom_layertop_ani .8s 0s forwards ease;
  animation: bottom_layertop_ani .8s 0s forwards ease
}

.shopAnimation .bottom .bottom_layermid {
  width: 427px;
  height: 246px;
  background: url('../images/index/bottom_layermid.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 2;
  -webkit-transform: translate3d(0, -1500px, 0);
  transform: translate3d(0, -1500px, 0);
  -webkit-animation: bottom_layermid_ani 1s 0s forwards ease;
  animation: bottom_layermid_ani 1s 0s forwards ease
}

.four-banner {
  background: url("../images/index/bannerdt.png") no-repeat;
  background-size: cover;
}

.shopAnimation .bottom .bottom_yqd {
  width: 428px;
  height: 428px;
  background: url('../images/index/yqd.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 4;
  -webkit-transform: translate3d(287px, -1500px, 0);
  transform: translate3d(287px, -1500px, 0);
  -webkit-animation: bottom_layer_ani 1.3s 0s forwards ease;
  animation: bottom_layer_ani 1.3s 0s forwards ease
}

.shopAnimation .bottom .bottom_xxyq {
  width: 390px;
  height: 390px;
  background: url('../images/index/xxyq.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  margin-top: 19px;
  margin-left: 19px;
  z-index: 4;
  -webkit-transform: translate3d(287px, -1500px, 0);
  transform: translate3d(287px, -1500px, 0);
  -webkit-animation: bottom_layer_ani 1.3s 0s forwards ease;
  animation: bottom_layer_ani 1.3s 0s forwards ease
}

.shop_box_wrapper {
  width: 390px;
  height: 390px;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(0, -1500px, 0);
  transform: translate3d(0, -1500px, 0);
  -webkit-animation: shop_box_wrap_ani 2s 0s forwards ease;
  animation: shop_box_wrap_ani 2s 0s forwards ease
}

.shop_box_wrapper_01 {
  width: 115px;
  height: 40px;
  background: url('../images/index/xhslogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(465px, 220px, 0);
  -webkit-animation: shop_box_wrapper_01_floatDown 3s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_01_floatDown 3s 0s forwards ease-in-out infinite
}

@-webkit-keyframes shop_box_wrapper_01_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(465px, 210px, 0)
  }
}

.shop_box_wrapper_02 {
  width: 55px;
  height: 65px;
  background: url('../images/index/kslogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(370px, 270px, 0);
  -webkit-animation: shop_box_wrapper_02_floatDown 3s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_02_floatDown 3s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_02_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(370px, 260px, 0)
  }
}
.shop_box_wrapper_03 {
  width: 85px;
  height: 95px;
  background: url('../images/index/dylogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(500px, 310px, 0);
  -webkit-animation: shop_box_wrapper_03_floatDown 3s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_03_floatDown 3s 0s forwards ease-in-out infinite
}

.shopAnimation-four {
  top: -30px;
}

@media screen and (max-width: 750px) {
  .shopAnimation-four {
    transform: scale(0.5) translate(-108%, -32%) !important;
  }
}

@media screen and (max-width: 1077px) {
  .shopAnimation-four {
    top: 100px !important;
  }
}

@media screen and (max-width: 750px) {
  .shopAnimation-four {
    top: 180px !important;
  }
}

@-webkit-keyframes shop_box_wrapper_03_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(500px, 300px, 0)
  }
}
.shop_box_wrapper_04 {
  width: 52px;
  height: 43px;
  background: url('../images/index/kblogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(605px, 280px, 0);
  -webkit-animation: shop_box_wrapper_04_floatDown 2s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_04_floatDown 2s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_04_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(605px, 270px, 0)
  }
}
.shop_box_wrapper_05 {
  width: 58px;
  height: 58px;
  background: url('../images/index/gdlogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(405px, 365px, 0);
  -webkit-animation: shop_box_wrapper_05_floatDown 3s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_05_floatDown 3s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_05_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(405px, 355px, 0)
  }
}
.shop_box_wrapper_06 {
  width: 38px;
  height: 32px;
  background: url('../images/index/sphlogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(410px, 450px, 0);
  -webkit-animation: shop_box_wrapper_06_floatDown 2.35s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_06_floatDown 2.35s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_06_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(410px, 440px, 0)
  }
}
.shop_box_wrapper_07 {
  width: 70px;
  height: 70px;
  background: url('../images/index/zfblogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(500px, 455px, 0);
  -webkit-animation: shop_box_wrapper_07_floatDown 2.75s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_07_floatDown 2.75s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_07_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(500px, 445px, 0)
  }
}
.shop_box_wrapper_08 {
  width: 70px;
  height: 70px;
  background: url('../images/index/wxlogo.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  transform: translate3d(575px, 400px, 0);
  -webkit-animation: shop_box_wrapper_08_floatDown 3.3s 0s forwards ease-in-out infinite;
  animation: shop_box_wrapper_08_floatDown 3.3s 0s forwards ease-in-out infinite
}
@-webkit-keyframes shop_box_wrapper_08_floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: 1;
    transform: translate3d(575px, 390px, 0)
  }
}

.shopAnimation .bottom .bottom_layer {
  width: 426px;
  height: 268px;
  background: url('../images/index/bottom_layer.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 4;
  -webkit-transform: translate3d(287px, -1500px, 0);
  transform: translate3d(287px, -1500px, 0);
  -webkit-animation: bottom_layer_ani 1.3s 0s forwards ease;
  animation: bottom_layer_ani 1.3s 0s forwards ease
}

.shopAnimation .bottom .bottom_layer_round {
  width: 552px;
  height: 319px;
  background: url('../images/index/bottom_layer_round.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(-2px, -1500px, 0);
  transform: translate3d(-2px, -1500px, 0);
  -webkit-animation: bottom_layer_round_ani 1.3s .2s forwards ease;
  animation: bottom_layer_round_ani 1.3s .2s forwards ease
}

.shopAnimation .bottom .shop_box {
  width: 922px;
  height: 552px;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(0, -1500px, 0);
  transform: translate3d(0, -1500px, 0);
  -webkit-animation: shop_box_wrap_ani 2s 0s forwards ease;
  animation: shop_box_wrap_ani 2s 0s forwards ease
}

.shopAnimation .bottom .shop_box_01 {
  width: 160px;
  height: 144px;
  background: url('../images/index/shop_box_01.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(194px, 190px, 0);
  transform: translate3d(194px, 190px, 0);
  -webkit-animation: shop_box_01_floatDown 3s 0s forwards ease-in-out infinite;
  animation: shop_box_01_floatDown 3s 0s forwards ease-in-out infinite
}

.shopAnimation .bottom .shop_box_01 .shop_box_icon_s {
  width: 19px;
  height: 31px;
  position: absolute;
  top: 52px;
  left: 11px;
  background: url('../images/index/icon-s.png') no-repeat;
  background-size: 100% 100%
}

.shopAnimation .bottom .shop_box_02 {
  width: 160px;
  height: 132px;
  background: url('../images/index/shop_box_02.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(415px, 58px, 0);
  transform: translate3d(415px, 58px, 0);
  -webkit-animation: shop_box_02_floatDown 3s .5s forwards ease-in-out infinite;
  animation: shop_box_02_floatDown 3s .5s forwards ease-in-out infinite
}

.shopAnimation .bottom .shop_box_02 .shop_box_icon_d {
  width: 21px;
  height: 30px;
  position: absolute;
  top: 42px;
  left: 12px;
  background: url('../images/index/icon-d.png') no-repeat;
  background-size: 100% 100%
}

.shopAnimation .bottom .shop_box_03 {
  width: 160px;
  height: 132px;
  background: url('../images/index/shop_box_03.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(640px, 186px, 0);
  transform: translate3d(640px, 186px, 0);
  -webkit-animation: shop_box_03_floatDown 3s 1s forwards ease-in-out infinite;
  animation: shop_box_03_floatDown 3s 1s forwards ease-in-out infinite
}

.shopAnimation .bottom .shop_box_03 .shop_box_icon_a {
  width: 21px;
  height: 30px;
  position: absolute;
  top: 50px;
  left: 11px;
  background: url('../images/index/icon-a.png') no-repeat;
  background-size: 100% 100%
}

.shopAnimation .bottom .shop_box_04 {
  width: 160px;
  height: 151px;
  background: url('../images/index/shop_box_04.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(413px, 316px, 0);
  transform: translate3d(413px, 316px, 0);
  -webkit-animation: shop_box_04_floatDown 3s 1.5s forwards ease-in-out infinite;
  animation: shop_box_04_floatDown 3s 1.5s forwards ease-in-out infinite
}

.shopAnimation .bottom .shop_box_04 .shop_box_icon_f {
  width: 15px;
  height: 31px;
  position: absolute;
  top: 61px;
  left: 15px;
  background: url('../images/index/icon-f.png') no-repeat;
  background-size: 100% 100%
}

.shopAnimation .center_box {
  display: none;
  -webkit-transform: translate3d(-2px, -2000px, 0);
  transform: translate3d(-2px, -2000px, 0);
  -webkit-animation: center_box_ani 1.5s 1s forwards ease;
  animation: center_box_ani 1.5s 1s forwards ease
}

@-webkit-keyframes center_box_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-2px, -1px, 0);
    transform: translate3d(-2px, -1px, 0);
    position: relative;
    z-index: 10;
    display: block
  }
}

@keyframes center_box_ani {
  from {
    opacity: 0
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-2px, -1px, 0);
    transform: translate3d(-2px, -1px, 0);
    position: relative;
    z-index: 10;
    display: block
  }
}

.shopAnimation .center_box .center_shop {
  width: 524px;
  height: 547.5px;
  background: url('../images/index/center_shop.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(60px, -250px, 0);
  transform: translate3d(60px, -250px, 0)
}

.shopAnimation .center_box .shop_box {
  width: 257px;
  height: 256px;
  background: url('../images/index/shop_box.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(200px, -280px, 0);
  transform: translate3d(200px, -280px, 0)
}

@-webkit-keyframes fadeOut {
  to {
    -webkit-transform: translate3d(340px, -210px, 0);
    transform: translate3d(340px, -210px, 0)
  }
}

@keyframes fadeOut {
  to {
    -webkit-transform: translate3d(340px, -210px, 0);
    transform: translate3d(340px, -210px, 0)
  }
}

.shopAnimation .center_box .shop_box_shadow {
  width: 91px;
  height: 158.5px;
  background: url('../images/index/shop_box_shadow.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(328px, -220px, 0);
  transform: translate3d(328px, -220px, 0);
  -webkit-animation: fadeOut 3s .2s alternate ease-out infinite;
  animation: fadeOut 3s .2s alternate ease-out infinite
}

@-webkit-keyframes flash {

  from,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

@keyframes flash {

  from,
  50%,
  to {
    opacity: 1
  }

  25%,
  75% {
    opacity: 0
  }
}

.shopAnimation .center_box .shop_box_circle {
  width: 77.5px;
  height: 93px;
  background: url('../images/index/shop_box_circle.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(290px, -328px, 0);
  transform: translate3d(290px, -328px, 0);
  -webkit-animation: flash 5s 2.1s forwards linear infinite;
  animation: flash 5s 2.1s forwards linear infinite
}

@-webkit-keyframes floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: .7;
    -webkit-transform: translate3d(320px, -328px, 0);
    transform: translate3d(320px, -328px, 0)
  }
}

@keyframes floatDown {

  to,
  from {
    opacity: 1
  }

  50% {
    opacity: .7;
    -webkit-transform: translate3d(320px, -328px, 0);
    transform: translate3d(320px, -328px, 0)
  }
}

@-webkit-keyframes floatDown2 {
  50% {
    opacity: 1;
    -webkit-transform: translate3d(340px, -308px, 0);
    transform: translate3d(340px, -308px, 0)
  }

  to,
  from {
    opacity: .7;
    -webkit-transform: translate3d(340px, -348px, 0);
    transform: translate3d(340px, -348px, 0)
  }
}

@keyframes floatDown2 {
  50% {
    opacity: 1;
    -webkit-transform: translate3d(340px, -308px, 0);
    transform: translate3d(340px, -308px, 0)
  }

  to,
  from {
    opacity: .7;
    -webkit-transform: translate3d(340px, -348px, 0);
    transform: translate3d(340px, -348px, 0)
  }
}

.shopAnimation .center_box .star_add,
.shopAnimation .center_box .star_add1 {
  width: 10px;
  height: 38px;
  background: url('../images/index/star_add.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(320px, -318px, 0);
  transform: translate3d(320px, -318px, 0);
  -webkit-animation: floatDown 5s 0s forwards ease-in-out infinite;
  animation: floatDown 5s 0s forwards ease-in-out infinite
}

.shopAnimation .center_box .star_add1 {
  -webkit-transform: translate3d(340px, -308px, 0);
  transform: translate3d(340px, -308px, 0);
  -webkit-animation: floatDown2 5s 0s forwards ease-in-out infinite;
  animation: floatDown2 5s 0s forwards ease-in-out infinite
}

.shopAnimation .center_box .shop_box_staff {
  width: 34.5px;
  height: 35px;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(256px, -184px, 0);
  transform: translate3d(256px, -184px, 0)
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap {
  width: 50px;
  height: 30.5px;
  -webkit-transform: skewY(30deg) translate3d(-8px, 2px, 0);
  transform: skewY(30deg) translate3d(-8px, 2px, 0);
  overflow: hidden
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box {
  display: inline-block;
  background: #03E882;
  width: 4px;
  height: 40px;
  margin-right: 2px;
  -webkit-transform: translate3d(0, 12px, 0);
  transform: translate3d(0, 12px, 0)
}

@-webkit-keyframes floatBar20 {

  from,
  to {
    -webkit-transform: translate3d(0, 60%, 0);
    transform: translate3d(0, 60%, 0);
    opacity: 1
  }

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

@keyframes floatBar20 {

  from,
  to {
    -webkit-transform: translate3d(0, 60%, 0);
    transform: translate3d(0, 60%, 0);
    opacity: 1
  }

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

@-webkit-keyframes floatBar30 {

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

  25%,
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 1
  }

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

@keyframes floatBar30 {

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

  25%,
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 1
  }

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

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(1) {
  -webkit-animation: floatBar20 15s .2s ease infinite;
  animation: floatBar20 15s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(2) {
  -webkit-animation: floatBar30 9.2s .2s ease infinite;
  animation: floatBar30 9.2s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(3) {
  -webkit-animation: floatBar20 14s .2s ease infinite;
  animation: floatBar20 14s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(4) {
  -webkit-animation: floatBar30 11s .2s ease infinite;
  animation: floatBar30 11s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(5) {
  -webkit-animation: floatBar20 10.3s .2s ease infinite;
  animation: floatBar20 10.3s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(6) {
  -webkit-animation: floatBar30 16s .2s ease infinite;
  animation: floatBar30 16s .2s ease infinite
}

.shopAnimation .center_box .shop_box_staff .shop_box_staff_wrap .box:nth-child(7) {
  -webkit-animation: floatBar20 12s .2s ease infinite;
  animation: floatBar20 12s .2s ease infinite
}

@-webkit-keyframes sa_1 {
  to {
    -webkit-transform: translate3d(138px, 10px, 0) scale(1.2);
    transform: translate3d(138px, 10px, 0) scale(1.2)
  }
}

@keyframes sa_1 {
  to {
    -webkit-transform: translate3d(138px, 10px, 0) scale(1.2);
    transform: translate3d(138px, 10px, 0) scale(1.2)
  }
}

@-webkit-keyframes sa_2 {
  to {
    -webkit-transform: translate3d(146px, 6px, 0) scale(1.2);
    transform: translate3d(146px, 6px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sa_2 {
  to {
    -webkit-transform: translate3d(146px, 6px, 0) scale(1.2);
    transform: translate3d(146px, 6px, 0) scale(1.2);
    opacity: 1
  }
}

@-webkit-keyframes sa_3 {
  to {
    -webkit-transform: translate3d(154px, 2px, 0) scale(1.2);
    transform: translate3d(154px, 2px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sa_3 {
  to {
    -webkit-transform: translate3d(154px, 2px, 0) scale(1.2);
    transform: translate3d(154px, 2px, 0) scale(1.2);
    opacity: 1
  }
}

.shopAnimation .center_box .sa_1 {
  width: 54px;
  height: 87.5px;
  background: url('../images/index/sa_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(156px, -2px, 0);
  transform: translate3d(156px, -2px, 0);
  -webkit-animation: sa_1 2s 0s alternate ease-in-out infinite;
  animation: sa_1 2s 0s alternate ease-in-out infinite
}

.shopAnimation .center_box .sa_2 {
  width: 51px;
  height: 85.5px;
  background: url('../images/index/sa_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(158px, -2px, 0);
  transform: translate3d(158px, -2px, 0);
  -webkit-animation: sa_2 2s 0s alternate ease-in-out infinite;
  animation: sa_2 2s 0s alternate ease-in-out infinite
}

.shopAnimation .center_box .sa_3 {
  width: 51px;
  height: 85.5px;
  background: url('../images/index/sa_3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(158px, -2px, 0);
  transform: translate3d(158px, -2px, 0);
  -webkit-animation: sa_3 2s 0s alternate ease-in-out infinite;
  animation: sa_3 2s 0s alternate ease-in-out infinite
}

@-webkit-keyframes sa_1_banner {
  to {
    -webkit-transform: translate3d(142px, 86px, 0);
    transform: translate3d(142px, 86px, 0)
  }
}

@keyframes sa_1_banner {
  to {
    -webkit-transform: translate3d(142px, 86px, 0);
    transform: translate3d(142px, 86px, 0)
  }
}

@-webkit-keyframes sa_2_banner {
  to {
    -webkit-transform: translate3d(150px, 82px, 0);
    transform: translate3d(150px, 82px, 0);
    opacity: 1
  }
}

@keyframes sa_2_banner {
  to {
    -webkit-transform: translate3d(150px, 82px, 0);
    transform: translate3d(150px, 82px, 0);
    opacity: 1
  }
}

.shopAnimation .center_box .sa_banner_1 {
  width: 47px;
  height: 45.5px;
  background: url('../images/index/sa_banner_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(158px, 78px, 0);
  transform: translate3d(158px, 78px, 0);
  -webkit-animation: sa_1_banner 2s 0s alternate ease-in-out infinite;
  animation: sa_1_banner 2s 0s alternate ease-in-out infinite
}

.shopAnimation .center_box .sa_banner_2 {
  width: 47px;
  height: 45.5px;
  background: url('../images/index/sa_banner_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(158px, 78px, 0);
  transform: translate3d(158px, 78px, 0);
  -webkit-animation: sa_2_banner 2s 0s alternate ease-in-out infinite;
  animation: sa_2_banner 2s 0s alternate ease-in-out infinite
}

@-webkit-keyframes sf_1 {
  to {
    -webkit-transform: translate3d(216px, 60px, 0) scale(1.2);
    transform: translate3d(216px, 60px, 0) scale(1.2)
  }
}

@keyframes sf_1 {
  to {
    -webkit-transform: translate3d(216px, 60px, 0) scale(1.2);
    transform: translate3d(216px, 60px, 0) scale(1.2)
  }
}

@-webkit-keyframes sf_2 {
  to {
    -webkit-transform: translate3d(230px, 56px, 0) scale(1.2);
    transform: translate3d(230px, 56px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sf_2 {
  to {
    -webkit-transform: translate3d(230px, 56px, 0) scale(1.2);
    transform: translate3d(230px, 56px, 0) scale(1.2);
    opacity: 1
  }
}

@-webkit-keyframes sf_3 {
  to {
    -webkit-transform: translate3d(240px, 52px, 0) scale(1.2);
    transform: translate3d(240px, 52px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sf_3 {
  to {
    -webkit-transform: translate3d(240px, 52px, 0) scale(1.2);
    transform: translate3d(240px, 52px, 0) scale(1.2);
    opacity: 1
  }
}

.shopAnimation .center_box .sf_1 {
  width: 52.5px;
  height: 81.5px;
  background: url('../images/index/sf_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(238px, 48px, 0);
  transform: translate3d(238px, 48px, 0);
  -webkit-animation: sf_1 2s 2s alternate ease-in-out infinite;
  animation: sf_1 2s 2s alternate ease-in-out infinite
}

.shopAnimation .center_box .sf_2 {
  width: 47px;
  height: 78.5px;
  background: url('../images/index/sf_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(242px, 48px, 0);
  transform: translate3d(242px, 48px, 0);
  -webkit-animation: sf_2 2s 2s alternate ease-in-out infinite;
  animation: sf_2 2s 2s alternate ease-in-out infinite
}

.shopAnimation .center_box .sf_3 {
  width: 47px;
  height: 78.5px;
  background: url('../images/index/sf_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(244px, 48px, 0);
  transform: translate3d(244px, 48px, 0);
  -webkit-animation: sf_3 2s 2s alternate ease-in-out infinite;
  animation: sf_3 2s 2s alternate ease-in-out infinite
}

@-webkit-keyframes sf_1_banner {
  to {
    -webkit-transform: translate3d(218px, 132px, 0);
    transform: translate3d(218px, 132px, 0)
  }
}

@keyframes sf_1_banner {
  to {
    -webkit-transform: translate3d(218px, 132px, 0);
    transform: translate3d(218px, 132px, 0)
  }
}

@-webkit-keyframes sf_2_banner {
  to {
    -webkit-transform: translate3d(222px, 124px, 0);
    transform: translate3d(222px, 124px, 0);
    opacity: 1
  }
}

@keyframes sf_2_banner {
  to {
    -webkit-transform: translate3d(222px, 124px, 0);
    transform: translate3d(222px, 124px, 0);
    opacity: 1
  }
}

.shopAnimation .center_box .sf_banner_1 {
  width: 55px;
  height: 51.5px;
  background: url('../images/index/sr_banner_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(234px, 118px, 0);
  transform: translate3d(234px, 118px, 0);
  -webkit-animation: sf_1_banner 2s 2s alternate ease-in-out infinite;
  animation: sf_1_banner 2s 2s alternate ease-in-out infinite
}

.shopAnimation .center_box .sf_banner_2 {
  width: 55.5px;
  height: 51.5px;
  background: url('../images/index/sr_banner_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(234px, 118px, 0);
  transform: translate3d(234px, 118px, 0);
  -webkit-animation: sf_2_banner 2s 2s alternate ease-in-out infinite;
  animation: sf_2_banner 2s 2s alternate ease-in-out infinite
}

@-webkit-keyframes sr_1 {
  to {
    -webkit-transform: translate3d(362px, 72px, 0) scale(1.2);
    transform: translate3d(362px, 72px, 0) scale(1.2)
  }
}

@keyframes sr_1 {
  to {
    -webkit-transform: translate3d(362px, 72px, 0) scale(1.2);
    transform: translate3d(362px, 72px, 0) scale(1.2)
  }
}

@-webkit-keyframes sr_2 {
  to {
    -webkit-transform: translate3d(358px, 68px, 0) scale(1.2);
    transform: translate3d(358px, 68px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sr_2 {
  to {
    -webkit-transform: translate3d(358px, 68px, 0) scale(1.2);
    transform: translate3d(358px, 68px, 0) scale(1.2);
    opacity: 1
  }
}

@-webkit-keyframes sr_3 {
  to {
    -webkit-transform: translate3d(354px, 64px, 0) scale(1.2);
    transform: translate3d(354px, 64px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sr_3 {
  to {
    -webkit-transform: translate3d(354px, 64px, 0) scale(1.2);
    transform: translate3d(354px, 64px, 0) scale(1.2);
    opacity: 1
  }
}

.shopAnimation .center_box .sr_1 {
  width: 44px;
  height: 69px;
  background: url('../images/index/sr_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(350px, 60px, 0);
  transform: translate3d(350px, 60px, 0);
  -webkit-animation: sr_1 2s .5s alternate ease-in-out infinite;
  animation: sr_1 2s .5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sr_2 {
  width: 39.5px;
  height: 66.5px;
  background: url('../images/index/sr_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(350px, 60px, 0);
  transform: translate3d(350px, 60px, 0);
  -webkit-animation: sr_2 2s .5s alternate ease-in-out infinite;
  animation: sr_2 2s .5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sr_3 {
  width: 40px;
  height: 66.5px;
  background: url('../images/index/sr_3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(350px, 60px, 0);
  transform: translate3d(350px, 60px, 0);
  -webkit-animation: sr_3 2s .5s alternate ease-in-out infinite;
  animation: sr_3 2s .5s alternate ease-in-out infinite
}

@-webkit-keyframes sdw_1_banner {
  to {
    -webkit-transform: translate3d(362px, 122px, 0);
    transform: translate3d(362px, 122px, 0)
  }
}

@keyframes sdw_1_banner {
  to {
    -webkit-transform: translate3d(362px, 122px, 0);
    transform: translate3d(362px, 122px, 0)
  }
}

@-webkit-keyframes sdw_2_banner {
  to {
    -webkit-transform: translate3d(356px, 116px, 0);
    transform: translate3d(356px, 116px, 0);
    opacity: 1
  }
}

@keyframes sdw_2_banner {
  to {
    -webkit-transform: translate3d(356px, 116px, 0);
    transform: translate3d(356px, 116px, 0);
    opacity: 1
  }
}

.shopAnimation .center_box .sdw_banner_1 {
  width: 77.5px;
  height: 63px;
  background: url('../images/index/sdw_banner_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(344px, 110px, 0);
  transform: translate3d(344px, 110px, 0);
  -webkit-animation: sdw_1_banner 2s .5s alternate ease-in-out infinite;
  animation: sdw_1_banner 2s .5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sdw_banner_2 {
  width: 77.5px;
  height: 63px;
  background: url('../images/index/sdw_banner_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(344px, 110px, 0);
  transform: translate3d(344px, 110px, 0);
  -webkit-animation: sdw_2_banner 2s .5s alternate ease-in-out infinite;
  animation: sdw_2_banner 2s .5s alternate ease-in-out infinite
}

@-webkit-keyframes sj_1 {
  to {
    -webkit-transform: translate3d(416px, 66px, 0) scale(1.2);
    transform: translate3d(416px, 66px, 0) scale(1.2)
  }
}

@keyframes sj_1 {
  to {
    -webkit-transform: translate3d(416px, 66px, 0) scale(1.2);
    transform: translate3d(416px, 66px, 0) scale(1.2)
  }
}

@-webkit-keyframes sj_2 {
  to {
    -webkit-transform: translate3d(412px, 64px, 0) scale(1.2);
    transform: translate3d(412px, 64px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sj_2 {
  to {
    -webkit-transform: translate3d(412px, 64px, 0) scale(1.2);
    transform: translate3d(412px, 64px, 0) scale(1.2);
    opacity: 1
  }
}

@-webkit-keyframes sj_3 {
  to {
    -webkit-transform: translate3d(408px, 62px, 0) scale(1.2);
    transform: translate3d(408px, 62px, 0) scale(1.2);
    opacity: 1
  }
}

@keyframes sj_3 {
  to {
    -webkit-transform: translate3d(408px, 62px, 0) scale(1.2);
    transform: translate3d(408px, 62px, 0) scale(1.2);
    opacity: 1
  }
}

.shopAnimation .center_box .sj_1 {
  width: 27.5px;
  height: 43px;
  background: url('../images/index/sj_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(406px, 50px, 0) scale(1.2);
  transform: translate3d(406px, 50px, 0) scale(1.2);
  -webkit-animation: sj_1 2s 2.5s alternate ease-in-out infinite;
  animation: sj_1 2s 2.5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sj_2 {
  width: 25px;
  height: 41.5px;
  background: url('../images/index/sj_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(406px, 50px, 0) scale(1.2);
  transform: translate3d(406px, 50px, 0) scale(1.2);
  -webkit-animation: sj_2 2s 2.5s alternate ease-in-out infinite;
  animation: sj_2 2s 2.5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sj_3 {
  width: 25px;
  height: 41.5px;
  background: url('../images/index/sj_3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(406px, 50px, 0) scale(1.2);
  transform: translate3d(406px, 50px, 0) scale(1.2);
  -webkit-animation: sj_3 2s 2.5s alternate ease-in-out infinite;
  animation: sj_3 2s 2.5s alternate ease-in-out infinite
}

@-webkit-keyframes sps_1 {
  to {
    -webkit-transform: translate3d(460px, 34px, 0) scale(1.4);
    transform: translate3d(460px, 34px, 0) scale(1.4)
  }
}

@keyframes sps_1 {
  to {
    -webkit-transform: translate3d(460px, 34px, 0) scale(1.4);
    transform: translate3d(460px, 34px, 0) scale(1.4)
  }
}

@-webkit-keyframes sps_2 {
  to {
    -webkit-transform: translate3d(456px, 32px, 0) scale(1.4);
    transform: translate3d(456px, 32px, 0) scale(1.4);
    opacity: 1
  }
}

@keyframes sps_2 {
  to {
    -webkit-transform: translate3d(456px, 32px, 0) scale(1.4);
    transform: translate3d(456px, 32px, 0) scale(1.4);
    opacity: 1
  }
}

@-webkit-keyframes sps_3 {
  to {
    -webkit-transform: translate3d(452px, 30px, 0) scale(1.4);
    transform: translate3d(452px, 30px, 0) scale(1.4);
    opacity: 1
  }
}

@keyframes sps_3 {
  to {
    -webkit-transform: translate3d(452px, 30px, 0) scale(1.4);
    transform: translate3d(452px, 30px, 0) scale(1.4);
    opacity: 1
  }
}

.shopAnimation .center_box .sps_1 {
  width: 36px;
  height: 56.5px;
  background: url('../images/index/sps_1_svg.svg') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(444px, 28px, 0) scale(1.2);
  transform: translate3d(444px, 28px, 0) scale(1.2);
  -webkit-animation: sps_1 3s 4.5s alternate ease-in-out infinite;
  animation: sps_1 3s 4.5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sps_2 {
  width: 32.5px;
  height: 54.5px;
  background: url('../images/index/sps_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(444px, 28px, 0) scale(1.2);
  transform: translate3d(444px, 28px, 0) scale(1.2);
  -webkit-animation: sps_2 3s 4.5s alternate ease-in-out infinite;
  animation: sps_2 3s 4.5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sps_3 {
  width: 32.5px;
  height: 54.5px;
  background: url('../images/index/sps_3.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(444px, 28px, 0) scale(1.2);
  transform: translate3d(444px, 28px, 0) scale(1.2);
  -webkit-animation: sps_3 3s 4.5s alternate ease-in-out infinite;
  animation: sps_3 3s 4.5s alternate ease-in-out infinite
}

@-webkit-keyframes sdp_1_banner {
  to {
    -webkit-transform: translate3d(452px, 88px, 0);
    transform: translate3d(452px, 88px, 0)
  }
}

@keyframes sdp_1_banner {
  to {
    -webkit-transform: translate3d(452px, 88px, 0);
    transform: translate3d(452px, 88px, 0)
  }
}

@-webkit-keyframes sdp_2_banner {
  to {
    -webkit-transform: translate3d(447px, 84px, 0);
    transform: translate3d(447px, 84px, 0);
    opacity: 1
  }
}

@keyframes sdp_2_banner {
  to {
    -webkit-transform: translate3d(447px, 84px, 0);
    transform: translate3d(447px, 84px, 0);
    opacity: 1
  }
}

.shopAnimation .center_box .sdp_banner_1 {
  width: 43px;
  height: 37.5px;
  background: url('../images/index/sdp_banner_1.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(442px, 80px, 0);
  transform: translate3d(442px, 80px, 0);
  -webkit-animation: sdp_1_banner 3s 4.5s alternate ease-in-out infinite;
  animation: sdp_1_banner 3s 4.5s alternate ease-in-out infinite
}

.shopAnimation .center_box .sdp_banner_2 {
  width: 43px;
  height: 37.5px;
  background: url('../images/index/sdp_banner_2.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(442px, 80px, 0);
  transform: translate3d(442px, 80px, 0);
  -webkit-animation: sdp_2_banner 3s 4.5s alternate ease-in-out infinite;
  animation: sdp_2_banner 3s 4.5s alternate ease-in-out infinite
}

@-webkit-keyframes floatBar80 {

  from,
  to {
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
    opacity: 1
  }

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

@keyframes floatBar80 {

  from,
  to {
    -webkit-transform: translate3d(0, 30%, 0);
    transform: translate3d(0, 30%, 0);
    opacity: 1
  }

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

@-webkit-keyframes floatBar90 {

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

  25%,
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 1
  }

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

@keyframes floatBar90 {

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

  25%,
  75% {
    -webkit-transform: translate3d(0, 50%, 0);
    transform: translate3d(0, 50%, 0);
    opacity: 1
  }

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

@-webkit-keyframes right_ani {
  to {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
  }
}

@keyframes right_ani {
  to {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
  }
}

.shopAnimation .right .right_top {
  width: 41px;
  height: 92px;
  background: url('../images/index/shap-icon.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 7;
  -webkit-transform: translate3d(649px, 15px, 0);
  transform: translate3d(649px, 15px, 0)
}

.shopAnimation .right .right_top .barWrap {
  display: none;
  width: 80px;
  height: 60px;
  -webkit-transform: skewY(30deg) translate3d(0, 80px, 0);
  transform: skewY(30deg) translate3d(0, 80px, 0);
  overflow: hidden
}

.shopAnimation .right .right_top .barWrap .bar {
  display: inline-block;
  width: 4px;
  height: 80px;
  background: #04F0F2;
  margin-right: 8px;
  -webkit-transform: translate3d(0, 40px, 0);
  transform: translate3d(0, 40px, 0)
}

.shopAnimation .right .right_top .barWrap .bar::after {
  display: inline-block;
  background: #D7D8D8;
  width: 100%;
  height: 100%;
  content: '';
  opacity: .3;
  margin-left: 6px;
  margin-top: -6px
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(1) {
  -webkit-animation: floatBar80 15s .2s ease infinite;
  animation: floatBar80 15s .2s ease infinite
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(2) {
  -webkit-animation: floatBar90 9.2s .2s ease infinite;
  animation: floatBar90 9.2s .2s ease infinite
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(3) {
  -webkit-animation: floatBar80 14s .2s ease infinite;
  animation: floatBar80 14s .2s ease infinite
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(4) {
  -webkit-animation: floatBar90 11s .2s ease infinite;
  animation: floatBar90 11s .2s ease infinite
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(5) {
  -webkit-animation: floatBar80 10.3s .2s ease infinite;
  animation: floatBar80 10.3s .2s ease infinite
}

.shopAnimation .right .right_top .barWrap .bar:nth-child(6) {
  -webkit-animation: floatBar90 16s .2s ease infinite;
  animation: floatBar90 16s .2s ease infinite
}

.shopAnimation .right .right_mid {
  display: none;
  width: 81.5px;
  height: 205px;
  background: url('../images/index/right_mid.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(570px, -100px, 0);
  transform: translate3d(570px, -100px, 0)
}

.shopAnimation .right .right_bottom {
  width: 52px;
  height: 52px;
  background: url('../images/index/icon-right-bottom.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(725px, 401px, 0);
  transform: translate3d(725px, 401px, 0)
}

@-webkit-keyframes floatUser2 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(26px, -40px, 0);
    transform: translate3d(26px, -40px, 0)
  }
}

@keyframes floatUser2 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(26px, -40px, 0);
    transform: translate3d(26px, -40px, 0)
  }
}

@-webkit-keyframes floatUser3 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(22px, -44px, 0);
    transform: translate3d(22px, -44px, 0)
  }
}

@keyframes floatUser3 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(22px, -44px, 0);
    transform: translate3d(22px, -44px, 0)
  }
}

@-webkit-keyframes floatUser4 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(18px, -48px, 0);
    transform: translate3d(18px, -48px, 0)
  }
}

@keyframes floatUser4 {

  from,
  to {
    opacity: 1
  }

  75% {
    opacity: 1;
    -webkit-transform: translate3d(18px, -48px, 0);
    transform: translate3d(18px, -48px, 0)
  }
}

@-webkit-keyframes left_ani {
  to {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
  }
}

@keyframes left_ani {
  to {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
  }
}

.shopAnimation .left .left_person {
  display: none;
  width: 31px;
  height: 72.5px;
  background: url('../images/index/left_person.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 10;
  -webkit-transform: translate3d(22px, -44px, 0);
  transform: translate3d(22px, -44px, 0);
  -webkit-animation: floatUser2 10s .2s infinite ease;
  animation: floatUser2 10s .2s infinite ease
}

.shopAnimation .left .left_mid {
  display: none;
  width: 29.5px;
  height: 73.5px;
  background: url('../images/index/left_mid.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 9;
  -webkit-transform: translate3d(22px, -44px, 0);
  transform: translate3d(22px, -44px, 0);
  -webkit-animation: floatUser3 10s .3s infinite ease;
  animation: floatUser3 10s .3s infinite ease
}

.shopAnimation .left .left_mid_1 {
  width: 61px;
  height: 138px;
  background: url('../images/index/shap-icon-left.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 5;
  -webkit-transform: translate3d(200px, 360px, 0);
  transform: translate3d(200px, 360px, 0)
}

.shopAnimation .left .left_bottom {
  display: none;
  width: 30.5px;
  height: 73.5px;
  background: url('../images/index/left_bottom.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  z-index: 6;
  -webkit-transform: translate3d(22px, -44px, 0);
  transform: translate3d(22px, -44px, 0);
  -webkit-animation: floatUser4 10s .4s infinite ease;
  animation: floatUser4 10s .4s infinite ease
}

@media screen and (max-width:1080px) {

  .shopAnimation .left.left-mobile,
  .shopAnimation .right.right-mobile {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0)
  }

  .shopAnimation .center_box.center_box_mobile {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(-2px, -1px, 0);
    transform: translate3d(-2px, -1px, 0);
    opacity: 1;
    position: relative;
    z-index: 10;
    display: block
  }

  .shopAnimation .bottom_layertop.bottom_layertop_mobile {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0)
  }

  .shopAnimation .bottom_layermid.bottom_layermid_mobile {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0)
  }

  .shopAnimation .bottom_layer.bottom_layer_mobile {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0)
  }
}
@media screen and (max-width:1080px) {
  .shopAnimation {
    left: 50%;
    top: 240px;
    -webkit-transform: scale(0.5) translate(-102%, -32%);
    -ms-transform: scale(0.5) translate(-102%, -32%);
    transform: scale(0.5) translate(-102%, -32%)
  }
}

@media screen and (max-width:1340px) {
  .shopAnimation {
    left: 420px;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8)
  }
}

@media screen and (max-width:1077px) {
  .shopAnimation {
    left: 50%;
    top: 190px;
    -webkit-transform: scale(0.5) translate(-104%, -32%);
    -ms-transform: scale(0.5) translate(-104%, -32%);
    transform: scale(0.5) translate(-104%, -32%)
  }

  .shopAnimation-three {
    right: inherit !important;
  }
}

@media screen and (max-width:750px) {
  .shopAnimation {
    left: 50%;
    top: 215px;
    -webkit-transform: scale(0.5) translate(-104%, -32%);
    -ms-transform: scale(0.5) translate(-104%, -32%);
    transform: scale(0.5) translate(-104%, -32%)
  }
}