.slide {width:312px;height:250px;overflow:hidden;position:relative;top:4px;left:343px;border:solid 1px;background-color:#fff}
.slide > p {width:100%;height:100%;background-size:cover;position:absolute;top:-1px;animation: slide 11s infinite;animation-delay:1.5s;opacity:0}
.slide > p:nth-child(2) {animation-delay:5s}
.slide > p:nth-child(3) {animation-delay:9s}
@keyframes slide {
1% {opacity:0;transform:scale(.7)}
10% {opacity:1}
20% {opacity:1}
30% {opacity:0}
40% {transform:scale(1.4)}
}
#zoom{animation-name:zoom;animation-duration:2s;animation-fill-mode:both;margin:0 auto;width:1000px;height:925px;overflow:hidden}
@keyframes zoom {
0% {opacity:0;transform:scale(0) rotate(-540deg)}
65% {opacity:.9;transform:scale(.75) rotate(0deg)}
75% {opacity:.9;transform:scale(.75)}
85% {opacity:.2;transform:scale(.3)}
100% {opacity:1;transform:scale(1)}
}
#coin{width:103px;height:103px;overflow:hidden;position:absolute;top:706px;left:688px;margin:0 auto}
#anim{width:103px;height:103px;overflow:hidden;position:relative;margin:0 auto}
#anim ul{position:relative;list-style-type:none;margin:0px;padding:0px;height:0px}
#anim ul li{float:left;padding-top:0px;width:103px;height:103px}
.cf:before, .cf:after {content: " "; /* 1 */display:table; /* 2 */}
.cf:after {clear:both}
.cf {*zoom:1}
.g1{background:url(../gf0/1.png);width:103px;height:103px}
.g2{background:url(../gf0/2.png);width:103px;height:103px}
.g3{background:url(../gf0/3.png);width:103px;height:103px}