@charset "UTF-8";
html,body{
    height: 100%;
}
.y_body{
    width:100%;
    height: 100%;
}
#welcome-page-outer{
    width: 100%;
    height: 100%;
    background: url(./img/background.jpg) no-repeat;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
}
.y_body{
    position: relative;
}
.y_jjs{animation:cat_girl 3s forwards;}
.y_jjs_f{animation:cat_girl 3s 1s forwards;}
-moz-animation:cat_girl 3s; /* Firefox */
-webkit-animation:cat_girl 3s; /* Safari and Chrome */
-o-animation:cat_girl 3s; /* Opera */
@keyframes cat_girl{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-moz-keyframes cat_girl{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-webkit-keyframes cat_girl /* Safari and Chrome */
{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-o-keyframes cat_girl /* Opera */
{
    from{opacity:0.1;}
    to{opacity:1;}
}

.y_girl{animation:girl_cat 3s  forwards;}
.y_girl_f{animation:girl_cat 0.8s 3s  infinite linear;}
-moz-animation:girl_cat 3s; /* Firefox */
-webkit-animation:girl_cat 3s; /* Safari and Chrome */
-o-animation:girl_cat 3s; /* Opera */
@keyframes girl_cat{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-moz-keyframes girl_cat{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-webkit-keyframes girl_cat /* Safari and Chrome */
{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-o-keyframes girl_cat /* Opera */
{
    from{opacity:0.1;}
    to{opacity:1;}
}


.y_title{animation:y_title 2s forwards;}
-moz-animation:y_title 2s; /* Firefox */
-webkit-animation:y_title 2s; /* Safari and Chrome */
-o-animation:y_title 2s; /* Opera */
@keyframes y_title{
    from{top:90%;opacity:0.1;}
    to{top:80%;opacity:1;}
}
@-moz-keyframes y_title{
    from{top:90%;opacity:0.1;}
    to{top:80%;opacity:1;}
}
@-webkit-keyframes y_title /* Safari and Chrome */
{
    from{top:90%;opacity:0.1;}
    to{top:80%;opacity:1;}
}
@-o-keyframes y_title /* Opera */
{
    from{top:90%;opacity:0.1;}
    to{top:80%;opacity:1;}
}

.eyes{animation:eyes 3s 10s infinite linear;}
-moz-animation:eyes 10s; /* Firefox */
-webkit-animation:eyes 10s; /* Safari and Chrome */
-o-animation:eyes 10s; /* Opera */
@keyframes eyes{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-moz-keyframes eyes{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-webkit-keyframes eyes /* Safari and Chrome */
{
    from{opacity:0.1;}
    to{opacity:1;}
}
@-o-keyframes eyes /* Opera */
{
    from{opacity:0.1;}
    to{opacity:1;}
}

.ye_1{
    width:500px;
    animation-name: rightMove1, bottomMove1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
.ye_1_1{
    width:500px;
    animation-name: rightMove1, bottomMove1;
    animation-duration: 4s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

@keyframes rightMove1{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.7, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove1{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 300px;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}





.ye_2{
    width:500px;
    animation-name: rightMove2, bottomMove2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.ye_2_1{
    width:500px;
    animation-name: rightMove2, bottomMove2;
    animation-duration: 3s;
    animation-delay:1.5s;
    animation-iteration-count: infinite;
}

@keyframes rightMove2{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove2{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 300px;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

.ye_3{
    width:500px;
    animation-name: rightMove3, bottomMove3;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.ye_3_1{
    width:500px;
    animation-name: rightMove2, bottomMove2;
    animation-duration: 5s;
    animation-delay:2.5s;
    animation-iteration-count: infinite;
}

@keyframes rightMove3{
    100% {
        width:500px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove3{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 400px;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

.ye_4{
    width:500px;
    animation-name: rightMove4, bottomMove4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.ye_4_1{
    width:500px;
    animation-name: rightMove4, bottomMove4;
    animation-duration: 2s;
    animation-delay:1s;
    animation-iteration-count: infinite;
}

@keyframes rightMove4{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove4{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 300px;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

.ye_5{
    width:500px;
    animation-name: rightMove5, bottomMove5;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.ye_5_1{
    width:500px;
    animation-name: rightMove5, bottomMove5;
    animation-duration: 3s;
    animation-delay:1.5s;
    animation-iteration-count: infinite;
}

@keyframes rightMove5{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove5{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 300px;
    }
    from{opacity:1;width:500px;}to{opacity:1;width:0px;}
}

.ye_6{
    width:600px;
    animation-name: rightMove6, bottomMove6;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.ye_6_1{
    width:600px;
    animation-name: rightMove6, bottomMove6;
    animation-duration: 6s;
    animation-delay:3s;
    animation-iteration-count: infinite;
}

@keyframes rightMove6{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:600px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove6{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 250px;
    }
    from{opacity:1;width:600px;}to{opacity:1;width:0px;}
}

.ye_7{
    width:600px;
    animation-name: rightMove7, bottomMove7;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.ye_7_1{
    width:600px;
    animation-name: rightMove7, bottomMove7;
    animation-duration: 4s;
    animation-delay:2s;
    animation-iteration-count: infinite;
}

@keyframes rightMove7{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:600px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove7{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 250px;
    }
    from{opacity:1;width:600px;}to{opacity:1;width:0px;}
}

.ye_8{
    width:700px;
    animation-name: rightMove8, bottomMove8;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

.ye_8_1{
    width:700px;
    animation-name: rightMove8, bottomMove8;
    animation-duration: 5s;
    animation-delay:2.5s;
    animation-iteration-count: infinite;
}

@keyframes rightMove8{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:700px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove8{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 250px;
    }
    from{opacity:1;width:700px;}to{opacity:1;width:0px;}
}

.ye_9{
    width:800px;
    animation-name: rightMove9, bottomMove9;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.ye_9_1{
    width:800px;
    animation-name: rightMove9, bottomMove9;
    animation-duration: 6s;
    animation-delay:3s;
    animation-iteration-count: infinite;
}

@keyframes rightMove9{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:800px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove9{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 250px;
    }
    from{opacity:1;width:800px;}to{opacity:1;width:0px;}
}


.ye_10{
    width:800px;
    animation-name: rightMove10, bottomMove10;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.ye_10_1{
    width:800px;
    animation-name: rightMove10, bottomMove10;
    animation-duration: 4s;
    animation-delay:2s;
    animation-iteration-count: infinite;
}

@keyframes rightMove10{
    100% {
        width:5px;
        animation-timing-function: cubic-bezier(0.3, 0.5, 0.23, 2);
        left: 50%;
    }
    from{opacity:1;width:800px;}to{opacity:1;width:0px;}
}

@keyframes bottomMove10{
    100% {
        animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 2);
        top: 250px;
    }
    from{opacity:1;width:800px;}to{opacity:1;width:0px;}
}