@font-face {font-family: digital;src: url(../fonts/digital.ttf) format('truetype')}
body {font-family:digital}
#move {background: url(../gf7/tyt20.png)}
#clc {position:absolute;top:154px;left:174px;width:656px;height:656px;background:url(../gf7/clock.png)}
#klk {position:absolute;top:155px;left:173px;width:656px;height:656px;background:url(../gf7/klk.png);opacity:0;z-index:1;animation-name:fade;animation-duration:.5s}
@keyframes fade {
0%, 50% {opacity:1}
51%, 100% {opacity:0}}
#clk {position:absolute;left:271px;top:80px;z-index:9}
#god {position:absolute;top:555px;left:48px;width:300px;height:63px;background:url(../gf7/arrow_h.png);z-index:3}
#min {position:absolute;top:607px;left:305px;width:208px;height:222px;background:url(../gf7/arrow_m.png);z-index:3}
#sec {position:absolute;top:535px;right:74px;width:269px;height:95px;background:url(../gf7/arrow_s.png);z-index:3}
.flip-clock-wrapper * {box-sizing:border-box;backface-visibility:hidden}
.flip-clock-wrapper ul {position:relative;float:left;margin:5px;width:60px;height:90px;font-family:Arial;font-size:80px;font-weight:bold;line-height:87px;border-radius:6px;background:#000}
.flip-clock-wrapper ul li {z-index:1;position:absolute;width:100%;height:100%;line-height:87px;text-decoration: none !important}
.flip-clock-wrapper ul li:first-child {z-index:2;}
.flip-clock-wrapper ul li a {display:block;height:100%;perspective:200px;margin:0 !important;overflow:visible !importantcursor:default !important}
.flip-clock-wrapper ul li a div {z-index:1;position:absolute;width:100%;height:50%;font-size:80px;overflow:hidden;outline:1px solid transparent}
.flip-clock-wrapper ul li a div .shadow {position:absolute;width:100%;height:100%;z-index:2}
.flip-clock-wrapper ul li a div.up {transform-origin:50% 100%;top:0}
.flip-clock-wrapper ul li a div.up:after {content:"";position:absolute;top:44px;z-index:5;width:100%;height:3px;background-color:rgba(0, 0, 0, .4)}
.flip-clock-wrapper ul li a div.down {transform-origin:50% 0;bottom:0;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.flip-clock-wrapper ul li a div div.inn {position:absolute;z-index:1;width:100%;height:200%;color:#fff;text-shadow:0 1px 2px #000;text-align:center;background-color:#a0a;border-radius:6px;font-size:72px}
.flip-clock-wrapper ul li a div.up div.inn {top:0}
.flip-clock-wrapper ul li a div.down div.inn {bottom:0}
.flip-clock-wrapper ul.play li.flip-clock-before {z-index:3}
.flip-clock-wrapper .flip {box-shadow:0 2px 5px rgba(0, 0, 0, .7)}
.flip-clock-wrapper ul.play li.flip-clock-active {animation:asd .5s .5s linear both;z-index:5}
.flip-clock-divider {float:left;display:inline-block;position:relative;width:20px;height:100px}
.flip-clock-divider:first-child {width:0}
.flip-clock-dot {display:block;background:#a0a;width:10px;height:10px;position:absolute;border-radius:50%;box-shadow:0 0 5px rgba(0, 0, 0, .5);left:5px}
.flip-clock-divider .flip-clock-label {position:absolute;top:-1.5em;right:-86px;color:black;text-shadow:none}
.flip-clock-divider.minutes .flip-clock-label {right:-88px}
.flip-clock-divider.seconds .flip-clock-label {right:-91px}
.flip-clock-dot.top {top:30px}
.flip-clock-dot.bottom {bottom:30px}
@keyframes asd {
0% {z-index:2}
20% {z-index:4}
100% {z-index:4}}
.flip-clock-wrapper ul.play li.flip-clock-active .down {z-index:2;animation:turn .5s .5s linear both}
@keyframes turn {
0% {transform:rotateX(90deg)}
100% {transform:rotateX(0deg)}}
.flip-clock-wrapper ul.play li.flip-clock-before .up {z-index:2;animation:turn2 .5s linear both}
@keyframes turn2 {
0% {transform:rotateX(0deg)}
100% {transform:rotateX(-90deg)}}
.flip-clock-wrapper ul li.flip-clock-active {z-index:3}
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow,
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {background:linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, black 100%);animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {animation:hide .5s .3s linear both}
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow,
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {background:linear-gradient(to bottom, black 0%, rgba(0, 0, 0, .1) 100%);animation:show .5s linear both}
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {animation:hide .5s .2s linear both}
@keyframes show {
0% {opacity:0}
100% {opacity:1}}
@keyframes hide {
0% {opacity 1}
100% {opacity:0}}