:root{--color-brand: #4ab10d;--color-bg-base: #fff;--color-bg-side: #fff;--color-font-base: #333;--color-font-aside: #666;--color-link: #333;--size-font-base: 110%;--size-font-title: 2.8em;--size-width-sidebar: 200px;--size-width-content: 65ch;--size-padding-article-side: 100px;--size-tablet: 800px;--font-family-base: "Apple SD Gothic Neo", "나눔고딕", NanumGothic, "Malgun Gothic", Verdana, Arial, sans-serif;--font-family-date: Georgia, serif;--spacing-unit: 30px;--handheld: 980px;--tablet: 1200px}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:var(--font-family-base);font-size:var(--size-font-base);color:var(--color-font-base);background-color:var(--color-bg-base);-webkit-text-size-adjust:100%;line-height:1.5}h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,figure{margin-bottom:calc(var(--spacing-unit)/2)}img{max-width:100%;vertical-align:middle}a{color:var(--color-font-base);text-decoration:none}a:hover{color:var(--color-brand)}a[data-filetype=image]{text-decoration:none}nav ul,nav ol,nav li,aside ul,aside ol,aside li{padding:0;margin:0;list-style:none}@-webkit-keyframes fadein{0%{-webkit-transform:translateY(40px);opacity:0}100%{-webkit-transform:translateY(0px);opacity:1}}@keyframes fadein{0%{transform:translateY(40px);opacity:0}100%{transform:translateY(0px);opacity:1}}@font-face{font-family:"fontello";src:url("/css/fonts/fontello.eot?39273311");src:url("/css/fonts/fontello.eot?39273311#iefix") format("embedded-opentype"),url("/css/fonts/fontello.woff?39273311") format("woff"),url("/css/fonts/fontello.ttf?39273311") format("truetype"),url("/css/fonts/fontello.svg?39273311#fontello") format("svg");font-weight:normal;font-style:normal}[class^=icon-]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:none;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em}.icon-rss-alt:before{content:""}.icon-tumblr-rect:before{content:""}.icon-twitter-bird:before{content:""}.icon-tag:before{content:""}.icon-guest:before{content:""}.icon-link:before{content:""}.icon-mail:before{content:""}.icon-archive:before{content:"";font-size:80%;margin-top:2px;float:left;margin-right:5px}body>header{height:60px;position:relative;width:100%;float:left;border-bottom:1px solid #ededed}body>header #logo{width:60px;height:60px;text-align:center;padding:8px 0 0;float:left;border-right:1px solid #eee}body>header #logo a{width:43px;height:42px;margin-left:8px;float:left;text-indent:100%;white-space:nowrap;overflow:hidden;background:url(/assets/img/system/logo.png);background-image:url(/assets/img/system/logo.svg),none;background-size:contain;background-repeat:no-repeat;background-position:0 7px}body>header #logo:hover{background-color:var(--color-brand);transition:background-color 2s}body>header nav{position:relative}body>header nav ul{float:right;margin-right:20px;padding-right:30px}body>header nav li{padding:14px 0;margin:7px 0 0;font-size:.8em;line-height:16px;float:left}body>header nav li a{padding:0 12px;float:left}body>header nav li a span{display:none}label[for=cat-trigger]{position:absolute;top:-39px;right:20px;width:12px;height:12px;cursor:pointer;z-index:5;background:url(/assets/img/system/sidemenu.png);background-size:contain}.cat-trigger:checked+label{background-color:var(--color-link)}.cat-trigger:checked~#main{right:200px}.cat-trigger+label,#main{transition:right .4s}#cat-trigger{display:none}#wrapper{position:relative;clear:both}#wrapper>aside{width:200px;position:absolute;top:0;right:0;padding-top:20px;text-align:right;background-color:var(--color-bg-side);color:var(--color-font-aside);bottom:0}#wrapper>aside li{padding:1px 10px 4px}#wrapper>aside p{padding-left:20px;padding-right:10px;text-align:right;font-size:.8em}#main{right:0;position:relative;border-right:1px solid #eee;min-height:660px;background:#fff}#main article{background-color:var(--color-bg-base);padding-bottom:70px;overflow-x:hidden}#main article>img{display:block;width:100%;max-width:1200px;margin:0 auto}#main article .video-container{margin:0 auto;position:relative;padding-bottom:56.25%;padding-top:35px;height:0;overflow:hidden;max-width:1100px;text-align:center}#main article .video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}#main article small{max-width:1100px;margin:0 auto;display:block}#main article header{padding:0 1em}@media screen and (max-width: 980px){#main article header{padding-left:10px;padding-right:10px}}#main article header{margin:0 auto;max-width:var(--size-width-content)}#main article header h1{font-weight:200;font-size:var(--size-font-title);padding:60px 0 0;margin:0;-webkit-transform-origin:bottom center;transform-origin:bottom center;-webkit-animation:fadein 1.1s 1;animation:fadein 1.1s 1;transform:translate3d(0, 0, 0)}#main article aside ul{max-width:var(--size-width-content);margin:0 auto;padding:0 60px 1em}@media screen and (max-width: 980px){#main article aside ul{padding-left:10px;padding-right:10px}}#main article aside ul{position:relative}#main article aside ul li{font-size:.8em}#main article aside ul li span{padding-left:2em}#main article aside ul li{font-family:var(--font-family-date);padding-bottom:.5em;padding-top:1.1em}#main article .contents{padding:0 1em;max-width:var(--size-width-content);margin:0 auto}@media screen and (max-width: 980px){#main article .contents{padding-left:10px;padding-right:10px}}#main article .contents{border-right:0;line-height:1.6em;word-break:keep-all}#main article .contents a{font-weight:bold;border-bottom:1px dashed}#main article .contents p{margin:0 0 1.4em}#main article .contents h2{font-size:1.9em}#main article .contents h3{font-size:1.6em}#main article .contents h4{font-size:1.4em}#main article .contents h5{font-size:1.2em}#main article .contents h6{font-size:1em}#main article .contents h2,#main article .contents h3,#main article .contents h4,#main article .contents h5,#main article .contents h6{margin-top:clamp(2.5rem,2em,5rem);margin-bottom:1.5rem}#main article .contents img[alt~=minisize]{max-width:100px}#main article .contents img[alt~=fullsize]{width:100%}#main article .contents img[alt~=jumbosize]{width:100%;margin-left:-90px;margin-right:-90px}@media screen and (max-width: 980px){#main article .contents img[alt~=jumbosize]{margin-left:0;margin-right:0}}#main article .contents img[alt~=leftalign]{float:left;margin-right:6px;margin-bottom:6px}#main article .contents img[alt~=writtenby]{margin-top:3em;margin-bottom:3em;margin-right:1em;width:20px;height:20px}#main article .contents a[rel=footnote]{padding:.1em .4em;background:#eee;border-radius:2px;border-bottom:none;border:1px solid #eee}#main article .contents ul li li{padding-bottom:.5em}#main article .contents ul,#main article .contents ol{padding-left:1em}#main article .contents li{padding-bottom:.4em}#main article .contents blockquote{border-left:8px solid #eee;color:#777;padding-left:1.3em;margin-left:0}#main article .contents table thead th{padding-top:1em;padding-bottom:1em;background:#b0cf06;color:#fff;font-weight:normal}#main article .contents table thead th:first-child{width:20%}#main article .contents table tbody th{background:#eee}#main article .contents table th{border:1px solid #d4d6cb}#main article .contents table td{border:1px solid #eee;padding:1em}#main article .contents .large{margin-left:-80px;margin-right:-80px;padding-top:.8em;padding-bottom:1.5em;font-size:1.7em;line-height:1.5;color:var(--color-brand)}@media screen and (max-width: 980px){#main article .contents .large{margin-left:0;margin-right:0}}#main article .contents .large:before{content:'" '}#main article .contents .large:after{content:' "'}#main article hr{clear:both}#main article #comments{padding-top:70px;max-width:calc(var(--size-width-content) - 160px)}@media screen and (max-width: 980px){#main article #comments{padding-left:10px;padding-right:10px}}#main article #comments{margin:0 auto}#main article footer{padding:0;border:0;margin:0}#main .headline header{max-width:1200px;background-size:cover;text-align:center;padding-bottom:5em;padding-top:2em}@media screen and (max-width: 980px){#main .headline header{padding-bottom:6em}}#main .headline header h1{font-size:5em;font-weight:700}@media screen and (max-width: 980px){#main .headline header h1{font-size:3.5em}}#main .headline header>p{font-size:1.3em}@media screen and (max-width: 980px){#main .headline header>p{font-size:1.1em}}#main .headline header>p{display:block;max-width:600px;margin:0 auto}#main .headline .featured{color:#fff;background-size:cover;max-width:none}#main .headline .featured h1{max-width:1200px;margin:0 auto}#main .headline .featured:hover{background-color:rbga(0, 0, 0, 0)}#main #dictionary{background:url(/assets/img/system/icon-dictionary.png);background-image:url(/assets/img/system/icon-dictionary.svg),none;background-size:260px 260px;background-repeat:no-repeat;background-position:center 20px;background-color:#f5c80f}#main #dictionary header{margin-top:280px}#main #dictionary .contents hr{display:none}#main #dictionary .contents ul{padding-left:0}#main #dictionary .contents ul li{list-style:none;border-bottom:1px solid #eee;position:relative;padding-right:4.8em;padding-bottom:.5em}#main #dictionary .contents ul li h5{font-size:1em;margin-top:1.4em}#main #dictionary .contents ul li h5 a{border:0}#main #dictionary .contents ul li h5 a:after{content:" - google search";font-size:.7em;color:#afac86}#main #dictionary .contents ul li p{font-size:.75em;margin-top:.8em;line-height:1.3}#main #dictionary .contents ul li p:before{content:"- "}#main #dictionary .contents ul li img{position:absolute;top:0;right:0;width:3.8em}#main #dictionary .contents ul li li{border:0;font-size:.75em;line-height:1.3}#main #dictionary .contents a[rel=footnote]{background:#c0b414;border:0}#main #dictionary .contents .footnotes{font-size:.9em}#main #browser header{max-width:none;margin:0;padding:1em 0;border-bottom:1px solid #eee;font-size:.8em}#main #browser header h1{padding:0;text-align:center}#main #browser .contents{max-width:none;padding:0}#main #browser .contents ul{padding:0;margin:0}#main #browser .contents ul li{width:50%;padding:0;list-style:none;height:500px;border-left:1px solid #eee;border-bottom:1px solid #eee;float:left;padding-left:1em;overflow:hidden}@media screen and (max-width: 980px){#main #browser .contents ul li{width:100%;height:auto;padding-bottom:30px}}#main #browser .contents ul li h3{margin:0;font-size:1.1em;padding-top:.6em}#index #main{position:relative}#index #main article>img{max-width:none}#index #main article .contents{margin-left:0;max-width:none;padding-left:0;padding-right:350px}@media screen and (max-width: 1200px){#index #main article .contents{padding-right:290px}}@media screen and (max-width: 980px){#index #main article .contents{padding-right:0}}#index #main article .contents ul{margin-top:0;padding-left:0}#index #main article .contents ul li{padding-left:18%;padding-right:13%;padding-bottom:2.8em;padding-top:2.4em;border-bottom:1px solid #eee;list-style:none;position:relative}@media screen and (max-width: 1200px){#index #main article .contents ul li{padding-left:7em;padding-right:2.5em}}#index #main article .contents ul li h3{font-weight:normal;font-size:1.1em;margin-top:0}#index #main article .contents ul li h3 a{border-bottom:none}#index #main article .contents ul li p{margin:0;font-size:.9em;line-height:1.4}#index #main article .contents ul li a:hover img{border:1px solid var(--color-brand);transition:border-width .4s ease-in-out;-webkit-transition:border-width .4s ease-in-out;transform:translate3d(0, 0, 0)}#index #main article .contents ul li img{position:absolute;top:2.8em;left:4%;width:80px;border-radius:100%;border:6px solid #eee}@media screen and (max-width: 1200px){#index #main article .contents ul li img{left:1em}}#index #main aside{width:350px;border-left:1px solid #eee;position:absolute;right:0;top:0;bottom:0;margin-top:0}@media screen and (max-width: 1200px){#index #main aside{width:290px}}@media screen and (max-width: 980px){#index #main aside{position:relative;top:auto;right:auto;bottom:auto;border-left:0;width:100%;border-top:1px solid #eee;padding-top:1em}}@media screen and (max-width: 980px){#index #main aside:before{content:"More contents";font-size:1.4em;padding-left:5em}}#index #main aside ul{border-bottom:1px solid #eee;padding-bottom:1.4em;padding-top:2.3em;padding-left:1.4em;padding-right:1em}@media screen and (max-width: 980px){#index #main aside ul{padding-left:7.2em}}#index #main aside ul h3{font-size:1.1em;margin-top:0}#index #main aside ul h4{font-weight:normal;font-size:.9em;margin-top:.2em;margin-bottom:.5em}.pagination{clear:both;font-size:.9em;padding:0 18%}@media screen and (max-width: 1200px){.pagination{padding-left:8em}}footer{clear:both;position:relative;padding-top:40px;padding-bottom:40px;background-color:var(--color-bg-base);border-top:1px solid #eee}@media screen and (max-width: 980px){footer{border-top:0}}footer p{text-align:center;font-size:.8em}.log #main h1{clear:both;padding-top:1em}.log #main h1:before{content:"#"}.log #main h2{clear:both;margin-top:3em}.log #main h3{clear:both;padding-top:2em;border-bottom:1px solid #ddd}.log #main h4{margin:0;padding-top:2em;clear:both}.log #main ul{padding-left:0}.log #main ul li{float:left;width:47%;margin-left:20px;font-size:14px}@media screen and (max-width: 700px){.log #main ul li{width:95%}}.log #main ul li a[href*=alistapart]:after{content:" - alistapart";color:#bbb;font-weight:normal;font-size:10px}.log #main ul li a[href*=sitepoint]:after{content:" - sitepoint";color:#bbb;font-weight:normal;font-size:10px}.log #main ul li a[href*=smashing]:after{content:" - smashing";color:#bbb;font-weight:normal;font-size:10px}.highlight{font-size:.9em;line-height:2;background-color:#333;color:#fff;padding:6px 15px;border-radius:.5em;overflow-x:auto}.highlight .c{color:#998;font-style:italic}.highlight .p{color:#939393}.highlight .err{color:#a61717;background-color:#e3d2d2}.highlight .k{color:#678016}.highlight .o{color:#aabf58}.highlight .cm{color:#998;font-style:italic}.highlight .cp{color:#999;font-weight:bold}.highlight .c1{color:#998;font-style:italic}.highlight .cs{color:#999;font-weight:bold;font-style:italic}.highlight .gd{color:#000;background-color:#fdd}.highlight .gd .x{color:#000;background-color:#faa}.highlight .ge{font-style:italic}.highlight .gr{color:#a00}.highlight .gh{color:#999}.highlight .gi{color:#000;background-color:#dfd}.highlight .gi .x{color:#000;background-color:#afa}.highlight .go{color:#888}.highlight .gp{color:#555}.highlight .gs{font-weight:bold}.highlight .gu{color:#aaa}.highlight .gt{color:#a00}.highlight .kc{font-weight:bold}.highlight .kd{font-weight:bold}.highlight .kp{font-weight:bold}.highlight .kr{font-weight:bold}.highlight .kt{color:#458;font-weight:bold}.highlight .m{color:#be5a33}.highlight .s{color:#939393}.highlight .na{color:#678016}.highlight .nb{color:#0086b3}.highlight .nc{color:#5da9c2}.highlight .no{color:teal}.highlight .ni{color:purple}.highlight .ne{color:#900;font-weight:bold}.highlight .nf{color:#1e789d}.highlight .nn{color:#555}.highlight .nt{color:#58a1bf}.highlight .nv{color:teal}.highlight .ow{font-weight:bold}.highlight .w{color:#bbb}.highlight .mf{color:#099}.highlight .mh{color:#099}.highlight .mi{color:#099}.highlight .mo{color:#099}.highlight .sb{color:#d14}.highlight .sc{color:#d14}.highlight .sd{color:#d14}.highlight .s2{color:#d14}.highlight .se{color:#d14}.highlight .sh{color:#d14}.highlight .si{color:#d14}.highlight .sx{color:#d14}.highlight .sr{color:#009926}.highlight .s1{color:#d14}.highlight .ss{color:#990073}.highlight .bp{color:#999}.highlight .vc{color:teal}.highlight .vg{color:teal}.highlight .vi{color:teal}.highlight .il{color:#099}.highlighter-rouge{margin-bottom:1.5em}/*# sourceMappingURL=main.css.map */