#ban{background:url(../gf5/ban9.png)}
#rama{width:840px;height:600px;position:relative;top:220px;left:79px;border:solid 1px;border-radius:9px;background:#FFF;pointer-events:none}
@keyframes spring {
0% {transform:scale(1) translateY(0)}
10% {transform:scale(1.2,.6)}
30% {transform:scale(0.8,1.1) translateY(-45px)}
50% {transform:scale(1) translateY(0)}
100% {transform:translateY(0)}
}
#spr {position:absolute;top:60px;left:320px;animation:spring 2s;animation-timing-function:ease}
#h1{position:absolute;width:630px;top:780px;margin-left:19%;z-index:99;font-weight:900;font-size:32px;font-family:'Courier New', Courier New}
li{list-style-type:none}
li:nth-child(1) p{left:410px}
li:nth-child(2) p{left:150px}
li:nth-child(3) p{left:670px}
.pro{position:absolute;top:500px;max-width:175px;border:solid 1px;border-radius:50%;box-shadow:0 12px 20px rgba(0,0,0,.8);cursor:pointer;animation:scale .5s linear;transform-origin:50% 50%;animation-fill-mode:forwards}
.pro:hover{width:175px;height:175px;box-shadow:0 12px 20px rgba(0,0,0,.8);animation:circle .7s linear;transform-origin:50% 50%;animation-fill-mode:forwards;z-index:9}
@keyframes circle{
0%{transform:scale(1) rotate(0deg)}
100%{transform:scale(1.1) rotate(360deg)}
}
@keyframes scale{
0%{transform:scale(1.1)}
100%{transform:scale(1)}
}