@charset "utf-8";
body, html { background: #fafafa }
#wrap { min-width: 250px; position: absolute }
.content { position: relative; margin: 130px auto }
.content .top { position: relative; margin: 30px auto 20px; width: 570px }
.top_phone { position: relative; margin: 30px auto 20px; width: 554px; height: 105px; background: url(../images/sign_phone_10708ca.png); display: none }
.top .sign { color: #333; font-size: 20px; font-style: italic; font-weight: 700; line-height: 30px; width: 340px }
span.fontRed { color: #cf0f32 }
.index-btn { background: url(../images/index_btn_1e91c4a.png); width: 167px; height: 51px; display: block; position: absolute; right: 5px; top: 5px }
.index-btn:hover { background: url(../images/index_btn-h_66aae16.png) }
.btn-phone { background: url(../images/btn_phone_34f0bf1.png) center center no-repeat; display: none; position: relative; margin: 50px auto 0; min-width: 280px; width: 720px }
.game { width: 554px; height: 608px; background: url(../images/game_a48f443.png); margin: auto; position: relative }
.ready { width: 120px; height: 22px; background: url(../images/ready_b3fce9f.png); position: absolute; top: 368px; left: 213px }
.yellow-wrap { position: absolute; top: 406px; left: 273px; z-index: 100; width: 29px; height: 29px }
.openClose { width: 29px; height: 27px; background: url(../images/yellow_3c03cbd.png); animation: openClose 1s infinite steps(1, start); -moz-animation: openClose 1s infinite steps(1, start); -webkit-animation: openClose 1s infinite steps(1, start) }
@keyframes openClose {
0% {
background-position:0 0
}
25% {
background-position:-29px 0
}
50% {
background-position:0 0
}
75% {
background-position:-29px 0
}
100% {
background-position:0 0
}
}
@-webkit-keyframes openClose {
0% {
background-position:0 0
}
25% {
background-position:-29px 0
}
50% {
background-position:0 0
}
75% {
background-position:-29px 0
}
100% {
background-position:0 0
}
}
@-moz-keyframes openClose {
0% {
background-position:0 0
}
25% {
background-position:-29px 0
}
50% {
background-position:0 0
}
75% {
background-position:-29px 0
}
100% {
background-position:0 0
}
}
.yellow { width: 29px; height: 27px }
.yellowRotate { animation: yellowRotate 30s linear infinite both; -webkit-animation: yellowRotate 30s linear infinite both; -moz-animation: yellowRotate 30s linear infinite both }
@-webkit-keyframes yellowRotate {
0% {
-webkit-transform:rotate(0deg)
}
7.9% {
-webkit-transform:rotate(0deg)
}
8% {
-webkit-transform:rotate(270deg)
}
12.9% {
-webkit-transform:rotate(270deg)
}
13% {
-webkit-transform:rotate(180deg)
}
19.9% {
-webkit-transform:rotate(180deg)
}
20% {
-webkit-transform:rotate(270deg)
}
23.9% {
-webkit-transform:rotate(270deg)
}
24% {
-webkit-transform:rotate(180deg)
}
44.9% {
-webkit-transform:rotate(180deg)
}
45% {
-webkit-transform:rotate(90deg)
}
49.9% {
-webkit-transform:rotate(90deg)
}
50% {
-webkit-transform:rotate(0deg)
}
55.9% {
-webkit-transform:rotate(0deg)
}
56% {
-webkit-transform:rotate(90deg)
}
61.9% {
-webkit-transform:rotate(90deg)
}
62% {
-webkit-transform:rotate(180deg)
}
65.9% {
-webkit-transform:rotate(180deg)
}
66% {
-webkit-transform:rotate(90deg)
}
69.9% {
-webkit-transform:rotate(90deg)
}
70% {
-webkit-transform:rotate(0deg)
}
75.9% {
-webkit-transform:rotate(0deg)
}
76% {
-webkit-transform:rotate(90deg)
}
91.9% {
-webkit-transform:rotate(90deg)
}
92% {
-webkit-transform:rotate(180deg)
}
99.9% {
-webkit-transform:rotate(180deg)
}
}
@-moz-keyframes yellowRotate {
0% {
-moz-transform:rotate(0deg)
}
7.9% {
-moz-transform:rotate(0deg)
}
8% {
-moz-transform:rotate(270deg)
}
12.9% {
-moz-transform:rotate(270deg)
}
13% {
-moz-transform:rotate(180deg)
}
19.9% {
-moz-transform:rotate(180deg)
}
20% {
-moz-transform:rotate(270deg)
}
23.9% {
-moz-transform:rotate(270deg)
}
24% {
-moz-transform:rotate(180deg)
}
44.9% {
-moz-transform:rotate(180deg)
}
45% {
-moz-transform:rotate(90deg)
}
49.9% {
-moz-transform:rotate(90deg)
}
50% {
-moz-transform:rotate(0deg)
}
55.9% {
-moz-transform:rotate(0deg)
}
56% {
-moz-transform:rotate(90deg)
}
61.9% {
-moz-transform:rotate(90deg)
}
62% {
-moz-transform:rotate(180deg)
}
65.9% {
-moz-transform:rotate(180deg)
}
66% {
-moz-transform:rotate(90deg)
}
69.9% {
-moz-transform:rotate(90deg)
}
70% {
-moz-transform:rotate(0deg)
}
75.9% {
-moz-transform:rotate(0deg)
}
76% {
-moz-transform:rotate(90deg)
}
91.9% {
-moz-transform:rotate(90deg)
}
92% {
-moz-transform:rotate(180deg)
}
99.9% {
-moz-transform:rotate(180deg)
}
}
@keyframes yellowRotate {
0% {
transform:rotate(0deg)
}
7.9% {
transform:rotate(0deg)
}
8% {
transform:rotate(270deg)
}
12.9% {
transform:rotate(270deg)
}
13% {
transform:rotate(180deg)
}
19.9% {
transform:rotate(180deg)
}
20% {
transform:rotate(270deg)
}
23.9% {
transform:rotate(270deg)
}
24% {
transform:rotate(180deg)
}
44.9% {
transform:rotate(180deg)
}
45% {
transform:rotate(90deg)
}
49.9% {
transform:rotate(90deg)
}
50% {
transform:rotate(0deg)
}
55.9% {
transform:rotate(0deg)
}
56% {
transform:rotate(90deg)
}
61.9% {
transform:rotate(90deg)
}
62% {
transform:rotate(180deg)
}
65.9% {
transform:rotate(180deg)
}
66% {
transform:rotate(90deg)
}
69.9% {
transform:rotate(90deg)
}
70% {
transform:rotate(0deg)
}
75.9% {
transform:rotate(0deg)
}
76% {
transform:rotate(90deg)
}
91.9% {
transform:rotate(90deg)
}
92% {
transform:rotate(180deg)
}
99.9% {
transform:rotate(180deg)
}
}
.yellowMoving { animation: yellowMoving 30s linear infinite both; -webkit-animation: yellowMoving 30s linear infinite both; -moz-animation: yellowMoving 30s linear infinite both }
@keyframes yellowMoving {
0% {
transform:translate(0, 0)
}
8% {
transform:translate(-85px, 0)
}
13% {
transform:translate(-85px, 62px)
}
20% {
transform:translate(-38px, 62px)
}
24% {
transform:translate(-38px, 103px)
}
45% {
transform:translate(235px, 103px)
}
50% {
transform:translate(235px, 63px)
}
56% {
transform:translate(150px, 63px)
}
62% {
transform:translate(150px, 0)
}
66% {
transform:translate(235px, 0)
}
70% {
transform:translate(235px, -40px)
}
76% {
transform:translate(150px, -40px)
}
92% {
transform:translate(150px, -245px)
}
100% {
transform:translate(245px, -245px)
}
}
@-webkit-keyframes yellowMoving {
0% {
-webkit-transform:translate(0, 0)
}
8% {
-webkit-transform:translate(-85px, 0)
}
13% {
-webkit-transform:translate(-85px, 62px)
}
20% {
-webkit-transform:translate(-38px, 62px)
}
24% {
-webkit-transform:translate(-38px, 103px)
}
45% {
-webkit-transform:translate(235px, 103px)
}
50% {
-webkit-transform:translate(235px, 63px)
}
56% {
-webkit-transform:translate(150px, 63px)
}
62% {
-webkit-transform:translate(150px, 0)
}
66% {
-webkit-transform:translate(235px, 0)
}
70% {
-webkit-transform:translate(235px, -40px)
}
76% {
-webkit-transform:translate(150px, -40px)
}
92% {
-webkit-transform:translate(150px, -245px)
}
100% {
-webkit-transform:translate(245px, -245px)
}
}
@-moz-keyframes yellowMoving {
0% {
-moz-transform:translate(0, 0)
}
8% {
-moz-transform:translate(-85px, 0)
}
13% {
-moz-transform:translate(-85px, 62px)
}
20% {
-moz-transform:translate(-38px, 62px)
}
24% {
-moz-transform:translate(-38px, 103px)
}
45% {
-moz-transform:translate(235px, 103px)
}
50% {
-moz-transform:translate(235px, 63px)
}
56% {
-moz-transform:translate(150px, 63px)
}
62% {
-moz-transform:translate(150px, 0)
}
66% {
-moz-transform:translate(235px, 0)
}
70% {
-moz-transform:translate(235px, -40px)
}
76% {
-moz-transform:translate(150px, -40px)
}
92% {
-moz-transform:translate(150px, -245px)
}
100% {
-moz-transform:translate(245px, -245px)
}
}
.red-wrap { width: 26px; height: 19px; position: absolute; top: 330px; left: 355px; z-index: 99 }
.red { width: 26px; height: 19px; background: url(../images/red_732547f.png) }
.redMoving { animation: redMoving 30s linear infinite both; -webkit-animation: redMoving 30s linear infinite both; -moz-animation: redMoving 30s linear infinite both }
@keyframes redMoving {
0% {
transform:translate(0, 0)
}
6% {
transform:translate(-40px, 0)
}
18% {
transform:translate(-40px, -170px)
}
28% {
transform:translate(-232px, -170px)
}
35% {
transform:translate(-232px, -227px)
}
44% {
transform:translate(-123px, -227px)
}
54% {
transform:translate(-123px, -313px)
}
74% {
transform:translate(155px, -313px)
}
94% {
transform:translate(155px, -170px)
}
100% {
transform:translate(90px, -170px)
}
}
@-webkit-keyframes redMoving {
0% {
-webkit-transform:translate(0, 0)
}
6% {
-webkit-transform:translate(-40px, 0)
}
18% {
-webkit-transform:translate(-40px, -170px)
}
28% {
-webkit-transform:translate(-232px, -170px)
}
35% {
-webkit-transform:translate(-232px, -227px)
}
44% {
-webkit-transform:translate(-123px, -227px)
}
54% {
-webkit-transform:translate(-123px, -313px)
}
74% {
-webkit-transform:translate(155px, -313px)
}
94% {
-webkit-transform:translate(155px, -170px)
}
100% {
-webkit-transform:translate(90px, -170px)
}
}
@-moz-keyframes redMoving {
0% {
-moz-transform:translate(0, 0)
}
6% {
-moz-transform:translate(-40px, 0)
}
18% {
-moz-transform:translate(-40px, -170px)
}
28% {
-moz-transform:translate(-232px, -170px)
}
35% {
-moz-transform:translate(-232px, -227px)
}
44% {
-moz-transform:translate(-123px, -227px)
}
54% {
-moz-transform:translate(-123px, -313px)
}
74% {
-moz-transform:translate(155px, -313px)
}
94% {
-moz-transform:translate(155px, -170px)
}
100% {
-moz-transform:translate(90px, -170px)
}
}
.blue { width: 27px; height: 19px; background: url(../images/blue_7f59112.png); position: absolute; top: 230px; left: 263px; animation: blueMoving 15s linear infinite both; -webkit-animation: blueMoving 15s linear infinite both; -moz-animation: blueMoving 15s linear infinite both }
@keyframes blueMoving {
0% {
transform:translate(0, 0)
}
5% {
transform:translate(0, -22px)
}
15% {
transform:translate(0, 25px)
}
25% {
transform:translate(0, -22px)
}
40% {
transform:translate(0, 30px)
}
60% {
transform:translate(0, -25px)
}
70% {
transform:translate(0, 13px)
}
82% {
transform:translate(0, -15px)
}
92% {
transform:translate(0, 13px)
}
}
@-webkit-keyframes blueMoving {
0% {
-webkit-transform:translate(0, 0)
}
5% {
-webkit-transform:translate(0, -22px)
}
15% {
-webkit-transform:translate(0, 25px)
}
25% {
-webkit-transform:translate(0, -22px)
}
40% {
-webkit-transform:translate(0, 30px)
}
60% {
-webkit-transform:translate(0, -25px)
}
70% {
-webkit-transform:translate(0, 13px)
}
82% {
-webkit-transform:translate(0, -15px)
}
92% {
-webkit-transform:translate(0, 13px)
}
}
@-moz-keyframes blueMoving {
0% {
-moz-transform:translate(0, 0)
}
5% {
-moz-transform:translate(0, -22px)
}
15% {
-moz-transform:translate(0, 25px)
}
25% {
-moz-transform:translate(0, -22px)
}
40% {
-moz-transform:translate(0, 30px)
}
60% {
-moz-transform:translate(0, -25px)
}
70% {
-moz-transform:translate(0, 13px)
}
82% {
-moz-transform:translate(0, -15px)
}
92% {
-moz-transform:translate(0, 13px)
}
}
.purple { width: 26px; height: 19px; background: url(../images/purple_c9e407f.png); position: absolute; top: 290px; left: 263px; animation: purpleMoving 15s linear infinite both; -webkit-animation: purpleMoving 15s linear infinite both; -moz-animation: purpleMoving 15s linear infinite both }
@keyframes purpleMoving {
0% {
transform:translate(0, 0)
}
5% {
transform:translate(0, -10px)
}
15% {
transform:translate(0, 10px)
}
40% {
transform:translate(0, -18px)
}
48% {
transform:translate(0, 0)
}
70% {
transform:translate(0, -32px)
}
82% {
transform:translate(0, -10px)
}
92% {
transform:translate(0, -32px)
}
}
@-webkit-keyframes purpleMoving {
0% {
-webkit-transform:translate(0, 0)
}
5% {
-webkit-transform:translate(0, -10px)
}
15% {
-webkit-transform:translate(0, 10px)
}
40% {
-webkit-transform:translate(0, -18px)
}
48% {
-webkit-transform:translate(0, 0)
}
70% {
-webkit-transform:translate(0, -32px)
}
82% {
-webkit-transform:translate(0, -10px)
}
92% {
-webkit-transform:translate(0, -32px)
}
}
@-moz-keyframes purpleMoving {
0% {
-moz-transform:translate(0, 0)
}
5% {
-moz-transform:translate(0, -10px)
}
15% {
-moz-transform:translate(0, 10px)
}
40% {
-moz-transform:translate(0, -18px)
}
48% {
-moz-transform:translate(0, 0)
}
70% {
-moz-transform:translate(0, -32px)
}
82% {
-moz-transform:translate(0, -10px)
}
92% {
-moz-transform:translate(0, -32px)
}
}
.oranger { width: 26px; height: 19px; background: url(../images/oranger_f726694.png); position: absolute; top: 305px; left: 263px; z-index: 100; animation: orangerMoving 15s linear infinite both; -webkit-animation: orangerMoving 15s linear infinite both; -moz-animation: orangerMoving 15s linear infinite both }
@keyframes orangerMoving {
0% {
transform:translate(0, 0)
}
5% {
transform:translate(0, -10px)
}
15% {
transform:translate(0, 10px)
}
40% {
transform:translate(0, -18px)
}
48% {
transform:translate(0, 8px)
}
70% {
transform:translate(0, -24px)
}
82% {
transform:translate(0, -10px)
}
92% {
transform:translate(0, -24px)
}
}
@-webkit-keyframes orangerMoving {
0% {
-webkit-transform:translate(0, 0)
}
5% {
-webkit-transform:translate(0, -10px)
}
15% {
-webkit-transform:translate(0, 10px)
}
40% {
-webkit-transform:translate(0, -18px)
}
48% {
-webkit-transform:translate(0, 8px)
}
70% {
-webkit-transform:translate(0, -24px)
}
82% {
-webkit-transform:translate(0, -10px)
}
92% {
-webkit-transform:translate(0, -24px)
}
}
@-moz-keyframes orangerMoving {
0% {
-moz-transform:translate(0, 0)
}
5% {
-moz-transform:translate(0, -10px)
}
15% {
-moz-transform:translate(0, 10px)
}
40% {
-moz-transform:translate(0, -18px)
}
48% {
-moz-transform:translate(0, 8px)
}
70% {
-moz-transform:translate(0, -24px)
}
82% {
-moz-transform:translate(0, -10px)
}
92% {
-moz-transform:translate(0, -24px)
}
}
.eye1, .eye2, .eye3, .eye4, .eye5, .eye6, .eye7, .eye8 { width: 5px; height: 5px; position: absolute }
.eye1, .eye2, .eye5, .eye6, .eye7, .eye8 { background: url(../images/eyes_7786b10.png) }
.eye3, .eye4 { background: url(../images/eyes2_67d931c.png) }
.eye1 { top: 7px; left: 3px }
.eye2 { top: 7px; left: 15px }
.eye3 { top: 3px; left: 5px }
.eye4 { top: 3px; left: 18px }
.eye5 { top: 3px; left: 5px }
.eye6 { top: 3px; left: 15px }
.eye7 { top: 3px; left: 5px }
.eye8 { top: 3px; left: 15px }
.game span { background: #fafafa; position: absolute; display: block; z-index: 99 }
.span1 { height: 25px; top: 405px; left: 275px; animation: spanfirstMoving 30s linear infinite both; -webkit-animation: spanfirstMoving 30s linear infinite both; -moz-animation: spanfirstMoving 30s linear infinite both }
.span2 { width: 20px; top: 435px; left: 190px; animation: spansecondMoving 30s linear infinite both; -webkit-animation: spansecondMoving 30s linear infinite both; -moz-animation: spansecondMoving 30s linear infinite both }
.span3 { height: 20px; top: 470px; left: 210px; animation: spanthirdMoving 30s linear infinite both; -webkit-animation: spanthirdMoving 30s linear infinite both; -moz-animation: spanthirdMoving 30s linear infinite both }
.span4 { width: 20px; top: 490px; left: 240px; animation: spanforthMoving 30s linear infinite both; -webkit-animation: spanforthMoving 30s linear infinite both; -moz-animation: spanforthMoving 30s linear infinite both }
.span5 { height: 20px; top: 510px; left: 260px; animation: spanfifthMoving 30s linear infinite both; -webkit-animation: spanfifthMoving 30s linear infinite both; -moz-animation: spanfifthMoving 30s linear infinite both }
.span6 { width: 20px; top: 530px; left: 510px; animation: spansixthMoving 30s linear infinite both; -webkit-animation: spansixthMoving 30s linear infinite both; -moz-animation: spansixthMoving 30s linear infinite both }
.span7 { height: 20px; top: 470px; left: 510px; animation: spanseventhMoving 30s linear infinite both; -webkit-animation: spanseventhMoving 30s linear infinite both; -moz-animation: spanseventhMoving 30s linear infinite both }
.span8 { width: 20px; top: 465px; left: 425px; animation: spaneigthMoving 30s linear infinite both; -webkit-animation: spaneigthMoving 30s linear infinite both; -moz-animation: spaneigthMoving 30s linear infinite both }
.span9 { height: 20px; top: 405px; left: 450px; animation: spanninthMoving 30s linear infinite both; -webkit-animation: spanninthMoving 30s linear infinite both; -moz-animation: spanninthMoving 30s linear infinite both }
.span10 { width: 20px; top: 410px; left: 510px; animation: spantenthMoving 30s linear infinite both; -webkit-animation: spantenthMoving 30s linear infinite both; -moz-animation: spantenthMoving 30s linear infinite both }
.span11 { height: 20px; top: 370px; left: 510px; animation: spanelevenMoving 30s linear infinite both; -webkit-animation: spanelevenMoving 30s linear infinite both; -moz-animation: spanelevenMoving 30s linear infinite both }
.span12 { width: 20px; top: 360px; left: 420px; animation: spantwelveMoving 30s linear infinite both; -webkit-animation: spantwelveMoving 30s linear infinite both; -moz-animation: spantwelveMoving 30s linear infinite both }
.span13 { height: 20px; top: 160px; left: 440px; animation: spanthirteenMoving 30s linear infinite both; -webkit-animation: spanthirteenMoving 30s linear infinite both; -moz-animation: spanthirteenMoving 30s linear infinite both }
@keyframes spanfirstMoving {
0% {
left:275px;
width:0;
height:25px;
top:408px
}
8% {
left:200px;
width:75px;
height:25px;
top:408px
}
100% {
left:200px;
width:75px;
height:25px;
top:408px
}
}
@keyframes spansecondMoving {
0% {
width:20px;
top:435px;
left:190px;
height:0
}
8% {
width:20px;
top:435px;
left:190px;
height:0
}
13% {
width:20px;
top:435px;
left:190px;
height:50px
}
100% {
width:20px;
top:435px;
left:190px;
height:50px
}
}
@keyframes spanthirdMoving {
0% {
height:20px;
top:470px;
left:210px;
width:0
}
13% {
height:20px;
top:470px;
left:210px;
width:0
}
20% {
height:20px;
top:470px;
left:210px;
width:50px
}
100% {
height:20px;
top:470px;
left:210px;
width:50px
}
}
@keyframes spanforthMoving {
0% {
width:20px;
top:490px;
left:240px;
height:0
}
20% {
width:20px;
top:490px;
left:240px;
height:0
}
24% {
width:20px;
top:490px;
left:240px;
height:40px
}
100% {
width:20px;
top:490px;
left:240px;
height:40px
}
}
@keyframes spanfifthMoving {
0% {
height:20px;
top:510px;
left:260px;
width:0
}
24% {
height:20px;
top:510px;
left:260px;
width:0
}
45% {
height:20px;
top:510px;
left:260px;
width:250px
}
100% {
height:20px;
top:510px;
left:260px;
width:250px
}
}
@keyframes spansixthMoving {
0% {
width:20px;
top:530px;
left:510px;
height:0
}
45% {
width:20px;
top:530px;
left:510px;
height:0
}
50% {
width:20px;
top:470px;
left:510px;
height:65px
}
100% {
width:20px;
top:470px;
left:510px;
height:65px
}
}
@keyframes spanseventhMoving {
0% {
height:20px;
top:470px;
left:510px;
width:0
}
50% {
height:20px;
top:470px;
left:510px;
width:0
}
56% {
height:20px;
top:470px;
left:430px;
width:80px
}
100% {
height:20px;
top:470px;
left:430px;
width:80px
}
}
@keyframes spaneigthMoving {
0% {
width:20px;
top:465px;
left:425px;
height:0
}
56% {
width:20px;
top:465px;
left:425px;
height:0
}
62% {
width:20px;
top:410px;
left:425px;
height:55px
}
100% {
width:20px;
top:410px;
left:425px;
height:55px
}
}
@keyframes spanninthMoving {
0% {
height:20px;
top:408px;
left:450px;
width:0
}
62% {
height:20px;
top:408px;
left:450px;
width:0
}
66% {
height:20px;
top:408px;
left:450px;
width:80px
}
100% {
height:20px;
top:408px;
left:450px;
width:80px
}
}
@keyframes spantenthMoving {
0% {
width:20px;
top:410px;
left:510px;
height:0
}
66% {
width:20px;
top:410px;
left:510px;
height:0
}
70% {
width:20px;
top:370px;
left:510px;
height:40px
}
100% {
width:20px;
top:370px;
left:510px;
height:40px
}
}
@keyframes spanelevenMoving {
0% {
height:20px;
top:370px;
left:510px;
width:0
}
70% {
height:20px;
top:370px;
left:510px;
width:0
}
76% {
height:20px;
top:370px;
left:430px;
width:80px
}
100% {
height:20px;
top:370px;
left:430px;
width:80px
}
}
@keyframes spantwelveMoving {
0% {
width:20px;
top:360px;
left:422px;
height:0
}
76% {
width:20px;
top:360px;
left:422px;
height:0
}
92% {
width:20px;
top:172px;
left:422px;
height:196px
}
100% {
width:20px;
top:172px;
left:422px;
height:196px
}
}
@keyframes spanthirteenMoving {
0% {
height:20px;
top:160px;
left:440px;
width:0
}
92% {
height:20px;
top:160px;
left:440px;
width:0
}
100% {
height:20px;
top:160px;
left:440px;
width:80px
}
}
@-webkit-keyframes spanfirstMoving {
0% {
left:275px;
width:0;
height:25px;
top:408px
}
8% {
left:200px;
width:75px;
height:25px;
top:408px
}
100% {
left:200px;
width:75px;
height:25px;
top:408px
}
}
@-webkit-keyframes spansecondMoving {
0% {
width:20px;
top:435px;
left:190px;
height:0
}
8% {
width:20px;
top:435px;
left:190px;
height:0
}
13% {
width:20px;
top:435px;
left:190px;
height:50px
}
100% {
width:20px;
top:435px;
left:190px;
height:50px
}
}
@-webkit-keyframes spanthirdMoving {
0% {
height:20px;
top:470px;
left:210px;
width:0
}
13% {
height:20px;
top:470px;
left:210px;
width:0
}
20% {
height:20px;
top:470px;
left:210px;
width:50px
}
100% {
height:20px;
top:470px;
left:210px;
width:50px
}
}
@-webkit-keyframes spanforthMoving {
0% {
width:20px;
top:490px;
left:240px;
height:0
}
20% {
width:20px;
top:490px;
left:240px;
height:0
}
24% {
width:20px;
top:490px;
left:240px;
height:40px
}
100% {
width:20px;
top:490px;
left:240px;
height:40px
}
}
@-webkit-keyframes spanfifthMoving {
0% {
height:20px;
top:510px;
left:260px;
width:0
}
24% {
height:20px;
top:510px;
left:260px;
width:0
}
45% {
height:20px;
top:510px;
left:260px;
width:250px
}
100% {
height:20px;
top:510px;
left:260px;
width:250px
}
}
@-webkit-keyframes spansixthMoving {
0% {
width:20px;
top:530px;
left:510px;
height:0
}
45% {
width:20px;
top:530px;
left:510px;
height:0
}
50% {
width:20px;
top:470px;
left:510px;
height:65px
}
100% {
width:20px;
top:470px;
left:510px;
height:65px
}
}
@-webkit-keyframes spanseventhMoving {
0% {
height:20px;
top:470px;
left:510px;
width:0
}
50% {
height:20px;
top:470px;
left:510px;
width:0
}
56% {
height:20px;
top:470px;
left:430px;
width:80px
}
100% {
height:20px;
top:470px;
left:430px;
width:80px
}
}
@-webkit-keyframes spaneigthMoving {
0% {
width:20px;
top:465px;
left:425px;
height:0
}
56% {
width:20px;
top:465px;
left:425px;
height:0
}
62% {
width:20px;
top:410px;
left:425px;
height:55px
}
100% {
width:20px;
top:410px;
left:425px;
height:55px
}
}
@-webkit-keyframes spanninthMoving {
0% {
height:20px;
top:408px;
left:450px;
width:0
}
62% {
height:20px;
top:408px;
left:450px;
width:0
}
66% {
height:20px;
top:408px;
left:450px;
width:80px
}
100% {
height:20px;
top:408px;
left:450px;
width:80px
}
}
@-webkit-keyframes spantenthMoving {
0% {
width:20px;
top:410px;
left:510px;
height:0
}
66% {
width:20px;
top:410px;
left:510px;
height:0
}
70% {
width:20px;
top:370px;
left:510px;
height:40px
}
100% {
width:20px;
top:370px;
left:510px;
height:40px
}
}
@-webkit-keyframes spanelevenMoving {
0% {
height:20px;
top:370px;
left:510px;
width:0
}
70% {
height:20px;
top:370px;
left:510px;
width:0
}
76% {
height:20px;
top:370px;
left:430px;
width:80px
}
100% {
height:20px;
top:370px;
left:430px;
width:80px
}
}
@-webkit-keyframes spantwelveMoving {
0% {
width:20px;
top:360px;
left:422px;
height:0
}
76% {
width:20px;
top:360px;
left:422px;
height:0
}
92% {
width:20px;
top:172px;
left:422px;
height:196px
}
100% {
width:20px;
top:172px;
left:422px;
height:196px
}
}
@-webkit-keyframes spanthirteenMoving {
0% {
height:20px;
top:160px;
left:440px;
width:0
}
92% {
height:20px;
top:160px;
left:440px;
width:0
}
100% {
height:20px;
top:160px;
left:440px;
width:80px
}
}
@-moz-keyframes spanfirstMoving {
0% {
left:275px;
width:0;
height:25px;
top:405px
}
8% {
left:200px;
width:75px;
height:25px;
top:405px
}
100% {
left:200px;
width:75px;
height:25px;
top:405px
}
}
@-moz-keyframes spansecondMoving {
0% {
width:20px;
top:435px;
left:190px;
height:0
}
8% {
width:20px;
top:435px;
left:190px;
height:0
}
13% {
width:20px;
top:435px;
left:190px;
height:50px
}
100% {
width:20px;
top:435px;
left:190px;
height:50px
}
}
@-moz-keyframes spanthirdMoving {
0% {
height:20px;
top:470px;
left:210px;
width:0
}
13% {
height:20px;
top:470px;
left:210px;
width:0
}
20% {
height:20px;
top:470px;
left:210px;
width:50px
}
100% {
height:20px;
top:470px;
left:210px;
width:50px
}
}
@-moz-keyframes spanforthMoving {
0% {
width:20px;
top:490px;
left:240px;
height:0
}
20% {
width:20px;
top:490px;
left:240px;
height:0
}
24% {
width:20px;
top:490px;
left:240px;
height:40px
}
100% {
width:20px;
top:490px;
left:240px;
height:40px
}
}
@-moz-keyframes spanfifthMoving {
0% {
height:20px;
top:510px;
left:260px;
width:0
}
24% {
height:20px;
top:510px;
left:260px;
width:0
}
45% {
height:20px;
top:510px;
left:260px;
width:250px
}
100% {
height:20px;
top:510px;
left:260px;
width:250px
}
}
@-moz-keyframes spansixthMoving {
0% {
width:20px;
top:530px;
left:510px;
height:0
}
45% {
width:20px;
top:530px;
left:510px;
height:0
}
50% {
width:20px;
top:470px;
left:510px;
height:65px
}
100% {
width:20px;
top:470px;
left:510px;
height:65px
}
}
@-moz-keyframes spanseventhMoving {
0% {
height:20px;
top:470px;
left:510px;
width:0
}
50% {
height:20px;
top:470px;
left:510px;
width:0
}
56% {
height:20px;
top:470px;
left:430px;
width:80px
}
100% {
height:20px;
top:470px;
left:430px;
width:80px
}
}
@-moz-keyframes spaneigthMoving {
0% {
width:20px;
top:465px;
left:425px;
height:0
}
56% {
width:20px;
top:465px;
left:425px;
height:0
}
62% {
width:20px;
top:410px;
left:425px;
height:55px
}
100% {
width:20px;
top:410px;
left:425px;
height:55px
}
}
@-moz-keyframes spanninthMoving {
0% {
height:20px;
top:408px;
left:450px;
width:0
}
62% {
height:20px;
top:408px;
left:450px;
width:0
}
66% {
height:20px;
top:408px;
left:450px;
width:80px
}
100% {
height:20px;
top:408px;
left:450px;
width:80px
}
}
@-moz-keyframes spantenthMoving {
0% {
width:20px;
top:410px;
left:510px;
height:0
}
66% {
width:20px;
top:410px;
left:510px;
height:0
}
70% {
width:20px;
top:370px;
left:510px;
height:40px
}
100% {
width:20px;
top:370px;
left:510px;
height:40px
}
}
@-moz-keyframes spanelevenMoving {
0% {
height:20px;
top:370px;
left:510px;
width:0
}
70% {
height:20px;
top:370px;
left:510px;
width:0
}
76% {
height:20px;
top:370px;
left:430px;
width:80px
}
100% {
height:20px;
top:370px;
left:430px;
width:80px
}
}
@-moz-keyframes spantwelveMoving {
0% {
width:20px;
top:360px;
left:422px;
height:0
}
76% {
width:20px;
top:360px;
left:422px;
height:0
}
92% {
width:20px;
top:172px;
left:422px;
height:196px
}
100% {
width:20px;
top:172px;
left:422px;
height:196px
}
}
@-moz-keyframes spanthirteenMoving {
0% {
height:20px;
top:160px;
left:440px;
width:0
}
92% {
height:20px;
top:160px;
left:440px;
width:0
}
100% {
height:20px;
top:160px;
left:440px;
width:80px
}
}
.twinkling { animation: twinkling 1s infinite ease-in-out; -moz-animation: twinkling 1s infinite ease-in-out; -webkit-animation: twinkling 1s infinite ease-in-out }
@keyframes twinkling {
0% {
transform:scale(1, 1)
}
100% {
transform:scale(1.2, 1.2)
}
}
@-webkit-keyframes twinkling {
0% {
-webkit-transform:scale(1, 1)
}
100% {
-webkit-transform:scale(1.2, 1.2)
}
}
@-moz-keyframes twinkling {
0% {
-moz-transform:scale(1, 1)
}
100% {
-moz-transform:scale(1.2, 1.2)
}
}
.bigSmall { animation: bigSmall .2s infinite ease-in-out; -moz-animation: bigSmall .2s infinite ease-in-out; -webkit-animation: bigSmall .2s infinite ease-in-out }
@keyframes bigSmall {
0% {
transform:scale(1, 1)
}
100% {
transform:scale(0.8, .8)
}
}
@-webkit-keyframes bigSmall {
0% {
-webkit-transform:scale(1, 1)
}
100% {
-webkit-transform:scale(0.8, .8)
}
}
@-moz-keyframes bigSmall {
0% {
-moz-transform:scale(1, 1)
}
100% {
-moz-transform:scale(0.8, .8)
}
}
.eyeMove { animation: eyeMove 2s infinite ease-in-out; -moz-animation: eyeMove 2s infinite ease-in-out; -webkit-animation: eyeMove 2s infinite ease-in-out }
@keyframes eyeMove {
0% {
transform:rotate(0deg)
}
12% {
transform:rotate(90deg)
}
25% {
transform:rotate(180deg)
}
38% {
transform:rotate(270deg)
}
50% {
transform:rotate(360deg)
}
100% {
transform:rotate(360deg)
}
}
@-webkit-keyframes eyeMove {
0% {
-webkit-transform:rotate(0deg)
}
12% {
-webkit-transform:rotate(90deg)
}
25% {
-webkit-transform:rotate(180deg)
}
38% {
-webkit-transform:rotate(270deg)
}
50% {
-webkit-transform:rotate(360deg)
}
100% {
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes eyeMove {
0% {
-moz-transform:rotate(0deg)
}
12% {
-moz-transform:rotate(90deg)
}
25% {
-moz-transform:rotate(180deg)
}
38% {
-moz-transform:rotate(270deg)
}
50% {
-moz-transform:rotate(360deg)
}
100% {
-moz-transform:rotate(360deg)
}
}
.toBig { animation: toBig .2s infinite ease-in-out; -moz-animation: toBig .2s infinite ease-in-out; -webkit-animation: toBig .2s infinite ease-in-out }
@keyframes toBig {
0% {
transform:scale(1, 1)
}
100% {
transform:scale(1.3, 1.3)
}
}
@-webkit-keyframes toBig {
0% {
-webkit-transform:scale(1, 1)
}
100% {
-webkit-transform:scale(1.3, 1.3)
}
}
@-moz-keyframes toBig {
0% {
-moz-transform:scale(1, 1)
}
100% {
-moz-transform:scale(1.3, 1.3)
}
}
#NIE-copyRight { height: 90px; background: #272a2c }
#NIE-copyRight a { color: #e23a3f }
#NIE-copyRight a:hover { color: #F1A712 }
#NIE-copyRight-corp { top: 10px!important }
#ncp-l1 { color: #e23a3f }
#ncp-l2 { color: #ccc }

@media screen and (max-width:720px) {
.content { -moz-transform: scale(0.95, .95); -webkit-transform: scale(0.95, .95); -o-transform: scale(0.95, .95); transform: scale(0.95, .95) }
.btn-phone { -moz-transform: scale(0.9, .9); -webkit-transform: scale(0.9, .9); -o-transform: scale(0.9, .9); transform: scale(0.9, .9); margin: -10px auto 50px }
}

@media screen and (max-width:680px) {
.content { -moz-transform: scale(0.9, .9); -webkit-transform: scale(0.9, .9); -o-transform: scale(0.9, .9); transform: scale(0.9, .9) }
.btn-phone { -moz-transform: scale(0.85, .85); -webkit-transform: scale(0.85, .85); -o-transform: scale(0.85, .85); transform: scale(0.85, .85); margin-left: -50px }
}

@media screen and (max-width:800px) {
#NIE-topBar { display: none }
#NIE-copyRight { display: none }
.content .top { display: none }
.content .top_phone { display: block }
.game { background-color: #fff }
#wrap { background: #fff }
.btn-phone { display: block; height: 175px }
.game span { background: #fff }
}

@media screen and (max-width:320px) and (orientation:portrait) {
.content { -moz-transform: scale(0.45, .45); -webkit-transform: scale(0.45, .45); -o-transform: scale(0.45, .45); transform: scale(0.45, .45); margin-left: -75px; margin-top: -200px }
.btn-phone { -moz-transform: scale(0.4, .4); -webkit-transform: scale(0.4, .4); -o-transform: scale(0.4, .4); transform: scale(0.4, .4); margin-left: -202px; margin-top: -370px }
}

@media screen and (min-width:321px) and (max-width:359px) and (orientation:portrait) {
.content { -moz-transform: scale(0.45, .45); -webkit-transform: scale(0.45, .45); -o-transform: scale(0.45, .45); transform: scale(0.45, .45); margin-left: -70px; margin-top: -200px }
.btn-phone { -moz-transform: scale(0.4, .4); -webkit-transform: scale(0.4, .4); -o-transform: scale(0.4, .4); transform: scale(0.4, .4); margin-left: -190px; margin-top: -360px }
}

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {
.content { -moz-transform: scale(0.5, .5); -webkit-transform: scale(0.5, .5); -o-transform: scale(0.5, .5); transform: scale(0.5, .5); margin-left: -65px; margin-top: -160px }
.btn-phone { -moz-transform: scale(0.45, .45); -webkit-transform: scale(0.45, .45); -o-transform: scale(0.45, .45); transform: scale(0.45, .45); margin-left: -182px; margin-top: -340px }
}

@media screen and (min-width:375px) and (max-width:399px) and (orientation:portrait) {
.content { -moz-transform: scale(0.55, .55); -webkit-transform: scale(0.55, .55); -o-transform: scale(0.55, .55); transform: scale(0.55, .55); margin-left: -60px; margin-top: -150px }
.btn-phone { -moz-transform: scale(0.5, .5); -webkit-transform: scale(0.5, .5); -o-transform: scale(0.5, .5); transform: scale(0.5, .5); margin-left: -170px; margin-top: -310px }
}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {
.content { -moz-transform: scale(0.6, .6); -webkit-transform: scale(0.6, .6); -o-transform: scale(0.6, .6); transform: scale(0.6, .6); margin-left: -55px; margin-top: -120px }
.btn-phone { -moz-transform: scale(0.55, .55); -webkit-transform: scale(0.55, .55); -o-transform: scale(0.55, .55); transform: scale(0.55, .55); margin-left: -160px; margin-top: -280px }
}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait) {
.content { -moz-transform: scale(0.65, .65); -webkit-transform: scale(0.65, .65); -o-transform: scale(0.65, .65); transform: scale(0.65, .65); margin-left: -55px; margin-top: -100px }
.btn-phone { -moz-transform: scale(0.6, .6); -webkit-transform: scale(0.6, .6); -o-transform: scale(0.6, .6); transform: scale(0.6, .6); margin-left: -155px; margin-top: -260px }
}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait) {
.content { -moz-transform: scale(0.7, .7); -webkit-transform: scale(0.7, .7); -o-transform: scale(0.7, .7); transform: scale(0.7, .7); margin-left: -40px; margin-top: -90px }
.btn-phone { -moz-transform: scale(0.65, .65); -webkit-transform: scale(0.65, .65); -o-transform: scale(0.65, .65); transform: scale(0.65, .65); margin-left: -135px; margin-top: -240px }
}

@media screen and (min-width:480px) and (max-width:639px) and (orientation:portrait) {
.content { -moz-transform: scale(0.7, .7); -webkit-transform: scale(0.7, .7); -o-transform: scale(0.7, .7); transform: scale(0.7, .7); margin-top: -60px; margin-left: -30px }
.btn-phone { -moz-transform: scale(0.65, .65); -webkit-transform: scale(0.65, .65); -o-transform: scale(0.65, .65); transform: scale(0.65, .65); margin-top: -240px; margin-left: -120px }
}

@media screen and (min-width:640px) and (min-width:799px) and (orientation:portrait) {
.content { -moz-transform: scale(0.9, .9); -webkit-transform: scale(0.9, .9); -o-transform: scale(0.9, .9); transform: scale(0.9, .9) }
.btn-phone { -moz-transform: scale(0.95, .95); -webkit-transform: scale(0.95, .95); -o-transform: scale(0.95, .95); transform: scale(0.95, .95); margin: -10px auto 50px }
}