@charset "utf-8";

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

/* ***** 01. 웹 폰트 ***** */
@font-face { font-family: 'D2Coding'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.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}
h2{font-size:1em}


/* ***** 03. 공통 스타일 ***** */
html	{ overflow:hidden }
body	{
	overflow:auto;
	line-height:2;
	font-family:'Roboto Condensed','Noto Sans DemiLight',sans-serif;
	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:"";
}
img			{ max-width:100%;height:auto }
img:hover	{ transition:scale(1.1) }
.hide		{ display:none }

iframe		{ max-width:100% !important}
textarea		{ width:100%;height:100px;line-height:1.8 }

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

/* 드래그 효과 */
::selection			{ color:transparent; text-shadow: 0 0 2px #aaa; transition: all 250ms ease-in; }
::-moz-selection	{ color:transparent; text-shadow: 0 0 2px #aaa; transition: all 250ms ease-in; }
::-webkit-selection	{ color:transparent; text-shadow: 0 0 2px #aaa; transition: all 250ms ease-in; }


/* ***** 04. 레이아웃 ***** */
#wrap		{ position:relative;max-width:700px;margin:5em auto 0 auto;box-shadow:0 0 5px rgba(0,0,0,.2); }
#container	{ opacity:0;-webkit-animation:fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s 1 normal both running;animation:fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) 0s 1 normal both running; }
#header	{ position:relative;overflow:auto;width:100%;min-height:100px;padding:2em 6em;box-sizing:border-box;line-height:126px; }
#footer-wrap	{ margin:0 auto;padding:1em;box-sizing:border-box }

/* 노트 레이아웃 */
.table-wrap		{ width:100% }
.entry			{ display:none;margin-bottom:1em;box-shadow: 0 5px 5px -3px rgba(0,0,0,.2); }
#tt-body-page .entry	{ display:block }
.tr-list		{ clear:both;position:relative }
.tr-list,
.guest-rp-wrap .td-subject .date button { line-height:2.6em }
.tr-toggle		{ cursor:pointer }
.td-category,
.td-subject		{ border-top-width:1px;border-style:solid }
.td-category	{ position:absolute;top:0;bottom:0;width:6em;border-right-width:1px;border-style:solid;text-align:center;vertical-align:top }
.td-category .ad_div	{ display:block }
.td-subject			{ margin-left:6em;padding:0 1em;box-sizing:border-box;vertical-align:top; }
.td-subject.content	{ padding:1em }
.td-subject .date	{ position:absolute;right:1em;font-size:0.8em }

	
/* ***** 05. 세부 요소 ***** */ 
#loading	{ position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(255,255,255,.7);z-index:1;text-align:center}
#loading p	{ position:absolute;top:50%;right:0;left:0;margin-top:-1em;}
/* header */
#header-image		{display:inline-block;position:relative;line-height:1.4}
#header-image.left	{float:left}
#header-image.right	{float:right}
#header-image.has-img	{
	width:120px; height:120px;
	padding:3px;
	background:#fff;
	box-shadow:0 0 2px rgba(0,0,0,.3)
}

#header-image h1	{display:inline-block;font-size:1em;vertical-align:middle}
#header-image.has-img h1 {opacity:0;position:absolute;top:3px;left:3px;bottom:3px;right:3px;background:rgba(255,255,255,.5);line-height:1.6;text-align:center}
#header-image.has-img h1 span { position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%) }
#header-image.has-img:hover h1 { opacity:1 }

#header .header-txt	{ display:inline-block;opacity:0;line-height:1.8;vertical-align:middle }
#header .header-txt.left	{margin-left:1em}
#header .header-txt.right	{margin-right:1em}

/* user_btn */
.user_btn.only-pc	{ position:absolute;top:-2.2em;right:5px;font-size:11px;opacity:.9; }
.user_btn li	{ display:none;cursor:pointer }

/* category */
#tt_category	{ display:inline }
#category .category_list,
#category .sub_category_list,
#category .sub_category_list li { display:inline }
#category .right 	{ float:right;margin-left:1em }
#category .link_tit:before,
.only-mo .cate-btn:before { content:"\f0c9";display:inline-block;margin-right:2px;font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1; }
#category .category_list li { display:inline;margin-left:0.5em }

/* cover */
.cover .notice-wrap	{ display:table;table-layout:fixed;width:100% }
.cover .twitter i	{ vertical-align:middle }
.cover .thumb-list ul li { display:inline-block;max-width:20% }
.cover .thumb-list figure	{ position:relative;overflow:hidden }
.cover .thumb-list figcaption { opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.5);font-size:0.9em;line-height:1.6;text-align:center}
.cover .thumb-list figcaption span {position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%) }
.cover .thumb-list figure:hover figcaption { opacity:1 }

/* tag */
#tag li	{display:inline-block;margin-right:1em}

/* article list */
.tr-list .title	{display:inline-block;overflow:hidden;max-width:calc(100% - 100px);vertical-align:inherit;white-space:nowrap;text-overflow:ellipsis}


/* ***** 06. 게시글 본문 ***** */
.entry .protect		{ padding:0 }
.article p	{ line-height:2.2;margin-bottom:6px!important }
.article h2	{ font-size:1.5em;margin-top:0.5em }
.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:1.2em !important}
.article blockquote[data-ke-style='box'] {border-style:dashed !important;border-color:rgba(0,0,0,.1) !important;border-left:none !important;border-right:none !important;}
.article blockquote[data-ke-style='box']:before {content:"\f10d";position:absolute;top:0;left:0;font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1;}
.article blockquote[data-ke-style='box']:after {content:"\f10e";position:absolute;bottom:0;right:0;font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1}
.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, #tt-body-page figure.fileblock .name { height:auto }
figure.fileblock .filename, #tt-body-page 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;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 }
 
.container_postbtn	{ padding:2em 0 1em 0 !important }
.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 }

/* ***** 07. 방명록 & 코멘트 ***** */
.rp-area		{ display:none; }
.guest-rp-write,
.guest-rp-wrap	{ margin-bottom:8px;box-shadow: 0 5px 5px -3px rgba(0,0,0,.2); }
.guest-rp-write .input		{ text-align:left }
.guest-rp-write .submit		{ text-align:right }
.guest-rp-write .submit input[type=checkbox]					{ visibility:hidden }
.guest-rp-write .submit input[type=checkbox]::before			{ content:"\f09c";padding:2px;font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1;visibility:visible }
.guest-rp-write .submit input[type=checkbox]:checked::before	{ content:"\f023";}
.guest-rp-write textarea	{ width:100%;padding:0.5em 0;background:none }

.guest-rp p	{ padding:0.3em 0;line-height:2em }
.guest-rp .td-category,
.guest-rp .td-subject	{ border-top-style:dashed }
.guest-rp-wrap .tr-list:not(.guest-rp) .td-subject	{ text-align:right }

.guest-rp-wrap .td-subject .date	{ float:right;position:static;margin-left:0.5em }
.guest-rp-wrap .td-subject .date a	{ float:left;margin-right:0.3em }
.guest-rp-wrap .td-subject .date a::before { content:"\f06a";font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1;font-size:0.8em;opacity:.5 }

.guest-rp-wrap .td-subject .control		{ display:none;float:right;margin:0;font-size:0.8em }
.guest-rp-wrap .td-subject .control a	{ padding:2px; }
.guest-rp-wrap>div:hover .control		{ display:inline;margin-left:6px }

.guest-rp-wrap .td-subject iframe	{ min-height:200px }

.tistoryProfileLayerTrigger	{ display:none !important }



/*  ***** 08. 하단 *****  */
#paging			{ float:right }
#paging .num		{ display:inline-block;margin:0 3px; }
#paging .num .selected	{ font-weight:bold }
#paging .no-more-prev {padding-left:6px;color:rgba(0,0,0,.1)!important}
#paging .no-more-next {padding-right:6px;color:rgba(0,0,0,.1)!important}
#paging .no-more-prev:hover,.no-more-next:hover {color:rgba(0,0,0,.1)!important;cursor:default}

#footer-wrap .search			{ display:inline-block; }
#footer-wrap .search input		{ width:0px;border-bottom:1px solid rgba(0,0,0,.1) }
#footer-wrap .search:hover input,
#footer-wrap .search input:hover,
#footer-wrap .search input:focus	{ width:120px }
#footer-wrap #top-btn	{ display:none;position:fixed;right:25px;bottom:30px;z-index:1;font-size:1.5em;line-height:1}
#footer-wrap #footer	{ margin:3em 0;font-size:11px;text-align:center }

@media screen and (max-width: 700px) {
	body { background-size: 100% 100%; font-size:1em }
	#wrap .article { font-size:1em }
}
@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}
@keyframes fade-in{0%{opacity:0}100%{opacity:1}}


/* ***** 09. 기타 ***** */
.menu_toolbar .btn_menu_toolbar { background-size:cover }
.menu_toolbar .btn_menu_toolbar .img_common_tistory { background:none !important }


/* ***** 10. 반응형 ***** */
@media all and (min-width:768px) {
	.only-mo	{ display: none !important; }
	
	#header .header-txt.left	{ width:calc(100% - 140px);text-align:right }
	#header div.header-txt.left:not(.has-img)		{ float:right }
	#header div.header-txt.right:not(.has-img)	{ float:left }
	#category	{ background-color: transparent !important; }
	
	.cover .notice	{ display:table-cell;padding-right:1em;vertical-align:top; }
	.cover .twitter	{ display:table-cell;position:relative;width:250px;height:300px }
	.cover .twitter ul	{ position:absolute;top:0;right:0;bottom:0;left:0;overflow-y:scroll }
}
@media all and (max-width: 767px) {
	.only-pc	{ display: none !important; }
	
	#wrap		{ margin:0 auto }
	
	#header	{ height:auto;margin-top:2.6em;padding:2em }
	#header::before	{ content:none }
	#header .header-txt { font-size:0.9em;line-height:1.6 }
	#header div.header-txt.right:not(.has-img),
	#header div.header-txt.left:not(.has-img)	{ clear:both;float:left;margin:1em 0 0 0 }
	
	.only-mo.cate-btn	{ display:none }
	.open-category	{ overflow:hidden }
	.open-category .only-mo.cate-btn	{ display:block;position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,.05);z-index:99 }
	
	#category		{ position:fixed;top:0;left:0;box-shadow:0 0 5px rgba(0,0,0,.2);z-index:999 }
	#category.hide	{ top:-2.6em }
	#category .mo-toggle	{ display:none }
	#category .only-mo .cate-btn	{ padding-right:1em;line-height:2.6em;text-align:right;cursor:pointer; }
	#category .only-mo .tt_category .link_tit::before	{ }
	#category .only-mo .category_list,
	#category .only-mo .category_list>li	{ display:block;margin-left:0 }
	#category .only-mo .category_list li	{ margin-left:0 }
	#category .only-mo .category_list .link_item,
	#category .only-mo .category_list .link_sub_item	{ display:inline-block;padding-right:0.5em }
	#category .only-mo .sub_category_list::before { content:"\f105";display:inline-block;margin-right:0.5em;font-size:0.5em;font-family:"Font Awesome 5 Free";-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:900;text-rendering:auto;line-height:1; }
	
	#category .only-mo .user_btn		{ position:relative;text-align:right; }
	#category .only-mo .user_btn li	{ margin-left:1em; }
	
	#footer-wrap	{ margin-top:2em }
}


/* ***** 11. animation ***** */
@keyframes fade-in		{from{opacity:0}to{opacity:1}}
@-moz-keyframes fade-in	{from{opacity:0}to{opacity:1}}
@-webkit-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}}