@media screen and (max-width: 767px) {
.anime_box{
  position:absolute;
  width:40%;
  top:0;
  right:0;
}
.bal{
    width: 100%;
    height: auto;
    animation: head_anime_bal 4s cubic-bezier(0.35, 0.01, 0.6, 1.08) infinite;
    position: absolute;
}
.anime_box2{
position: absolute;
    width: auto;
    top: 0;
    left: 18%;
    z-index: -1;
}
.sun{
width: 150px;
    margin-top: 30px;
    position: relative;
    animation: head_anime_sun 20s linear infinite;
}
}

@media screen and (min-width: 768px) {
.top_animation{
    width:1000px;
    margin:0 auto;
    position:relative;
}
.anime_box{
  position:absolute;
  width:300px;
  height:600px;
  top:20px;
  right:0;
  z-index:1;
}
.anime_box2{
position: absolute;
width: 375px;
height: 600px;
top: 0;
left: 35%;
}
.bal{
  width:260px;
  height:auto;
  animation:head_anime_bal 4s cubic-bezier(0.35, 0.01, 0.6, 1.08) infinite;
  position:relative;
  margin: -60px 0 0 0;
}
.sun{
  width:282px;
  position:relative;
  animation:head_anime_sun 20s linear infinite;
  margin: -60px 0 0 0;
}

}


@keyframes head_anime_bal {
    0% {
        top:50px;
    }
    50%{
        top:100px;
    }
    100% {
        top:50px;
    }
}

@keyframes head_anime_sun {
    0% {
        transform: rotateZ(0deg);
    }
    50%{
        transform: rotateZ(180deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}