@charset "UTF-8";

/***************animation****************/

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
}

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -ms-transform:translateX(-100px);
        transform: translateX(-100px);
}

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
        -ms-transform:translateX(-100px);
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -ms-transform:translateX(100px);
        transform: translateX(100px);
}

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
        -ms-transform:translateX(100px);
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes buttonRoll {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50%,
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}

@keyframes buttonRoll {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
    }

    50%,
    100% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}


@-webkit-keyframes img_shine {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@keyframes img_shine {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes colorText {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes colorText {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes tit {

    0% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@-webkit-keyframes tit {
    0% {
        -webkit-transform: translateY(2px);
        transform: translateY(2px);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

/********delay style**************/

.delay-1 {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s;
}

.delay-2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transition-delay: 1s;
    transition-delay: 1s;
}

.delay-3 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;

}

.delay-4 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
}

.delay-5 {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
    -webkit-transition-delay: 2.5s;
    transition-delay: 2.5s;
}

.delay-6 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
}

.delay-7 {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
    -webkit-transition-delay: 3.5s;
    transition-delay: 3.5s;
}

.delay-8 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-transition-delay: 4s;
    transition-delay: 4s;
}

.delay-9 {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
    -webkit-transition-delay: 4.5s;
    transition-delay: 4.5s;
}

.delay-10 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-transition-delay: 5s;
    transition-delay: 5s;
}

/***************common transition****************/

.zoom_in {
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}

.zoom_out {
    -webkit-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
}

.buttonRoll {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
}

.img_shine{
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
}

.fadeInUp {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
}

.fadeInDown {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
}

.fadeInLeft {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease
}

.fadeInRight {
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    -ms-transition: all 1s ease;
}

/***************emergence animation****************/

.zoom_in[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}

.zoom_in[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.zoom_out[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform:translateY(2px);
    transform: translateY(2px);
    -webkit-transform: scale(2);
    transform:  scale(2);
}

.zoom_out[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform:  scale(1);
}

[data-emergence=hidden] .fadeInUp,
.fadeInUp[data-emergence=hidden] {
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
}

[data-emergence=visible] .fadeInUp ,
.fadeInUp[data-emergence=visible] {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
}

[data-emergence=hidden] .fadeInDown,
.fadeInDown[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
    transform: translateY(-100px)
}

[data-emergence=visible] .fadeInDown,
.fadeInDown[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0)
}

[data-emergence=hidden] .fadeInLeft,
.fadeInLeft[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateX(-100px);
    -moz-transform: translateX(-100px);
    -ms-transform: translateX(-100px);
    -o-transform: translateX(-100px);
    transform: translateX(-100px)
}

[data-emergence=visible] .fadeInLeft,
.fadeInLeft[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

[data-emergence=hidden] .fadeInRight,
.fadeInRight[data-emergence=hidden] {
    opacity: 0;
    -webkit-transform: translateX(100px);
    -moz-transform: translateX(100px);
    -ms-transform: translateX(100px);
    -o-transform: translateX(100px);
    transform: translateX(100px);
}

[data-emergence=visible] .fadeInRight,
.fadeInRight[data-emergence=visible] {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0)
}

.title[data-emergence=hidden] {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
}

.title[data-emergence=visible] {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.img_shine[data-emergence=hidden] {
    opacity: 0;
}

.img_shine[data-emergence=visible] {
    opacity: 1;
}

.buttonRoll[data-emergence=hidden] {
    -webkit-transform: scale(2);
    transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
}

.buttonRoll[data-emergence=visible] {
    -webkit-transform: scale(1);
    transform: scale(1);
}


/*********emergence delay style********/
[data-emergence=visible] .delay-1,
.delay-1[data-emergence=visible] {
    transition-delay: .5s;
}
[data-emergence=visible] .delay-2,
.delay-2[data-emergence=visible] {
    transition-delay: 1s;
}
[data-emergence=visible] .delay-3,
.delay-3[data-emergence=visible] {
    transition-delay: 1.5s;
}
[data-emergence=visible] .delay-4,
.delay-4[data-emergence=visible] {
    transition-delay: 2s;
}
[data-emergence=visible] .delay-5,
.delay-5[data-emergence=visible] {
    transition-delay: 2.5s;
}
[data-emergence=visible] .delay-6,
.delay-6[data-emergence=visible] {
    transition-delay: 3s;
}
[data-emergence=visible] .delay-7,
.delay-7[data-emergence=visible] {
    transition-delay: 3.5s;
}
[data-emergence=visible] .delay-8,
.delay-8[data-emergence=visible] {
    transition-delay: 4s;
}
[data-emergence=visible] .delay-9,
.delay-9[data-emergence=visible] {
    transition-delay: 4.5s;
}
[data-emergence=visible] .delay-10,
.delay-10[data-emergence=visible] {
    transition-delay: 5s;
}