@charset "utf-8";
.dAnim{position:relative; width:100%; min-height:70px; height:calc(100vw * 0.31); max-height:600px; margin:0 auto; background-image:url("../geodiAnimation/_nameBack.jpg"); background-repeat:no-repeat; background-size:100% 100%; z-index:1; display:block;}
.dAnimBack{position:relative;top:0;left:0;width:100%; min-height:70px; height:calc(100vw * 0.31); max-height:600px; display:block; overflow:hidden;}
.animBack{position:absolute; top:32px; width:100%; display:block; z-index:1; animation:animBackK 3s 1;}
@keyframes animBackK{0%{top:-90%;} 100%{top:38px;}}
.animBut1,.animBut2,.animBut3,.animBut4{display:block; z-index:1; cursor:pointer; text-align:center;}
.animBut1{position:absolute; top:3%; right:75%; width:155px; animation:animBut1K 3s;}
@keyframes animBut1K{0%{top:-13%;right:70%;} 100%{top:3%;right:75%;}}
.animBut2{position:absolute; top:27%; left:27%; width:100px; animation:animBut2K 3s}
@keyframes animBut2K{0%{top:-25%;} 100%{top:30%;}}
.animBut3{position:absolute;top:25%;right:28%;width:130px;transform:rotate(-40deg); animation:animBut3K 3s}
@keyframes animBut3K{0%{top: -35%;} 100%{top:25%;}}
.animBut4{position:absolute; top:15%; left:75%; width:110px; animation: animBut4K 3s}
@keyframes animBut4K{0%{top:-25%;left:70%;} 100%{top:15%; left:75%;}}
.animImg{float:none; width:100%; display:block;} .animImg:hover{transition:filter 1.5s; filter:contrast(200%);} 
.animImgR{float:none; width:100%; display:block;} .animImgR:hover{transition:transform 1s, filter 1.5s; transform:rotate(40deg); filter:contrast(200%);} 
@media only screen and (max-width:1024px) {
.animBack{top:20px;} @keyframes animBackK {0%{top:-90%;} 100%{top:20px;}}
.animBut1{width:80px;}
.animBut2{width:60px;}
.animBut3{width:60px;top:30%;} @keyframes animBut3K{0%{top:-40%;} 100%{top:30%;}}
.animBut4{width:70px;top:20%;} @keyframes animBut4K{0%{top:-30%;left:70%;} 100%{top:20%;left:75%;}}
}
@media only screen and (max-width:800px){.animBack{top:8px;}} @keyframes animBackK{0%{top:-90%;} 100%{top:8px;}}