@charset 'utf-8';



@font-face { 
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 100; 
	src:	url('/fonts/NotoSansKR-Thin.woff2') format('woff2'),
			url('/fonts/NotoSansKR-Thin.woff') format('woff'), 
			url('/fonts/NotoSansKR-Thin.otf') format('opentype'); 
}
@font-face { 
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 400; 
	src:	url('/fonts/NotoSansKR-Regular.woff2') format('woff2'),
			url('/fonts/NotoSansKR-Regular.woff') format('woff'), 
			url('/fonts/NotoSansKR-Regular.otf') format('opentype'); 
}
@font-face { 
	font-family: 'Noto Sans KR'; 
	font-style: normal; 
	font-weight: 500; 
	src:	url('/fonts/NotoSansKR-Medium.woff2') format('woff2'),
			url('/fonts/NotoSansKR-Medium.woff') format('woff'), 
			url('/fonts/NotoSansKR-Medium.otf') format('opentype'); 
}



/* [tag reset] ___________________________________________________________________________________________________ */

section, nav, header, aside, footer, menu{display:block;} /* for ie 6, 7, 8 */
html,body {margin:0; padding:0; width:100%; height:100%; font-size:12px; line-height:1; color:#445157;}
* { -webkit-text-size-adjust:none; font-family: 'Noto Sans KR', sans-serif, Arial,"Malgun Gothic",Dotum,"돋움",Gulim,"굴림",Helvetica,Apple-Gothic; }
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
input,textarea,select,td{font-size:12px;}
table {border-spacing:0; border-collapse:collapse; width:100%;}
address,caption,cite,code,dfn,th,var {font-style:normal;}
th{font-weight:normal;}
td {}
ol,ul,li {list-style:none;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
hr,legend,caption{display:none;}
img,input,select,textarea{vertical-align:middle;}
img,fieldset {border:none;}
input{letter-spacing:0 !important;}
a{color:#555; text-decoration:none;}
.hover:hover,
a:hover { text-decoration:none; }
menu{margin:0; padding:0;}
label { padding-left:4px; cursor:pointer; }
* { webkit-text-size-adjust: none; -webkit-box-sizing:content-box !important; -moz-box-sizing:content-box !important; }

.test { border:1px solid red; }






img { width:100%; }
.m_bg { visibility:hidden; }

body { text-align:center; background:#2d2d2d; }


h1 { padding:25px 0 15px 0; font-size:36px; font-weight:500; color:#fff; }
h1 span { display:block; padding-top:10px; font-size:30px; font-weight:100; }

.desc_sound { padding:0 0 12px 0; text-align:center; }
.desc_sound p { display:inline-block; color:#fff; padding-left:28px; background:url('/images/beginner_guide/speaker.png') left center no-repeat; background-size:auto 20px; }

.board_wrap { display:inline-block; width:320px; vertical-align:top; background:url('/images/beginner_guide/machine.jpg') 0 0 no-repeat; background-size:100% auto; }





/* 상단 모니터 */
.choice { text-align:center; position:relative; width:277px; height:148px; margin:10px 22px 65px 21px; }
.choice .inner { position:absolute; top:27px; left:0; width:100%; }
.choice .inner ul { width:270px; margin:0 4px 0 3px; }
.choice .inner li { float:left; position:relative; width:90px; height:100%; }
.choice .inner li.on:after { display:block; content:""; width:108px; height:94px; position:absolute; top:-23px; left:-4px; background:url('/images/beginner_guide/game_on.png') 0 0 no-repeat; background-size:100% auto; }
.choice .inner p { clear:both; padding-top:10px; font-size:18px; color:#222; letter-spacing:-1px; }
.choice .depth02 { display:none; position:absolute; top:40px; left:0; width:100%; text-align:center; }
.choice .depth02 li { display:inline-block; width:120px; margin:0 5px; line-height:48px; font-size:16px; color:#fff; background:#d51317; }
.choice .depth02 .back { padding-top:19px; }
.choice .depth02 .back span { display:inline-block; line-height:25px; padding:0 10px; font-size:11px; color:#fff; background:#4bad50; cursor:pointer; }

.game_desc { display:none; position:absolute; top:-1px; left:-1px; width:100%; z-index:99999; }
.game_desc .table { width:100%; background:rgba(0,0,0,0.8); box-shadow:0 0 15px rgba(255,255,255,1); z-index:99999; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.game_desc .table { width:100%; height:100%; display:table; table-layout:fixed; }
.game_desc .cell { display:table-cell; padding:12px 8px; vertical-align:middle; }
.game_desc .cell .txt { color:#fff; line-height:16px; font-size:12px; text-align:left; }
.game_desc .cell .txt strong { display:block; padding-bottom:6px; font-size:13px; }
.game_desc .cell .desc_close { padding-top:13px; text-align:center; }
.game_desc .cell .desc_close span { display:inline-block; line-height:25px; padding:0 10px; font-size:11px; color:#fff; background:#4bad50; cursor:pointer; }





/* 기본 보드판 */
.board_outer { position:relative; display:none; margin:0 26px 5px 24px; width:270px; height:270px; background:#000; -moz-border-radius:200px; -webkit-border-radius:200px; border-radius:200px; z-index:999; }
.board_outer .score { position:absolute; color:#fff; font-weight:bold; line-height:17px; font-size:15px; display:block; width:20px; text-align:center; }
.board_outer .score.n20 { top:0; left:125px; }
.board_outer .score.n1 { top:7px; left:164px; }
.board_outer .score.n18 { top:25px; left:199px; }
.board_outer .score.n4 { top:53px; left:228px; }
.board_outer .score.n13 { top:88px; left:244px; }
.board_outer .score.n6 { top:127px; left:251px; }
.board_outer .score.n10 { top:166px; left:243px; }
.board_outer .score.n15 { top:200px; left:226px; }
.board_outer .score.n2 { top:227px; left:198px; }
.board_outer .score.n17 { top:245px; left:165px; }
.board_outer .score.n3 { top:252px; left:127px; }
.board_outer .score.n19 { top:245px; left:88px; }
.board_outer .score.n7 { top:229px; left:53px; }
.board_outer .score.n16 { top:201px; left:25px; }
.board_outer .score.n8 { top:165px; left:7px; }
.board_outer .score.n11 { top:127px; left:1px; }
.board_outer .score.n14 { top:88px; left:6px; }
.board_outer .score.n9 { top:52px; left:25px; }
.board_outer .score.n12 { top:24px; left:53px; }
.board_outer .score.n5 { top:7px; left:88px; }

svg { -ms-transform: rotate(9deg);
    -webkit-transform: rotate(9deg);
    transform: rotate(9deg);
	cursor:default;
}

/*
a circle { 
	-webkit-transition: all 1.5s ease-in-out;
    -moz-transition: all 1.5s ease-in-out;
    -o-transition: all 1.5s ease-in-out;
    transition: all 1.5s ease-in-out;
}
a:active circle { stroke:#259ad6; }
*/

circle.on { 
	animation:highlight 0.5s;
	-moz-animation:highlight 0.5s;
	-webkit-animation:highlight 0.5s;
	-o-animation:highlight 0.5s;
	animation-iteration-count:1;	/* infinite : repeat */
	-moz-animation-iteration-count:1;
	-webkit-animation-iteration-count:1;
	-o-animation-iteration-count:1;
}
@keyframes highlight
{
	from { }
	to { stroke:#259ad6; }
}

@-moz-keyframes highlight
{
	from { }
	to { stroke:#259ad6; }
}

@-webkit-keyframes highlight
{
	from { }
	to { stroke:#259ad6; }
}

@-o-keyframes highlight
{
	from { }
	to { stroke:#259ad6; }
}


.board_outer #award_desc { display:none; position:absolute; bottom:0; left:0; width:90%; padding:5%; background:#363636; border:1px solid #a3a3a3; }

/* s : 20180117_수정 */
.board_outer #award_desc p { display:none; }
.board_outer #award_desc.pe p.pe,
.board_outer #award_desc.ht p.ht,
.board_outer #award_desc.lo p.lo,
.board_outer #award_desc.hi p.hi,
.board_outer #award_desc.t8 p.t8,
.board_outer #award_desc.tb p.tb,
.board_outer #award_desc.wh p.wh,
.board_outer #award_desc.bust p.bust { display:block; }
/* e : 20180117_수정 */

.board_outer #award_desc strong { display:block; font-size:24px; line-height:28px; color:#ffc600; }
.board_outer #award_desc span { display:block; padding-top:10px; font-size:13px; line-height:19px; color:#fefefe; }




/* 보드판 애니메이션 */
.ani_desc { display:none; position:absolute; top:270px; left:0; width:100%; text-align:center; z-index:99999; }
.ani_desc span { display:inline-block; line-height:28px; padding:0 9px; font-size:14px; background:rgba(255,255,255,1); box-shadow:0 0 15px rgba(0,0,0,1); -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; }
.ani_skip { display:none; position:absolute; top:310px; left:0; width:100%; text-align:center; z-index:99999; }
.ani_skip span { display:inline-block; line-height:29px; padding:0 15px; font-size:13px; color:#fff; background:#d51317; box-shadow:0 0 7px 2px rgba(255,255,255,1); }
a.ani circle { -webkit-transition:700ms; -moz-transition:700ms; -ms-transition:700ms; -o-transition:700ms; transition:700ms; stroke:#259ad6; }







/* 하단 모니터 */
.monitor { width:270px; height:151px; margin:0 27px 12px 23px; position:relative; }
.monitor .left { position:absolute; top:0; left:0; width:65px; padding-bottom:4px; letter-spacing:-1px; background:#000; }

#game_title { font-size:9px; font-weight:bold; color:#fff; text-align:center; line-height:16px; }
#round {  line-height:15px; font-weight:bold; font-size:9px; }
.monitor .left .round_score { display:none; }
.monitor .left li { line-height:15px; font-size:11px; }
.monitor .left li.past { height:0; overflow:hidden; }
.monitor .left li span { display:inline-block; width:20px; text-align:center; vertical-align:top; font-weight:bold; color:#fff; }
.monitor .left li dl { display:inline-block; width:40px; text-align:center; vertical-align:top; }
.monitor .left li dl dt { font-weight:bold; color:#fff; text-indent:-9999px; }
.monitor .left li dl dt.on { text-indent:0; }
.monitor .left li dl dd { text-align:left; }
.monitor.cricket .left li dl dd strong { display:block; float:left; width:8px; margin-left:3px; text-align:center; }
.monitor.cricket .left li dl dd span { width:8px; margin-left:1px; }

.monitor.no_cricket .left li dl dd { width:0; height:0; overflow:hidden; }
.monitor.cricket .left li dl dt { width:0; height:0; overflow:hidden; }


.monitor.player1 .left #game_title { border-bottom:2px solid #f7a001; }
.monitor.player1 .left #round,
.monitor.player1 .left li strong,
.monitor.player1 .center .now p { color:#f7a001; }

.monitor.player2 .left #game_title { border-bottom:2px solid #00baff; }
.monitor.player2 .left #round,
.monitor.player2 .left li strong,
.monitor.player2 .center .now p { color:#00baff; }


.monitor.no_cricket .now .score,
.monitor.cricket .now .playing { display:block; }

.monitor.cricket .now .score,
.monitor.no_cricket .now .playing { display:none; }




.monitor .center .now { margin-left:30px; }
.monitor .center .now p { display:table-cell; width:250px; height:85px; padding-top:15px; text-align:center; vertical-align:middle; font-size:72px; font-weight:bold; }

.monitor .center .bottom { margin-top:3px; text-align:center; }
.monitor .center .bottom .darts_throw span { display:inline-block; width:72px; height:17px; line-height:17px;  background:#040404 url('/images/beginner_guide/throw_default.gif') center center no-repeat; background-size:auto 16px; color:#fff; vertical-align:top; text-transform: capitalize; }
.monitor .center .bottom .darts_throw span:first-child { margin-left:0; }
.monitor .center .bottom .darts_throw span em { font-style:normal; }
.monitor .center .bottom .darts_throw span em.bull { display:inline-block; width:0;height:0; overflow:hidden; }
.monitor .center .bottom .pyr { clear:both; padding:2px 1px 1px 1px; }
.monitor .center .bottom .pyr span { float:left; width:50%; line-height:28px; background:#ccc; color:#2c2c2c; }
.monitor .center .bottom .pyr span em { display:block; float:left; width:50%; line-height:15px; font-size:11px; font-style:normal; }
.monitor .center .bottom .pyr span strong { display:block; float:left; width:50%; text-align:center; font-size:24px; }

.monitor .center .bottom .pyr span#score_1.on { background:#f7a001; }
.monitor .center .bottom .pyr span#score_2.on { background:#00baff; }

.monitor.player1 .center .bottom .darts_throw span.current { background:#040404 url('/images/beginner_guide/throw_p1.gif') center center no-repeat; background-size:auto 16px; }
.monitor.player2 .center .bottom .darts_throw span.current { background:#040404 url('/images/beginner_guide/throw_p2.gif') center center no-repeat; background-size:auto 16px; }
.monitor .center .bottom .darts_throw span.done { background:#040404 !important; }


.monitor.player1 #score_now1,
.monitor.player2 #score_now2,
.monitor.player1 #player1,
.monitor.player2 #player2 { display:block; }

.monitor.player1 #score_now2,
.monitor.player2 #score_now1,
.monitor.player1 #player2,
.monitor.player2 #player1 { display:none; }


/* player change */
.player_change { display:none; position:absolute; top:38px; left:25px; width:195px; padding-left:25px; background:url('/images/beginner_guide/change_left.png') left center no-repeat; background-size:auto 100%; }
.player_change.on { display:block; }
.player_change div { height:45px; padding-right:25px; background:url('/images/beginner_guide/change_right.png') right center no-repeat; background-size:auto 100%; }
.player_change div p { position:absolute; top:3px; left:3px; width:214px; height:39px; background:rgba(0,0,0,0.6); }
.player_change div p img { display:inline-block; width:auto; height:31px; margin-top:4px; vertical-align:top; }
.player_change div p span { display:inline-block; content:""; padding:4px; margin-top:4px; background:rgba(185,185,185,1); -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px; 
	animation:flick2 0.8s;
	-moz-animation:flick2 0.8s; /* Firefox */
	-webkit-animation:flick2 0.8s; /* Safari and Chrome */
	-o-animation:flick2 0.8s; /* Opera */
	animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
}
.player_change div p span em { display:inline-block; content:""; padding:2px; background:rgba(173,093,094,1); -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px; }
.player_change div p span em:after { display:inline-block; content:""; width:17px; height:17px; background:rgba(157,024,027,1); -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px; }

@keyframes flick2
{
	from { opacity:0; }
	to { opacity:1; }
}

@-moz-keyframes flick2 /* Firefox */
{
	from { opacity:0; }
	to { opacity:1; }
}

@-webkit-keyframes flick2 /* Safari and Chrome */
{
	from { opacity:0; }
	to { opacity:1; }
}

@-o-keyframes flick2 /* Opera */
{
	from { opacity:0; }
	to { opacity:1; }
}





/* 위너표시 레이어 */
#winner_layer { display:none; position:absolute; top:0; left:0; width:269px; height:100%; background:rgba(0,0,0,0.85); text-align:center; z-index:999; }
#winner_layer .tit { padding-top:15px; font-size:18px; font-weight:bold; color:#fff; }
#winner_layer .who { padding-top:30px; }
#winner_layer .who span { display:inline-block; padding:15px; font-size:15px; color:#000; font-weight:bold; }
#winner_layer .who span.player1 { background:#f7a001; }
#winner_layer .who span.player2 { background:#00baff; }






/* 현재 던지는 점수 2d2d2d*/
.throw { text-align:center; padding-top:15px; }
.throw li { display:inline-block; width:31%; height:32px; line-height:32px; font-size:16px; font-weight:bold; background:#f1f1f1; text-align:center; vertical-align:top; text-transform: capitalize; }

.next { visibility:hidden; padding:12px 0 45px 0; text-align:center; }
.next.on { visibility:visible; }
.next a { display:inline-block; background:#d51317; color:#fff; font-size:16px; width:80px; height:40px; padding:18px 0 22px 0; text-align:center; -moz-border-radius:40px; -webkit-border-radius:40px; border-radius:40px; }
.next a span, .next a strong { line-height:20px; display:block; }
.next a.on { 
	animation:flick 0.8s;
	-moz-animation:flick 0.8s; /* Firefox */
	-webkit-animation:flick 0.8s; /* Safari and Chrome */
	-o-animation:flick 0.8s; /* Opera */
	animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
}
@keyframes flick
{
	from { color:#fff; background: #2d2d2d; }
	to { color:#fff; background: #d51317; }
}

@-moz-keyframes flick /* Firefox */
{
	from { color:#fff; background: #2d2d2d; }
	to { color:#fff; background: #d51317; }
}

@-webkit-keyframes flick /* Safari and Chrome */
{
	from { color:#fff; background: #2d2d2d; }
	to { color:#fff; background: #d51317; }
}

@-o-keyframes flick /* Opera */
{
	from { color:#fff; background: #2d2d2d; }
	to { color:#fff; background: #d51317; }
}






/* 결과 stats */
.monitor .result { position:absolute; top:0; left:0; width:269px; height:100%; background:#fff; z-index:999; box-shadow:0 10px 9px -9px rgba(0,0,0,0.6) inset; text-align:center; }
.monitor .result .win { visibility:hidden; }
.monitor .result .p_result { position:absolute; top:5px; width:75px; }
.monitor .result .player1 { left:10px; }
.monitor .result .player2 { right:10px; }
.monitor .result .player1 .player { color:#fff; background:#f7a001; }
.monitor .result .player2 .player { color:#fff; background:#00b0f3; }
.monitor .result p { height:23px; line-height:23px; background:#f3f3f3; }
.monitor .result p.even { background:#fff; }
.monitor .result .player1 p { font-weight:bold; color:#ff9933; }
.monitor .result .player2 p { font-weight:bold; color:#3399ff; }
.monitor .result .dt { display:inline-block; vertical-align:top; width:100px; margin-top:5px; }
.monitor .result .dt p { font-weight:bold; }
.monitor .result .dt p.tit { line-height:19px; font-size:17px; letter-spacing:-1px; color:#000; }
.monitor .result .dt p.tit2 { letter-spacing:-1px; color:#000; }
.monitor .result p img { width:100%; vertical-align:top; }
.monitor .result p img.rating { width:auto; height:22px; }
.monitor .result .p_result .box { box-shadow:0 0 4px 1px rgba(0,0,0,0.5); }
.monitor .result.player_1 .player1 .win,
.monitor .result.player_2 .player2 .win { visibility:visible; }












/* 크리켓마크 */
.marks { display:inline-block; width:8px; height:8px; position:relative; vertical-align:top; margin-top:4px; }
.marks:before, .marks:after { display:block; content:""; }
.marks em { position:absolute; top:0; left:0; width:11px; height:1px; text-indent:-9999px; overflow:hidden;
	-webkit-transform-origin:8px 4px;
	-moz-transform-origin:8px 4px;
	-ms-transform-origin:8px 4px;
	-o-transform-origin:8px 4px;
	transform-origin:8px 4px;

	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	transform:rotate(-45deg); 
}
.mark2:before, .mark3:before { position:absolute; top:0; left:0; width:11px; height:1px; 
	-webkit-transform-origin:1px 0; 
	-moz-transform-origin:1px 0; 
	-ms-transform-origin:1px 0; 
	-o-transform-origin:1px 0; 
	transform-origin:1px 0; 

	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	transform:rotate(45deg);
}
.mark3:after { position:absolute; top:0; left:0; width:5px; height:5px; border:1px solid #000; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }


#player1 .marks em, 
#player1 .marks:before,
#cricket1 .marks em, 
#cricket1 .marks:before { background:#f7a001; }
#player1 .marks:after,
#cricket1 .marks:after { border-color:#f7a001; }
#player2 .marks em, 
#player2 .marks:before,
#cricket2 .marks em, 
#cricket2 .marks:before { background:#00baff; }
#player2 .marks:after,
#cricket2 .marks:after { border-color:#00baff; }






/* 크리켓현황 */
.playing { display:none; }
.playing .cricket_board { display:inline-block; width:110px; background:#000; vertical-align:top; text-align:center; position:relative; }
.playing .cricket_board .players#cricket1 { left:0; }
.playing .cricket_board .players#cricket2 { right:0; }
.playing .players { float:left; width:40px; padding:1px 0; }
.playing .players:after { display:block; content:""; width:18px; height:96px; border:2px solid rgba(100,100,100,0.65); position:absolute; top:0; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; }
.playing .players#cricket1:after { left:16px;}
.playing .players#cricket2:after { right:16px; }
.player1 .playing .players#cricket1:after { border-color:rgba(235,208,28,0.65); }
.player2 .playing .players#cricket2:after { border-color:rgba(0,186,255,0.65); }
.playing .rounds { float:left; width:30px; padding:1px 0; }
.playing .rounds li { font-weight:bold; color:#fff; }
.playing ul li { height:14px; line-height:14px; }
.players#cricket1 ul li { padding-left:15px; }
.players#cricket2 ul li { padding-right:15px; }
.playing ul li:nth-child(even) { background:#161616; }

.cricket_board #cricket1 .closed { position:relative; }
.cricket_board #cricket1 .closed:after { content:""; display:block; width:90px; height:2px; background:#c2c2c2; position:absolute; top:7px; left:10px; z-index:99; }
.cricket_board .rounds .closed { color:#999; }
.cricket_board .closed .marks em, 
.cricket_board .closed .marks:before { background:#999 !important; }
.cricket_board .closed .marks:after { border-color:#999 !important; }





/* 어워드 */
.monitor .award_movie { display:none; position:absolute; top:0; left:0; width:100%; z-index:9999; }
.monitor .award_movie img { width:100%; }

.sound { width:0; height:0; overflow:hidden; visibility:hidden; }