@import url("font-nanumquare.css");
@media (max-width:360px) { * { font-size: 12px; } }
@media (min-width:361px) and (max-width:480px) { * { font-size: 14px; } }
@media (min-width:481px) and (max-width:640px) { * { font-size: 16px; } }
@media (min-width:641px) and (max-width:720px) { * { font-size: 18px; } }
@media (min-width:721px) and (max-width:960px) { * { font-size: 20px; } }
@media (min-width:961px) { * { font-size: 24px; } }

* {
	color: #888;
	font-family: "NanumSquare";
	text-align: center;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	line-height: 1.5em;
}

a, a:hover, a:active {
	color: inherit;
	text-decoration: none;
}

.content-bg {
	position: fixed;
	width: 100%;
	height: 100%;
	background-image: url(../images/bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.content {
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 1em;
}
.lotto-logo {
	color: #fff;
	font-family: "NanumSquareB";
	font-weight: bold;
	font-size: 3em; 
	margin: 0.5em 0;
}

.lotto-price {
	color: #fff;
	margin: 2em 0;
	font-size: 1em; 
	font-weight: bold;
}

.lotto-box {
	margin: 1em auto;
	position: relative;
	padding: 1em;
	background-color: #fff;
	border-radius: 1em;
	border:0.2em solid #048cfe;
	width: 22em;
	height: 4.5em;
	font-weight: bold;
}
.lotto-box > .blank {
	height:0.75em;
}
.lotto-box > .result {
	padding-top:0.75em;
	display: none;
}
.lotto-box > span {
	color: #048cfe;
}
.lotto-box ul {
	margin: 0 auto;
	display: inline-block;
}
.lotto-box ul li {
	float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 3em;
	height: 3em;
	line-height: 3em;
	border-radius: 50%;
	margin: 0 0.3em;
	font-family: "NanumSquareB";
	font-weight: bold;
	color: #fff;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.lotto-box ul li.red { background-image: url(../images/bg_ball_red.png); }
.lotto-box ul li.blue { background-image: url(../images/bg_ball_blue.png); }
.lotto-box ul li.black { background-image: url(../images/bg_ball_black.png); }
.lotto-box ul li.green { background-image: url(../images/bg_ball_green.png); }
.lotto-box ul li.yellow { background-image: url(../images/bg_ball_yellow.png); }

.lotto-box .back {
	position: absolute;
	top: 2.5em;
	left: 1em;
}
.lotto-box .next {
	position: absolute;
	top: 2.5em;
	right: 1em;
}

.lotto-btn {
	margin: 1em;
	display: inline-block;
	padding: 0.5em 1.5em;
	background-color: #048cfe;
	border-radius: 0.5em;
	font-family: "NanumSquareB";
	font-weight: bold;
	color: #fff;
}
.lotto-btn:hover {
	background-color: #fff;
	color: #048cfe;
}

.copyright {
	margin: 2em;
	color: #fff;
	font-size: 0.8em;
}

.data-youtube { position:relative; display:inline-block; text-align:center; width:100%; max-width:1200px; margin-top:2em; }
.data-youtube ul { position:relative; display:inline-block; width:90%; }
.data-youtube ul li { float:left; width:23%; padding:0.5em; margin:1%; box-sizing:border-box; background-color:#fff; }
.data-youtube ul li .youtube-box { position:relative; display:inline-block; width:100%; height:0; padding-bottom:56.25%; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; cursor:pointer; }
.data-youtube ul li .youtube-box:hover::after { content:''; display:inline-block; position:absolute; top:50%; left:50%; margin-top:-15%; margin-left:-15%; width:30%; padding-bottom:30%; border-radius:100%; opacity:0.7; background:url(/images/ico_youtube.png) no-repeat 50% 50%; }
.data-youtube ul li .sub { display:inline-block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:0.75em; color:#000; }

.play-vod { position:absolute; left:50%; top:50%; margin-left:-20px; margin-top:-40px; }
.dimmed { display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.7; z-index:900; }
.youtube_popup { position:fixed; left:50%; top:50%; display:inline-block; width:720px; margin-left:-370px; margin-top:-250px; background-color:#fff; border:10px solid #fff; z-index:970; }
.youtube_popup #youtube_player { line-height:0; z-index:980; }
.youtube_view { position:relative; width:100%; height:0; padding-bottom:56.25%; }
.youtube_view iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

#youtube_player iframe { max-width:720px; width:100%; max-height:480px; height:480px; }
@media screen and (max-width:720px) {
	#youtube_player iframe { height:inherit; }
}

@media (max-width:960px) {
	.data-youtube ul li { width:30%; margin:1.5%; }
}
@media (max-width:720px) {
	.data-youtube ul li { width:45%; margin:2.5%; }
	.data-youtube ul li .youtube-box::after { content:''; display:inline-block; position:absolute; top:50%; left:50%; margin-top:-15%; margin-left:-15%; width:30%; padding-bottom:30%; border-radius:100%; opacity:0.7; background:url(/images/ico_youtube.png) no-repeat 50% 50%; }
	.youtube_popup { left:0; margin-left:0; border:0; width:100%; }
	#youtube_player iframe { width:100%; height:480px; }
}
@media (max-width:360px) {
	.data-youtube ul li { width:90%; margin:5%; }
	#youtube_player iframe { height:240px; }
}

/* paging */
.page { text-align:center; margin-bottom:10px; }
.page a { color:#fff; font-size:0.7em; display:inline-block; width:2.5em; height:2.5em; padding-top:0.5em; box-sizing:border-box; text-decoration:none; margin:0px; }
.page a.num:hover, .page .on { border:1px solid #fff; }
.page .back, .page .back:hover, .page .next, .page .next:hover { width:4em; letter-spacing:-0.5px; box-sizing:border-box; }