@charset "utf-8";

/* 
 *
 * 늘 쓰는 A4 by 늘뉴 
 * ver 2019.07.17
 * https://ncoding.tistory.com
 *
 * CSS CONTENTS:
 *
 * 01. 웹 폰트
 * 02. 기본 스타일 초기화
 * 03. 공통 스타일
 * 04. 레이아웃
 * 05. 세부 요소
 * 06. 게시글 본문
 * 07. 방명록 & 코멘트
 * 08. 하단
 * 09. 기타
 * 10. 반응형
 * 11. animation
 *
 */

/* ***** 01. 웹 폰트 ***** */
@import url('//cdn.jsdelivr.net/font-iropke-batang/1.2/font-iropke-batang.css');
@font-face { font-family: 'BMJUA'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Arita-dotum-Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-dotum-Medium.woff') format('woff'); font-weight: normal; font-style: normal; }

/* ***** 02. 기본 스타일 초기화 (가급적 수정하지 마세요) ***** */
* {-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
html,body {width:100%;height:100%;margin:0;padding:0;font-size:100%}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,figure,legend,textarea,p,blockquote,th,td,figure,select,input,button,img {margin:0;padding:0;border:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption {display:block}
button,input[type=submit],input[type=reset],input[type=button],#top-btn {overflow:visible;cursor:pointer}
input[type=text],input[type=email],input[type=password],input[type=submit],textarea,button {-webkit-appearance:none;background:none;outline:none;padding:3px}
input,select,textarea,button {font-family:'Roboto Condensed','Noto Sans DemiLight',sans-serif;font-size:100%;border-radius:0}
fieldset,label,input,button,select,img {vertical-align:middle}
button {border:0;background:transparent}
ul li {list-style:none}
img, fieldset {border:none}
figure figcaption {padding-top:0;min-height:auto}
p {word-break:break-all}
a {text-decoration:none}


/* ***** 03. 공통 스타일 ***** */
html	{ overflow:hidden }
body	{
	overflow:auto;
	font-size:var(--size);
	line-height:var(--line);
	text-align:justify;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
body:before {
	background-position:center top;
	background-attachment: fixed;
	position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1; 
	content:"";
}
body,a,input,button,textarea { color:var(--text);font-family:var(--font),'Noto Sans KR',sans-serif }
a:hover	{ color: var(--point);text-shadow:0 0 1px var(--point) }
img			{ max-width:100%;height:auto }
img:hover	{ transition:scale(1.1) }
.hide		{ display:none }

iframe		{ max-width:100% !important }

/* 웹킷 브라우저 스크롤바 */
::-webkit-scrollbar			{ width:2px; background:transparent; }
::-webkit-scrollbar-thumb	{ background-color:var(--point); -webkit-box-shadow:inset 0 0 7px rgba(0,0,0,0.3); border-radius:1em; }

/* 드래그 효과 */
::selection			{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }
::-moz-selection	{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }
::-webkit-selection	{ background-color:var(--point); color:var(--bg); transition: all 250ms ease-in; }


/* ***** 04. 레이아웃 ***** */
#wrap		{ 
	position:relative;
	max-width:var(--width);
	width:90%;
	min-height:100%;
	margin:0 auto;
	padding:5em;
	background:var(--content);
}
.wrap-inner	{
	opacity:0;
	-webkit-animation:fade-in 0.5s ease-in 0s 1 normal forwards;
	-moz-animation:fade-in .5s ease-in 0s 1 normal forwards;
	-ms-animation:fade-in .5s ease-in 0s 1 normal forwards;
	-o-animation:fade-in .5s ease-in 0s 1 normal forwards;
	animation:fade-in .5s ease-in 0s 1 normal forwards;
}
	
/* ***** 05. 세부 요소 ***** */ 
.protect		{ max-width:200px;margin:20vh auto;text-align:center }
.protect input	{ display:block;width:100%;padding:0;line-height:30px;text-align:center }
.protect .submit	{ margin-top:6px;background:transparent;border:1px solid rgba(0,0,0,.05) }
.protect .submit:hover { background:rgba(0,0,0,.01) }

/* ***** 06. 게시글 본문 ***** */
.article p,
.article h4,
.article ul,
.article ol { margin-bottom:var(--paragraph) !important; }
.article h2	{ line-height:1.5;font-size:2em;font-family:'Lobster',var(--font),'Noto Sans KR',sans-serif }
.article h3	{ margin-bottom:2em;padding-bottom:1em;border-bottom:1px solid rgba(0,0,0,.05);line-height:1.5;font-size:1.1em;font-weight:normal;font-family:'Lobster',var(--font),'Noto Sans KR',sans-serif }
.article h4	{ font-size:1.1em }
.article ul,
.article ol	{ margin-left:2em }
.article dt	{ text-decoration:underline }
.article dd	{ margin-left:20px;padding-bottom:10px }
.article code	{ font-family:'ubuntu mono','d2coding',monospace}

.article blockquote {position:relative;margin:1em 0;padding:1.5em 1.2em !important;background:none !important;font-size:1em !important}
.article blockquote[data-ke-style='box']	{}
.article blockquote[data-ke-style='normal']	{ padding:0.6em 1.2em;border-left:5px solid rgba(0,0,0,.1) }

figure.fileblock a			{ border:none }
figure.fileblock .name		{ height:auto }
figure.fileblock .filename	{ margin-top:10px }

.post-404	{ padding:4em 0;border-top-width:1px;border-top-style:solid;font-weight:bold;font-size:1.1em;text-align:center;}

/* more & less */
.btn-toggle-moreless,.moreless_fold span,.moreless_top span,.moreless_bottom span		{padding:5px;border-radius:0.3em;border-bottom:none !important;color:var(--point) !important;font-size:1em !important}
div[data-ke-type='moreLess'].open .btn-toggle-moreless,.moreless_top{padding-left:20px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTUuMDIyLDcuODE3bDIuOTk2LTIuNjUxbDIuOTk2LDIuNjUxYzAuMTk2LDAuMTk2LDAuNTE2LDAuMTk2LDAuNzExLDBjMC4xOTgtMC4xOTYsMC4xOTgtMC41MTQsMC4wMDItMC43MTFMOC4zODEsNC4xNDcKCQljLTAuMS0wLjEtMC4yMzEtMC4xNDgtMC4zNjItMC4xNDZDNy44ODcsMy45OTksNy43NTYsNC4wNDcsNy42NTYsNC4xNDdMNC4zMTEsNy4xMDZjLTAuMTk2LDAuMTk2LTAuMTk2LDAuNTE1LDAsMC43MTEKCQlDNC41MDcsOC4wMTMsNC44MjYsOC4wMTMsNS4wMjIsNy44MTd6Ii8+Cgk8cGF0aCBkPSJNOC4zODEsNy43MzNjLTAuMS0wLjEtMC4yMzEtMC4xNDgtMC4zNjItMC4xNDZDNy44ODcsNy41ODUsNy43NTYsNy42MzMsNy42NTYsNy43MzNsLTMuMzQ1LDIuOTU4CgkJYy0wLjE5NiwwLjE5Ny0wLjE5NiwwLjUxNiwwLDAuNzExYzAuMTk2LDAuMTk3LDAuNTE1LDAuMTk3LDAuNzExLDBsMi45OTYtMi42NDlsMi45OTYsMi42NDljMC4xOTYsMC4xOTcsMC41MTYsMC4xOTcsMC43MTEsMAoJCWMwLjE5Ni0wLjE5NSwwLjE5Ni0wLjUxNCwwLTAuNzExTDguMzgxLDcuNzMzeiIvPgo8L2c+Cjwvc3ZnPg==) center left no-repeat}
.moreless_bottom{padding-right:20px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTUuMDIyLDcuODE3bDIuOTk2LTIuNjUxbDIuOTk2LDIuNjUxYzAuMTk2LDAuMTk2LDAuNTE2LDAuMTk2LDAuNzExLDBjMC4xOTgtMC4xOTYsMC4xOTgtMC41MTQsMC4wMDItMC43MTFMOC4zODEsNC4xNDcKCQljLTAuMS0wLjEtMC4yMzEtMC4xNDgtMC4zNjItMC4xNDZDNy44ODcsMy45OTksNy43NTYsNC4wNDcsNy42NTYsNC4xNDdMNC4zMTEsNy4xMDZjLTAuMTk2LDAuMTk2LTAuMTk2LDAuNTE1LDAsMC43MTEKCQlDNC41MDcsOC4wMTMsNC44MjYsOC4wMTMsNS4wMjIsNy44MTd6Ii8+Cgk8cGF0aCBkPSJNOC4zODEsNy43MzNjLTAuMS0wLjEtMC4yMzEtMC4xNDgtMC4zNjItMC4xNDZDNy44ODcsNy41ODUsNy43NTYsNy42MzMsNy42NTYsNy43MzNsLTMuMzQ1LDIuOTU4CgkJYy0wLjE5NiwwLjE5Ny0wLjE5NiwwLjUxNiwwLDAuNzExYzAuMTk2LDAuMTk3LDAuNTE1LDAuMTk3LDAuNzExLDBsMi45OTYtMi42NDlsMi45OTYsMi42NDljMC4xOTYsMC4xOTcsMC41MTYsMC4xOTcsMC43MTEsMAoJCWMwLjE5Ni0wLjE5NSwwLjE5Ni0wLjUxNCwwLTAuNzExTDguMzgxLDcuNzMzeiIvPgo8L2c+Cjwvc3ZnPg==) center right no-repeat;text-align:right}
div[data-ke-type='moreLess'] .btn-toggle-moreless,.moreless_fold{padding-left:20px;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDE2IDE2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNiAxNiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTEwLjk3OSw4LjE4MmwtMi45OTcsMi42NWwtMi45OTYtMi42NWMtMC4xOTYtMC4xOTYtMC41MTUtMC4xOTYtMC43MTEsMGMtMC4xOTYsMC4xOTYtMC4xOTYsMC41MTUsMCwwLjcxbDMuMzQ1LDIuOTU5CgkJYzAuMSwwLjEwMSwwLjIzMSwwLjE0OCwwLjM2MiwwLjE0NkM4LjExMywxMiw4LjI0NCwxMS45NTMsOC4zNDQsMTEuODU0bDMuMzQ2LTIuOTU5YzAuMTk1LTAuMTk2LDAuMTk1LTAuNTE2LDAtMC43MTEKCQlDMTEuNDkzLDcuOTg3LDExLjE3NCw3Ljk4NiwxMC45NzksOC4xODJ6Ii8+Cgk8cGF0aCBkPSJNNy42MTksOC4yNjZjMC4xLDAuMSwwLjIzMSwwLjE0OCwwLjM2MiwwLjE0NmMwLjEzMSwwLjAwMiwwLjI2My0wLjA0NiwwLjM2Mi0wLjE0NmwzLjM0NS0yLjk1OQoJCWMwLjE5OS0wLjE5NiwwLjE5OS0wLjUxNCwwLjAwMi0wLjcxMWMtMC4xOTYtMC4xOTYtMC41MTYtMC4xOTYtMC43MTEsMGwtMi45OTcsMi42NWwtMi45OTYtMi42NUM0Ljc4OSw0LjQsNC40Nyw0LjQsNC4yNzQsNC41OTYKCQljLTAuMTk2LDAuMTk2LTAuMTk2LDAuNTE1LDAsMC43MTFMNy42MTksOC4yNjZ6Ii8+CjwvZz4KPC9zdmc+) center left no-repeat;}
.moreless-content	{ padding-bottom:1em;border-bottom:1px dashed var(--point); }
 
.container_postbtn	{ padding:1em 0 0 0 !important;opacity:0.7 }
.container_postbtn .postbtn_ccl		{ margin-right:1em }
.container_postbtn .postbtn_ccl a	{ border:none }
.container_postbtn .postbtn_like	{ float:right !important; border:none !important }
.container_postbtn .postbtn_like + .btn_menu_toolbar { display:none; }
.container_postbtn .btn_post .txt_like	{ display:none !important }
.container_postbtn .btn_post .ico_like	{ margin-right:0 !important }
.container_postbtn .wrap_btn_share	{ display:none }

/* ***** 07. 방명록 & 코멘트 ***** */


/*  ***** 08. 하단 *****  */
#top-btn	{ display:none;position:fixed;right:25px;bottom:30px;z-index:1;font-size:1.5em;line-height:1}
#footer	{ max-width:var(--width);margin:2em auto 5em auto;font-size:11px; }

/* ***** 09. 기타 ***** */

/* ***** 10. 반응형 ***** */
@media all and (max-width: 767px) {
	#wrap		{ margin:5em 0;padding:5% }
	.tt_article_useless_p_margin h2	{ font-size:1.7em }
	.tt_article_useless_p_margin h3	{ font-size:1em }
	#footer	{ margin:2em 0 }
}

/* ***** 11. animation ***** */
@-webkit-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-moz-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-ms-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@-o-keyframes fade-in { from { opacity:0 } to { opacity:1 } }
@keyframes fade-in { from { opacity:0 } to { opacity:1 } }