@charset "utf-8"; html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, big, del, em, font, img, ins, q, s, small, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tr, th, td {margin:0;padding:0;vertical-align:baseline}:focus{outline:0} ol, ul, li {list-style-type:none} html{font-size:100%} body{font-family:Arial,Helvetica,sans-serif;font-size:1.1em;line-height:1.6em} img{float:left} a{color:#e00;text-decoration:none;outline:none} a:hover{text-decoration:none}
body{width:1000px;height:940px;background:url(../gf0/9.png);-ms-touch-action:none;touch-action:none}
#hrl{position:absolute;top:212px;left:20px;width:960px}
#ban{position:absolute;width:1000px;height:217px}
#area{width:425px;height:45px;background:#dd0;position:absolute;top:18px;left:285px;box-shadow:6px 6px 6px 0 rgba(100,100,100,.8) inset,-6px -6px 6px 0 rgba(255,255,255,.8) inset;border:1px solid #cc0;border-radius:20px;overflow:hidden}
#move{position:absolute;left:430px;width:270px;height:45px;animation:move 5s linear infinite}
@keyframes move{95%, 100%{transform:translate(-700px)}}
#pre{position:absolute;top:850px;width:1000px;height:90px;background:url(../gf0/pre.png)}
#arrow{position:absolute;width:86px;height:90px;left:914px;background:url(../gf0/back.png)}
#wraper {position:absolute;top:160px;width:1000px;height:960px}
.slide {width:312px;height:250px;overflow:hidden;position:relative;top:20px;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)}
}
.pic{position:absolute;top:296px;left:500px;cursor:pointer;width:478px;height:552px;background:url(../gf0/null.png);z-index:9}
#kov{width:960px;height:558px;position:absolute;top:292px;left:20px;background:url(../gf0/kov.png)}
#fix{position:absolute;top:20px;left:20px;width:302px;height:252px;background:url(../gf0/fix.jpg)}
#jssor{position:absolute;top:20px;left:20px;background:url(../gf0/slid0.jpg);width:302px;height:252px;
overflow:hidden;visibility:hidden;font-size:24px;line-height:40px}
#sl1{width:300px;height:250px}
#sl2 {position:absolute;text-align:center;top:110px;left:75px;width:150px;height:40px;font-size:26px;background:#0ff}
#sl3{position:absolute;text-align:center;top:132px;left:110px;width:80px;height:40px}
#sl4{position:absolute;text-align:center;top:112px;left:150px}
#sl5{position:absolute;text-align:center;top:55px;left:75px;width:150px;height:40px;background:#f00;font-weight:900;font-size:26px;color:#fff;line-height:40px}
#skr{width:437px;height:124px;position:absolute;top:717px;left:524px;background:url(../gf0/skrol.png);z-index:1}
#tab{position:absolute;top:599px;left:43px;width:437px;height:230px;border-radius:15px;box-shadow:
9px 9px 9px 0 rgba(100, 100, 100, 0.8) inset,
-9px -9px 9px 0 rgba(255, 255, 255, .8) inset}
#coin{width:103px;height:103px;overflow:hidden;position:absolute;top:723px;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}
#p1 {background:url(../gf0/wsz.jpg)}
#p2 {background:url(../gf0/ws2.png)}
#p3 {background:url(../gf0/ws3.png)}
.g1{background:url(../gf0/slid1.png);width:103px;height:103px}
.g2{background:url(../gf0/slid2.png);width:103px;height:103px}
.g3{background:url(../gf0/slid3.png);width:103px;height:103px}
.carousel {
position:absolute;top:711px;left:262px;width:300px;height:190px;margin:0;perspective:700px;transform:translate(-50%, -50%)}
.carousel-content {position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform:translateZ(-182px) rotateY(0);animation:carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;animation-delay:1s}
.carousel-item {position:absolute;top:0;left:0;width:300px;height:190px;border:solid 3px #0A0;border-radius:16px;background-size:cover;background-position:center;perspective:1000px;overflow:hidden}
.carousel-item:nth-child(1) {background-image:url(../gf0/cer1.png);transform:rotateY(0deg) translateZ(182px)}
.carousel-item:nth-child(2) {background-image:url(../gf0/cer2.png);transform:rotateY(120deg) translateZ(182px)}
.carousel-item:nth-child(3) {transform:rotateY(240deg) translateZ(182px)}
.carousel-link {display:block;width:100%;height:100%;background-image:url(../gf0/cer3.png);background-size:cover;background-position:center;border-radius:16px}
.flip-inner {position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform 0.6s ease-in-out}
.carousel-item.show-back .flip-inner {transform:rotateY(180deg)}
.flip-front, .flip-back {position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.flip-front {background-image:inherit}
.flip-back {transform:rotateY(180deg);background-color:#ccc}
@keyframes carousel {
0%, 40% {transform:translateZ(-182px) rotateY(0deg)}
50%, 65% {transform: translateZ(-182px) rotateY(-120deg)}
75%, 90% {transform:translateZ(-182px) rotateY(-240deg)}
100% {transform:translateZ(-182px) rotateY(-360deg)}
}