@charset "utf-8";

body{
    position:relative;
}

.santa {
    position: fixed;
    z-index:9999;
    opacity: 0;
}

.santa-anime01{
    animation: santa 6s linear forwards;
}

@keyframes santa {

    0% {
        top: 0;
        right: 0;
        opacity: 1;
	}

    80% {
        opacity:1;
    }

    90% {
        opacity:0;
    }

    100% {
        top: 400px;
        right: 100%;
        opacity:0;
    }

}

.santa-anime02{
    animation: santa02 6s linear forwards;
    animation-delay: 10000ms;
}

@keyframes santa02 {

    0% {
        top: 0;
        left: 0;
        opacity: 1;
	}

    80% {
        opacity:1;
    }

    90% {
        opacity:0;
    }

    100% {
        top: 400px;
        left: 100%;
        opacity:0;
    }

}

@media screen and (max-width: 768px) {

.santa-anime01{
    animation: santa 4s linear forwards;
}

@keyframes santa {

    0% {
        top: 0;
        right: 0;
        opacity: 1;
	}

    55% {
        opacity:1;
    }

    60% {
        opacity:0;
    }

    100% {
        top: 500px;
        right: 100%;
        opacity:0;
    }

}

.santa-anime02{
    animation: santa02 4s linear forwards;
    animation-delay: 10000ms;
}

@keyframes santa02 {

    0% {
        top: 0;
        left: 0;
        opacity: 1;
	}

    55% {
        opacity:1;
    }

    60% {
        opacity:0;
    }

    100% {
        top: 400px;
        left: 100%;
        opacity:0;
    }

}


}