@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;background:url(../gf3/ban7.png)}
#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)}
@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}
#ani{position:relative;animation-duration:2.5s;animation-name:fade}
@keyframes fade {
0% {opacity:0}
65% {opacity:0}
100% {opacity:1}}
#flap{position:absolute;top:190px}
#h1{position:absolute;width:630px;top:820px;margin-left:19%;z-index:5;font-weight:900;font-size:32px;font-family:'Courier New',Courier New}
h2{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100px;margin:auto;display:block;font-family:'atma'}
h2 p{position:relative;top:45px;left:330px;display:inline-block;animation:bounce .5s ease infinite alternate;font-size:82px;color:#f80;text-shadow:0 1px 0 #aaa, 0 2px 0 #aaa, 0 3px 0 #aaa, 0 4px 0 #aaa,0 5px 0 #aaa, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,0 9px 0 transparent, 0 10px 10px rgba(0,0,0,.4)}
h2 p:nth-child(2){animation-delay:.1s;color:#f33}
h2 p:nth-child(3){animation-delay:.2s;color:#0f0}
h2 p:nth-child(4){animation-delay:.3s;color:#0af}
h2 p:nth-child(5){animation-delay:.4s;color:#f0f}
h2 p:nth-child(6){animation-delay:.5s;color:#fff}
@keyframes bounce{
100% {top:0px;text-shadow:0 1px 0 #aaa,0 2px 0 #aaa,0 3px 0 #aaa,0 4px 0 #aaa,0 5px 0 #aaa,0 6px 0 #aaa,0 7px 0 #aaa,0 8px 0 #aaa,0 9px 0 #aaa,0 50px 25px rgba(0,0,0,.3)}}
.slider img {width:100%;height:auto}
.slider_clock {width:600px;height:600px;position:relative;top:222px;left:180px;user-select:none;overflow-x:hidden}
.slider_clock > * {transition: ease all 1s}
.slider_clock .active {position:absolute;left:50%;top:50%;margin-left:-95px;margin-top:-127px;width:224px;height:224px;transform:rotate(0deg);opacity:1;background:transparent;overflow:hidden}
.slider_clock .next1,
.slider_clock .next2,
.slider_clock .next3,
.slider_clock .next4,
.slider_clock .next5,
.slider_clock .next6,
.slider_clock .prev1,
.slider_clock .prev2,
.slider_clock .prev3,
.slider_clock .prev4,
.slider_clock .prev5,
.slider_clock .prev6,
.slider_clock .hidden {position:absolute;left:49.6%;top:32.1%;width:135px;height:135px;margin-top:205px;margin-left:-50px;transform-origin:69px -113px;transform:rotate(0deg);opacity:1;border-radius:50%;overflow:hidden}
.slider_clock .next2 {transform: rotate(-51.4deg)}
.slider_clock .next3 {transform: rotate(-102.8deg)}
.slider_clock .next4 {transform: rotate(-154.2deg)}
.slider_clock .next5 {transform: rotate(-205.6deg)}
.slider_clock .next6 {transform: rotate(-257deg);opacity:0}
.slider_clock .prev1 {transform: rotate(51.4deg)}
.slider_clock .prev2 {transform: rotate(102.8deg)}
.slider_clock .prev3 {transform: rotate(154.2deg)}
.slider_clock .prev4 {transform: rotate(205.6deg)}
.slider_clock .prev5 {transform: rotate(257deg)}
.slider_clock .prev6 {transform: rotate(308.4deg);opacity:0}
.slider_clock .hidden {transform:rotate(257deg);opacity:0}