/*@font-face{font-family:CookieRunBold; src:url(/assets/font/CookieRunBold.ttf) format("truetype");}*/
@font-face{font-family:'nanumsquareb';src:url("https://img.dongascience.com/polymath/labyrinth/font/nanumsquareb.woff") format("woff");}

body,html{ margin:0; padding:0; font-family:nanumsquareb,dotum;overflow:auto; }
ul,ol,dl{list-style:none; margin:0; padding:0}
table td.center {text-align:center}
a {text-decoration:none; color:inherit}

h1, p, h4 {
	text-align:center;
	margin:0;
	padding:0;
}
h4 {
	margin-bottom:10px;
}
p {
	height:20px;
	line-height:20px;
	font-size:18px;
}
table {
	background:#fff;
	margin:10px auto 20px auto;
	padding:0;

}
.tbl_question td, .tbl_make td {
	width:36px;
	height:36px;
	border-collapse:collapse;
	padding:0;
	margin:0;
}
.tbl_question td input, .tbl_make td input {
	border:none;
	width:34px;
	height:34px;
	font-size:18px;
	text-align:center;
	border:1px solid #333;
	border-radius:3px;
	color:#000;
	transition-property: background, color;
	transition-duration: 1s;

}
.tbl_question td input.alt, .tbl_make td input.alt {
	background:#ddd;
	color:#000;
}
.tbl_question td input.prepopulated, .tbl_make td input.prepopulated{
	color:#000 !important;
	font-weight:bold;
	opacity:1 !important;
	-webkit-text-fill-color:#000;
}
.tbl_question td input.playable, .tbl_make td input.playable {
	color:#c30;
}
.tbl_question td input.inerror,
.tbl_question td input.prepopulated.inerror {
	background:red !important;
	color:#fff;
	-webkit-text-fill-color:#fff;
}
.tbl_question input[type=number]::-webkit-inner-spin-button,
.tbl_question input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.tbl_question input[type=number] {
	-moz-appearance:textfield;
}

input[type=button] {padding: 10px 15px; margin-top: 10px; font-size:21px; border-radius:10px; font-family:nanumsquareb}



body {background:#fff; margin:0; padding:0; background-image: url(//img.dongascience.com/polymath/labyrinth/images/BG02.jpg)}

header { display: block; position:relative;width:100%; height:60px; text-align:center; padding:0;  background-color:rgba(51,51,102,1); }
header .home {
	position:absolute;z-index: 5; width:60px; height:60px; overflow: hidden;  cursor: pointer; display: none;
	background: url(http://img.dongascience.com/polymath/sudoku/images/icon_home.png)  center no-repeat; background-size: 50%; top:0; left:0
}
header .title {font-size: 0;text-align: center}
header .title img{cursor:pointer;margin-top: 15px}
header .login_btn {
	position:absolute;z-index: 5;width:60px; height:60px; overflow: hidden;  cursor: pointer;
	background: url(http://img.dongascience.com/polymath/sudoku/images/icon_login.png) center no-repeat; background-size: 50%; top:0; right:0;
}


#container {width:100%; overflow-y:auto}
#container .sub_tit {width:100%; padding:10px 0; text-align: center; font-weight:bold; background-color:#98e3f077; font-size:21px; overflow:hidden}
#container .wrap {max-width:720px; margin:0 auto;}
#container .wrap table {width:90%; text-align:center; margin:30px auto; font-size:17px}
#container .wrap table th {background-color:#e0e0e0; padding:10px 0}

#container .wrap.main {text-align:center; margin:5% auto 0 auto}

#container .wrap.about {width:90%; margin:20px auto; text-align: center; font-size:18px}
#container .wrap.questionList {width:90%; margin:20px auto;}
#container .questionList .difficulty {width:100%; padding: 10px 0; background-color:#99999977; text-align:center; font-size:21px; margin:5px 0; cursor:pointer}
#container .questionList ul.list {overflow:hidden; display:none}
#container .questionList li.question {padding: 20px 10px; background-color: #ffffff99; width: 40px; height: 20px; border: 1px solid #666; border-radius: 5px; text-align: center; vertical-align: middle; float: left; margin: 5px; cursor:pointer}
#container .questionList li.question.solved2 {background-color:#6666bb22}
#container .questionList li.question.solved {background-color:#6666bb77}


#container .wrap.question {width:90%; margin:20px auto;}
#container .question .tbl_question {width:334px}
#container .question .tbl_comment .comment {float:left; margin:5px 0 5px 10px; width:70%; height:26px; font-size:17px; padding:5px}
#container .question .tbl_comment .btn_comment {float:right; font-size:19px; padding:3px 6px; margin:8px 10px 8px 0; background-color:#98e3f0}
#container .question .tbl_comment .thumb {float:left; width:30px; height:30px; margin-top:5px; margin-left:5px}
#container .question .tbl_comment th span {float:left; margin-top:5px; margin-left:5px; font-size:14px}
#container .question .tbl_comment td {padding:5px 0}
#container .question .tbl_comment td span {float:left; margin-top:5px; margin-left:5px; font-size:17px}
#container .question .tbl_comment .nick {margin-top:10px; font-weight:bold}
#container .question .tbl_comment .contents {display:inline-block; clear:both; padding:0; text-align:left}
#container .question .tbl_comment .date {color:gray; padding:0}

#container .question .tbl_comment tbody {display:block; max-height:280px; overflow-y:scroll}
#container .question .tbl_comment thead, #container .question .tbl_comment tbody tr {display:table; width:100%; table-layout: fixed}


#container .wrap.highscore {width:95%; margin:20px auto; text-align: center; font-size:18px}
#container .highscore .score_tabs {width:100%; overflow:hidden}
#container .highscore .score_tabs li {width:24.5%; float:left; border:1px solid #ccc; padding:10px 0; background-color:#eee; cursor:pointer; font-weight:bold; word-break:keep-all}
#container .highscore .score_tabs li.on {background-color:#ffcccc}
#container .highscore .tbl_fast_clear {display:none}
#container .highscore .tbl_fast_clear2 {display:none}
#container .highscore .tbl_make_count {display:none}
#container .highscore table {clear:both; width:100%; text-align:center; margin:30px auto}
#container .highscore table td {padding:5px 0}
#container .highscore .thumb {float:left; width:30px; height:30px; margin:5px 5px 0;}
#container .highscore .nick {float:left; margin-top:10px; font-weight:bold}

#container .making .btn_submit {background-color:#21b8ce; color:#eee}
#container .making .btn_reset {background-color:#b7ebf5; color:#333}


footer { display: block; position:relative; z-index:9;width:100%; text-align:center;}
footer .menu { margin:15px auto}
footer .menu li {width:300px; margin:5px auto;line-height: 50px;  cursor:pointer; background-color:rgba(255,255,255,0.3);border-radius: 10px; border: 2px solid rgba(51,51,102,1);color: rgba(51,51,102,1); font-size:21px; font-weight:700;}
footer .menu li.locked{background-color:rgba(255,255,255,0);border: 2px solid rgba(51,51,102,0.4);color: rgba(51,51,102,0.4); }
footer .menu li:hover {background-color:rgba(51,51,102,1);color:rgba(255,255,255,1)}
footer .menu li.locked:hover {background-color:rgba(255,255,255,0);color: rgba(51,51,102,0.4); }
footer p{font-size: 14px;color: rgba(51,51,102,0.8);margin: 30px 0}


@media (min-width: 685px){
	#container .question .tbl_question {float:left}
	#container .question .tbl_comment {float:right; width:45%}
}
@media (max-width: 568px){
	#container .questionList li.question {padding:13px 3px; width:34px; height:14px; font-size:14px; margin:5px 2px}

	.alertify:not(.ajs-maximized) .ajs-modal {padding: 0}
	.alertify .ajs-dialog {width:80%}

	#container .highscore table td {padding:10px 0}
	#container .highscore .thumb {display:none}
	#container .highscore .nick {margin-left:10px; margin-top:0px}

	#container .highscore .score_tabs li {height:40px}
	#container .highscore .score_tabs li.vam {height:20px; padding:20px 0}
}
@media (max-height: 610px){
	#container .wrap.main img {width:37%}
}
@media (max-height: 490px){
	#container .wrap.main img {display:none}
}
@media (orientation: landscape){
	#container .wrap.main {margin:30px auto 0}
}


.dimer {display:none;}
.dimer .dim-layer {
	position: fixed;
	z-index: 5010;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	margin: 0;
	background-color: #252525;
	opacity: .5;
}
.dimer .dim-body {
	width: 340px;
	margin-top: -100px;
	margin-left: -200px;
	padding: 20px 30px;
	position: fixed;
	z-index:5011;
	top:50%;
	left:50%;
	background-color: #c8cfc6;
	border-radius: 25px;
}

.alertify .ajs-modal {width:100%; height:100%}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {background-color:#9d9db5}