html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}body{font-family:"Apple SD Gothic Neo","나눔고딕",NanumGothic,"Malgun Gothic",Verdana,Arial,sans-serif;font-size:110%;color:#333;background-color:#fff;-webkit-text-size-adjust:100%;line-height:1.5}h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,figure,#main article .contents .highlight{margin-bottom:15px}img{max-width:100%;vertical-align:middle}a{color:#333;text-decoration:none}a:hover{color:#4ab10d}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:'\e800'}.icon-tumblr-rect:before{content:'\e801'}.icon-twitter-bird:before{content:'\e802'}.icon-tag:before{content:'\e803'}.icon-guest:before{content:'\e804'}.icon-link:before{content:'\e805'}.icon-mail:before{content:'\e806'}.icon-archive:before{content:'\e807';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:#4ab10d;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:#333}.cat-trigger:checked ~ #main{right:200px}.cat-trigger+label,#main{transition:right 0.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:#fff;color:#666;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:#fff;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 60px;margin:0 auto;max-width:860px}@media screen and (max-width: 980px){#main article header{padding-left:10px;padding-right:10px}}#main article header h1{font-weight:200;font-size:2.8em;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:860px;margin:0 auto;padding:0 60px 1em;position:relative}@media screen and (max-width: 980px){#main article aside ul{padding-left:10px;padding-right:10px}}#main article aside ul li{font-size:.8em;font-family:Georgia,serif;padding-bottom:.5em;padding-top:1.1em}#main article aside ul li span{padding-left:2em}#main article .contents{padding:0 60px;max-width:860px;margin:0 auto;border-right:0;line-height:1.6em}@media screen and (max-width: 980px){#main article .contents{padding-left:10px;padding-right:10px}}#main article .contents a{font-weight:bold;border-bottom:1px dashed}#main article .contents p{margin:1.4em 0}#main article .contents h4,#main article .contents h5,#main article .contents h6{margin-top:2em;padding-bottom:0;margin-bottom:-10px}#main article .contents h2{margin-top:3em;font-size:1.9em}#main article .contents h3{margin-top:3em;font-size:1.6em}#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;float:left;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 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:white;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:#4ab10d}@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 .contents .highlight{font-size:.8em;line-height:1.4;background-color:#f8f8f8;border:1px solid #ccc;padding:6px 15px;border-radius:3px;overflow-x:auto}#main article .contents .highlight .c{color:#998;font-style:italic}#main article .contents .highlight .p{color:#939393}#main article .contents .highlight .err{color:#a61717;background-color:#e3d2d2}#main article .contents .highlight .k{color:#333}#main article .contents .highlight .o{color:#aabf58}#main article .contents .highlight .cm{color:#998;font-style:italic}#main article .contents .highlight .cp{color:#999;font-weight:bold}#main article .contents .highlight .c1{color:#998;font-style:italic}#main article .contents .highlight .cs{color:#999;font-weight:bold;font-style:italic}#main article .contents .highlight .gd{color:#000;background-color:#fdd}#main article .contents .highlight .gd .x{color:#000;background-color:#faa}#main article .contents .highlight .ge{font-style:italic}#main article .contents .highlight .gr{color:#a00}#main article .contents .highlight .gh{color:#999}#main article .contents .highlight .gi{color:#000;background-color:#dfd}#main article .contents .highlight .gi .x{color:#000;background-color:#afa}#main article .contents .highlight .go{color:#888}#main article .contents .highlight .gp{color:#555}#main article .contents .highlight .gs{font-weight:bold}#main article .contents .highlight .gu{color:#aaa}#main article .contents .highlight .gt{color:#a00}#main article .contents .highlight .kc{font-weight:bold}#main article .contents .highlight .kd{font-weight:bold}#main article .contents .highlight .kp{font-weight:bold}#main article .contents .highlight .kr{font-weight:bold}#main article .contents .highlight .kt{color:#458;font-weight:bold}#main article .contents .highlight .m{color:#be5a33}#main article .contents .highlight .s{color:#939393}#main article .contents .highlight .na{color:#333}#main article .contents .highlight .nb{color:#0086B3}#main article .contents .highlight .nc{color:#5da9c2}#main article .contents .highlight .no{color:teal}#main article .contents .highlight .ni{color:purple}#main article .contents .highlight .ne{color:#900;font-weight:bold}#main article .contents .highlight .nf{color:#1e789d}#main article .contents .highlight .nn{color:#555}#main article .contents .highlight .nt{color:#58a1bf}#main article .contents .highlight .nv{color:teal}#main article .contents .highlight .ow{font-weight:bold}#main article .contents .highlight .w{color:#bbb}#main article .contents .highlight .mf{color:#099}#main article .contents .highlight .mh{color:#099}#main article .contents .highlight .mi{color:#099}#main article .contents .highlight .mo{color:#099}#main article .contents .highlight .sb{color:#d14}#main article .contents .highlight .sc{color:#d14}#main article .contents .highlight .sd{color:#d14}#main article .contents .highlight .s2{color:#d14}#main article .contents .highlight .se{color:#d14}#main article .contents .highlight .sh{color:#d14}#main article .contents .highlight .si{color:#d14}#main article .contents .highlight .sx{color:#d14}#main article .contents .highlight .sr{color:#009926}#main article .contents .highlight .s1{color:#d14}#main article .contents .highlight .ss{color:#990073}#main article .contents .highlight .bp{color:#999}#main article .contents .highlight .vc{color:teal}#main article .contents .highlight .vg{color:teal}#main article .contents .highlight .vi{color:teal}#main article .contents .highlight .il{color:#099}#main article hr{clear:both}#main article #comments{padding-top:70px;max-width:700px;margin:0 auto}@media screen and (max-width: 980px){#main article #comments{padding-left:10px;padding-right:10px}}#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;display:block;max-width:600px;margin:0 auto}@media screen and (max-width: 980px){#main .headline header>p{font-size:1.1em}}#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 #4ab10d;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:#fff;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}