@charset "utf-8";



@keyframes fadeinn { from {opacity:0; filter:alpha(opacity=0)} to {opacity:1; filter:alpha(opacity=100)} }

.liveContent {
	position: relative;
	width: 830px;
	height: 680px;
	background: url('/Assets/res/live/powerladder/img/game_bg.jpg') no-repeat;
	overflow: hidden;
	border-radius: 10px
}

.title {position:absolute; left:0; top:15px; width:100%; text-align:center}

/* 추가 - Ranking popup */
div.ranking_popup {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 9998
}

	div.ranking_popup.on {
		display: block
	}

	div.ranking_popup > div.ranking_header {
		position: relative;
		background: #462b72;
		padding: 20px 25px
	}

		div.ranking_popup > div.ranking_header > em {
			font-weight: 500;
			font-size: 22px;
			color: #FFF
		}

		div.ranking_popup > div.ranking_header > span {
			position: absolute;
			right: 25px;
			top: 20px;
			cursor: pointer;
			transition: .3s
		}

			div.ranking_popup > div.ranking_header > span:hover {
				opacity: .8
			}

	div.ranking_popup > div.ranking_wrap {
		position: relative;
		height: 390px;
		background: #2f1c4e
	}

		div.ranking_popup > div.ranking_wrap > div.ranking_container {
			position: absolute;
			left: 35px;
			top: 30px;
			width: 760px;
			height: 330px; /* overflow-y:scroll */
			overflow-x: hidden;
		}

			div.ranking_popup > div.ranking_wrap > div.ranking_container > div.ranking_loading {
				text-align: center;
			}

			div.ranking_popup > div.ranking_wrap > div.ranking_container > ul {
			}

				div.ranking_popup > div.ranking_wrap > div.ranking_container > ul * {
					color: #FFF;
					font-weight: 500
				}

				div.ranking_popup > div.ranking_wrap > div.ranking_container > ul .ranking_rank img {
					width: 30px;
				}

				div.ranking_popup > div.ranking_wrap > div.ranking_container > ul .profile img {
					width: 28px;
				}

				div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li {
					width: 750px;
					padding: 9px 7px;
					background: #48326b;
					border-radius: 8px;
					overflow: hidden;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					font-size: 12px;
				}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div {
						float: left
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > var {
						display: block;
						float: left;
						width: 1px;
						height: 10px;
						margin: 0 8px;
						background: #5f4e67
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_rank {
						width: 30px;
						text-align: center;
						font-size: 14px;
						line-height: 27px
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_name {
						width: 150px;
						overflow: hidden;
						display: flex;
						align-items: center;
					}

						div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_name > span {
							display: block;
							float: left
						}

						div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_name > em {
							display: block;
							float: left;
							margin: 0 5px;
							font-size: 13px
						}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_continue {
						width: 75px;
						text-align: center;
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_score {
						width: 100px;
						text-align: center;						
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_subject {
						width: 290px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;						
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_chat {
						display: block;
						position: relative;
						width: 32px;
						height: 32px;
						line-height: 29px;
						text-align: center;
						background: #645c69;
						border-radius: 15px
					}

						div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li > div.ranking_chat.on {
							background: #e2e2e2;
							cursor: pointer
						}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li .red {
						color: #ff5961
					}

					div.ranking_popup > div.ranking_wrap > div.ranking_container > ul > li .blue {
						color: #44A0F4
					}

div.mypick_popup {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	z-index: 9998
}

	div.mypick_popup.on {
		display: block
	}

	div.mypick_popup > div.mypick_header {
		position: relative;
		background: #462b72;
		padding: 20px 25px
	}

		div.mypick_popup > div.mypick_header > em {
			font-weight: 500;
			font-size: 22px;
			color: #FFF
		}

		div.mypick_popup > div.mypick_header > span {
			position: absolute;
			right: 25px;
			top: 20px;
			cursor: pointer;
			transition: .3s
		}

			div.mypick_popup > div.mypick_header > span:hover {
				opacity: .8
			}

	div.mypick_popup > div.mypick_wrap {
		position: relative;
		height: 390px;
		background: #2f1c4e
	}

		div.mypick_popup > div.mypick_wrap > div.mypick_container {
			position: absolute;
			left: 35px;
			top: 30px;
			width: 760px;
			height: 330px; /* overflow-y:scroll */
			overflow-x: hidden;
		}

			div.mypick_popup > div.mypick_wrap > div.mypick_container > div.mypick_loading {
				text-align: center;
			}

			div.mypick_popup > div.mypick_wrap > div.mypick_container > ul {
			}

				div.mypick_popup > div.mypick_wrap > div.mypick_container > ul * {
					color: #FFF;
					font-weight: 500;
				}

				div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li {
					width: 750px;
					padding: 9px 7px;
					background: #48326b;
					border-radius: 8px;
					overflow: hidden;
					margin-bottom: 5px;
					font-size: 13px;
					display: flex;
					align-items: center;
				}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div {
						float: left;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > var {
						display: block;
						float: left;
						width: 1px;
						height: 30px;
						margin: 0 7px;
						background: #5f4e67;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_round {
						width: 150px;
						overflow: hidden;
						text-align: center;
						font-size: 14px;
						line-height: 27px
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_type {
						width: 150px;
						overflow: hidden;
					}

						div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_type > span {
							display: block;
							float: left;
						}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_val {
						width: 150px;
						overflow: hidden;
					}

						div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_val > span {
							display: block;
							float: left;
						}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_result {
						width: 100px;
						text-align: center;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li > div.mypick_val > span {
						display: block;
						float: left;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li .red {
						color: #ff5961;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li .blue {
						color: #44A0F4;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li .green {
						color: #41ba1a;
					}

					div.mypick_popup > div.mypick_wrap > div.mypick_container > ul > li .gray {
						color: #bebebe;
					}

.guide_popup {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 57px 52px 0;
	background: rgba(0,0,0,0.9);
	z-index: 9999
}
	.guide_popup.on {
		display: block
	}

	.guide_popup > div {
		width: 100%;
		border: 2px solid #FFF;
		border-radius: 22px;
		overflow: hidden
	}

		.guide_popup > div > h1 {
			height: 74px;
			line-height: 74px;
			padding: 0 28px 0 38px;
			font-weight: 500;
			font-size: 25px;
			color: #FFF;
			background: #462b72
		}

			.guide_popup > div > h1 > span {
				float: right;
				cursor: pointer;
				transition: .3s
			}

				.guide_popup > div > h1 > span:hover {
					opacity: .8
				}

		.guide_popup > div > h2 {
			padding: 30px 38px 0;
			background: #2f1c4e
		}

			.guide_popup > div > h2 > span {
				display: block;
				margin-bottom: 10px;
				font-weight: 500;
				font-size: 16px;
				color: #d994ff
			}

			.guide_popup > div > h2 > em {
				display: block;
				padding-bottom: 35px;
				font-weight: 500;
				font-size: 12px;
				color: #e7dbef;
				line-height: 1.7
			}

			.guide_popup > div > h2 > textarea {
				width: 458px;
				height: 47px;
				margin-bottom: 5px;
				padding: 10px 15px;
				text-align: left;
				font-size: 15px;
				color: #FFF;
				background: #d994ff;
				border: none;
				border-radius: 10px;
				resize: none
			}

.share_popup {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 57px 52px 0;
	background: rgba(0,0,0,0.9);
	z-index: 9999
}

	.share_popup.on {
		display: block
	}

	.share_popup > div {
		width: 100%;
		border: 2px solid #FFF;
		border-radius: 22px;
		overflow: hidden
	}

		.share_popup > div > h1 {
			height: 74px;
			line-height: 74px;
			padding: 0 28px 0 38px;
			font-weight: 500;
			font-size: 25px;
			color: #FFF;
			background: #462b72
		}

			.share_popup > div > h1 > span {
				float: right;
				cursor: pointer;
				transition: .3s
			}

				.share_popup > div > h1 > span:hover {
					opacity: .8
				}

		.share_popup > div > h2 {
			padding: 30px 38px 0;
			background: #2f1c4e
		}

			.share_popup > div > h2 > span {
				display: block;
				margin-bottom: 10px;
				font-weight: 500;
				font-size: 16px;
				color: #d994ff
			}

			.share_popup > div > h2 > em {
				display: block;
				padding-bottom: 35px;
				font-weight: 500;
				font-size: 12px;
				color: #e7dbef;
				line-height: 1.5
			}

				.share_popup > div > h2 > em > p {
					display: block;
					position: relative;
					border-radius: 5px;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					vertical-align: top;
					top: 0;
				}

				.share_popup > div > h2 > em > button {
					display: block;
					position: relative;
					width: 145px;
					height: 45px;
					border-radius: 5px;
					background-color: #462b72;
					align-items: center;
					justify-content: center;
					margin-left: auto;
					vertical-align: top;
					top: 0;
					color: #fff;
					font-weight: 700;
					letter-spacing: -1px
				}

			.share_popup > div > h2 > textarea {
				width: 458px;
				height: 47px;
				margin-bottom: 5px;
				padding: 10px 15px;
				text-align: left;
				font-size: 15px;
				color: #FFF;
				background: #d994ff;
				border: none;
				border-radius: 10px;
				resize: none
			}

.btn_icon {position:absolute; top:22px; width:67px; height:75px; cursor:pointer; transition:.3s}
.btn_icon:hover {filter:brightness(150%)}
.ranking {left:16px; background:url('../img/ranking.png') no-repeat}
.mypick {left:88px; background:url('../img/mypick.png') no-repeat}
.guide {right:156px; background:url('../img/guide.png') no-repeat}
.share {right:89px; background:url('../img/share.png') no-repeat}

.sound.on {
	right: 20px;
	background: url('../img/sound_on.png') no-repeat
}

.sound.off {
	right: 20px;
	background: url('../img/sound_off.png') no-repeat
}

.info_text {position:absolute; left:0; top:121px; width:100%; text-align:center; font-weight:400; font-size:13px; color:#ddc8ef}
.info_text > span {font-weight:400; color:#39e458}

.game_area {position:absolute; left:311px; top:221px; width:208px; height:256px; z-index:100}
.game_area > label {position:absolute; width:44px; height:44px; opacity:0; transition:.3s; z-index:109}
.game_area > label.on {opacity:1}
.game_area > label#game_left {left:0; top:0; background:url('../img/game_left.png') no-repeat}
.game_area > label#game_right {right:0; top:0; background:url('../img/game_right.png') no-repeat}
.game_area > label#game_odd {left:0; bottom:0; background:url('../img/game_odd.png') no-repeat}
.game_area > label#game_even {right:0; bottom:0; background:url('../img/game_even.png') no-repeat}
.game_area > ul {position:absolute; left:27px; top:83px}
.game_area > ul > li {width:154px; height:10px; background:#604770}
.game_area > ul.line3 {left:27px; top:83px}
.game_area > ul.line3 > li {margin-bottom:30px}
.game_area > ul.line3 > li:last-child {display:none}
.game_area > ul.line4 {left:27px; top:67px}
.game_area > ul.line4 > li {margin-bottom:27px}
.game_area > div {position:absolute; background:#39e458; width:10px; height:0px; transition:.4s}
.game_area > div.left_3_1 {left:17px; top:44px; height:49px}
.game_area > div.left_3_2 {left:17px; top:93px; height:40px}
.game_area > div.left_3_3 {left:17px; top:133px; height:40px}
.game_area > div.left_3_4 {left:17px; top:173px; height:39px}
.game_area > div.left_4_1 {left:17px; top:44px; height:33px}
.game_area > div.left_4_2 {left:17px; top:77px; height:37px}
.game_area > div.left_4_3 {left:17px; top:114px; height:37px}
.game_area > div.left_4_4 {left:17px; top:151px; height:37px}
.game_area > div.left_4_5 {left:17px; top:188px; height:24px}
.game_area > div.right_3_1 {right:17px; top:44px; height:49px}
.game_area > div.right_3_2 {right:17px; top:93px; height:40px}
.game_area > div.right_3_3 {right:17px; top:133px; height:40px}
.game_area > div.right_3_4 {right:17px; top:173px; height:39px}
.game_area > div.right_4_1 {right:17px; top:44px; height:33px}
.game_area > div.right_4_2 {right:17px; top:77px; height:37px}
.game_area > div.right_4_3 {right:17px; top:114px; height:37px}
.game_area > div.right_4_4 {right:17px; top:151px; height:37px}
.game_area > div.right_4_5 {right:17px; top:188px; height:24px}

.game_area > dl {display:none; position:absolute; left:17px; top:83px}
.game_area > dl > dd {position:relative; width:174px; height:10px; overflow:hidden}
.game_area > dl.line3 {left:17px; top:83px}
.game_area > dl.line3 > dd {margin-bottom:30px}
.game_area > dl.line3 > dd:last-child {display:none}
.game_area > dl.line4 {left:17px; top:67px}
.game_area > dl.line4 > dd {margin-bottom:27px}
.game_area > dl > dd > span {position:absolute; top:0; width:174px; height:10px; background:#39e458; transition:.5s}
.game_area > dl > dd.lstart > span {left:-174px}
.game_area > dl > dd.rstart > span {right:-174px}
.game_area > dl > dd.left > span {left:0px}
.game_area > dl > dd.right > span {right:0px}

.info {position:absolute; left:278px; top:546px; width:276px}
	.info > div {width:100%; margin-bottom:12px; overflow:hidden}
	.info > div > h1 {float:left; width:50%}
	.info > div > h1 > span {display:block; font-weight:500; font-size:15px; color:#FFF}
	.info > div > h1 > span > strong {font-weight:500; color:#39e458}
	.info > div > h1 > em {display:block; font-weight:500; font-size:13px; color:#73657d}
	.info > div > h2 {float:right; width:50%; text-align:right; font-family:"Arial Black"; font-size:28px; color:#FFF}
	.info > h2 {width:274px; height:14px; margin:0 auto 15px; padding:1px; background:url('../img/gauge_bg.png') no-repeat; border-radius:8px}
	.info > h2 > var {display:block; width:100%; height:14px; background:linear-gradient(to top, #a4a4a4, #d9d9d9); border-radius:7px}
	.info > h3 {text-align:center; font-weight:500; font-size:12px; color:#4f4158}

.wattingBox {position:absolute; left:328px; top:288px; width:174px; height:121px; background:#604770; overflow:hidden; z-index:999; opacity:1; transition:.7s}
.wattingBox.off {opacity:0}
.wattingBox > div {padding-top:30px;line-height:1.3}
.wattingBox > div > em {display:block; text-align:center; color:#FFF; font-size:25px; font-weight:700}
.wattingBox > div > span {display:block; text-align:center; color:#c8b4d7; font-size:18px; font-weight:500}

.enddingBox {position:absolute; left:268px; top:265px; width:294px; height:125px; background:url('../img/result_bg.png') no-repeat; overflow:hidden; z-index:998; transition:.4s; opacity:0}
.enddingBox.on {top:285px; opacity:1}
.enddingBox > em {display:block; text-align:center; color:#FFF; font-size:16px; font-weight:600; margin-top:25px}
.enddingBox > em span {color:#FFF; font-size:16px; font-weight:600}
.enddingBox > div {margin-top:35px; margin-left:6px; overflow:hidden}
.enddingBox > div > span {display:block; float:left; color:#ae9bba; font-size:14px; font-weight:400; margin:7px 0 0 50px}
.enddingBox > div > code {float:left; position:relative; width:30px; height:30px; line-height:30px; margin-left:6px; text-align:center; font-weight:400; font-size:13px; color:#FFF; border-radius:15px}

.userpick {position:absolute; left:11px; top:165px; width:247px; height:484px}
	.userpick > h1 {height:48px; line-height:48px; margin-bottom:3px; text-align:center; font-weight:500; font-size:18px; color:#FFF}
	.userpick > div.side_box {
		width: 247px;
		height: 436px;
		overflow: hidden auto
	}
		.userpick > div.side_box > ul {
		}
			.userpick > div.side_box > ul > li {
				position: relative;
				width: 225px;
				height: 50px;
				padding: 7px 11px 0px
			}
				.userpick > div.side_box > ul > li:hover > h1 {
					background: #55465e
				}
				.userpick > div.side_box > ul > li > h1 {
					width: 225px;
					height: 48px;
					padding: 9px;
					background: #2f1c4e;
					border-radius: 7px;
					overflow: hidden;
					transition: .3s;
					cursor: pointer;
				}
					.userpick > div.side_box > ul > li > h1 > * {
						float: left
					}
					.userpick > div.side_box > ul > li > h1 > em {
						display: block;
						width: 125px;
						height: 30px;
						line-height: 30px;
						font-weight: 400;
						font-size: 13px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #FFF
					}
					.userpick > div.side_box > ul > li > h1 > span {
						display: block;
						position: relative;
						width: 30px;
						height: 30px;
						line-height: 27px;
						color: #ffe578 !important;
					}
					.userpick > div.side_box > ul > li > h1 > code {
						display: block;
						position: relative;
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						background: #645c69;
						border-radius: 15px;
						margin-right: 5px
					}
					.userpick > div.side_box > ul > li > h1 > span.profile {
						margin-right: 4px;
						font-size: 13px;
						color: #fff;
						font-weight: 600
					}
					.userpick > div.side_box > ul > li > h1 > span.profile img {
						width: 28px;
					}
						.userpick > div.side_box > ul > li > h1 > span.profile .icon_level {
							width: 28px;
							background: rgba(255,255,255,.3);
							border-radius: 50%;
							padding: 2px;
						}
					.userpick > div.side_box > ul > li > h1 > span.menu {
					}
						.userpick > div.side_box > ul > li > h1 > span.menu > img {
							margin-top: -3px;
							opacity: .5;
							transition: .3s
						}
						.userpick > div.side_box > ul > li > h1 > span.menu.on {
							background: #bd75ea;
							cursor: pointer;
						}
							.userpick > div.side_box > ul > li > h1 > span.menu.on > img {
								opacity: 1
							}
				.userpick > div.side_box > ul > li > h2 {
					position: absolute;
					left: 7px;
					top: 5px;
					width: 19px;
					height: 19px;
					line-height: 19px;
					text-align: center;
					font-family: "Arial Black";
					font-size: 12px;
					color: #572477;
					background: #c9a1e2;
					border-radius: 50%
				}

    #pick_popup {display:none; position:absolute; left:11px; top:0px; width:225px; height:98px; background: rgba(47,28,78,0.97); border: 2px solid #d0c0db; border-radius:10px; overflow:hidden; z-index:2}
    #pick_popup > em {display:block; height:32px; line-height:32px; text-align:center; font-weight:400; font-size:13px; color:#FFF; background:#462b72; overflow:hidden}
    #pick_popup > ul {padding:11px}
    #pick_popup > ul > li {margin-bottom:4px; font-weight:400; font-size:12px; color:#FFF; overflow:hidden}
    #pick_popup > ul > li > label {display:inline-block; margin-right:8px; padding:3px 10px; background:#735a82; border-radius:10px; font-weight:500}
    #pick_popup > ul > li > span {}
    #pick_popup > ul > li > span > strong {font-weight:500}
    #pick_popup > ul > li > span > strong.red {color: #ED407F}
    #pick_popup > ul > li > span > strong.blue {color: #44A0F4}

.side_box {
	-ms-overflow-style: none;
	scrollbar-width: none
}
.side_box::-webkit-scrollbar {
	display: none
}
	
	.result {position:absolute; left:585px; top:165px; width:225px; height:484px}
	.result > h1 {height:48px; line-height:48px; text-align:center; font-size:18px; background:url('../img/line.png') no-repeat 110px 19px}
	.result > h1 > span {padding:0 14px; font-weight:500; color:#5c5063; cursor:pointer; transition:.2s}
	.result > h1 > span:hover {color:#FFF}
	.result > h1 > span.on {color:#FFF}
	.result > div {width:225px; height:436px; overflow:hidden auto}
	.result > div.history_box {display:none}
	.result > div > ul {}
	.result > div > ul > li {height:73px; margin-top:7px; border-radius:7px; overflow:hidden}
	.result > div > ul > li:first-child {margin-top:10px}
	.result > div > ul > li > h1 {height:27px; line-height:27px; text-align:center; font-weight:400; font-size:13px; color:#d0c0db; background:#462b72}
	.result > div > ul > li > h1 > span {font-weight:400; color:#FFF}
	.result > div > ul > li > h2 {height:46px; line-height:46px; text-align:center; background:#2f1c4e}
	.result > div > ul > li > h2 > span {display:inline-block; position:relative; width:30px; height:30px; line-height:30px; margin-left:6px; text-align:center; font-weight:400; font-size:13px; color:#FFF; border-radius:15px}
	.result > div > ul > li > h2 > code {display:inline-block; position:relative; width:32px; height:32px; line-height:32px; margin-left:6px; text-align:center; font-weight:400; font-size:14px; color:#FFF; border-radius:15px}
	.result > div.history_box > ul > li > h2 > code {margin-left:3px}
	.result > div > ul > li > h2 > code:first-child {margin-left:0}

    /* 유저픽/결과 부분 balls */
    code.left {background:#44A0F4 !important}
    code.left::before {content:"좌"; font-weight:600; font-size:14px; color:#FFF}
    code.right {background:#ED407F !important}
    code.right::before {content:"우"; font-weight:600; font-size:14px; color:#FFF}
    code.line3 {background:#44A0F4 !important}
    code.line3::before {content:"3줄"; font-weight:600; font-size:14px; color:#FFF}
    code.line4 {background:#ED407F !important}
    code.line4::before {content:"4줄"; font-weight:600; font-size:14px; color:#FFF}
    code.odd {background:#44A0F4 !important}
    code.odd::before {content:"홀"; font-weight:600; font-size:14px; color:#FFF}
    code.even {background:#ED407F !important}
    code.even::before {content:"짝"; font-weight:600; font-size:14px; color:#FFF}
    code.under {background:#44A0F4 !important}
    code.under::before {content:"언더"; font-weight:600; font-size:14px; color:#FFF}
    code.over {background:#ED407F !important}
    code.over::before {content:"오버"; font-weight:600; font-size:14px; color:#FFF}
    code.small {background:#41ba1a !important}
    code.small::before {content:"소"; font-weight:600; font-size:14px; color:#FFF}
    code.mid {background:#44A0F4 !important}
    code.mid::before {content:"중"; font-weight:600; font-size:14px; color:#FFF}
    code.large {background:#ED407F !important}
    code.large::before {content:"대"; font-weight:600; font-size:14px; color:#FFF}
    code.lock {background:url('../img/lock.png') no-repeat center 6px !important; background-color:#645c69 !important}
	code > strong {display:block; position:absolute; right:-4px; top:-2px; width:14px; height:14px; line-height:14px; font-family:"Arial Black"; font-size:14px; color:#f8de4f; text-shadow:0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 2px black}
    code.red {background:#ED407F}
    code.yellow {background:#eac516}
    code.green {background:#41ba1a}
    code.blue {background:#44A0F4}
    code.power {background:#6d7275}


code.left,
code.line3,
code.odd,
code.blue {
	background: url(../../img/code_blue.png) no-repeat center !important;
	background-size: 34px !important;
	box-sizing: border-box;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

code.right,
code.line4,
code.even,
code.red {
	background: url(../../img/code_red.png) no-repeat center !important;
	background-size: 34px !important;
	box-sizing: border-box;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}


.result_box {
	-ms-overflow-style: none;
	scrollbar-width: none
}

	.result_box::-webkit-scrollbar {
		display: none
	}

.history_box {
	-ms-overflow-style: none;
	scrollbar-width: none
}

	.history_box::-webkit-scrollbar {
		display: none
	}

.ranking_container::-webkit-scrollbar,
.mypick_container::-webkit-scrollbar {
	width: 8px;
}

.ranking_container::-webkit-scrollbar-thumb,
.mypick_container::-webkit-scrollbar-thumb {
	background-color: #aaa;
	border-radius: 100px;
}