/*-----------------------기본설정-----------------------*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap');

* {
	color: #4e4e4e;
	box-sizing: border-box;	
	transition: color .4s, background .4s, filter .4s;
}
*:focus {
	outline: none;
}
a, li, ul {
	list-style: none;
	text-decoration: none;
	color: #4e4e4e;
}
html {
	font-size: 0.75em;
	font-family: 'Noto Sans KR', sans-serif;
}
body {
	margin: 0;
}
::-webkit-scrollbar {
	width: 0;
}
blockquote, .btn-toggle-moreless {
	font-size: 1em !important;
	font-family: 'Noto Sans KR', sans-serif;
}
.moreless-content {
	white-space: wrap;
	word-break: break-all;
	border: 1px dotted #eee;
	border-radius: 10px;
	padding: 12px;
}
.article a[href], .btn-toggle-moreless {
	font-weight: bold;
}
.article a[href]:hover, .btn-toggle-moreless:hover {
	opacity: 0.7;
}
figure.fileblock, #tt-body-page figure.fileblock {
	display: inline-flex;
	justify-content: center;
	width: 100%;
	height: auto;
	border: 0;
	margin: 0;	
}
figure.fileblock .image, #tt-body-page figure.fileblock .image, figure.fileblock a::after, #tt-body-page figure.fileblock a::after, figure.fileblock .size, #tt-body-page figure.fileblock .size {
	display: none;
}
figure.fileblock .filename, #tt-body-page figure.fileblock .filename {
	margin: 0;
}
figure.fileblock a, #tt-body-page figure.fileblock a {
	max-width: 100%;
	height: auto;
	padding: 5px 15px;
	border: 1px solid #eee;
	border-radius: 15px;
	transition: .4s;
}
figure.fileblock .name, #tt-body-page figure.fileblock .name {
	max-width: 100%;
	font-size: 0.83em;
	font-family: 'Noto Sans KR', sans-serif;
}
figure.fileblock a:hover .name, #tt-body-page figure.fileblock a:hover .name {
	color: #fff;
}
figure.fileblock .desc, #tt-body-page figure.fileblock .desc {
	position: static;
}
pre code.hljs {
	font-family: 'Noto Sans KR', sans-serif !important;
	font-size: 1em;
}
.another_category, .tistoryProfileLayerTrigger { display: none !important; }
.txt_like.uoc-count {
	display: none !important;
}
.copyright {
	position: fixed;
	bottom: 5px;
	left: 5px;
}
.copyright a i {
	color: #dfcfe7;
}
.copyright a:hover i {
	color: #dfa2ff;
}
.container_postbtn {
	padding: 5px 0 !important;
}
.container_postbtn .postbtn_like + .btn_menu_toolbar {
	margin: 0 !important;
}
.postbtn_like {
	float: right !important;
}
/*-----------------------기본설정-----------------------*/







/* 넓이 */
#container {	
	display: flex;
	justify-content: space-between;
	width: 800px;
	margin: 100px auto 0;
}
#sidebar {	
	width: 230px;
}
#contentbox {
	width: 500px;
}



/* 커버 */
#cover > * {
	margin-bottom: 20px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 10px;
}
.notice_article {
	white-space: pre-wrap;	
	word-break: break-all;
	font-size: 1em;
	padding: 12px;
}
.cover_gallary, .cover_nothumb {
	overflow: auto;
	padding: 12px;
}
.cover_gallary .thumblist {
	width: 25% !important;
	border-radius: 10px !important;
}
.cover_gallary .thumblist .bgbox {
	border-radius: 10px !important;
}
.cover_nothumb .nothumb .tit_post {
	padding: 6px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/* 컨텐츠박스 */
#contentbox {
	align-self: flex-start;
	margin-bottom: 40px;	
	animation: fadein 1s;
	-moz-animation: fadein 1s;
	-webkit-animation: fadein 1s;
	-o-animation: fadein 1s;
}
.content {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 12px;
	background: #fff;
}



/* 사이드바 */
#sidebar {
	position: sticky;
	top: 100px;
	align-self: flex-start;
}
#sidebar .header {
	border: 1px solid #eee;
	border-radius: 10px;
	overflow: hidden;
	text-align: center;
	background: #fff;
}
#sidebar .header .headerbg {
	width: 100%;
	padding-bottom: 85px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
#sidebar .profile {
	position: relative;
	margin-top: -30px;
	border: 7px solid #fff;
	border-radius: 50%;
}
#sidebar .itembox {
	display: flex;
	justify-content: space-around;
	margin-top: 25px;
}
#sidebar .itembox .item {
	width: 100%;
	font-size: 1.1em;	
	border-bottom: 2px solid transparent;
	transition: .4s;
}
#sidebar .itembox .item a {
	display: block;
	padding-bottom: 20px;
}



/* 검색박스 */
.search {
	display: block;
	width: 100%;
	margin-top: 15px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #eee;
}
.search input {
	width: 100%;
	border-radius: 0;
	border: 0;
	padding: 10px;
	text-align: center;
}
.search input::placeholder {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 0.8em;
	text-align: center;
}



/* 사이드바 - 카테고리 */
#sidebar .catebox {
	margin-top: 15px;
	border: 1px solid #eee;
	border-radius: 10px;
	background: #fff;
}
#sidebar .catebox .cate_tg {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: regular;
	font-size: 0.3em;
	text-transform:lowercase;
	
	
	padding: 10px;	
}
#sidebar .catebox i {
	transition: .4s;
}
#sidebar .catebox .cate_tg_t i {
	transform: rotate( 180deg );
}
#sidebar .catebox .category, .category .c_cnt, .category .link_tit, .sub_category_list {
	display: none;
	font-size: 0.3em;
}
.category ul {
	margin: 0;
	padding: 0;
}
.tt_category {
	border-top: 1px solid #eee;
}
.category_list > li {
	display: block;
	padding: 10px;
	border-top: 1px dashed #eee;
}
.category_list > li:first-child {
	border-top: 0;
}
.category_list a {
	display: block;
}
.sub_category_list {
	margin-top: 5px !important;
}
.sub_category_list > li {
	padding: 6px 10px;
	border-top: 1px dashed #eee;
}
.sub_category_list > li:first-child {
	border-top: 0;
}



/* 갤러리형 썸네일 */
.thumblist {
	float: left;
	padding: 1%;
}
.thumblist img {
	width: 100%;	
	border: 1px solid #eee;
	overflow: hidden;
}
.thumblist a {
	position: relative;
	display: block;
	width: 100%;		
}
.thumblist .bgbox {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(255,255,255,0.5);
	border-radius: 10px;
	overflow: hidden;
	opacity: 0;
	transition: .4s;	
}
.thumblist .tit_post {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	padding: 0 5px;
	opacity: 0;
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	transition: .4s;
}
.thumblist a:hover .bgbox, .thumblist a:hover .tit_post {
	opacity: 1;
}
.thumblist a:hover img {
	filter: blur(1px);
}



/* 일반 목록형 */
.nothumb {
	margin: 1%;
	border-top: 1px dashed #eee;
}
.nothumb:first-child {
	border-top: 0;
}
.nothumb img {
	display: none;
}
.nothumb .tit_post span {
	display: block;
	width: 100%;
	padding: 10px 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}



/* 본문 */
.articleWrap .titleWrap {
	font-weight: bold;
	font-size: 0.8em;
	word-break: break-all;	
}
.articleWrap .date {
	margin: 5px 0;
	color: #aaa;
	font-size: 0.6em;
}
.articleWrap .admin {
	text-align: right;
}
.articleWrap .admin a {
	display: inline-block;
	margin-left: 5px;
}
.articleWrap .article {
	word-break: break-all;
	margin-top: 15px;
}
.articleWrap .article_pw {
	display:block;
	margin:0 auto;
	width:100px;
	border-radius:0;
	padding:8px;
	color:#424242;
	border-left:0;
	border-top:0;
	border-right:0;
	border-bottom:1px solid #eee;
	text-align:center;
}
.cmbt {
	margin-top: 8px;
}



/* 댓글폼 */
.guest_tit {
	display: inline-block;
	padding: 8px 15px;
	border-radius: 5px;
	text-transform: capitalize;
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: 10px;
}
.comment {
	margin-top: 15px;
}
.inputbox {
	margin-bottom: 10px;
}
.inputbox span {
	display: inline-block;
	margin-right: 5px;
	border: 1px solid #eaeaea;
	border-radius: 15px;
	padding: 2px 5px;
	transition: .4s;
}
.inputbox input {
	width: 70px;
	border: 0;
	border-radius: 0;
	color: #4e4e4e;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 0.95em;
	background: transparent;
}
.inputbox input::placeholder {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 0.95em;
	color: #4e4e4e;
}
.textarea {
	display: flex;
	height: 120px;
	border: 1px solid #eaeaea;
	border-radius: 10px;
	padding: 4px 8px;
	transition: .4s;
}
.textarea textarea {
	width: 100%;
	resize: none;
	border: 0;
	border-radius: 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 1em;
}
.w_group {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
	margin-bottom: 20px;	
}
.w_group .submit {
	border: 1px solid #eaeaea;
	border-radius: 15px;
	padding: 2px 5px;
	transition: .4s;
}
.w_group .submit input {
	border: 0;
	border-radius: 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 0.9em;
	background: transparent;
	color: #4e4e4e;
}
.w_group .label {
	text-align: center;
}
input[id="secret"] + label:before {
	display: inline-block;
	width: 100%;
	content: "\e9cb";
	font-family: 'xeicon';
	color: #ccc;
	box-sizing: border-box;
	font-size: 1.5em;
	background: transparent;
}
input[id="secret"]:checked + label:before {
	content: "\e9cd";
}
input[id="secret"] {
	display: none;
}



/* 댓글리스트 */
.tistoryProfileLayerTrigger {
	display: none !important;
}
.commentlist > li {
	display: block;
	margin-top: 20px;
	border: 1px solid #eee;
	border-radius: 15px;
	padding: 10px 13px;
}
.commentlist > li > ul > li {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 10px;
	margin-top: 8px;
}
.commentlist .name .text {
	font-weight: bold;
}
.commentlist .control {
	margin-left: 5px;
}
.commentlist .desc {
	margin-top: 10px;
}



/* 페이징버튼 */
.paging {
	clear: both;
	display: flex;
	justify-content: space-between;
}
.paging a {
	display: inline-block;
	margin-top: 10px;
	padding: 5px;
}



/* 모바일웹 */
@media ( min-width: 800px ) {
	.category {
		max-height: 300px;
		overflow: auto;
	}
}
@media ( max-width: 800px ) {
	#container {
		width: 100%;
	}
	#sidebar {
		width: 28%;
	}
	#contentbox {
		width: 67%;
	}
}
@media ( max-width: 650px ) {
	#container {
		display: block;
		width: 80%;
		margin: 20px auto;
	}
	#sidebar {
		position: relative;
		width: 100%;
		top: 0;
		margin-bottom: 15px;
	}
	#contentbox {
		width: 100%;
	}
}
@media ( max-width: 500px ) {
	#container {
		width: 95%;
	}
}
@media ( max-width: 400px ) {
	.cover_gallary .thumblist {
		width: 50% !important;
	}
}







@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-moz-keyframes fadein { /* Firefox */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@-o-keyframes fadein { /* Opera */
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}