@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)}
body {font-family: Atma,sans-serif}
#move{background:url(../gf3/tyt13.png)}
#pic p{width:960px;height:638px;position:absolute;left:19px;top:108px;background:url(../gf3/puzzle.png);z-index:5;z-index:50;cursor:pointer;}
.anim{animation-duration:.5s;width:960px;height:610px;position:absolute;top:0px;left:0px;z-index:5;animation-name:zoom}
@keyframes zoom {
0% {transform:scale(0)}
100% {transform:scale(1)}
}
s{position:absolute;top:146px;left:653px;width:115px;height:119px;border-radius:75%;background:transparent;animation:breathe 2.5s linear infinite}
@keyframes breathe{
0% {
box-shadow:0 0 0 5px rgba(235,220,0,.12), 0 0 0 10px rgba(235,220,0,.12), 0 0 0 15px rgba(235,220,0,.12), 0 0 0 20px rgba(235,220,0,.12), 0 0 0 25px rgba(235,220,0,.12)
}
50% {
box-shadow:0 0 0 20px rgba(235,220,0,.12), 0 0 0 40px rgba(235,220,0,.12), 0 0 0 60px rgba(235,220,0,.12), 0 0 0 80px rgba(235,220,0,.12), 0 0 0 100px rgba(235,220,0,.12)
}
100% {
box-shadow:0 0 0 5px rgba(235,220,0,.12), 0 0 0 10px rgba(235,220,0,.12), 0 0 0 15px rgba(235,220,0,.12), 0 0 0 20px rgba(235,220,0,.12), 0 0 0 25px rgba(235,220,0,.12)
}
}
#board {width:960px;height:638px;position:absolute;top:106px;left:18px;touch-action:none}
.tile {width:320px;height:213px;background-image:url("../gf3/puzle.jpg");background-size:960px 639px;position:absolute;border:solid 1px;user-select:none;cursor:pointer}
#message {position:absolute;top:384px;left:342px;font-size:72px;font-weight:900;color:#F00;background:#fff;line-height:1.3;z-index:20}
#replay {position:absolute;top:400px;left:363px;background:#ff0;font-size:25px;border:solid 9px #f00;border-radius:30px;padding:10px 20px;display:none;cursor:pointer}