@charset "utf-8";

/* Fonts */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
/*@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);*/

/* S Core Dream */
/*
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); font-weight: 100; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); font-weight: 200; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); font-weight: 300; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); font-weight: 400; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); font-weight: 500; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); font-weight: 600; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); font-weight: 700; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); font-weight: 800; }
@font-face { font-family: 'SCDream'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); font-weight: 900; }
*/

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css');



@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
    --theme-color-dark: hsl(212, 72%, 31%);
    --theme-color-mid: hsl(202, 100%, 40%);
    --theme-color-light: #a8d1ff;
}

html { font-size: 15px;}
body,
p,
table,
div,
li {
	font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
	/*font-family: "Noto Sans KR", sans-serif;*/
	/*font-family: "Spoqa Han Sans Neo", sans-serif;*/
}

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

h1, h2, h3, h4, h5, h6 {
	margin-top:0px; margin-bottom: 0.5rem; font-weight: 500; line-height: 1.2;
}

h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }
/* Layout */

form,
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}
.user_layout {
	width: 960px;
	margin: 0 auto;
}

.layout { margin:0px auto; padding:0px; width:100%; height: 100%;}

#header {
	position:relative;
	zoom: 1;
/*    background-image: url('/v6/img/visual1.jpg');*/
/*	background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));*/
    background-size: cover;
	-webkit-transition: background-image 1.0s ease-in-out;
	transition: background-image 1.0s ease-in-out;
	color:white;
	width:100%;
}
.header:after {
	content: "";
	display: block;
	clear: both;
}

#top {
	width:100%;
	height:40px;
	text-align: right;
	font-size: 0.9em;
	color: white;
	padding: 12px 0px 0px;
}
#top span {
	margin:0px 10px;
}

nav.menubar {
	position:relative;
	padding: 2px 20px;
	font-size: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

nav.menuinv {
	position:fixed;
	top:0px;
	width:100%;
	background-color: white;
	padding: 10px 20px 2px;
	font-size: 18px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.7);
	box-shadow: rgba(0,0,0,0.3) 0px 2px 7px;
	z-index: 100;
}
.headermain {
	width:100%;
	color:white;
	display:flex;
	/*background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4), rgba(0,0,0,0.6));*/
	margin:0;
	padding:0;
}

.headermain > div {
	width:100%;
	max-width:1000px;
	margin: 0 auto;
	margin:0 auto;
	margin-top:1.5em;
}

.headermain .maintit {
	margin:1em 0.2em;
	/*text-shadow: #111 0px 0px 10px;*/
	text-align: center;
}

.hcont { height:5.5em; max-height:80px; }
.hcont > div:first { height:50px;}
.maintit h1 { font-size:2.6em; }
.maintit h2 { font-size:1.6em; }
.maintit h3 { font-size:1.7em; }
.headermain .goto {
	margin-top: 0px;
	padding-right:5px;
}

.headermain .goto > div, .headermain .gotohorz > div > div {
	height: 2.5em;
	border: 1px solid #eee;
	background-color: rgba(0, 0, 0, 0.4);
	margin: -1px 6px 0px 0px;
	padding:0.5em 0px;
	text-align: center;
	font-size:1.1em;
}
/*
.headermain .goto a { color: red; }
.headermain .gotohorz a { color: blue; }
*/
.headermain .gotohorz { padding:0px 9px 0px 13px; margin-top:10px; }
.headermain .gotohorz > div > div {
	margin: 0px 0px -1px -1px;
	padding-top:6px;
}
.header .searchbox {
	position:absolute;
	display:none;
	left:-225px;
	top:0px;
	z-index: 100;
	width:225px;
	height:40px;
	font-size:0.8em;
	padding:0px;
	border:1px solid #111;
	background-color: rgba(255, 255, 255, 0.8);
}

.cf {
	margin: 1.2em 0.2em 0px 0.2em;
	color:white;
}

.cf .title {
	/*height:4em;*/
	padding:0.2em;
	/*border:1px solid #ddd;*/
	/* border-bottom: none; */
	background-color: rgba(0, 20, 50, 0.2);
}

.cf .cmt {
	width: 100%;
	height: 78px;
	padding: 15px;
	border:1px solid #ddd;
	background-color: rgba(255, 255, 255, 0.2);
	display:none;
}

.cf .title > a {
	font-size: 1.4rem;
	font-weight: bolder;
	width: 100%;
}
.body {
	width:100%;
	align-items: center;
}

.body:after {
	content: "";
	display: block;
	clear: both;
}

.content {
    font-size: 13px;
	max-width: 960px;
}

.content ul, .content li, .content p {
    font-size:1.0rem;
    line-height: 130%;
    margin-bottom: 0.3em;
}

.content td, .content th, .content th p, .content td p {
    font-size: 0.9rem;
    line-height: 130%;
}
/*
.content .xm { font-size:1.0em;}
.content .xm table, .content .xc table { font-size:0.8em; border-top:2px solid #333;}
.content .xm table td, .content .xm table th, .content .xc table td, .content .xc table th { text-align: center;}
.content .xm table td.title { text-align: left;}
.content .xm h1 { font-size:2em;}
.content .xm button { border:1px solid #aaa;margin-bottom:0.7em;}
.content .xc button { border:1px solid #aaa;margin-bottom:0.3em;}
.content .xm input[type="text"] { height:2em;}
.content .xm .btnArea .btn, .content .xc .btnArea .btn {
	border:1px solid #aaa;
	border-radius: 0;
	padding:0.3em;
}
*/

.footer { background: #333; }
.footer p { font-size: 0.9em; }

.aside {
	width:220px;
	float:left;
}

.aside > ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	background-color: #fdfdfd;
	font-size: 1.1em;
}

.aside > ul > li {
	padding:0;
	border-left:8px solid #ccc;
	border-bottom: 1px dotted #aaa;
	color: #555;
}

.aside > ul > li > a {
	display:block;
	width: 100%;
	height:2.7em;
	padding:0.6em 0.8em;
	font-weight: 700;
}
.aside > ul > li.active {
	border-left:8px solid rgb(19, 40, 109);
	background-color: #ddd;
    color:rgb(19, 40, 109);
}

.aside > ul > li > ul {
    list-style-type: none;
    margin: 0px 0px -1px -8px;
    padding: 0em;
    background-color: #fefefe;
	border-top: 1px dotted #aaa;
}
.aside > ul > li > ul > li {
    background-color: #fefefe;
	border-left:8px solid #eee;
	color: #aaa;
}
.aside > ul > li > ul > li:last-child {
	border-bottom: 1px dotted #aaa;
    padding-bottom: 0.3em;
}

.aside > ul > li > ul > li > a {
	display:block;
	width: 100%;
	height:1.9em;
    font-size: 0.9em;
	padding:0.4em 0.1em 0.5em 0.6em;
	font-weight: 700;
}
.aside > ul > li > ul > li > a::before {
    content:"\f285";
    font-size:0.8em;
    font-weight:bold;
    margin-right:0.2em;
    font-family: 'bootstrap-icons';
    color:#ccc;
}
.aside > ul > li > ul > li.active {
	color: #000;
}
.aside > ul > li > ul > li.active > a::before {
    color:rgb(19, 40, 109);
}
.maincontent {
	float:right;
}

.content {
	max-width:960px;
	margin-left: auto;
	margin-right: auto;
	padding:0px 10px;
}

/*
.content {
	border:1px solid red;
}
.content div {
	border:1px solid blue;
}

.content > div {
	border:1px solid green;
}
*/
.content .notice {
	color: white;
	font-weight: normal;
	margin-left: -2px;
	/*text-shadow: #111 0px 0px 1px;*/
}
.content .notice a {
	text-decoration: none;
	color:white;
}
.content .notice a:hover {
	text-decoration: none;
	color:white;
}

.content .tit, .content .des {
	font-size:1.5em;
	font-weight: bold;
	padding: 5px;
	margin:3px;
	text-align: center;
}

.content .tit {
	margin-top: 1em;
	margin-bottom: 0.5em;
	text-decoration: underline;
	text-underline-offset: 10px;
}

.bd .tit {
	text-decoration: none;
	text-underline-offset: 0px;
}
.content .des {
	padding:0 20%;
	font-size:1rem;
	margin-bottom: 1em;
	font-weight: normal;
}

.content h1, .content h2 {
	text-align: center;
}
.content .about > div {
	padding: 0px 3em;
}
.content .rev {
	color: white;
}

.rev h4, .rev a, .rev .date, .rev .hour{
	color:white;
}

.rev h4 { margin: 0px 5px 0.5rem; }

.about > div { text-align: center; }
.about > div > div { margin-bottom: 1rem; font-weight: 300;}
.content .detail > a {
	padding: 8px 10px;
	display:inline-block; 
	text-decoration: none; 
	background-color: green;
	color:white;
}
.contrib { padding: 2px 10px; border-top : 1px solid #666;}
.contrib a { color: lightblue;}

/* page */

.page h3, .page h4 {
	text-align: left;
}

.page h3 {
	color:hsl(202, 100%, 30%);
	font-size: 1.7em;
	font-weight: bold;
	margin-top: 1.2em;
	margin-bottom: 1em;
	padding: 0.1em 0.3em;
	width: fit-content;
	border-left:0.3em solid hsl(202, 100%, 40%);
	/*border-bottom: 1px solid hsl(202, 100%, 40%);*/
}
.page h3:first-child { margin-top:0.5em;}

.page h4 {
	font-size:1.5em;
	margin:1.1em 0 0.7em;
	color:rgb(2, 74, 131);
	text-decoration-color: hsl(202, 100%, 10%);
	/* text-underline-offset: 0.3em; */
}

.page ul {
    margin:0.2em 0;
}
.page table { width: 100%; border-bottom:1px solid #333;}
.page table td, .page table th {
    border-right:1px solid #aaa;
    border-bottom:1px solid #aaa;
    padding:0.1em 0.2em;
    font-size:1em;
    word-spacing: -0.15em;
}
.page td:last-child, .page th:last-child { border-right: none; }

/* board */

.bbsSearch input, .bbsSearch select, .bbsSearch button {
	height:1.8em;
	border: 1px solid #aaa;
}

.bbsList td.title, .thumbList .title {
	display:inline-block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.bbsBottom {
	text-align: center;
	margin: 1em 0 2em;
}
ul.bbsBottom {
	display: inline-block;
	list-style: none;
	margin:0;
	padding:0;
}
.bbsBottom li {
	display: inline-block;
	width:2em;
	font-size: 1.1em;
	margin:0;
	padding:0;
}
.bt-box {
	margin:0.5em 0;
	text-align: right;
}
.bbsBottom .bt, button.bt-box, .bbsWrite button {
	height:2em;
	padding:0.2em 1.2em;
	margin:0.3em 0em;
	border:1px solid #aaa;
	background-color: #eee;
}

.bt > input[type=submit] { border:1px solid #aaa;}

.bbsView .top_v {
	border-bottom: 2px solid #555;
}
.bbsView .top_v p {
	text-align: right;
}
.bbsView .file_v {
	font-size:0.9em;
	/*
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
	background-color: #eee;
	*/
}
.bbsView .toggleFile {
	border:1px solid #aaa;
	background-color: #fcfcfc;
}
.bbsView .file_v ul.files {
	display:none;
	list-style: none;
	margin:0px;
	padding:1em 0.5em 0 0.5em;
}
.thumbList > div {
	padding:0.5em;
}
.thumb img {
	width:100%;
}
.thumbList .meta .date { margin:0; float:right}
.bbsView .bubble {
	padding-left:1em;
	font-size:0.8em;
}
.viewDocument {
	margin:1em 0 3em;
}
.inputText { border:1px solid #ccc;}
.content table {
	margin:1em 0em;
}
.content .none {
	display: none;
}

.content table tr:first-child {
    border-top:1px solid #111;
}
.content td, .content th {
	font-size:1.2em;
	text-align: center;
	height: 2.7em;
	padding:0.5em 0.2em;
}

.content th {
	background-color: rgb(204, 228, 252);
	/*border-top: 1px solid #000;*/
}
.content td.aleft {
	text-align: left;
}

.bd_tb td, .bd_tb th {
	height: 2.4em;
	padding:0px;
}

/* 글 본문 : 스케치북5 */
.rd_body td {
    border: 1px solid #eee;
    height:1em;
    padding:0.2em 0.2em;
}
.rd_body th {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    height:1em;
    padding:0.2em 0.2em;
}
.board h5 { padding: 3px 5px; }

/* menu */

#menubar > div {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
.menulogo {
    font-weight: bold;
	display:inline-block;
	margin-top: 6px;
}

.dropbtn {
	color: white;
    margin:4px 2px;
	padding: 2px;
    font-weight: 500;
	border: none;
    display:inline-block;
}

.dropbtn a {
    color: white;
    text-decoration: none;
    /*text-shadow: #000 0px 0px 0.5em;*/
    margin-bottom:2px;
    padding-bottom:2px;
    border-bottom:none;
}

/*
.dropbtn a:hover {
    margin-bottom:5px;
    border-bottom:2px solid white;
}
*/
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
    background-color: rgba(0, 8, 35, 0.9);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
	min-width:  200px;
	z-index: 1;
	padding: 6px 6px;
}

.dropdown-content a {
	color: white;
	font-size: 0.85em;
	padding: 3px 6px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	color: black;
	background-color: white;
}

.menu li {
	display: inline-block;
}
.menu1 ul, .menu2 ul {
	margin-bottom: 2px;
	padding-left:1rem;
}
.dropdown li a {
	text-decoration: none;
}
.dropdown li a:hover {
	text-decoration: none;
}
.dropdown-content a {
	text-decoration: none;
}
.dropdown-content a:hover {
	background-color: #ddd;
}
.dropdown:hover .dropdown-content {
	display: block;
}

/* side menu */
.sidepanel {
	width: 250px;
	position: fixed;
	z-index: 100;
	height: 100%;
	top: 0;
	background-color: rgba(80, 80, 80, 0.99);
	overflow-x: hidden;
	transition: 0.5s;
    box-shadow: #111 0em 0.2em 1em;
}

#sidemenu {
    left: -280px;
}

.sidepanel a, #sidemenu li > span {
	font-size: 17px;
	padding: 4px 3px 4px 20px;
	text-decoration: none;
	color: #eee;
	display: block;
	transition: 0.3s;
}

.menutoggle {
    cursor: pointer;
}

#sidemenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
	/*border-bottom:1px solid #aaa;*/
}
#sidemenu nav > ul  {
	border-bottom:1px solid #aaa;
}
#sidemenu li > a, #sidemenu li > span {
    font-size:1.4em;
    margin-left: 0px;
    margin-top: 0px;
    border-top: 1px solid #aaa;
    padding-left: 10px;
}
#sidemenu .si_group {
	font-size: 1.0em;
}
#sidemenu li > span {
	cursor: pointer;
}
[id^=sm] { display:inline-block; float: right; margin-right:0.2em;}
[id^=sp] { display:inline-block; float: right; margin-right:0.2em;}
#sidemenu > nav > ul > li > div  {
    border-top: 1px solid #ccc;
	padding-left: 15px;
	cursor:pointer;
}
#sidemenu > nav > ul > li > div > ul > li {
	font-size:1.3em;
    margin:0em;
	border-bottom:1px solid #666;
}
#sidemenu > nav > ul > li > div > ul > li > a {
	font-size: 1em;
	border-top:none;
	padding-left:5px;
}
#sidemenu > nav > ul > li > div > ul > li:last-child {
	border-bottom:none;
}
#sidemenu > nav > ul > li > div > ul > li > div {
	color:white;
	font-size:1em;
	border-bottom:1px solid #666;
	padding:4px 3px 4px 0px;
}
#sidemenu > nav > ul > li > div > ul > li > div > a {
	font-size:1em;
	padding:2px 2px 2px 0px;
}
#sidemenu > nav > ul > li > div > ul > li > div > a::before {
	content: '• ';
}
#sidemenu > nav > ul > li > div > a:hover {background-color: #aaa;}
/* Footer */
.footer {
    border-top: 1px solid #e4e4e4;
    border-bottom: 3px solid #cda25a;
    background-color: #222b30;
	color: white;
	font-size: 0.8em;
	vertical-align: middle;
	width:100%; /* 왜 이렇게 해야한.... */
}
.footer a:hover, .footer a:focus {
    text-decoration: none
}

.footerlink {
    background-color: #506570;
	padding:5px 0px;
	border-bottom: 1px solid #aaa;
}
.footerlink > div {
	padding:2px 10px;
	text-align: center;
	border-left: 1px solid #888;
}

.footerlink > :first(div) {
	border-left: none;
}
/* menu */
@media (max-width:818px) {
    .menutoggle { display: inline-block; }
    .menu1 { display: none; }
    .sidepanel { display: block; }
    #sidemenu { left: -280px; }
	.cf .cmt { display: none; }
	/*.cf .title { border-bottom: 1px solid white; margin-top: -1px; }*/
}

@media (min-width:819px) {
    .menutoggle { display: none; }
    .menu1 { display: inline-block; }
    #sidemenu { display: none; }
}

/* lg */
@media (max-width:992px) {
	.goto { display: none; }
	.gotohorz { display: block; }
	html { font-size: 13px; }
	.maintit { font-size:0.9em;}
}

@media (min-width:993px) {
	.goto { display: block; }
	.gotohorz { display: none; }
	html { font-size: 15px; }
	.maintit { font-size:1em;}
}

@media (max-width:800px) {
	.no_col { display: none;}
	.content { padding:0 1%;}
}

@media (max-width:450px) {
	#menubar { padding-left: 5px; padding-right:5px; font-size:16px;}
	.header .menu2 > ul { padding-left:0.2rem;}
	.maintit { font-size:0.6em;}
	.bbsBottom .bt, button.bt-box, .bbsWrite button { padding:0.2em 0.2em;}
	.headermain { margin-top:0em; }

}

/* header height */

/* side panel : submenu */
@media (max-width:1200px) {
    .aside { width: 0px; display: none;}
	.maincontent, .subcont > .content { width: 100%; float: none;}
	.subcontent { max-width: 960px; }
	.headermain > div { max-width: 960px; }
}

@media (min-width:1201px) {
	.xc > .nav-tabs, .xm > .nav-tabs { display: none; }
	.maincontent, .subcont > .content { width: calc(100% - 240px); float:right;}
	.subcontent { max-width: 1180px; }
	.headermain > div { max-width: 1180px; }
}

@media (max-width:802px) {
	.content img.lg { display: none; }
	.content img.sm { display: inline-block; }
}

@media (min-width:803px) {
	.content img.lg { display: inline-block; }
	.content img.sm { display: none; }
}

@media (max-width:319px) {
	.tiny-hide { display: none; }
}

.s_con img { max-width: 100%;}