@charset "utf-8";
@import url( "notosanskr.css" );

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
address, big, cite, code, del, dfn, em, font, img, ins,
q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:none 0; font-family:'Noto Sans KR'; font-weight:normal}
h1, h2, h3, h4, h5, h6 {font-size:12px}
img, fieldset, iframe {border:0 none}
table, div {border-collapse: collapse; font-size:12px}
textarea {overflow:auto; outline-style:none; font-family:'Dotum', 'Noto Sans KR'}
select, input, img, li {vertical-align:middle; text-align:left;  font-family:'Dotum', 'Noto Sans KR'; outline-style:none}
address, caption, cite, code, dfn, em, th, var {font-style:normal; font-weight:normal}
ul, li, ol {list-style-type:none}
legend, caption {display:none}
hr {border-collapse:collapse; display:none}
a { text-decoration:none; cursor:pointer; color:#222}
html, body {width:100%; height:100%}
body {background:#FFF; font-size:12px; color:#222}
.sound_only {display:none}

#bb_ladder {position:relative; width:840px; height:943px; background:url('../images/game_bg.jpg') no-repeat; overflow:hidden}

.logo {position:absolute; left:18px; top:30px}

.title {position:absolute; left:32px; top:8px; width:100%; z-index:999;}

.config_btn {position:absolute; left:36px; top:33px; width:111px; overflow:hidden; z-index: 999;}
.config_btn > li {float:left; cursor:pointer; transition:.3s}
.config_btn > li:hover {opacity:.7}
.config_btn > li:last-child {margin-left:5px; background:url('../images/btn_sound_on.png') no-repeat}
.config_btn > li:last-child > img {opacity:0}
.config_btn > li.off:last-child > img {opacity:1}

.hash_box {position:absolute; left:50%; top:225px; width:412px; height:36px; line-height:36px; margin-left:-206px; background:url('../images/hash_box_bg.jpg') repeat-x; border-radius:18px; box-shadow:0 0 10px rgba(0,0,0,0.4); overflow:hidden; z-index:3}
.hash_box > h1 {float:left; width:46px; padding-left:26px; font-size:13px; color:#fff3ae; text-shadow:0 0 3px black; background:url('../images/hash_box_bg2.jpg') repeat-x}
.hash_box > h2 {float:left; width:268px; text-align:center; font-size:13px; color:#9ee3e9; text-shadow:0 0 3px black}
.hash_box > h3 {float:left; width:56px; padding-left:16px; font-size:13px; color:#fff3ae; text-shadow:0 0 3px black; background:url('../images/hash_box_bg2.jpg') repeat-x; cursor:pointer; transition:.2s}
.hash_box > h3:hover {color:#FFF}

.character {position:absolute; left:60px; top:195px; width:720px; z-index:2}
.character_area {position:relative; width:720px; margin:auto; height:611px}
.character_area > .character_left {position:absolute; left:-29; bottom:0; width:90px; height:90px}
.character_area > .character_right {position:absolute; right:0; top:-210px; width:90px; height:90px}
.ani_left {transform:translateY(12px);width:113px;height:120px;animation:left 1s infinite 0.5s;background:url('../images/bb03.png') no-repeat center}
.ani_right {transform:translateY(12px);width:180px;height:178px;animation:right 1s infinite}

@keyframes left {
	0% {transform: translateY(12px);background:url('../images/bb03.png') no-repeat center}
    25% {transform: translateY(-12px);background:url('../images/bb03.png') no-repeat center}
    50% {transform: translateY(12px);background:url('../images/bb03.png') no-repeat center}
    100% {transform: translateY(12px);background:url('../images/bb03.png') no-repeat center}
}

@keyframes right {
    0% {transform: translateY(5px);background:url('../images/right_top.png') no-repeat center}
    25% {transform: translateY(-5px);background:url('../images/right_top.png') no-repeat center}
    50% {transform: translateY(5px);background:url('../images/right_top.png') no-repeat center}
    100% {transform: translateY(5px);background:url('../images/right_top.png') no-repeat center}
}

.game_area {position:absolute; left:0; top:312px; width:556px; height:668px; background:url('../images/canvas_bg.png') no-repeat center}
.game_zone {position:relative; height:654px; overflow:hidden}

/* line */
.game_zone > .line {display:none; position:absolute; left:75px; top:154px; width:402px; height:356px}
.game_zone > .line.on {display:block}
.game_zone > .line div {position:relative; width:402px; height:356px; overflow:hidden}
.game_zone > .line p {position:absolute; background:#000;}
.game_zone > .line h1 {position:absolute; z-index:2}
.game_zone > .line h2 {position:absolute; background:#0090ff} /* 잔상 색상 */
.game_zone > .line code {opacity:0; position:absolute; width:64px; height:60px; background:url('../images/anig01.png') no-repeat center; z-index:99}
.game_zone > .line code.anig_left3 {left:-14px; animation:a_left3 3.5s linear none 0s 1}
.game_zone > .line code.anig_right3 {left:-14px; animation:a_right3 3.5s linear none 0s 1; background:url('../images/anig01_r.png') no-repeat center}
.game_zone > .line code.anig_left4 {left:360px; animation:a_left4 4.5s linear none 0s 1}
.game_zone > .line code.anig_right4 {left:360px; animation:a_right4 4.5s linear none 0s 1; background:url('../images/anig01_r.png') no-repeat center}

@keyframes a_left3 {
  0% {opacity:1; top:0px; left:-14px}
  7% {top:42px; left:-14px}
  28% {top:42px; left:360px}
  35% {top:137px; left:360px}
  55% {top:137px; left:-14px}
  62% {top:237px; left:-14px}
  84% {top:237px; left:360px}
  90% {opacity:1; top:335px; left:360px}
  100% {opacity:0; top:400px; left:360px}
}
@keyframes a_right3 {
  0% {opacity:1; top:0px; left:360px}
  7% {top:42px; left:360px}
  28% {top:42px; left:-14px}
  35% {top:137px; left:-14px}
  55% {top:137px; left:360px}
  62% {top:237px; left:360px}
  84% {top:237px; left:-14px}
  90% {opacity:1; top:335px; left:-14px}
  100% {opacity:0; top:400px; left:-14px}
}
@keyframes a_left4 {
  0% {opacity:1; top:0px; left:-14px}
  5% {top:20px; left:-14px}
  20% {top:20px; left:360px}
  25% {top:100px; left:360px}
  43% {top:100px; left:-14px}
  48% {top:180px; left:-14px}
  66% {top:180px; left:360px}
  71% {top:260px; left:360px}
  86% {top:260px; left:-14px}
  91% {opacity:1; top:335px; left:-14px}
  100% {opacity:0; top:400px; left:-14px}
}
@keyframes a_right4 {
  0% {opacity:1; top:0px; left:360px}
  5% {top:20px; left:360px}
  20% {top:20px; left:-14px}
  25% {top:100px; left:-14px}
  43% {top:100px; left:360px}
  48% {top:180px; left:360px}
  66% {top:180px; left:-14px}
  71% {top:260px; left:-14px}
  86% {top:260px; left:360px}
  91% {opacity:1; top:335px; left:360px}
  100% {opacity:0; top:400px; left:360px}
}

/* 3LINE BG */
.game_zone > .line.left3 p.line1, .game_zone > .line.right3 p.line1 {left:0; top:0; width:24px; height:356px}
.game_zone > .line.left3 p.line2, .game_zone > .line.right3 p.line2 {right:0; top:0; width:24px; height:356px}
.game_zone > .line.left3 p.line3, .game_zone > .line.right3 p.line3 {left:0; top:70px; width:502px; height:24px}
.game_zone > .line.left3 p.line4, .game_zone > .line.right3 p.line4 {left:0; top:166px; width:502px; height:24px}
.game_zone > .line.left3 p.line5, .game_zone > .line.right3 p.line5 {left:0; top:262px; width:502px; height:24px}
/* 4LINE BG */
.game_zone > .line.left4 p.line1, .game_zone > .line.right4 p.line1 {left:0; top:0; width:24px; height:356px}
.game_zone > .line.left4 p.line2, .game_zone > .line.right4 p.line2 {right:0; top:0; width:24px; height:356px}
.game_zone > .line.left4 p.line3, .game_zone > .line.right4 p.line3 {left:0; top:46px; width:502px; height:24px}
.game_zone > .line.left4 p.line4, .game_zone > .line.right4 p.line4 {left:0; top:126px; width:502px; height:24px}
.game_zone > .line.left4 p.line5, .game_zone > .line.right4 p.line5 {left:0; top:206px; width:502px; height:24px}
.game_zone > .line.left4 p.line6, .game_zone > .line.right4 p.line6 {left:0; top:286px; width:502px; height:24px}
/* LEFT3 */
.game_zone > .line.left3 h1.line1 {left:0; top:0; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left3 h1.line2 {left:0; top:70px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left3 h1.line3 {right:0; top:70px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left3 h1.line4 {right:0; top:166px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left3 h1.line5 {left:0; top:166px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left3 h1.line6 {left:0; top:262px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left3 h1.line7 {right:0; top:262px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left3 h2.line1 {left:0; top:0; width:24px; height:0}
.game_zone > .line.left3 h2.line2 {left:0; top:70px; width:0; height:24px}
.game_zone > .line.left3 h2.line3 {right:0; top:70px; width:24px; height:0}
.game_zone > .line.left3 h2.line4 {right:0; top:166px; width:0; height:24px}
.game_zone > .line.left3 h2.line5 {left:0; top:166px; width:24px; height:0}
.game_zone > .line.left3 h2.line6 {left:0; top:262px; width:0; height:24px}
.game_zone > .line.left3 h2.line7 {right:0; top:262px; width:24px; height:0}
/* right3 */
.game_zone > .line.right3 h1.line1 {right:0; top:0; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right3 h1.line2 {right:0; top:70px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right3 h1.line3 {left:0; top:70px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right3 h1.line4 {left:0; top:166px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right3 h1.line5 {right:0; top:166px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right3 h1.line6 {right:0; top:262px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right3 h1.line7 {left:0; top:262px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right3 h2.line1 {right:0; top:0; width:24px; height:0}
.game_zone > .line.right3 h2.line2 {right:0; top:70px; width:0; height:24px}
.game_zone > .line.right3 h2.line3 {left:0; top:70px; width:24px; height:0}
.game_zone > .line.right3 h2.line4 {left:0; top:166px; width:0; height:24px}
.game_zone > .line.right3 h2.line5 {right:0; top:166px; width:24px; height:0}
.game_zone > .line.right3 h2.line6 {right:0; top:262px; width:0; height:24px}
.game_zone > .line.right3 h2.line7 {left:0; top:262px; width:24px; height:0}
/* LEFT4 */
.game_zone > .line.left4 h1.line1 {left:0; top:0; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left4 h1.line2 {left:0; top:46px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left4 h1.line3 {right:0; top:46px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left4 h1.line4 {right:0; top:126px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left4 h1.line5 {left:0; top:126px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left4 h1.line6 {left:0; top:206px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left4 h1.line7 {right:0; top:206px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left4 h1.line8 {right:0; top:286px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.left4 h1.line9 {left:0; top:286px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.left4 h2.line1 {left:0; top:0; width:24px; height:0}
.game_zone > .line.left4 h2.line2 {left:0; top:46px; width:0; height:24px}
.game_zone > .line.left4 h2.line3 {right:0; top:46px; width:24px; height:0}
.game_zone > .line.left4 h2.line4 {right:0; top:126px; width:0; height:24px}
.game_zone > .line.left4 h2.line5 {left:0; top:126px; width:24px; height:0}
.game_zone > .line.left4 h2.line6 {left:0; top:206px; width:0; height:24px}
.game_zone > .line.left4 h2.line7 {right:0; top:206px; width:24px; height:0}
.game_zone > .line.left4 h2.line8 {right:0; top:286px; width:0; height:24px}
.game_zone > .line.left4 h2.line9 {left:0; top:286px; width:24px; height:0}
/* RIGHT4 */
.game_zone > .line.right4 h1.line1 {right:0; top:0; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right4 h1.line2 {right:0; top:46px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right4 h1.line3 {left:0; top:46px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right4 h1.line4 {left:0; top:126px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right4 h1.line5 {right:0; top:126px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right4 h1.line6 {right:0; top:206px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right4 h1.line7 {left:0; top:206px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right4 h1.line8 {left:0; top:286px; width:0; height:24px; background:url('../images/water_horizon.jpg')}
.game_zone > .line.right4 h1.line9 {right:0; top:286px; width:24px; height:0; background:url('../images/water_vertical.jpg')}
.game_zone > .line.right4 h2.line1 {right:0; top:0; width:24px; height:0}
.game_zone > .line.right4 h2.line2 {right:0; top:46px; width:0; height:24px}
.game_zone > .line.right4 h2.line3 {left:0; top:46px; width:24px; height:0}
.game_zone > .line.right4 h2.line4 {left:0; top:126px; width:0; height:24px}
.game_zone > .line.right4 h2.line5 {right:0; top:126px; width:24px; height:0}
.game_zone > .line.right4 h2.line6 {right:0; top:206px; width:0; height:24px}
.game_zone > .line.right4 h2.line7 {left:0; top:206px; width:24px; height:0}
.game_zone > .line.right4 h2.line8 {left:0; top:286px; width:0; height:24px}
.game_zone > .line.right4 h2.line9 {right:0; top:286px; width:24px; height:0}

/* 3LINE */
.game_zone > .line.left3.on h1.line1 {animation:water_fall1 1.19s linear backwards}
.game_zone > .line.left3.on h1.line2 {animation:water_right 2s linear 0.19s backwards}
.game_zone > .line.left3.on h1.line3 {animation:water_fall2 1.24s linear 1s backwards}
.game_zone > .line.left3.on h1.line4 {animation:water_left 2s linear 1.19s backwards}
.game_zone > .line.left3.on h1.line5 {animation:water_fall2 1.24s linear 2s backwards}
.game_zone > .line.left3.on h1.line6 {animation:water_right 2s linear 2.19s backwards}
.game_zone > .line.left3.on h1.line7 {animation:water_fall1 1.19s linear 3s backwards}
.game_zone > .line.left3.on h2.line1 {animation:water_fall1_bg .19s linear forwards}
.game_zone > .line.left3.on h2.line2 {animation:water_right_bg 1s linear 0.19s forwards}
.game_zone > .line.left3.on h2.line3 {animation:water_fall2_bg .24s linear 1s forwards}
.game_zone > .line.left3.on h2.line4 {animation:water_left_bg 1s linear 1.19s forwards}
.game_zone > .line.left3.on h2.line5 {animation:water_fall2_bg .24s linear 2s forwards}
.game_zone > .line.left3.on h2.line6 {animation:water_right_bg 1s linear 2.19s forwards}
.game_zone > .line.left3.on h2.line7 {animation:water_fall1_bg .19s linear 3s forwards}

.game_zone > .line.right3.on h1.line1 {animation:water_fall1 1.19s linear backwards}
.game_zone > .line.right3.on h1.line2 {animation:water_left 2s linear 0.19s backwards}
.game_zone > .line.right3.on h1.line3 {animation:water_fall2 1.24s linear 1s backwards}
.game_zone > .line.right3.on h1.line4 {animation:water_right 2s linear 1.19s backwards}
.game_zone > .line.right3.on h1.line5 {animation:water_fall2 1.24s linear 2s backwards}
.game_zone > .line.right3.on h1.line6 {animation:water_left 2s linear 2.19s backwards}
.game_zone > .line.right3.on h1.line7 {animation:water_fall1 1.19s linear 3s backwards}
.game_zone > .line.right3.on h2.line1 {animation:water_fall1_bg .19s linear forwards}
.game_zone > .line.right3.on h2.line2 {animation:water_left_bg 1s linear 0.19s forwards}
.game_zone > .line.right3.on h2.line3 {animation:water_fall2_bg .24s linear 1s forwards}
.game_zone > .line.right3.on h2.line4 {animation:water_right_bg 1s linear 1.19s forwards}
.game_zone > .line.right3.on h2.line5 {animation:water_fall2_bg .24s linear 2s forwards}
.game_zone > .line.right3.on h2.line6 {animation:water_left_bg 1s linear 2.19s forwards}
.game_zone > .line.right3.on h2.line7 {animation:water_fall1_bg .19s linear 3s forwards}

@keyframes water_fall1 {
  0% {margin-top:0; height:0}
  15.61% {margin-top:0; height:94px}
  84.39% {margin-top:0; height:94px}
  100% {margin-top:94px; height:0}
}
@keyframes water_fall2 {
  0% {margin-top:0; height:0}
  19.35% {margin-top:0; height:120px}
  80.65% {margin-top:0; height:120px}
  100% {margin-top:120px; height:0}
}
@keyframes water_fall1_bg {
  0% {height:0}
  100% {height:94px}
}
@keyframes water_fall2_bg {
  0% {height:0}
  100% {height:120px}
}

/* 4LINE */
.game_zone > .line.left4.on h1.line1 {animation:water_fall3 1.14s linear backwards}
.game_zone > .line.left4.on h1.line2 {animation:water_right 2s linear 0.14s backwards}
.game_zone > .line.left4.on h1.line3 {animation:water_fall4 1.2s linear 1s backwards}
.game_zone > .line.left4.on h1.line4 {animation:water_left 2s linear 1.14s backwards}
.game_zone > .line.left4.on h1.line5 {animation:water_fall4 1.2s linear 2s backwards}
.game_zone > .line.left4.on h1.line6 {animation:water_right 2s linear 2.14s backwards}
.game_zone > .line.left4.on h1.line7 {animation:water_fall4 1.2s linear 3s backwards}
.game_zone > .line.left4.on h1.line8 {animation:water_left 2s linear 3.14s backwards}
.game_zone > .line.left4.on h1.line9 {animation:water_fall3 1.14s linear 4s backwards}
.game_zone > .line.left4.on h2.line1 {animation:water_fall3_bg .14s linear forwards}
.game_zone > .line.left4.on h2.line2 {animation:water_right_bg 1s linear 0.14s forwards}
.game_zone > .line.left4.on h2.line3 {animation:water_fall4_bg .2s linear 1s forwards}
.game_zone > .line.left4.on h2.line4 {animation:water_left_bg 1s linear 1.14s forwards}
.game_zone > .line.left4.on h2.line5 {animation:water_fall4_bg .2s linear 2s forwards}
.game_zone > .line.left4.on h2.line6 {animation:water_right_bg 1s linear 2.14s forwards}
.game_zone > .line.left4.on h2.line7 {animation:water_fall4_bg .2s linear 3s forwards}
.game_zone > .line.left4.on h2.line8 {animation:water_left_bg 1s linear 3.14s forwards}
.game_zone > .line.left4.on h2.line9 {animation:water_fall3_bg .14s linear 4s forwards}

.game_zone > .line.right4.on h1.line1 {animation:water_fall3 1.14s linear backwards}
.game_zone > .line.right4.on h1.line2 {animation:water_left 2s linear 0.14s backwards}
.game_zone > .line.right4.on h1.line3 {animation:water_fall4 1.2s linear 1s backwards}
.game_zone > .line.right4.on h1.line4 {animation:water_right 2s linear 1.14s backwards}
.game_zone > .line.right4.on h1.line5 {animation:water_fall4 1.2s linear 2s backwards}
.game_zone > .line.right4.on h1.line6 {animation:water_left 2s linear 2.14s backwards}
.game_zone > .line.right4.on h1.line7 {animation:water_fall4 1.2s linear 3s backwards}
.game_zone > .line.right4.on h1.line8 {animation:water_right 2s linear 3.14s backwards}
.game_zone > .line.right4.on h1.line9 {animation:water_fall3 1.14s linear 4s backwards}
.game_zone > .line.right4.on h2.line1 {animation:water_fall3_bg .14s linear forwards}
.game_zone > .line.right4.on h2.line2 {animation:water_left_bg 1s linear 0.14s forwards}
.game_zone > .line.right4.on h2.line3 {animation:water_fall4_bg .2s linear 1s forwards}
.game_zone > .line.right4.on h2.line4 {animation:water_right_bg 1s linear 1.14s forwards}
.game_zone > .line.right4.on h2.line5 {animation:water_fall4_bg .2s linear 2s forwards}
.game_zone > .line.right4.on h2.line6 {animation:water_left_bg 1s linear 2.14s forwards}
.game_zone > .line.right4.on h2.line7 {animation:water_fall4_bg .2s linear 3s forwards}
.game_zone > .line.right4.on h2.line8 {animation:water_right_bg 1s linear 3.14s forwards}
.game_zone > .line.right4.on h2.line9 {animation:water_fall3_bg .14s linear 4s forwards}

@keyframes water_fall3 {
  0% {margin-top:0; height:0}
  12.28% {margin-top:0; height:70px}
  87.72% {margin-top:0; height:70px}
  100% {margin-top:70px; height:0}
}
@keyframes water_fall4 {
  0% {margin-top:0; height:0}
  17.01% {margin-top:0; height:104px}
  82.99% {margin-top:0; height:104px}
  100% {margin-top:104px; height:0}
}
@keyframes water_fall3_bg {
  0% {height:0}
  100% {height:70px}
}
@keyframes water_fall4_bg {
  0% {height:0}
  100% {height:104px}
}

@keyframes water_left {
  0% {margin-right:0; width:0}
  50% {margin-right:0; width:502px}
  100% {margin-right:502px; width:0}
}
@keyframes water_right {
  0% {margin-left:0; width:0}
  50% {margin-left:0; width:502px}
  100% {margin-left:502px; width:0}
}
@keyframes water_left_bg {
  0% {width:0}
  100% {width:502px}
}
@keyframes water_right_bg {
  0% {width:0}
  100% {width:502px}
}

/* BUBBLE */
.game_zone > .bubble {position:absolute; width:77px; height:84px}
.game_zone > .bubble.left {left:49px}
.game_zone > .bubble.right {right:54px}
.game_zone > .bubble.top {top:84px}
.game_zone > .bubble.bottom {top:506px}
.game_zone > .bubble.left.top {background:url('../images/game_left.png') no-repeat}
.game_zone > .bubble.right.top {background:url('../images/game_right.png') no-repeat}
.game_zone > .bubble.left.bottom {background:url('../images/game_odd.png') no-repeat}
.game_zone > .bubble.right.bottom {background:url('../images/game_even.png') no-repeat}
.game_zone > .bubble > img {opacity:0}
.game_zone > .bubble.on {background:none}
.game_zone > .bubble.on > img {opacity:1}

/* ENDING */
.game_zone > .ending {position:absolute; width:194px; height:125px; z-index:999}
.game_zone > .ending.odd {left:-38px; top:420px}
.game_zone > .ending.even {right:9px; top:420px}
.game_zone > .ending > h1 {text-align:left; opacity:0; padding: 65px 0 0 44px;}
.game_zone > .ending.on > h1 {animation:pon 0.8s linear backwards}
.game_zone > .ending > h2 {position:absolute; left:0; top:0; opacity:0}
.game_zone > .ending.odd.on > h2 {animation:spin1 .6s linear .5s forwards}
.game_zone > .ending.even.on > h2 {animation:spin2 .6s linear .5s forwards}

@keyframes pon {
  0% {opacity:0}
  50% {opacity:1;transform:scale(1.2)}
  100% {opacity:0;transform:scale(1.5)}
}

@keyframes spin1 {
  0% {left:0; top:0; opacity:0; transform:rotate(0deg) scale(.1)}
  50% {left:50px; top:-80px; opacity:1; transform:rotate(360deg) scale(.5)}
  100% {left:195px; top:-200px; opacity:1; transform:rotate(720deg) scale(1)}
}

@keyframes spin2 {
  0% {left:0; top:0; opacity:0; transform:rotate(0deg) scale(.1)}
  50% {left:-50px; top:-80px; opacity:1; transform:rotate(360deg) scale(.5)}
  100% {left:-195px; top:-200px; opacity:1; transform:rotate(720deg) scale(1)}
}

.game_zone > .info {position:absolute; left:64%; top:200px; width:283px; height:292px; margin-left:-219px; background:url('../images/center_box.png') no-repeat}
.game_zone > .info > .info_wrap {position:relative; width:283px; height:257px}
.game_zone > .info > .info_wrap > h1 {font-weight: bold; position:absolute; top:240px; width:300px; margin-left:-7px; text-align:center; font-size:14px; color:#8a8a8a; letter-spacing:-0.5px}
.game_zone > .info > .info_wrap > h1 > strong {color:#4abfbe; font-weight: bold;}

.anistage {width:283px;height:171px;overflow:hidden;position:absolute;bottom:35px}
.animove {width:49px;height:49px;position:absolute;top:0px;left:50%; margin-left: -77px;}
.animove01 {width:49px;height:49px;position:absolute;top:0px;left:50%; margin-left: -551px; animation:move 6s infinite linear}
.car {position:absolute; width:122px;height:145px; animation:car 0.5s infinite}
.bgstage {
  width: 261px;
  height: 168px;
  overflow: hidden;
  position: absolute;
  bottom: 54px;
  left:11px;
}

.bgmove {
  width: 831px;
  height: 141px;
  position: absolute;
  top: 0px;
  left: 10px;
  animation: move 5s infinite linear;
  animation-name:mymove;
}

.bg {
  position: absolute;
  width: 831px;
  height: 198px;
  animation: run 0.5s infinite;
  overflow: hidden;
}
@keyframes mymove
{
	from {left:-330px;}
	to {left:0px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {left:-330px;}
	to {left:0px;}
}


@keyframes run {
  0% {
    background: url('../images/bg01.png') no-repeat center
  }

  50% {
    background: url('../images/bg01.png') no-repeat center
  }

  100% {
    background: url('../images/bg01.png') no-repeat center
  }
}


@keyframes car {
  0% {background:url('../images/car01.png') no-repeat center}
  10% {background:url('../images/car02.png') no-repeat center}
  20% {background:url('../images/car03.png') no-repeat center}
	30% {background:url('../images/car04.png') no-repeat center}
  40% {background:url('../images/car05.png') no-repeat center}
  50% {background:url('../images/car06.png') no-repeat center}
	60% {background:url('../images/car07.png') no-repeat center}
  70% {background:url('../images/car08.png') no-repeat center}
  80% {background:url('../images/car09.png') no-repeat center}
  100% {background:url('../images/car01.png') no-repeat center}
}



.history {z-index:999; position:absolute; right:0; top:240px;height:275px; /*width:100%;  background:url('../images/result_bg.png') no-repeat center*/}
.history_list {width:266px; height:430px; margin:34px 20px 0 58px; border-radius: 10px;}
.history_list > ul {width: 243px; display: grid;grid-template-columns: repeat(1,1fr);grid-gap: 8px;align-items: center;max-height: 655px;overflow-y: auto;overflow-x: hidden; padding-right:30px;} 
.history_list > ul > li {background:url('../images/result_bg.png') no-repeat center; border-radius:50px;display: inline-flex;justify-content: flex-start;align-items: center;    padding: 12px 25px 18px 25px; }
.history_list > ul > li:first-child {margin-left:0}
.history_list > ul > li > h1 {padding-right:14px;font-weight: bold; width:39px; height:37px; line-height:35px; text-align:center; font-size:20px; color:#905414; /*background:url('../images/result_num_box.png') no-repeat*/}
.history_list > ul > li > img{margin-left: 5px;}
/* // scroll bar */
::-webkit-scrollbar
{
	width: 16px;
	height: 16px;
  background-color: #f5f5f5;
  border-radius: 10px;
}
 
/* // 스크롤 배경 */
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(209, 209, 209, 0.3);
	border-radius: 10px;
	background-color: #106100;
}
 
/* // 스크롤 움직이는 */
::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 10px rgba(209, 209, 209, 0.3);
  background-color: #21c500;
  
}