/*

Page css

*/

/* browser reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
header, footer, nav, menu, section, article, aside {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
}
body {
line-height: 100%;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ��;
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
vertical-align:top;
}

/* button */
button {margin:0; padding:0; border:0; font:11px/11px dotum, sans-serif; background:none; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner {border:0; padding:0;}

/* image replace */
.ir {position:relative; z-index:-1; *visibility:hidden;}

/* page style */
div, td {font:11px/15px "Malgun Gothic", candara, dotum; color:#636363;}
a {text-decoration:none;}
a:link, a:visited {text-decoration:none; color:#8c8c8c;}
a:hover {color:#ff6600;}
::selection {background:#ff6600; color:#fff;}
::-moz-selection {background:#ff6600; color:#fff;}

/* main */
.scrnnavi {position:fixed; width:220px; height:100%; padding:20px;}
.scrnnavi h1 {margin-bottom:15px; padding:20px; font-size:24px; font-family:candara; border-radius:20px; background:#ffffff;}
.scrnnavi ul {padding:20px; border-radius:20px; background:#ffffff;}
.scrnnavi ul li {margin-bottom:10px;}
.scrnnavi ul li a {}
.scrnnavi ul li a.on {font-weight:bold; color:#f00000;}
.scrnmain .scrndiv {padding:20px 20px 20px 260px; overflow-y:auto;}
.scrnmain .scrndiv:after {content:""; display:block; clear:both;}
.scrnmain .scrndiv:nth-child(even) {background:#f0f0f0;}
.scrnmain .scrndiv h2 {margin-bottom:20px; padding-bottom:10px; border-bottom:solid 2px #939393;}
.scrnmain .scrndiv .appear {float:left; width:420px;}
.scrnmain .scrndiv .appear div {margin-bottom:10px;}
.scrnmain .scrndiv .appear div img {border:solid 1px #dddddd;}
.scrnmain .scrndiv .appear h4 {margin:24px 0 12px;}
.scrnmain .scrndiv .appear h4:first-child {margin-top:0;}
.scrnmain .scrndiv .appear .date {display:block; margin:-10px 0 12px; font-size:90%;}
.scrnmain .scrndiv .appear li {margin-bottom:3px; word-break:keep-all;}
.scrnmain .scrndiv .centents {float:left;}
.scrnmain .scrndiv .centents h4 {margin-bottom:6px;}
.scrnmain .scrndiv .centents ol {margin-bottom:15px; padding-left:8px;}
.scrnmain .scrndiv .centents ol li {margin-bottom:3px;}
.scrnmain .scrndiv .centents ol li:after {content:""; display:block; clear:both;}
.scrnmain .scrndiv .centents ol li .author {width:120px; margin-right:5px; text-align:right;} /* display:inline-block;  */
.scrnmain .scrndiv .centents ol li a {color:#6d0099;}

/* mobile */
.totop,
.molink {display:none;}
@media screen and (max-width: 500px) {
.molink {display:block;
	padding: 6px 10px;
	padding: 0.428571429rem 0.714285714rem;
	font-size: 11px;
	font-size: 0.785714286rem;
	text-align:center;
	line-height: 1.428571429;
	font-weight: normal;
	color: #7c7c7c;
	background-color: #e6e6e6;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -ms-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -webkit-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: -o-linear-gradient(top, #f4f4f4, #e6e6e6);
	background-image: linear-gradient(top, #f4f4f4, #e6e6e6);
	border: 1px solid #d2d2d2;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}
.molink:focus {
	color: #5e5e5e;
	background-color: #ebebeb;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -ms-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -webkit-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: -o-linear-gradient(top, #f9f9f9, #ebebeb);
	background-image: linear-gradient(top, #f9f9f9, #ebebeb);
}
.molink:active {
	color: #757575;
	background-color: #e1e1e1;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -ms-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -webkit-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: -o-linear-gradient(top, #ebebeb, #e1e1e1);
	background-image: linear-gradient(top, #ebebeb, #e1e1e1);
	box-shadow: inset 0 0 8px 2px #c6c6c6, 0 1px 0 0 #f4f4f4;
	border-color: transparent;
}
.totop {display:block; position:fixed; bottom:20px; right:20px; width:30px; height:30px; line-height:30px; border-radius:30px; opacity:0.6;}
.navlist {
opacity:0;
height:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;}
.navlist:target {
opacity:1;
height:auto;
pointer-events: auto;}
.scrnnavi {position:static; width:auto;}
.scrnnavi h1 {text-align:center;}
.scrnnavi ul {text-align:center;}
.scrnmain .scrndiv {padding-left:20px;}
.scrnmain .scrndiv .appear {float:none; width:auto;}
.scrnmain .scrndiv .appear div img {width:100%;}
} /* end */