html, body { background:#f7f7f7; }
#ladderArea .font-size-13 { font-size:13px; padding:10px; border:solid 1px #DBC7B0; background:rgba(255, 255, 255, 0.4); }
#ladderArea .table { background:transparent; border:solid 1px #DBC7B0; }
#ladderArea .table th, #ladderArea .table td { background:transparent; padding:1rem .75rem; background:rgba(255, 255, 255, 0.5); border:none; border-bottom:solid 1px #DBC7B0; letter-spacing:-1px; }
#ladderArea > .container { background-size:cover; }
#ladderArea #userinfo * { letter-spacing:-1px; font-family:Dotum; font-size:11px; }
#ladderArea #historyArea { max-height:420px; overflow-y:auto; /* border:solid 1px #DBC7B0; */ }
#ladderArea #historyArea .table th,
#ladderArea #historyArea .table td { letter-spacing:-1px; font-size:11px; font-family:Dotum; vertical-align:middle; }
#ladderArea #historyArea .point-odd, .point-even { letter-spacing:-1px; }
#ladderArea #historyArea .result-ball { border-radius:50%; padding:8px 10px; text-align:center; color:#ffffff; position:relative; margin:4px 0px; }
#ladderArea #historyArea .result-ball b { position:absolute; top:-4px; left:0px; background:#2d2d2d; color:#ffffff; padding:0px 4px; font-size:11px; font-family:Dotum; text-align:center; display:inline-block; border-radius:50%; padding-right:6px; line-height:18px; font-weight:700; }
#ladderArea #historyArea .result-ball b.left { left:-2px; }
#ladderArea #historyArea .result-ball b.right { right:-2px; left:auto; }
#ladderArea #historyArea .result-ball-odd { background:#dc3545 !important; }
#ladderArea #historyArea .result-ball-even { background:#007bff !important; }
#ladderArea #historyArea .progress { height:8px; margin-top:4px; }
#ladderArea #historyArea .fa-fire { font-size:12px; }
#ladderArea #historyArea .progress-percent div { float:left; font-size:11px; font-family:Dotum; letter-spacing:-1px; }
#ladderArea #funcArea #point { width:206px !important; margin:20px auto 10px auto; background:rgba(255, 255, 255, 0.8); border:solid 1px #DBC7B0; }
#ladderArea #funcArea .btn { width:90px; height:80px; cursor:pointer; font-size:27px; margin:0px 10px; }
#ladderArea #manualArea { background:#695e58; color:#ffffff; padding:20px 15px; }
#ladderArea #manualArea p { line-height:22px; background:#695e58; color:#ffffff; }
#ladderArea .timer { width:300px; padding:20px; background:#3B3523; color:#ffffff; border-radius:4px; margin:0px auto; font-family:Dotum; font-weight:normal; font-size:11px; letter-spacing:-1px; }
#ladderArea .timer * { color:#ffffff; font-family:Dotum; font-weight:normal; font-size:11px; letter-spacing:-1px; }
#ladderArea .timer .restart { margin-top:10px; }
#ladderArea .timer .restart, #ladderArea .timer .time { font-size:11px; font-family:Dotum; letter-spacing:-1px; display:inline-block; }
#ladderArea .fa-fire { font-size:36px; }
#ladderArea .progress { display:block; height:36px; background:rgba(255, 255, 255, 0.5); border:solid 1px #DBC7B0; }
#ladderArea .progress-bar { height:100%; }
#ladderArea .progress-bar-right { float:right !important; }
#ladderArea .lastResult { font-size:11px; font-family:Dotum; letter-spacing:-1px; margin-top:5px; }
#ladderArea .lastResult * { font-size:11px; font-family:Dotum; letter-spacing:-1px; font-weight:normal; }
#ladderArea #gameArea { width:100%; position:relative; background:rgba(255, 255, 255, 0.4); height:370px; margin-top:40px; padding:20px; }
#ladderArea #gameArea .line { display:inline-block; width:8px; background:rgba(188, 182, 166, 0.8); }
#ladderArea #gameArea .line-static { height:230px; position:absolute; top:70px; width:7px; }
#ladderArea #gameArea .line-left { left:50px; }
#ladderArea #gameArea .line-right { left:330px; }
#ladderArea #gameArea .start { position:absolute; top:20px; background:rgba(188, 182, 166, 0.8); border-radius:50%; width:40px; line-height:40px; text-align:center; font-weight:700; color:#ffffff; }
#ladderArea #gameArea .start-left { left:33px; }
#ladderArea #gameArea .start-right { left:313px; }
#ladderArea #gameArea .end { position:absolute; top:310px; background:rgba(188, 182, 166, 0.8); border-radius:50%; width:40px; line-height:40px; text-align:center; font-weight:700; color:#ffffff; }
#ladderArea #gameArea .end-odd { left:33px; }
#ladderArea #gameArea .end-even { left:313px; }
#ladderArea #gameArea .cross-line { position:absolute; left:50px; background:rgba(188, 182, 166, 0.8); width:287px; height:7px; }
#ladderArea #gameArea .cross-line-animate { position:absolute; left:96px; background:rgba(59, 53, 35, 0.6); }
#ladderArea #gameArea .resultLine, #gameArea .resultLine li { list-style:none; padding:0px; margin:0px; }
#ladderArea #gameArea .resultLine { position:relative; width:100%; height:100%; }
#ladderArea #gameArea .resultLine li { background:#000; position:absolute; }
/* 좌3짝 */
#ladderArea #gameArea .resultLine-left-3 li.type1 { width:7px; height:0px; top:50px; left:30px; /*42*/}
#ladderArea #gameArea .resultLine-left-3 li.type2 { width:0px; height:7px; top:85px; left:30px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type3 { width:7px; height:0px; top:85px; left:310px; /*57*/}
#ladderArea #gameArea .resultLine-left-3 li.type4 { width:0px; height:7px; top:160px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type5 { width:7px; height:0px; top:160px; left:30px; /*82*/ }
#ladderArea #gameArea .resultLine-left-3 li.type6 { width:0px; height:7px; top:235px; left:30px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type7 { width:7px; height:0px; top:235px; left:310px; /*57*/}
#ladderArea #gameArea .resultLine-left-3 li.type8 { display:none; width:0px; height:7px; top:235px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type9 { display:none; width:7px; height:0px; top:235px; left:30px; /*45*/ }
/* 좌4홀 */
#ladderArea #gameArea .resultLine-left-4 li.type1 { width:7px; height:0px; top:50px; left:30px; /*42*/}
#ladderArea #gameArea .resultLine-left-4 li.type2 { width:0px; height:7px; top:85px; left:30px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type3 { width:7px; height:0px; top:85px; left:310px; /*57*/}
#ladderArea #gameArea .resultLine-left-4 li.type4 { width:0px; height:7px; top:135px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type5 { width:7px; height:0px; top:135px; left:30px; /*57*/ }
#ladderArea #gameArea .resultLine-left-4 li.type6 { width:0px; height:7px; top:185px; left:30px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type7 { width:7px; height:0px; top:185px; left:310px; /*57*/}
#ladderArea #gameArea .resultLine-left-4 li.type8 { width:0px; height:7px; top:235px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type9 { width:7px; height:0px; top:235px; left:30px; /*45*/ }
/* 우3홀 */
#ladderArea #gameArea .resultLine-right-3 li.type1 { width:7px; height:0px; top:50px; right:33px; /*42*/}
#ladderArea #gameArea .resultLine-right-3 li.type2 { width:0px; height:7px; top:85px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type3 { width:7px; height:0px; top:85px; left:30px;; /*57*/}
#ladderArea #gameArea .resultLine-right-3 li.type4 { width:0px; height:7px; top:160px; left:30px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type5 { width:7px; height:0px; top:160px; right:33px; /*82*/ }
#ladderArea #gameArea .resultLine-right-3 li.type6 { width:0px; height:7px; top:235px; right:33px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type7 { width:7px; height:0px; top:235px; left:30px;; /*57*/}
#ladderArea #gameArea .resultLine-right-3 li.type8 { display:none; width:0px; height:7px; top:235px; left:33px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type9 { display:none; width:7px; height:0px; top:235px; right:123px; /*45*/ }
/* 우4짝 */
#ladderArea #gameArea .resultLine-right-4 li.type1 { width:7px; height:0px; top:50px; left:310px; /*42*/}
#ladderArea #gameArea .resultLine-right-4 li.type2 { width:0px; height:7px; top:85px; right:33px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type3 { width:7px; height:0px; top:85px; left:30px;; /*57*/}
#ladderArea #gameArea .resultLine-right-4 li.type4 { width:0px; height:7px; top:135px; left:30px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type5 { width:7px; height:0px; top:135px; right:33px; /*57*/ }
#ladderArea #gameArea .resultLine-right-4 li.type6 { width:0px; height:7px; top:185px; right:33px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type7 { width:7px; height:0px; top:185px; left:30px;; /*57*/}
#ladderArea #gameArea .resultLine-right-4 li.type8 { width:0px; height:7px; top:235px; left:30px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type9 { width:7px; height:0px; top:235px; right:33px; /*45*/ }
#ladderArea .lastResult { font-weight:normal; position:absolute; left:0; right:0; top:-130px; bottom:0; margin:auto; width:300px; height:80px; z-index:4; background:rgba(0, 0, 0, 0.8); color:#ffffff; line-height:80px; text-align:center; border-radius:4px; }
@media all and (max-width: 1200px) {
#ladderArea #gameArea { width:300px; margin:40px auto 20px auto; }
#ladderArea #gameArea .line { display:inline-block; width:8px; background:rgba(188, 182, 166, 0.8); }
#ladderArea #gameArea .line-static { height:230px; position:absolute; top:70px; width:7px; }
#ladderArea #gameArea .line-left { left:45px; }
#ladderArea #gameArea .line-right { left:250px; }
#ladderArea #gameArea .start { position:absolute; top:20px; background:rgba(188, 182, 166, 0.8); border-radius:50%; width:40px; line-height:40px; text-align:center; font-weight:700; color:#ffffff; }
#ladderArea #gameArea .start-left { left:28px; }
#ladderArea #gameArea .start-right { left:233px; }
#ladderArea #gameArea .end { position:absolute; top:310px; background:rgba(188, 182, 166, 0.8); border-radius:50%; width:40px; line-height:40px; text-align:center; font-weight:700; color:#ffffff; }
#ladderArea #gameArea .end-odd { left:28px; }
#ladderArea #gameArea .end-even { left:233px; }
#ladderArea #gameArea .cross-line { position:absolute; left:52px; background:rgba(188, 182, 166, 0.8); width:198px; height:7px; }
#ladderArea #gameArea .cross-line-animate { position:absolute; left:51px; background:rgba(59, 53, 35, 0.6); }
#ladderArea #gameArea .resultLine, #gameArea .resultLine li { list-style:none; padding:0px; margin:0px; }
#ladderArea #gameArea .resultLine { position:relative; width:100%; height:100%; }
#ladderArea #gameArea .resultLine li { background:#000; position:absolute; }
#ladderArea #historyArea { max-height:181px; }
#ladderArea .fa-fire { margin:20px 0px; }
/* 좌3짝 */
#ladderArea #gameArea .resultLine-left-3 li.type1 { width:7px; height:0px; top:50px; left:25px; /*42*/}
#ladderArea #gameArea .resultLine-left-3 li.type2 { width:0px; height:7px; top:85px; left:25px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type3 { width:7px; height:0px; top:85px; right:23px; left:auto; /*57*/}
#ladderArea #gameArea .resultLine-left-3 li.type4 { width:0px; height:7px; top:160px; right:23px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type5 { width:7px; height:0px; top:160px; left:25px; /*82*/ }
#ladderArea #gameArea .resultLine-left-3 li.type6 { width:0px; height:7px; top:235px; left:25px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type7 { width:7px; height:0px; top:235px; right:23px; left:auto; /*57*/}
#ladderArea #gameArea .resultLine-left-3 li.type8 { display:none; width:0px; height:7px; top:235px; right:21px; /*267*/}
#ladderArea #gameArea .resultLine-left-3 li.type9 { display:none; width:7px; height:0px; top:235px; left:25px; /*45*/ }
/* 좌4홀 */
#ladderArea #gameArea .resultLine-left-4 li.type1 { width:7px; height:0px; top:50px; left:25px; /*42*/}
#ladderArea #gameArea .resultLine-left-4 li.type2 { width:0px; height:7px; top:85px; left:25px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type3 { width:7px; height:0px; top:85px; right:23px; left:auto; /*57*/}
#ladderArea #gameArea .resultLine-left-4 li.type4 { width:0px; height:7px; top:135px; right:23px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type5 { width:7px; height:0px; top:135px; left:25px; /*57*/ }
#ladderArea #gameArea .resultLine-left-4 li.type6 { width:0px; height:7px; top:185px; left:25px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type7 { width:7px; height:0px; top:185px; right:23px; left:auto; /*57*/}
#ladderArea #gameArea .resultLine-left-4 li.type8 { width:0px; height:7px; top:235px; right:23px; /*267*/}
#ladderArea #gameArea .resultLine-left-4 li.type9 { width:7px; height:0px; top:235px; left:25px; /*45*/ }
/* 우3홀 */
#ladderArea #gameArea .resultLine-right-3 li.type1 { width:7px; height:0px; top:50px; right:23px; /*42*/}
#ladderArea #gameArea .resultLine-right-3 li.type2 { width:0px; height:7px; top:85px; right:23px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type3 { width:7px; height:0px; top:85px; left:25px; /*57*/}
#ladderArea #gameArea .resultLine-right-3 li.type4 { width:0px; height:7px; top:160px; left:25px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type5 { width:7px; height:0px; top:160px; right:23px; /*82*/ }
#ladderArea #gameArea .resultLine-right-3 li.type6 { width:0px; height:7px; top:235px; right:23px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type7 { width:7px; height:0px; top:235px; left:25px; /*57*/}
#ladderArea #gameArea .resultLine-right-3 li.type8 { display:none; width:0px; height:7px; top:235px; left:21px; /*267*/}
#ladderArea #gameArea .resultLine-right-3 li.type9 { display:none; width:7px; height:0px; top:235px; right:115px; /*45*/ }
/* 우4짝 */
#ladderArea #gameArea .resultLine-right-4 li.type1 { width:7px; height:0px; top:50px; left:230px; /*42*/}
#ladderArea #gameArea .resultLine-right-4 li.type2 { width:0px; height:7px; top:85px; right:23px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type3 { width:7px; height:0px; top:85px; left:25px; /*57*/}
#ladderArea #gameArea .resultLine-right-4 li.type4 { width:0px; height:7px; top:135px; left:25px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type5 { width:7px; height:0px; top:135px; right:23px; /*57*/ }
#ladderArea #gameArea .resultLine-right-4 li.type6 { width:0px; height:7px; top:185px; right:23px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type7 { width:7px; height:0px; top:185px; left:25px; /*57*/}
#ladderArea #gameArea .resultLine-right-4 li.type8 { width:0px; height:7px; top:235px; left:25px; /*262*/}
#ladderArea #gameArea .resultLine-right-4 li.type9 { width:7px; height:0px; top:235px; right:23px; /*45*/ }
}
#ladderArea .progress {
display: -ms-flexbox;
display: flex;
height: 36px;
overflow: hidden;
line-height: 0;
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
}
#ladderArea .progress-bar {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
overflow: hidden;
color: #fff;
text-align: center;
white-space: nowrap;
background-color: #007bff;
transition: width 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
#ladderArea .progress-bar {
transition: none;
}
}
#ladderArea .progress-bar-striped {
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 1rem 1rem;
}
#ladderArea .progress-bar-animated {
-webkit-animation: 1s linear infinite progress-bar-stripes;
animation: 1s linear infinite progress-bar-stripes;
}
@-webkit-keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
@keyframes progress-bar-stripes {
from {
background-position: 1rem 0;
}
to {
background-position: 0 0;
}
}
.progress-bar-danger { background-color:#d9534f !important; }
.mt-20 { margin-top:20px; }
.mb-20 { margin-bottom:20px; }
.bg-danger { background-color:#d9534f !important; }
.bg-primary { background-color:#007bff !important; }