@charset "UTF-8";
@-webkit-keyframes gupIn {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -30px, 0);
    }
}

@-moz-keyframes gupIn {
    from {
        opacity: 0;
        -moz-transform: translate3d(0, -30px, 0);
    }
}

@keyframes gupIn {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation: 'fadeIn' 1.5s linear 0s forwards;
    animation-duration: 1252.611174458381ms;
    animation-delay: 247.38882554161916ms;
}

#page01_phone_img {
    -webkit-animation: rotateRight 2s 1.2s cubic-bezier(0.4, 0, 1, 1) both;
    -moz-animation: rotateRight 2s 1.2s ease both;
    animation: rotateRight 2s 1.2s  cubic-bezier(0.4, 0, 1, 1) both;
}

@-webkit-keyframes rotateRight {
    0% {
        -webkit-transform-origin: 165px bottom;
        -webkit-transform: rotate(0);
        opacity: 0
    }
    10% {
        -webkit-transform-origin: 165px bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: 165px bottom;
        -webkit-transform: rotate(30deg);
        opacity: 1
    }
}

@-moz-keyframes rotateRight {
    0% {
        -moz-transform-origin: 165px bottom;
        -moz-transform: rotate(0);
        opacity: 0
    }
    10% {
        -webkit-transform-origin: 165px bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: 165px bottom;
        -moz-transform: rotate(30deg);
        opacity: 1
    }
}

@keyframes play {
    0% {
        transform: translate(0%, 0%);
    }
    50% {
        transform: translate(-50%, -10%);
    }
    100% {
        transform: translate(0%, 0);
    }
}

@-webkit-keyframes play {
    0% {
        -webkit-transform: translate(0%, 0%);
    }
    50% {
        -webkit-transform: translate(-50%, -10%);
    }
    100% {
        -webkit-transform: translate(0%, 0);
    }
}

@-webkit-keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes slideInUp {
    from {
        -webkit-transform: translate3d(0, 10%, 0);
        transform: translate3d(0, 10%, 0);
        opacity: 0
    }
    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

.slideInUp {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50%,
    100% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50%,
    100% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50%,
    100% {
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    50%,
    100% {
        opacity: 1;
    }
}

.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

@-webkit-keyframes pagestar {
    from {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg) scaleX(1) scaleY(-0.3) translateX(-226px) translateY(-108px) translateZ(-269px) skewX(-51deg);
    }
    100% {}
}

@keyframes pagestar {
    from {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
        transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg) scaleX(1) scaleY(-0.3) translateX(-226px) translateY(-108px) translateZ(-269px) skewX(-51deg);
    }
    100% {}
}

@-webkit-keyframes p1 {
    0%,
    100% {
        opacity: 0.33;
    }
    50% {
        opacity: 1;
        -webkit-transform: rotateZ(360deg);
    }
}

@keyframes p1 {
    0%,
    100% {
        opacity: 0.33;
    }
    50% {
        opacity: 1;
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes p1star01 {
    0%,
    100% {
        opacity: 0.33;
    }
    50% {
        opacity: 1;
        -webkit-transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);
    }
}

@keyframes p1star01 {
    0%,
    100% {
        opacity: 0.33;
    }
    50% {
        opacity: 1;
        transform: rotateX(-180deg) rotateY(-180deg) rotateZ(-180deg);
    }
}

@-webkit-keyframes p1star02 {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.6;
        -webkit-transform: skewX(-30deg) skewY(-30deg) translateX(10%) translateY(40%);
    }
}

@keyframes p1star02 {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.6;
        transform: skewX(-30deg) skewY(-30deg) translateX(10%) translateY(40%);
    }
}

@-webkit-keyframes p1star04 {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0;
        right: 50%;
        -webkit-transform: skewX(-45deg) skewY(45deg) translateY(10%);
    }
}

@keyframes p1star04 {
    0%,
    100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0;
        right: 50%;
        transform: skewX(-45deg) skewY(45deg) translateY(10%);
    }
}

@keyframes p2_cloud {
    0% {
        transform: translate(0%, 0%);
    }
    50% {
        transform: translate(-400px, -10%);
    }
    100% {
        transform: translate(0%, 0);
    }
}

@-webkit-keyframes p2_cloud {
    0% {
        -webkit-transform: translate(0%, 0%);
    }
    50% {
        -webkit-transform: translate(-400px, -10%);
    }
    100% {
        -webkit-transform: translate(0%, 0);
    }
}

@-webkit-keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

@keyframes zoomInRight {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
        animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
        -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
        animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    }
}

.zoomInRight {
    -webkit-animation-name: zoomInRight;
    animation-name: zoomInRight;
}

@-webkit-keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes bounceInRight {
    from,
    60%,
    75%,
    90%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from {
        opacity: 0;
        -webkit-transform: translate3d(3000px, 0, 0);
        transform: translate3d(3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(-25px, 0, 0);
        transform: translate3d(-25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0);
    }
    to {
        -webkit-transform: none;
        transform: none;
    }
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
        opacity: 1;
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes pulse {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    50% {
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
        opacity: 1;
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

@-webkit-keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@keyframes rotateIn {
    from {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
    }
    to {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

.rotateIn {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes big {
    from {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes big {
    from {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
        opacity: 0;
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

.big {
    -webkit-animation-name: big;
    animation-name: big;
}
