@charset "UTF-8";
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
        height: 0;
    }
    100% {
        opacity: 1;
        height: 100%;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

/* kv-title anim */
@keyframes anim01{
    0% {
        left: 0;
        height: 100%;
        background-color:#fff;
        width: 0;
    }
    30%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    44%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    45%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    47.5%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    50%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    52.5%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    55%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    100% {
        height: 100%;
        width: 0%;
        right: 0;
        background-color:#fff;
    }
}
@keyframes anim02{
    0% {
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    61%{
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.anim01 {
    animation-name: anim01;
}
.anim02 {
    animation-name: anim02;
}

/* kv-lead anim */
@keyframes anim03{
    0% {
        left: 0;
        height: 100%;
        background-color:#fff;
        width: 0;
    }
    30%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    44%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    45%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    47.5%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    50%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    52.5%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    55%{
        right: 0;
        height: 100%;
        width: 100%;
        background-color:#fff;
    }
    100% {
        height: 100%;
        width: 0%;
        right: 0;
        background-color:#fff;
    }
}
@keyframes anim04{
    0% {
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    61%{
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.anim03 {
    animation-name: anim03;
}
.anim04 {
    animation-name: anim04;
}

/* kv-sub anim */
@keyframes anim05{
    0% {
        top: calc(60%);
    }
    100% {
        top: calc(50%);
    }
}
.anim05 {
    animation-name: anim05;
}