:root {
	--main-theme-medium: #4F5259;
	--main-theme-light: #7E8491;
	--main-theme: #2F3134;
}
body {
	background: -ms-linear-gradient(150deg, var(--main-theme) 0%,
		var(--main-theme-medium) 100%);
	background: linear-gradient(150deg, var(--main-theme) 0%,
		var(--main-theme-medium) 100%);
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans KR';
	font-size: 15px;
	color: #353535;
	margin: 0
}
.mobile {
	display: none !important
}
#tistorytoolbarid {
	display: none !important
}
.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

/* header */
.header {
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	justify-content: space-between;
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: #FFFFFF;
	position: absolute;
	text-align: left;
	padding: 0 15px;
	display: flex;
	height: 57px;
	z-index: 30;
	margin: 0;
	right: 0;
	left: 0;
	top: 0
}
.header h1 {
	font-family: 'Libre Barcode 128 Text', cursive;
	display: inline-block;
	font-weight: 100;
	font-size: 30px;
	color: #474747;
	margin: 0
}
.header h1:hover {
	opacity: .8
}
.search-area {
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: flex;
}
.search-input {
	-webkit-box-shadow: 0 0 0 1px #F3F3F3;
	-moz-box-shadow: 0 0 0 1px #F3F3F3;
	box-shadow: 0 0 0 1px #F3F3F3;
	vertical-align: middle;
	background: #FBFBFB;
	border-radius: 30px;
	font-weight: 300;
	font-size: 12px;
	padding: 0 12px;
	color: #404040;
	width: 160px;
	height: 28px;
	border: none;
	margin: 0
}
.search-input::placeholder {
	color: #E3E3E3
}
.menu-button {
	display: inline-block;
	margin-left: 10px;
	cursor: pointer;
	height: 20px
}
.menu-button img {
	vertical-align: middle;
	height: 20px
}
.menu-button:hover {
	opacity: .8
}

/* menu */
.menu {
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
	font-family: 'Fake Receipt';
	padding: 85px 15px 20px;
	background: #FEFEFE;
	position: absolute;
	overflow-y: auto;
	color: #303030;
	display: none;
	width: 195px; /* 데스크탑 메뉴 너비 */
	right: 10px;
	z-index: 20;
	top: 0
}
.menu h1 {
	font-family: 'Libre Barcode 128 Text', cursive;
	text-align: center;
	font-weight: 100;
	margin: 0 0 30px;
	font-size: 33px;
	cursor: default;
	color: #505050
}
.menu li, ul {
	white-space: nowrap;
	list-style: none;
	padding: 0;
	margin: 0
}
.menu a {
	text-decoration: none;
	line-height: 25px;
	font-size: 15px;
	padding: 0 4px;
	color: #303030
}
.menu a:hover {
	color: #757575
}
.link_sub_item:before {
	content: '*'
}
.menu .bar {
	white-space: nowrap;
	text-align: center;
	font-size: 12px;
	margin: 10px 0
}
.etc-category-list {
	margin-top: 10px
}
.maker-category-list {
	text-align: center
}
.maker-category-list a, li {
	line-height: 15px;
	font-size: 10px;
	margin: 0
}

/* article list */
.container {
	-webkit-transition-duration: .3s;
	min-height: calc(100vh - 167px);
	transition-duration: .3s;
	text-align: center;
	padding-top: 30px;
	margin-top: 57px;
	right: 0;
	left: 0;
	top: 0
}
.article-list {
	max-width: 780px;
	text-align: left;
	margin: 0 auto
}
.article-list-element {
	-webkit-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 30px rgba(0, 0, 0, 0.2);
	border-bottom: 10px solid #F3F3F3;
	display: inline-block;
	margin: 0 20px 35px;
	position: relative;
	text-align: center;
	background: #FFF;
	height: 345px;
	width: 230px;
	float: left
}
.article-list-element:nth-last-child(-n + 4) {
	margin-bottom: 20px
}
.article-list-element:nth-of-type(3n - 2) {
	margin-left: 0
}
.article-list-element:nth-of-type(3n) {
	margin-right: 0
}
.article-list-element a {
	text-decoration: none;
	color: #454545
}
.top-shade {
	-webkit-box-shadow: inset 0 -5px 5px -2px rgba(0, 0, 0, .05);
	-moz-box-shadow: inset 0 -5px 5px -2px rgba(0, 0, 0, .05);
	box-shadow: inset 0 -5px 5px -2px rgba(0, 0, 0, .05);
	-webkit-transition-duration: .3s;
	-webkit-align-items: center;
	-webkit-box-align: center;
	transition-duration: .3s;
	-ms-flex-align: center;
	align-items: center;
	background: #F7F7F7;
	display: flex;
	height: 50px;
	margin: 0
}
.top-shade p {
	background: var(--main-theme);
	border-radius: 30px;
	margin: 0 auto;
	height: 20px;
	width: 20px
}
.info-title, .info-category {
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 216px;
	overflow: hidden;
	text-align: left;
	font-size: 23px;
	display: block;
	margin: 0 12px
}
.info-title {
	font-family: 'Do Hyeon';
	margin-top: 23px;
}
.info-category {
	font-family: 'Noto Sans KR';
	margin-bottom: 20px;
	margin-top: -5px;
	font-weight: 100;
	font-size: 13px
}
.thumbnail_post {
	-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, .015);
	-moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, .015);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, .015);
	background: #F9F9F9;
	border-radius: 5px;
	margin: 0 auto;
	height: 170px;
	width: 215px;
	padding: 0
}
.thumbnail_post p {
	font-family: 'Libre Barcode 128 Text', cursive;
	display: inline-block;
	position: absolute;
	line-height: 170px;
	font-weight: 300;
	font-size: 40px;
	margin: 0 auto;
	color: #F0F0F0;
	z-index: 0;
	right: 0;
	left: 0;
}
.thumbnail_image {
	object-position: center;
	border-radius: 5px;
	position: absolute;
	object-fit: cover;
	margin: 0 auto;
	height: 170px;
	width: 215px;
	z-index: 10;
	right: 0;
	left: 0
}
.info-date {
	font-family: 'Fake Receipt';
	color: #505050 !important;
	margin: 15px auto 0;
	text-align: center;
	line-height: 13px;
	font-weight: 100;
	font-size: 11px;
	display: block
}

/* article */
.article-container {
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	display: inline-block;
	margin-bottom: 20px;
	background: #FFF;
	max-width: 880px;
	z-index: 20;
	width: 100%
}
.article-top {
	width: calc(100% - 40px);
	padding: 60px 20px 40px
}
.article-top h2 {
	max-width: calc(100% - 40px);
	font-family: 'Do Hyeon';
	word-wrap: break-word;
	display: inline-block;
	line-height: 35px;
	font-size: 40px;
	margin: 0
}
.top-info {
	display: inline-block;
	font-size: 14px;
	color: #454545;
	padding: 0 1px;
	margin: 0
}
.top-info a {
	text-decoration: none;
	font-weight: 100;
	color: #454545
}
.article {
	padding: 10px 20px 0
}
.article div p {
	font-size: 16px !important;
	line-height: 25px;
	font-weight: 400
}
.article-date {
	font-family: 'Fake Receipt';
	text-align: center;
	font-size: 13px;
	display: block;
	color: #555555;
	margin: 15px 0
}
.imageblock img {
	margin: 15px 0 !important;
	border-radius: 5px
}
.imageblock a {
	text-decoration: none;
	background: #252525;
	border-radius: 2px;
	padding: 1px 3px;
	color: #F3F3F3
}
.imageblock a:hover {
	background: #404040
}
.container_postbtn {
	padding-bottom: 20px !important
}
.admin {
	margin-top: 15px;
	font-size: 0
}
.admin a {
	display: inline-block;
	background: #F3F3F3;
	line-height: 19px;
	padding: 3px 7px;
	font-size: 12px;
	color: #707070;
	height: 19px;
	margin: 0
}
.admin a:nth-of-type(1) {
	border-bottom-left-radius: 15px;
	border-top-left-radius: 15px;
	padding-left: 10px
}
.admin a:nth-of-type(n):hover {
	background: #353535!important;
	color: #DEDEDE!important
}
.admin a:nth-of-type(3) {
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	padding-right: 10px
}

/* related */
.area_related {
	position: relative;
	z-index: 20;
	width: 100%
}
.area_related a {
	text-decoration: none
}
.list_related {
	background: #252525;
	text-align: left;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0
}
.link_related {
	background: #FAFAFA;
	position: relative;
	text-align: center;
	overflow: hidden;
	display: block;
	height: 120px;
	width: 100%
}
.related_list_element {
	vertical-align: top;
	float: left;
	width: 25%;
	margin: 0
}
.filter {
	background: #202020;
	position: absolute;
	height: 100%;
	width: 100%;
	opacity: .5;
	z-index: 20
}
.thumb_related {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 10;
	left: 0;
	top: 0
}
.img_related {
	-webkit-filter: blur(.5px);
	object-position: 50% 50%;
	transform: scale(1.05);
	filter: blur(.5px);
	object-fit: cover;
	height: 100%;
	width: 100%
}
.txt_related {
	font-family: 'Do Hyeon';
	text-overflow: ellipsis;
	word-wrap: break-word;
	padding: 27px 20px 0;
	position: relative;
	line-height: 20px;
	font-weight: 400;
	overflow: hidden;
	max-height: 40px;
	font-size: 18px;
	display: block;
	color: #FFF;
	z-index: 30;
	left: 0;
	top: 0
}
.date_related {
	font-family: 'Fake Receipt';
	position: absolute;
	font-weight: 100;
	font-size: 13px;
	bottom: 20px;
	opacity: .6;
	z-index: 30;
	width: 100%;
	color: #FFF;
	left: 0
}

/* comment area */
.comment_container {
	width: calc(100% - 40px);
	position: relative;
	margin: 0 20px
}
.empty {
	margin: 30px 0 25px;
	text-align: center;
	cursor: default;
	display: block
}
.empty p:first-of-type {
	color: var(--main-theme-light);
	line-height: 40px;
	font-size: 40px
}
.empty p:last-of-type {
	font-family: 'Fake Receipt';
	font-size: 15px;
	color: #454545
}
.comment_container a {
	color: var(--main-color) !important
}
.tt_more_preview_comments_text {
	display: none
}
.tt_more_preview_comments_wrap {
	padding-bottom: 10px;
	margin: -20px 0;
	height: 0
}
.tt_more_preview_comments_wrap:after {
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	color: var(--main-theme-light);
	border: 1px solid #EEE;
	padding: 20px 9px 0;
	background: #F9F9F9;
	position: relative;
	text-align: center;
	font-weight: 300;
	font-size: 22px;
	content: "+"
}
.tt_more_preview_comments_wrap:hover::after {
	background: #F2F2F2
}
.comment_list {
	display: inline-block;
	width: 100%
}
.comment_list ol {
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	padding: 25px 10px 5px;
	list-style: none;
	margin-bottom: 0;
	margin-top: 0
}
.comment_list li {
	margin-bottom: 15px;
	text-align: left
}
.comment_list ul {
	list-style: none;
	padding: 0 30px
}
.comment_list ul li {
	margin-bottom: 0;
	margin-top: 5px
}
.comment_list ul li .rp_comment {
	margin-left: 30px
}
.comment_list p {
	word-break: break-all;
	margin-bottom: 5px;
	line-height: 20px;
	margin-top: 1px;
	display: grid
}
.comment_img {
	margin-right: 10px;
	height: inherent;
	float: left
}
.comment_img img {
	border-radius: 50px
}
.small {
	margin: 1px 8px 0 0
}
.comment_main {
	display: grid
}
.name {
	display: inline-block;
	line-height: 26px;
	font-weight: 400;
	margin-top: 4px;
	font-size: 17px;
	color: #272727
}
.name:empty::before {
	content: "Secret";
	color: #909090
}
.name a {
	text-decoration: none;
	color: #272727
}
.name span {
	display: none
}
.date {
	margin-bottom: 5px;
	line-height: 13px;
	font-weight: 300;
	font-size: 12px;
	color: #AAA
}
.date a {
	text-decoration: none;
	color: #BBB
}
.date a:hover {
	color: #DDD
}
.control {
	display: inline-block;
	padding-left: 3px;
	height: 25px
}
.control a {
	text-decoration: none;
	color: #858585;
	height: 25px
}
.control a:hover {
	opacity: .7
}
.control img {
	height: 17px
}
.rp_comment .name {
	margin-top: 1px
}
.comment_main p {
	font-weight: 300;
	font-size: 14px
}
.comment_margin {
	height: 15px
}
.comment_container form {
	text-align: center;
	margin: auto
}
.comment_input_area {
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	display: inline-block;
	position: relative;
	text-align: left;
	margin: 0 auto;
	width: 100%;
	padding: 0
}
.comment_input_header {
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border: 1px solid #EFEFEF;
	background: #F5F5F5;
	text-align: center;
	font-weight: 300;
	font-size: 13px;
	padding: 3px
}
.comment_input {
	width: calc(100% - 20px);
	background: #272727;
	padding: 5px 10px;
	border-radius: 0;
	font-weight: 300;
	font-size: 14px;
	color: #F5F5F5;
	display: block;
	border: none;
	height: 90px;
	resize: none
}
.comment_input::placeholder {
	color: #505050
}
.comment_input:focus {
	outline: none
}
.comment_option_area {
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	width: calc(100% - 20px);
	background: #272727;
	padding: 4px 10px;
	font-weight: 400;
	font-size: 13px;
	color: #BBB;
	float: left;
	margin: 0
}
.comment_option_area div:first-of-type {
	display: inline-block;
	float: left
}
.comment_option_area div:last-of-type {
	display: inline-block;
	float: right
}
.comment_post {
	border-radius: 30px;
	background: #353535;
	text-align: center;
	padding: 2px 15px;
	cursor: pointer;
	font-size: 12px;
	color: #909090;
	width: 80px
}
.comment_post:hover {
	background: #454545
}
.comment_option_area label {
	font-size: 12px;
	color: #EEE
}
.comment_option_area input {
	background: none;
	font-size: 12px;
	border: none;
	width: 120px;
	color: #EEE
}
.comment_option_area .checkbox {
	display: none;
	width: 12px;
	padding: 0;
	margin: 0
}
.secret_label {
	vertical-align: center
}
.comment_option_area .checkbox+.secret_label .secret_span {
	background: url(./images/checkbox_0.png) no-repeat;
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	display: inline-block;
	position: relative;
	cursor: pointer;
	height: 11px;
	width: 11px;
	top: 1px
}
.comment_option_area .checkbox:checked+.secret_label .secret_span {
	background: url(./images/checkbox_1.png);
	-webkit-background-size: 100% 100%;
	-khtml-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	background-size: 100% 100%;
	display: inline-block
}

/* tags */
.tag-list .cloud {
	min-height: 350px;
}
.tag-list {
	color: rgba(0, 0, 0, 0)!important;
	font-family: 'Noto Sans KR';
	text-overflow: ellipsis;
	margin: 0 20px 15px;
	text-align: left;
	overflow: hidden;
	display: block
}
.tag-list a {
	border: 1px solid #F3F3F3;
	text-decoration: none;
	display: inline-block;
	border-radius: 30px;
	line-height: 17px;
	font-weight: 100;
	padding: 3px 8px;
	font-size: 12px;
	color: #505050;
	margin: 3px 0
}
.tag-list a:before {
	content: "#"
}
.tag-list a:hover {
	background: #F8F8F8
}

/* guestbook */
.guestbook {
	padding: 0 20px 30px
}
.guestbook .comment_list {
	min-height: 181px
}

/* pager */
.pager {
	margin-bottom: 20px !important;
	font-family: 'Do Hyeon';
	text-align: center
}
.pager a {
	text-decoration: none;
	color: #DEDEDE
}
.pager a:not([href]) {
	cursor: default
}
.pager a:hover {
	color: #AAADB7
}
.pager .selected {
	color: var(--main-theme-light)
}
.page_rep, .pager-button {
	font-size: 14px
}
.prev, .next {
	padding: 0 5px
}
.no-more-prev, .no-more-prev:hover, .no-more-next, .no-more-next:hover {
	color: var(--main-theme-light) !important
}

/* footer */
.footer {
	-webkit-box-shadow: inset 0 5px 5px -2px rgba(0, 0, 0, .07);
	-moz-box-shadow: inset 0 5px 5px -2px rgba(0, 0, 0, .07);
	box-shadow: inset 0 5px 5px -2px rgba(0, 0, 0, .07);
	background: var(--main-theme);
	font-family: 'Fake Receipt';
	-webkit-align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	font-weight: 100;
	font-size: 10px;
	color: #696E72;
	display: flex;
	height: 60px
}
.footer a, .footer strong {
	text-decoration: none;
	color: #83888E
}
.footer a:hover > strong {
	color: #969BA3
}
.count_box p, .copyright p {
	margin: 2px;
	padding: 0
}
.count_box {
	position: absolute;
	text-align: left;
	left: 13px
}
.copyright {
	display: inline-block;
	text-align: center;
	margin: 0 auto
}

@media only screen and (max-width: 780px) {
	body {
		background: #FFF
	}
	.desktop {
		display: none !important
	}
	.mobile {
		display: block !important
	}

	/* search */
	.search-area {
		text-align: center
	}
	.search-input {
		width: calc(100% - 30px);
		margin: -10px auto 15px
	}

	/* menu */
	.menu {
		width: 195px /* 모바일 메뉴 너비 */
	}

	/* article list */
	.container {
		min-height: calc(100vh - 152px);
		padding-top: 15px
	}
	.article-list-element {
		padding: 0 0 15px 15px;
		margin: 0!important;
		text-align: left;
		box-shadow: none;
		display: block;
		border: none;
		height: 90px;
		width: auto;
		float: none
	}
	.article-list-element:last-of-type {
		padding-bottom: 15px;
	}
	.thumbnail_post {
		display: inline-block;
		border-radius: 10px;
		height: 90px;
		width: 90px;
		margin: 0
	}
	.thumbnail_post p {
		display: none
	}
	.thumbnail_image {
		border-radius: 10px;
		position: relative;
		height: 90px;
		width: 90px;
		margin: 0
	}
	.info-mobile {
		width: calc(100vw - 135px);
		display: inline-block;
		margin: 5px 0 0 10px;
		vertical-align: top
	}
	.info-summary {
		color: #A8ABAF !important;
		word-break: break-all;
		word-wrap: break-word;
		overflow-y: hidden;
		line-height: 15px;
		font-weight: 200;
		font-size: 12px;
		display: block;
		height: 30px;
		width: 100%
	}
	.info-title.mobile {
		color: var(--main-theme-medium);
		display: block !important;
		max-width: initial;
		margin: 0 0 -5px;
		width: 100%
	}
	.info-date.mobile, .info-category.mobile {
		display: inline-block !important;
		text-align: left;
		margin: 0
	}
	.info-category.mobile {
		color: var(--main-theme-light);
		font-weight: 400
	}
	.info-date.mobile {
		font-family: 'Noto Sans KR';
		color: #BBB !important;
		font-weight: 100;
		font-size: 13px
	}

	/* article */
	.top-shade, .top-shade p {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		background: #FFF;
		height: 0px
	}
	.article-top {
		padding: 40px 20px 30px
	}

	/* tag cloud, guestbook */
	.tag.article-container, .guestbook.article-container {
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none
	}

	/* comment area */
	.comment_container {
		width: calc(100% - 20px);
		margin: 0 auto
	}
	.tt_more_preview_comments_wrap:after {
		top: -15px
	}
	.comment_option_area input {
		width: 75px
	}
	.comment_option_area input:first-of-type {
		width: 45px
	}

	/* related */
	.related_list_element {
		display: block !important;
		vertical-align: initial;
		width: 100%;
		margin: 0
	}
	.link_related {
		height: 80px
	}
	.txt_related {
		padding: 22px 20px 0;
		line-height: 20px;
		max-height: 20px;
		font-size: 19px
	}
	.date_related {
		bottom: 15px
	}

	/* pager */
	.pager a {
		color: var(--main-theme-light)
	}
	.pager a:hover {
		color: #AAADB7
	}
	.pager .selected {
		color: #DEDEDE
	}
	.no-more-prev, .no-more-prev:hover, .no-more-next, .no-more-next:hover {
		color: #DEDEDE !important
	}
}