@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:'Chosunilbo_myungjo';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');font-weight:bold;font-style:normal} @font-face {font-family:'Arita-dotum';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-dotum-Medium.woff') format('woff');font-weight:normal;font-style:normal} @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:'Dolbomche';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/Dolbomche_R.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. 공통 스타일 ***** */ body { background-color:var(--bg); font-size:var(--size); line-height:var(--line); text-align:justify; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } 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:10px;background:transparent} ::-webkit-scrollbar-thumb {background-color:var(--text);-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 {font-size:1.17em} .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.5em;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:1.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}}