.shopAnimation {
    width: 672px;
    height: 702px;
    display: inline-block;
    position: absolute;
    pointer-events: none;
    left: 660px;
    top: 290px;
    -webkit-transform: scale(0.9) translate3d(0, 80px, 0);
    transform: scale(0.9) translate3d(0, 80px, 0)
}

.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(0, -20px, 0);
        transform: translate3d(0, -20px, 0)
    }
}

@keyframes bottom_layertop_ani {
    from {
        opacity: 0
    }

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

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

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

@keyframes bottom_layermid_ani {
    from {
        opacity: 0
    }

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

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

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

@keyframes bottom_layer_ani {
    from {
        opacity: 0
    }

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

.shopAnimation .bottom .bottom_layertop {
    width: 636.5px;
    height: 367.5px;
    background: url(  /assets/img/shopAnimation/bottom_layertop_3d6d3fa.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 3;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
    -webkit-animation: bottom_layertop_ani 2s 0s forwards ease;
    animation: bottom_layertop_ani 2s 0s forwards ease
}

.shopAnimation .bottom .bottom_layerbtm {
    width: 636.5px;
    height: 367.5px;
    background: url(  /assets/img/shopAnimation/bottom_layerbtm_faccb30.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 1
}

.shopAnimation .bottom .bottom_layermid {
    width: 636.5px;
    height: 367.5px;
    background: url(  /assets/img/shopAnimation/bottom_layermid_ddf1073.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 2;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
    -webkit-animation: bottom_layermid_ani 1.5s .5s forwards ease;
    animation: bottom_layermid_ani 1.5s .5s forwards ease
}

.shopAnimation .bottom .bottom_layer {
    width: 636.5px;
    height: 393.5px;
    background: url(  /assets/img/shopAnimation/bottom_layer_90910e2.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 4;
    -webkit-transform: translate3d(-2px, -2000px, 0);
    transform: translate3d(-2px, -2000px, 0);
    -webkit-animation: bottom_layer_ani 1s 1s forwards ease;
    animation: bottom_layer_ani 1s 1s forwards ease
}

.shopAnimation .center_box {
    -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(  /assets/img/shopAnimation/center_shop_79106e7.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(  /assets/img/shopAnimation/shop_box_d17578d.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(  /assets/img/shopAnimation/shop_box_shadow_6b999cb.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(  /assets/img/shopAnimation/shop_box_circle_46e09c8.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(  /assets/img/shopAnimation/star_add_a5b4b4f.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(  /assets/img/shopAnimation/sa_1_svg_15ab1f5.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(  /assets/img/shopAnimation/sa_2_c5d5106.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(  /assets/img/shopAnimation/sa_3_15ae336.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(  /assets/img/shopAnimation/sa_banner_1_svg_be36eb1.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(  /assets/img/shopAnimation/sa_banner_2_185546d.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(  /assets/img/shopAnimation/sf_1_svg_e0981f2.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(  /assets/img/shopAnimation/sf_2_fabcdaa.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(  /assets/img/shopAnimation/sf_3_e7273e7.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(  /assets/img/shopAnimation/sr_banner_1_svg_927426e.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(  /assets/img/shopAnimation/sr_banner_2_185546d.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(  /assets/img/shopAnimation/sr_1_svg_0c4e80f.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(  /assets/img/shopAnimation/sr_2_b599a02.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(  /assets/img/shopAnimation/sr_3_2d160f5.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(  /assets/img/shopAnimation/sdw_banner_1_svg_06924ce.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(  /assets/img/shopAnimation/sdw_banner_2_e1effb4.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(  /assets/img/shopAnimation/sj_1_svg_e6a8d00.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(  /assets/img/shopAnimation/sj_2_1efbf7b.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(  /assets/img/shopAnimation/sj_3_1288341.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(  /assets/img/shopAnimation/sps_1_svg_f111eae.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(  /assets/img/shopAnimation/sps_2_a9088a3.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(  /assets/img/shopAnimation/sps_3_8b7ccab.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(  /assets/img/shopAnimation/sdp_banner_1_573d680.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(  /assets/img/shopAnimation/sdp_banner_2_8928112.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 {
    -webkit-transform: translate3d(0px, -2000px, 0);
    transform: translate3d(0px, -2000px, 0);
    -webkit-animation: right_ani 3s 1.5s forwards ease;
    animation: right_ani 3s 1.5s forwards ease
}

.shopAnimation .right .right_top {
    width: 81.5px;
    height: 205px;
    background: url(  /assets/img/shopAnimation/right_top_f15ebf2.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 7;
    -webkit-transform: translate3d(560px, -90px, 0);
    transform: translate3d(560px, -90px, 0)
}

.shopAnimation .right .right_top .barWrap {
    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 {
    width: 81.5px;
    height: 205px;
    background: url(  /assets/img/shopAnimation/right_mid_695595a.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: 81.5px;
    height: 205px;
    background: url(  /assets/img/shopAnimation/right_bottom_bc457a7.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 5;
    -webkit-transform: translate3d(580px, -110px, 0);
    transform: translate3d(580px, -110px, 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 {
    -webkit-transform: translate3d(0px, -2000px, 0);
    transform: translate3d(0px, -2000px, 0);
    -webkit-animation: left_ani 2s 1.5s forwards ease;
    animation: left_ani 2s 1.5s forwards ease
}

.shopAnimation .left .left_person {
    width: 31px;
    height: 72.5px;
    background: url(  /assets/img/shopAnimation/left_person_4eb2102.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 {
    width: 29.5px;
    height: 73.5px;
    background: url(  /assets/img/shopAnimation/left_mid_a9087d4.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: 70px;
    height: 131px;
    background: url(  /assets/img/shopAnimation/left_mid_1_2d34d78.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 5;
    -webkit-transform: translate3d(-2px, -74px, 0);
    transform: translate3d(-2px, -74px, 0)
}

.shopAnimation .left .left_bottom {
    width: 30.5px;
    height: 73.5px;
    background: url(  /assets/img/shopAnimation/left_bottom_596ee6e.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)
    }
}