@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Staatliches&display=swap');

*{padding:0; margin:0; font-family: 'Dotum'; font-size:11px; line-height:18px; letter-spacing:0; list-style: none; text-decoration:none; box-sizing:border-box; word-break:break-all; cursor:default;}
html{overflow-x: hidden;}
input, textarea, button{border:0; background:none; border-radius: 0; outline: none; -webkit-appearance: none;}
a, a:link, a:visited, a:active{text-decoration: none;}
a:hover{transition: 0.5s;}
img{vertical-align: bottom;}
.clear{clear: both;}
.youtube{position:relative; width:100%; padding-bottom:56.25%;}
.youtube iframe{position:absolute; width:100%; height:100%;}
.box, .paging, #list_g .list_c, #list_n, .entry .title_wrap, .entry .article, .entry .bottom, .guestwrite, .rp, .rrp, .taglog a, .cover_notice .title_wrap, .cover_notice .detail, .cover_gallery .thumb{background:#fff;}
.to_top{display: none;}



/*========== layout ==========*/

#container{width: 620px; margin: 150px auto 0;}
#side{position:fixed; float: left; width:140px; text-align:center; z-index:10;}
#content{float: right; width:72%; margin-bottom:150px;}



/*========== sidebar ==========*/
/* profile image box */
.profile{margin-bottom:10px;}
.profile img{width:100%;}

/* category, menu */
.box{margin:0 auto;	padding:10px;	letter-spacing: 1.5px;}
.box a, .box span{display: inline-block;	width:100%;	padding: 3px 0;	font-family:'Verdana', 'Dotum';}
.box .toggle_btn{display: none;}
.category{text-transform:uppercase;}
.category .tt_category .link_tit{display: none;}
.category .category_list{position:relative;}
.category .sub_category_list, .menu{display: none; position:absolute;	padding:10px 0;	background:#fff; width:83%; left:73%;	margin-top:-15px;	z-index:11;}
.menu .search input{width:50%; border: 1px solid #fff; background:none; text-align:center; font-family:'Verdana';}
.menu_t{position:relative;}

/* paging*/
.paging{margin-top: 10px; padding:10px;}
.paging a{font-family:'Verdana';}



/*========== article ==========*/

.entry{margin-bottom:20px;}
.entry .title_wrap{display: inline-block; padding:7px; border-bottom:none !important; letter-spacing: 2px;}
.article{padding:10px; text-align:justify;}
.article p > iframe{width:100%; height:auto;}

.bottom{padding:7px 10px; border-top: none !important;}
.bottom div{display: inline-block;}
.bottom .tag a:before{content:'#';}
.bottom .right{float: right;}
.bottom .right div{margin-left:7px;}

/* 인용문 */
.article blockquote[data-ke-style='normal'] {font-family: 'Dotum'; font-size: 11px; padding: 10px;}
.article blockquote[data-ke-style='box']{font-family: 'Dotum'; font-size: 11px; padding: 10px; border:none; background:#EEEEEE55;}

/* 코드블럭 */
.article pre.xml{ padding: 5px; margin: 5px 0;}
.article pre code{letter-spacing:0.5px; font-family:'Verdana'; line-height:15px;}

/* 본문 내 이미지 여백 삭제 */
.article figure.imageblock.alignCenter {margin-bottom:0;}
.article figure.imageblock.alignCenter, .article figure.imagegridblock{margin:0;}
.article figure.imagegridblock .image-container span{width:auto !important;}

/* 접은글 구에디터 (기존 클래스) */
.moreless_fold:before{content: '\f1e2';	font-family: "Font Awesome 5 Free";	font-weight:bold;	margin-right: 3px;}
.moreless_top:before{content: '\f1e2';	font-family: "Font Awesome 5 Free";	font-weight:bold;	margin-right: 3px;}
.moreless_bottom{display: none;}
.moreless_content{padding: 10px;	margin: 5px 0px;}

/* 접은글 구에디터 (새로운 클래스)*/
a.btn-toggle-moreless{font-family:'Dotum' !important; font-size:11px !important;  line-height:18px !important;}
a.btn-toggle-moreless::before{content:'\f07b'; font-family: "Font Awesome 5 Free";	font-weight:bold; margin-right:5px;}
.moreless-content{padding:10px;}

/* 접은글 뉴에디터 */
.article button{background:none !important; border: none; margin:0; padding:0;  font-size:11px; letter-spacing:0.5px;}
.article .btn_more:before, .article .btn_less:before{content: '\f07b'; font-family: "Font Awesome 5 Free";	font-weight:bold;	margin-right: 5px;}
.article .btn_less::after{content:'닫기';}
.article .btn_less{margin:10px 0;}
.article .btn_less span{display: none;}
.article .moreless_content{padding: 0 10px;	margin: 5px 0px;}
.article .btn_less:before, .article .btn_more:before{padding:0 !important; font-size:11px !important; line-height:18px !important; vertical-align:initial !important;}

/* 다운로드 구에디터 */
.article .imageblock a{display: block; padding:10px; font-family: 'Verdana', 'Dotum';}
.article .imageblock a:before{content:'DOWNLOAD \f358'; font-family: "Font Awesome 5 Free"; }
.article .imageblock a > img{display: none;}

/* 다운로드 뉴에디터 */
.article figure.fileblock {display: inline-block; margin:10px 0; padding:10px; width:auto; height:auto; border-radius:0;}
.article figure.fileblock .image{display: none;}
.article figure.fileblock .desc{position:relative; top:0; right:0; bottom:0; left:0;}
.article figure.fileblock .filename{display: inline-block; margin:0; font-size:11px; height:auto;}
.article figure.fileblock .filename .name:before{content:'DOWNLOAD \f358'; font-family: 'Verdana', "Font Awesome 5 Free"; margin-right:5px;}
.article figure.fileblock .name{max-width:none; width:auto; height:auto; font-family: 'Verdana';}
.article figure.fileblock .size{display: none;}
.article figure.fileblock a{height:auto;}
.article figure.fileblock a::after{display: none;}



/*========== protected article ==========*/

.protect .article{padding:100px 0;}
.protect .article .pttimg{width:150px; margin:0 auto; border-bottom:none !important;}
.protect .article .pttimg img{width:100%;}
.protect .pwinput{display:block; width:150px; margin:0 auto; padding:0 10px;	line-height:30px;  background: none; text-align:center;}



/*========== search list ==========*/

.list_w:after{display: block; clear: both; content: '';}

#list_n {margin-bottom:20px;}
#list_n .list_c .thumb_i{display: none;}
#list_n .list_c {padding:12px;}
#list_n .list_c .title{display: inline-block;}
#list_n .list_c .hh{display: inline-block;	float:right;}
#list_n .list_c .hh:before{display: none; content:'\f186'; font-family: "Font Awesome 5 Free"; font-weight:bold; color:#fc3; text-shadow:1px 1px #000;}
#list_n .list_c:hover .hh:before{display: block;}
#list_n .list_a{display: none;}

#list_g .list_c{float:left;	position:relative; width:calc(90% / 3); margin:0 5% 5% 0; overflow: hidden; transition:0.5s;}
#list_g .list_c:nth-child(3n){margin:0 0 5% 0;}
#list_g .list_c .thumb_i{width: 100%; padding:5%; height: auto;  overflow: hidden;}
#list_g .list_c .thumb_i img{display: block; position: relative; width: 100%; height: auto; transition:0.5s;}
#list_g .list_c .list_t{opacity:0; position:absolute; top:0%;	left:0%;	width:100%; height:100%; background:#FFFFFF99; transition:0.5s;}
#list_g .list_c .list_t span{position:absolute; text-align:center; width:90%; top:50%; left:50%; transform:translate(-50%,-50%);	-webkit-transform:translate(-50%,-50%);	-moz-transform:translate(-50%,-50%);	-ms-transform:translate(-50%,-50%);	-o-transform:translate(-50%,-50%);}
#list_g .list_a{display: none;}
#list_g .list_c:hover .list_t{opacity:1; }



/*========== comment, guestbook ==========*/

.text{width:100%;}
.text textarea{width:100%; height:50px; padding:5px; resize:none;}
.form{position:relative; width:100%; padding:0 5px;}
.form div{display: inline-block;}
.form .cksd{margin:5px;}
.form .cksd .check input[type="checkbox"]{display: none;}
.form .cksd .check input[type="checkbox"]+label:before{	display: inline-block;	content: '\f09c';	font-family: "Font Awesome 5 Free"; font-weight: bold; font-size:10px; line-height: 22px;}
.form .cksd .check input[type="checkbox"]:checked+label:before{	content: '\f023'; font-size:10px; }
.form .cksd .send input[type="submit"]{margin-right:3px; font-family:'Verdana'; background:none; line-height: 26px;}
.form .idpw{float: right; margin:5px 0;}
.form .idpw input{width:70px; line-height:24px; text-align:center; font-family:'Verdana';}

.comment{margin-top:20px;}
.guestlist{margin-top:20px;}
.cntrep{margin-bottom:15px;}
.rrp{float: right; width:80%; margin:5px 0;}
.rptext{padding:5px;}
.guesttop{padding:5px;}
.guesttop i{font-size:10px;}
.guesttop .cnt_ad{float: right; padding-top:1.5px;}
.rp .name, .rrp .name{display:inline-block;}
.guesttop .name:empty:after{content:'게스트';}




/*========== taglog ==========*/

.taglog a{float: left; display: inline-block; width:calc(90% / 5); margin:1%; padding:5px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}




/*========== notice ==========*/

.n_entry{margin-bottom:15px;}
.n_entry .title_wrap .title{display: inline-block; padding: 7px; background:none;  border-bottom:none !important; font-weight:normal;}
.n_entry .article{padding:10px;}



/*========== cover ==========*/
.cover_notice .title_wrap{display: inline-block; padding:7px 8px; border-bottom:none !important; letter-spacing: 2px;}
.cover_notice .detail{margin-bottom:20px; padding:5px 10px;}
.cover_notice .n-img, .cover_notice .txt{padding:5px 0;}
.cover_notice .n-img img{max-width: 100%;}

.cover_gallery .in::after{display: block;  clear: both;  content: '';}
.cover_gallery .thumb{float: left;  position: relative;	width:calc(90% / 3); margin:0 5% 5% 0; transition:0.5s;}
.cover_gallery .thumb:nth-child(3n){margin:0 0 5% 0;}
.cover_gallery .thumb_i{width: 100%; padding:5%; height: auto; overflow: hidden;}
.cover_gallery .thumb_i img{display: block; position: relative; width: 100%; height: auto; transition:0.5s;}
.cover_gallery .list_t{opacity:0; position:absolute; top:0%;	left:0%;	width:90%; margin:5%; height:90%; background:#FFFFFF99;}
.cover_gallery .list_t span{position:absolute; text-align:center; width:90%; top:50%; left:50%; transform:translate(-50%,-50%);	-webkit-transform:translate(-50%,-50%);	-moz-transform:translate(-50%,-50%);	-ms-transform:translate(-50%,-50%);	-o-transform:translate(-50%,-50%);}
.cover_gallery .thumb:hover .list_t{opacity:1;	transition:0.5s;}



/*========== 반응형 ==========*/

@media (max-width:767px){
	#container{width:100%; margin: 20px 0; padding:10px;}
	#side{position:relative; float: none; margin:0 auto 20px;}
	#content{float: none; width: 100%; margin-bottom:0px;}
	.box .toggle_btn{display: block;}
	.box .toggle_wrap{display: none;}
	.taglog a{ width:calc(80% / 3); margin:calc(20% / 6); }
	.paging .to-top{display: none;}
	.to_top{display: block; float: right; font-family:'Verdana'; padding:10px; margin-bottom:20px;}
}