#sg_app_1 {
    left: 50%;
    top: 50%;
    -webkit-animation: app1 .4s linear forwards;
    animation: app1 .4s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_2 {
    left: 50%;
    top: 50%;
    -webkit-animation: app2 .5s linear forwards;
    animation: app2 .5s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_3 {
    left: 50%;
    top: 50%;
    -webkit-animation: app3 .7s linear forwards;
    animation: app3 .6s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_4 {
    left: 50%;
    top: 50%;
    -webkit-animation: app4 .8s linear forwards;
    animation: app4 .6s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_6 {
    left: 50%;
    top: 50%;
    -webkit-animation: app6 .7s linear forwards;
    animation: app6 .6s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_7 {
    left: 50%;
    top: 50%;
    -webkit-animation: app7 .5s linear forwards;
    animation: app7 .5s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_8 {
    left: 50%;
    top: 50%;
    -webkit-animation: app8 .5s linear forwards;
    animation: app8 .5s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_9 {
    left: 50%;
    top: 50%;
    -webkit-animation: app9 .4s linear forwards;
    animation: app9 .4s linear forwards;
    animation-delay: 0.3s;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 1;
}

#sg_app_5 {
    left: 50%;
    top: 50%;
    -webkit-animation: app5 .5s linear forwards;
    animation: app5 .5s linear forwards;
    transform: translate(-100px, 120px) scale(0.3);
    opacity: 0;
    z-index: 2;
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    100% {
        -ms-transform: translate(-350px, 20px) scale(1);
        -webkit-transform: translate(-350px, 20px) scale(1);
        transform: translate(-350px, 20px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app1 {
    0% {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 10px) scale(0.75);
        -webkit-transform: translate(-150px, 10px) scale(0.75);
        transform: translate(-150px, 10px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-250px, -50px) scale(1);
        -webkit-transform: translate(-250px, -50px) scale(1);
        transform: translate(-250px, -50px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app2 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 10px) scale(0.75);
        -webkit-transform: translate(-150px, 10px) scale(0.75);
        transform: translate(-150px, 10px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-250px, -50px) scale(1);
        -webkit-transform: translate(-250px, -50px) scale(1);
        transform: translate(-250px, -50px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 10px) scale(0.5);
        -webkit-transform: translate(-150px, 10px) scale(0.5);
        transform: translate(-150px, 10px) scale(0.5);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-380px, -130px) scale(0.5);
        -webkit-transform: translate(-380px, -130px) scale(0.5);
        transform: translate(-380px, -130px) scale(0.5);
        opacity: 1;
    }
}

@-webkit-keyframes app3 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.5);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 10px) scale(0.5);
        -webkit-transform: translate(-150px, 10px) scale(0.5);
        transform: translate(-150px, 10px) scale(0.5);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-380px, -130px) scale(0.5);
        -webkit-transform: translate(-380px, -130px) scale(0.5);
        transform: translate(-380px, -130px) scale(0.5);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 60px) scale(0.75);
        -webkit-transform: translate(-150px, 60px) scale(0.75);
        transform: translate(-150px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-260px, -160px) scale(1);
        -webkit-transform: translate(-260px, -160px) scale(1);
        transform: translate(-260px, -160px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app4 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-150px, 60px) scale(0.75);
        -webkit-transform: translate(-150px, 60px) scale(0.75);
        transform: translate(-150px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-260px, -160px) scale(1);
        -webkit-transform: translate(-260px, -160px) scale(1);
        transform: translate(-260px, -160px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-80px, 60px) scale(0.75);
        -webkit-transform: translate(-80px, 60px) scale(0.75);
        transform: translate(-80px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-60px, -10px) scale(1);
        -webkit-transform: translate(-60px, -10px) scale(1);
        transform: translate(-60px, -10px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app5 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-80px, 60px) scale(0.75);
        -webkit-transform: translate(-80px, 60px) scale(0.75);
        transform: translate(-80px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(-60px, -10px) scale(1);
        -webkit-transform: translate(-60px, -10px) scale(1);
        transform: translate(-60px, -10px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(160px, -160px) scale(1);
        -webkit-transform: translate(160px, -160px) scale(1);
        transform: translate(160px, -160px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app6 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(160px, -160px) scale(1);
        -webkit-transform: translate(160px, -160px) scale(1);
        transform: translate(160px, -160px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(270px, -80px) scale(1);
        -webkit-transform: translate(270px, -80px) scale(1);
        transform: translate(270px, -80px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app7 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(270px, -80px) scale(1);
        -webkit-transform: translate(270px, -80px) scale(1);
        transform: translate(270px, -80px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(290px, 60px) scale(1);
        -webkit-transform: translate(290px, 60px) scale(1);
        transform: translate(290px, 60px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app8 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(290px, 60px) scale(1);
        -webkit-transform: translate(290px, 60px) scale(1);
        transform: translate(290px, 60px) scale(1);
        opacity: 1;
    }
}

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

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(120px, 100px) scale(1);
        -webkit-transform: translate(120px, 100px) scale(1);
        transform: translate(120px, 100px) scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes app9 {
    0% {
        opacity: 0;
    }

    5% {
        -ms-transform: translate(-100px, 120px) scale(0.3);
        -webkit-transform: translate(-100px, 120px) scale(0.3);
        transform: translate(-100px, 120px) scale(0.3);
        opacity: 1;
    }

    75% {
        -ms-transform: translate(-10px, 60px) scale(0.75);
        -webkit-transform: translate(-10px, 60px) scale(0.75);
        transform: translate(-10px, 60px) scale(0.75);
        opacity: 1;
    }

    100% {
        animation-timing-function: cubic-bezier(.5, .5, .5, .5);
        -ms-transform: translate(120px, 100px) scale(1);
        -webkit-transform: translate(120px, 100px) scale(1);
        transform: translate(120px, 100px) scale(1);
        opacity: 1;
    }
}

@media(max-width:600px) {
    .sg_top .sg_image {
        transform: scale(0.7);
    }

    #sg_app_1 {
        left: 90%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_2 {
        left: 60%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_3 {
        left: 95%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_4 {
        left: 80%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_5 {
        animation-duration: 0s;
    }

    #sg_app_6 {
        left: 25%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_7 {
        left: 10%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_8 {
        left: 10%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    #sg_app_9 {
        left: 40%;
        top: 50%;
        animation-duration: 0s;
        transform: translate(-50px, 75px) scale(0.1);
    }

    img.sg_app {
        transform: translate(-50px, 75px) scale(0.1);
    }
}

.sg_app {
    position: absolute;
    left: 50%;
    top: 50%;
}

#sg_app_b_1 {
    transform: translate(-170px, 140px) scale(1);
}

#sg_app_b_2 {
    transform: translate(-230px, 20px) scale(1);
}

#sg_app_b_3 {
    transform: translate(-240px, -130px) scale(1);
}

#sg_app_b_4 {
    transform: translate(150px, -150px) scale(1);
}

#sg_app_b_5 {
    transform: translate(160px, -50px) scale(1);
}

#sg_app_b_6 {
    transform: translate(-110px, 20px) scale(1);
}

#sg_app_b_7 {
    transform: translate(90px, 160px) scale(1);
}

#sg_app_c_1 {
    transform: translate(160px, -200px) scale(1);
}

#sg_app_c_2 {
    transform: translate(100px, -120px) scale(1);
}

#sg_app_c_3 {
    transform: translate(80px, -20px) scale(1);
}

#sg_app_c_4 {
    transform: translate(130px, 40px) scale(1);
}

#sg_app_c_5 {
    transform: translate(90px, 120px) scale(1);
}

#sg_app_c_6 {
    transform: translate(-200px, -130px) scale(1);
}

#sg_app_c_7 {
    transform: translate(90px, -280px) scale(1);
}

#sg_app_c_8 {
    transform: translate(120px, 30px) scale(1);
}

#sg_app_card1 {
    transform: translate(170px, -160px) scale(1);
}

#sg_app_card2 {
    transform: translate(-100px, 30px) scale(1);
}

/*  */

#sg_app_c_store {
    transform: translate(-195px, -150px) scale(1);
}

#sg_app_c_9 {
    transform: translate(-210px, 165px) scale(1);
}

#sg_app_c_10 {
    transform: translate(-145px, 65px) scale(1);
}

#sg_app_c_11 {
    transform: translate(-30px, -20px) scale(1);
}

#sg_app_c_12 {
    transform: translate(80px, -125px) scale(1);
}

#sg_app_c_13 {
    transform: translate(150px, -230px) scale(1);
}

@media(max-width:650px) {
    #sg_app_b_1 {
        transform: translate(-130px, 140px) scale(1);
    }

    #sg_app_b_2 {
        transform: translate(-180px, 20px) scale(1);
    }

    #sg_app_b_3 {
        transform: translate(-190px, -130px) scale(1);
    }

    #sg_app_b_4 {
        transform: translate(100px, -150px) scale(1);
    }

    #sg_app_b_5 {
        transform: translate(110px, -50px) scale(1);
    }

    #sg_app_b_6 {
        transform: translate(-60px, 20px) scale(1);
    }

    #sg_app_b_7 {
        transform: translate(40px, 160px) scale(1);
    }

    #sg_app_c_1 {
        transform: translate(110px, -200px) scale(1);
    }

    #sg_app_c_2 {
        transform: translate(50px, -120px) scale(1);
    }

    #sg_app_c_3 {
        transform: translate(30px, -20px) scale(1);
    }

    #sg_app_c_4 {
        transform: translate(80px, 40px) scale(1);
    }

    #sg_app_c_5 {
        transform: translate(40px, 120px) scale(1);
    }

    #sg_app_c_6 {
        transform: translate(-150px, -130px) scale(1);
    }

    #sg_app_c_7 {
        transform: translate(40px, -240px) scale(1);
    }

    #sg_app_c_8 {
        transform: translate(80px, 30px) scale(1);
    }

    #sg_app_card1 {
        transform: translate(120px, -160px) scale(1);
    }

    #sg_app_card2 {
        transform: translate(120px, 30px) scale(1);
    }

    /*  */
    #sg_app_c_store {
        transform: translate(-165px, -180px) scale(1);
    }

    #sg_app_c_9 {
        transform: translate(-160px, 125px) scale(1);
    }

    #sg_app_c_10 {
        transform: translate(-105px, 55px) scale(1);
    }

    #sg_app_c_11 {
        transform: translate(-30px, -20px) scale(1);
    }

    #sg_app_c_12 {
        transform: translate(30px, -125px) scale(1);
    }

    #sg_app_c_13 {
        transform: translate(100px, -230px) scale(1);
    }
}