@charset "utf-8";
/**
 * tokii in folio - release 2016.0.3
 * copyright (c) 2015-2016 tokiidesu (www.tokiidesu.com)
 *
 * "whiterabiit" for tokii in folio.
 */

/* reset */
html, body, p, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, li, dl, dt, dd, form, fieldset, label, legend, input, button, select, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0}
body, input, textarea, button, table {font-family:'맑은 고딕', Malgun Gothic, sans-serif}
html, body {margin:0; padding:0}
body {font-size:15px; font-weight:400; color:#333; line-height:1.4; background-color:#fff; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent}
img, fieldset {border:0}
img, svg {vertical-align:top}
address {font-style:normal}
hr {border:0; border-bottom:1px solid #eee}
label, button {cursor:pointer}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
button {background:0 0; border:0; cursor:pointer; outline:0}
button[disabled] {cursor:default}
pre, code {font-family:Consolas, sans-serif}
pre {overflow-x:auto}
a {color:#1a8ce4; text-decoration:none; transition:color .2s ease}
a:hover, a:active {color:#1bbbec; text-decoration:underline}
iframe {border:none; vertical-align:top}
.blind {overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0 0 0 0)}

/* semantic */
sup, sub {position:relative; font-size:75%; line-height:0; vertical-align:baseline}
sup {top:-.5em}
sub {bottom:-.5em}
abbr[title] {border-bottom:1px dotted #aaa; cursor:help}
summary {display:inline-block; cursor:pointer}
summary:focus {outline:0}
kbd {display:inline-block; margin:0 1px; padding:.1em .6em; font-size:11px; font-family:Arial, Helvetica, sans-serif; text-shadow:0 1px 0 #fff; line-height:1.4; white-space:nowrap; border:1px solid #ccc; background-color:#f7f7f7; border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset}

/* placholder */
input::-webkit-input-placeholder {color:#999}
input:-moz-placeholder {color:#999}
input::-moz-placeholder {color:#999} /* firefox 19+ */
input:-ms-input-placeholder {color:#999} /* ie */

/* flexbox */
.flexbox {display:-webkit-flex; display:-moz-flex; display:-ms-flexbox; display:flex}
.flex {-webkit-flex:1; -ms-flex:1; flex:1}
.align-center {-webkit-align-items:center; -ms-flex-align:center; align-items:center}

/* elip */
.elip {overflow:hidden; vertical-align:top; text-overflow:ellipsis; white-space:nowrap}
.elips {display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical}

/* @TISTORY */
.page-element.category img {display:none}
.tistoryProfileLayerTrigger {display:none!important}

/* visible */
.blind {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0; font-size:0; line-height:0}
.show {display:block}
.visible {display:block}
.hide {display:none}
.screen_out {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px}

/* 폼 */
input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], textarea {-webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; font-size:14px; background:#fff; border:1px solid #ccc; outline:0; transition:border-color .2s ease; -webkit-appearance:none}
input[type=text], input[type=search], input[type=email], input[type=url], input[type=password] {padding:6px 9px; line-height:20px}
textarea {overflow:auto; padding:8px 9px; width:100%; line-height:22px; vertical-align:top; resize:none}
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus {border-color:#1a8ce4}

button[type=button], button[type=reset], button[type=submit] {padding:0 18px; min-width:72px; height:34px; font-size:15px; color:#333; background-color:#f1f1f1; border-radius:4px; transition:background-color .2s ease}
button[type=button]:hover, button[type=reset]:hover, button[type=submit]:hover {background-color:#ddd}

select {font-size:14px; background-color:#fff; border:1px solid #ccc; outline:0; transition:border-color .2s ease}
select:focus {border-color:#1a8ce4}

/* 폼 스타일 */
.paper-input-group {display:block; position:relative}
.paper-input-group:after {content:''; display:block; clear:both}
.paper-input-group .paper-input {float:left}
.paper-input-group .paper-input:not(:first-child) {margin-left:10px}
.paper-input-group .paper-input input {width:160px}

.paper-input-group .paper-input.homepage input {width:200px}
.paper-checkbox {padding:7px 0; height:20px}

/* 컨테이너 */
.container {margin-left:auto; margin-right:auto; padding-bottom:60px; width:1100px}

/* 상단 영역 */
.paper-header {padding-top:60px; margin-bottom:40px}
.header-wrap {position:relative}
.header-wrap:after {content:''; display:block; clear:both}

.paper-header h1 {float:left; width:255px}
.paper-header .title {font-size:28px; font-weight:400; color:#333; line-height:36px}
.paper-header .title a {color:#333}
.paper-header .title a:hover {color:#1a8ce4; text-decoration:none}

.paper-header .logo a {display:block}
.paper-header .logo a, .paper-header .logo img {width:200px; height:40px}

.secondary-menu {display:none; margin-left:8px; width:36px; height:36px}
.secondary-menu-button {position:absolute; right:0; bottom:0; padding:6px}
.secondary-menu-button svg {fill:#333}
.secondary-menu-button.active svg {fill:#1a8ce4}

/* 사이드바(모바일) */
.secondary-sidebar {display:none; margin:0 15px 30px}
.secondary-sidebar.open {display:block}

.secondary-sidebar .page-browse:first-child {padding-top:16px; border-top:2px solid #1a8ce4}
.secondary-sidebar .page-browse:not(:first-child) {margin-top:12px; padding-top:12px; border-top:1px solid #eee}

/* 사이드바 */
.page-sidebar {float:left; width:255px}

.page-sidebar .page-browse {padding-top:24px; border-top:2px solid #1a8ce4}
.page-sidebar .page-browse:not(:first-child) {margin-top:50px}
.page-sidebar .page-browse h3 {margin-bottom:10px; font-size:15px; font-weight:600; color:#333}

/* 사이드바 > 메뉴 */
.page-menu ul {list-style:none}
.page-menu a {font-weight:400; color:#333}
.page-menu a:hover {color:#1a8ce4}
.page-menu li {margin-bottom:10px; font-size:15px}
.page-menu li:last-child {margin-bottom:0}
.page-menu .name, .page-menu .cnt {color:#999}

/* 사이드바 > 카테고리 */
.page-element.category ul {list-style:none}
.page-element.category a {font-size:15px; color:#333; line-height:26px}
.page-element.category a:hover {color:#1a8ce4; text-decoration:none}
.page-element.category a .c_cnt {color:#999; transition:color .2s ease}
.page-element.category a:hover .c_cnt {color:#1a8ce4}

.page-element.category a img {display:none}
.page-element.category a.new_post .c_cnt {color:#1a8ce4}

.page-element.category .category_list>li {margin-top:5px}
.page-element.category .sub_category_list>li {margin-left:15px}
.page-element.category .link_sub_item {color:#999}

/* 사이드바 > 검색 */
.page-element.search .search-box .search-form {display:-webkit-flex; display:-ms-flexbox; display:flex}

.page-element.search:first-child {padding-top:24px; border-top:2px solid #1a8ce4}
.page-element.search:first-child .search-box {border:1px solid #ddd}
.page-element.search:first-child .search-box .search-form {padding:5px}

.page-element.search:not(:first-child) {margin-top:20px; padding-top:0; border-top:0}
.page-element.search:not(:first-child) .search-box {border-bottom:1px solid #ddd}
.page-element.search:not(:first-child) .search-box .search-form {padding:8px 0}

.search-box .search-input-wrap {-webkit-flex:1; -ms-flex:1; flex:1}
.search-box .search-input {padding:0; width:100%; font-size:15px; line-height:26px; border:0}
.search-box .search-button {display:inline-block; margin-left:4px; vertical-align:top}
.search-box .search-button svg {fill:#1a8ce4}

/* 사이드바 > 달력 */
.tt-calendar {border-spacing:0; border-collapse:collapse}

.tt-calendar .cal_month {margin-bottom:9px; font-size:15px; text-align:center}
.tt-calendar thead th, .tt-calendar tbody td {font-size:15px}
.tt-calendar thead th {font-weight:400; color:#999; text-align:center; line-height:25px}
.tt-calendar tbody td {text-align:center; line-height:25px}
.tt-calendar tbody .cal_day4 {font-weight:600}

/* 사이드바 > 저작권 */
.page-element.copyright .info-item {font-size:14px; line-height:24px}

/* 사이드바 > 소셜 링크 */
.page-element.social {margin-top:30px}
.social-links:after {content:''; display:block; clear:both}

.social-link {display:inline-block; float:left; width:20px; height:20px}
.social-link:not(:last-child) {margin-right:15px}
.social-link:hover {text-decoration:none}
.social-link img {width:100%; height:100%}

/* 콘텐츠 영역 */ 
.content:after {content:''; display:block; clear:both}

.page {float:right; width:820px}
.primary {padding-top:24px; border-top:1px solid #ddd}
.page-content:after {content:''; display:block; clear:both}

/* 태그 리스트 */
.page-sidebar .page-browse.tag {overflow:hidden}

.tag-list {margin-right:-8px; list-style:none}
.tag-list:after {content:''; display:block; clear:both}

.tag-item {float:left; margin-right:8px; margin-bottom:8px}

.tag-item .cloud1, .tag-item .cloud2 {color:#1a8ce4}
.tag-item .cloud3, .tag-item .cloud4 {color:#333}
.tag-item .cloud3 {text-decoration:underline}
.tag-item .cloud5 {color:#aaa}
.tag-item .cloud1:hover, .tag-item .cloud2:hover {color:#4fc3f7}
.tag-item .cloud3:hover, .tag-item .cloud4:hover {color:#1a8ce4}
.tag-item .cloud5:hover {color:#666}

/* 댓글 > 댓글 목록 */
.guest-body .comment-list {margin-top:12px}
.content-body .comment-list {margin-bottom:12px}

.comment-list ul {list-style:none}
.comment-item:not(:first-child) {margin-top:10px}
.comment-item p {line-height:24px}
.comment-item.reply {margin-bottom:0; padding-left:56px; border-top:0}
.comment-content {display:-webkit-flex; display:-ms-flex; display:flex; position:relative; padding-top:10px; padding-bottom:10px}

.comment-thmb {position:relative; width:46px}
.guest-thmb {width:46px; height:46px; border-radius:50%}

.comment-article {-webkit-flex:1; -ms-flex:1; flex:1; margin-left:12px}
.comment-author {margin-bottom:5px}
.comment-author .name {font-size:15px}
.comment-author .name img {position:absolute; top:10px; left:0; width:46px; height:46px; background-color:#fff; border-radius:50%}
.comment-author .date {font-size:14px; color:#999}

.comment-control {margin-top:10px}
.comment-control:after {content:''; display:block; clear:both}
.comment-control a {float:left; margin-right:6px; font-size:15px}

/* 댓글 > 댓글 작성 */
.comment-write {position:relative}
.comment-write .paper-input-group {margin-bottom:10px}
.comment-write .paper-button-group {margin-top:10px; text-align:right}
.comment-write .paper-checkbox {position:absolute; left:0; bottom:0}
.comment-write .paper-input textarea {height:126px}

/* 검색결과 */
.search-header {margin-bottom:20px}

.search-title {font-size:28px; font-weight:400; line-height:36px}
.search-detail {margin-top:3px; font-size:15px; color:#999; line-height:18px}
.search-detail .cnt {color:#1a8ce4}

.search_none {display:none}
.page.empty .search_none {display:block}

.search_none p {line-height:24px}
.search_none p:not(:first-child) {margin-top:16px}
.search_none ul {margin-top:16px}
.search_none li {margin:4px 0 4px 20px; line-height:24px}

/* 글 목록 */
.list-item {display:block; float:left; margin-right:1%; width:32.66667%}
.list-item:hover {text-decoration:none}

.list-item .cover-image {position:relative; margin-bottom:10px; width:100%; background-color:#f1f1f1; transition:opacity .2s ease}
.list-item:hover .cover-image {opacity:.8}
.list-item .cover-image:before {content:''; display:block; width:100%; padding-bottom:75%}
.list-item .cover-image img {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff}

.list-item .details .title {font-size:18px; color:#333; line-height:25px; transition:color .2s ease}
.list-item:hover .details .title {color:#1a8ce4}
.list-item .detail-info {margin-top:5px; font-size:15px; color:#999; line-height:18px}

/* 콘텐츠 > 제목 */
.content-header {margin-bottom:20px}

.content-title {font-size:34px; font-weight:400; line-height:45px}
.content-title a {color:#333}
.content-title a:hover {color:#1a8ce4}

.content-detail {margin-top:5px; font-size:15px; color:#999; line-height:18px}
.content-detail span {display:inline-block}
.content-detail:after {content:''; display:block; clear:both}
.content-info {float:left}

.content-admin {float:right; margin-left:10px}
.content-admin a {float:left; margin-left:6px; font-size:15px; line-height:18px}

/* 콘텐츠 > 영역 */
.content-section.tag {min-height:100px}

/* 콘텐츠 > 본문 */
.content-article {word-wrap:break-word}
.content-article p {margin-bottom:15px; line-height:24px}
.content-article img {max-width:100%; height:auto}
.content-article hr {margin-top:20px; margin-bottom:20px}

.content-article h1, .content-article h2, .content-article h3, .content-article h4, .content-article h5, .content-article h6 {margin:36px 0 10px}
.content-article h1, .content-article h2, .content-article h3, .content-article h4, .content-article h5, .content-article h6 {font-weight:400}
.content-article h1 {font-size:43px; line-height:45px}
.content-article h2 {font-size:34px; line-height:45px}
.content-article h3 {font-size:28px; line-height:36px}
.content-article h4 {font-size:18px; line-height:26px}
.content-article h5 {font-size:16px; font-weight:600; line-height:24px}
.content-article h6 {font-size:16px; font-weight:600; line-height:24px}

.content-article ul, .content-article ol, .content-article dl {margin-bottom:15px}
.content-article ul li, .content-article ol li {margin:4px 0 4px 26px; line-height:22px}
.content-article dl dt {font-weight:600}
.content-article ul {list-style:disc}
.content-article ol, .content-article ul ol {list-style:decimal}
.content-article ol ol {list-style:lower-alpha}

.content-article table {max-width:100%; margin:0; margin-bottom:15px; padding:0; background-color: #fff; border:0; border-collapse:collapse; border-spacing:0}
.content-article table th, .content-article table td {padding: 8px 12px; text-align:left; border:1px solid #e0e0e0}
.content-article table th {font-weight:600;  background-color:#f5f5f5}

.content-article blockquote {margin-bottom:15px; padding:5px 0 5px 15px; border-left:3px solid #eee}
.content-article blockquote, .content-article blockquote p {line-height:24px}
.content-article blockquote h1:first-child, .content-article blockquote h2:first-child, .content-article blockquote h3:first-child, .content-article blockquote h4:first-child, .content-article blockquote h5:first-child, .content-article blockquote h6:first-child {margin-top:0}
.content-article blockquote ol:last-child, .content-article blockquote ul:last-child, .content-article blockquote p:last-child {margin-bottom:0}

.content-article pre {background-color:#f7f7f7; margin:15px 0; padding:15px; word-wrap:break-word; font-family:Consolas, sans-serif; font-size:14px; line-height:22px}
.content-article pre p {line-height:24px}
.content-article pre p:last-child {margin-bottom:0}
.content-article code {font-size:14px}

.content-article del {color:#a33; background-color:#ffeaea}
.content-article ins:not([class]) {text-decoration:none; background-color:#eaffea}

.content-article details {margin-bottom:4px 0 12px}

.content-article .imageblock .cap1 {margin-top:5px; color:#999}
.content-article iframe {max-width:100%}
.content-article .twitter-tweet {margin:0 auto}

/* 콘텐츠 > 본문(보호글) */
.content-protected .paper-input input {width:200px}
.content-protected .paper-button-group {margin-top:10px}

/* 콘텐츠 > 작성자 */
.content-author {margin-top:25px; color:#999}
.author-name {font-style:normal; color:#333}

/* 콘텐츠 > 태그 */
.content-tags {margin-top:50px}
.content-tags a {font-size:15px}
.tag-header {font-size:15px; color:#999}

/* 콘텐츠 > 공유 */
.content-share {margin-top:30px}
.share-service {margin-left:auto; margin-right:auto; width:128px}
.share-service:after {content:''; display:block; clear:both}

.share-service-button {float:left; width:36px; height:36px}
.share-service-button:not(:first-child) {margin-left:10px}
.share-service-button svg {position:relative; width:36px; height:36px; border-radius:50%}

/* 콘텐츠 > 영역 */
.page-section {margin-top:50px; padding-top:24px; border-top:1px solid #ddd}
.page-section h3 {margin-bottom:12px; font-size:24px; font-weight:400}
.page-section h3 .cnt {color:#1a8ce4}

/* 콘텐츠 > 관련 글 영역 */
.related-article:after {content:''; display:block; clear:both}
.related-title {margin-bottom:10px}

.related-item {float:left}
.related-item:hover {text-decoration:none}

.related-item .cover-image {position:relative; width:100%; background-color:#fff; transition:opacity .2s ease}
.related-item:hover .cover-image {opacity:.8}
.related-item .cover-image:before {content:''; display:block; padding-bottom:75%}
.related-item .cover-image img {position:absolute; top:0; left:0; width:100%; height:100%}
.related-item:not(.thumb_type) .cover-image {background-color:#f1f1f1}

.related-item .details {margin-top:10px}
.related-item .details .title {font-size:18px; color:#333; line-height:25px}
.related-item:hover .details .title {color:#1a8ce4; transition:color .2s ease}
.related-item .detail-info {margin-top:5px; font-size:15px; color:#999; line-height:18px}
.related-item .detail-info span {display:inline-block}

.related-more {margin-top:20px}
.related-more a {font-size:15px; line-height:18px}

/* 콘텐츠 > 댓글 영역 */
.tt_more_preview_comments_wrap .tt_more_preview_comments_text {color:#1a8ce4; transition:color .2s ease}
.tt_more_preview_comments_wrap:hover .tt_more_preview_comments_text {color:#1bbbec; text-decoration:underline}

/* 애드센스 */
.google-adsense {overflow:hidden; text-align:center}
.google-ads-top {margin-bottom:30px}
.google-ads-bottom {margin-top:30px}

.tt_adsense_top, .tt_adsense_bottom {overflow:hidden; text-align:center}

/* 페이지 네비게이션 */
.page-navigation, .secondary-navigation {margin-top:30px; padding-top:15px; text-align:center; border-top:1px solid #ddd}
.secondary-navigation {display:none}
.nav-wrap {vertical-align:top}
.nav-wrap:after {content:''; display:block; clear:both}

.nav-end:hover {text-decoration:none}
.nav-end svg {fill:#1a8ce4}
.nav-end.no-more-prev svg, .nav-end.no-more-next svg {fill:#dfdfdf}
.nav-end.no-more-prev:hover svg, .nav-end.no-more-next:hover svg {fill:#dfdfdf}

.nav-item, .interword {margin:0 2px; padding:0 5px; font-size:18px; line-height:24px; text-decoration:none}
.nav-item:hover {text-decoration:none}
.nav-item span {color:#1a8ce4; transition:color .2s ease}
.nav-item:hover span {color:#1bbbec; text-decoration:underline}
.nav-item .selected {color:#333}
.nav-item:hover .selected {color:#333; text-decoration:none}

.page-navigation .nav-wrap {display:inline-block}
.page-navigation .nav-end, .page-navigation .nav-item, .page-navigation .interword {float:left}
.page-navigation .nav-end {padding:0 6px}

/* 페이지 네비게이션(모바일) */
.secondary-navigation .nav-wrap {display:block}
.secondary-navigation .nav-end {padding:0}
.secondary-navigation .nav-end svg {width:26px; height:26px}

.secondary-navigation .nav-end.prev {float:left; margin-right:10px}
.secondary-navigation .nav-end.next {float:right; margin-left:10px}
.secondary-navigation .nav-end.prev .nav-icon {margin-right:8px}
.secondary-navigation .nav-end.next .nav-icon {margin-left:8px}
.secondary-navigation .nav-icon {float:left}

.secondary-navigation .nav-end .nav-text {float:left; font-size:17px; color:#1a8ce4; line-height:26px}
.secondary-navigation .nav-end.no-more-prev .nav-text, .secondary-navigation .nav-end.no-more-next .nav-text {color:#ccc}
.secondary-navigation .nav-end.no-more-prev:hover .nav-text, .secondary-navigation .nav-end.no-more-next:hover .nav-text {color:#ccc}

/* 하단 영역 */
footer {margin-top:60px; padding-top:15px; padding-bottom:15px; font-size:14px; text-align:center; border-top:1px solid #ddd}

@media (min-width:1040px) and (max-width:1199px) {
  /* 레이아웃 */
  .container {width:960px}
  .paper-header h1 {width:235px}
  
  .page {width:700px}
  .page-sidebar {width:235px}
}

@media (min-width:920px) and (max-width:1039px) {
  /* 레이아웃 */
  .container {width:850px}
  .paper-header h1 {width:215px}
  
  .page {width:610px}
  .page-sidebar {width:215px}
}

@media (min-width:920px) {
  /* 카테고리(모바일) */
  .secondary-sidebar.open {display:none}
}

@media (min-width:0px) and (max-width:919px) {
  /* @TISTORY */
  #tistorytoolbarid {display:none}
  
  /* 레이아웃 */
  body {min-width:320px}
  
  .page {float:none; width:auto}
  .page-sidebar {float:none; width:auto}

  .paper-header, .content {margin-left:15px; margin-right:15px}
  .paper-header {padding-top:25px; margin-bottom:20px}
  .paper-header .title {-webkit-flex:1; -ms-flex:1; flex:1; float:none; width:auto; font-size:26px; line-height:34px}
  .paper-header h1 {float:none; flex:1}
  .paper-header .logo a, .paper-header .logo img {width:170px; height:34px}
  .header-wrap {display:flex}
  
  .secondary-menu {display:block; width:34px; height:34px}
  .secondary-menu-button {padding:5px}
  
  .content-title {font-size:28px; line-height:38px}
  
  /* 여백 */
  .container {width:100%; padding-bottom:30px}  
  .primary {padding-top:16px; border-top:2px solid #1a8ce4}
  
  .page-sidebar {margin-top:50px}
  .page-section {margin-top:30px; padding-top:16px}
  .page-navigation {margin-top:20px}
  
  .page-sidebar .page-element.search:first-child {padding-top:16px}
  .page-sidebar .page-browse {padding-top:16px}
  .page-sidebar .page-browse:not(:first-child) {margin-top:30px}
  
  footer {margin-top:40px}
  
  /* 폰트 */
  body {font-size:16px}
  
  input[type=text], input[type=search], input[type=email], input[type=url], input[type=password], textarea {padding:7px 10px; font-size:15px}
  button[type=button], button[type=reset], button[type=submit] {font-size:16px; height:36px}
  select {font-size:16px;}
  
  .list-item .detail-info {font-size:16px; line-height:20px}
  
  .page-browse h3 {font-size:16px}
  .page-menu li {font-size:16px}
  .page-element.category a {font-size:16px}
  .page-element.copyright .info-item {font-size:15px; line-height:26px}
  .tt-calendar .cal_month, .tt-calendar .cal_month a, .tt-calendar thead th, .tt-calendar tbody td {font-size:16px}
  
  .search-detail {font-size:16px; line-height:20px}
  .content-detail, .content-admin a {font-size:16px; line-height:20px}
  
  .content-article p {line-height:25px}
  .content-article pre {font-size:15px; line-height:24px}
  .content-article pre p {line-height:24px}
  .content-article code {font-size:15px}
  
  .content-tags a {font-size:16px}  
  .tag-header {font-size:16px}
  
  .related-item .detail-info {font-size:16px; line-height:20px}
  .related-more a {font-size:16px; line-height:20px}
  
  .comment-item p {line-height:25px}
  .comment-author .name {font-size:16px}
  .comment-author .date {font-size:15px}
  .comment-control a {font-size:16px}
  
  footer {font-size:15px}
}

@media (min-width:720px) {
  /* 글 목록 */
  .list-item:nth-child(3n) {margin-right:0}
  .list-item:nth-child(3n+1) {clear:left; margin-left:0}
  .list-item:not(:nth-child(-n+3)) {margin-top:30px}
  
  .related-item {width:24.25%}
  .related-item:not(:first-child) {margin-left:1%}
}

@media (min-width:480px) and (max-width:719px) {
  /* 글 목록 */
  .list-item {width:49.5%}  
  .list-item:nth-child(2n) {margin-right:0}
  .list-item:not(:nth-child(-n+2)) {margin-top:30px}
  
  /* 관련 글 */
  .related-item {width:32.667%}
  .related-item:not(:first-child) {margin-left:1%}
  .related-item:nth-child(4) {display:none}
}

@media (min-width:0) and (max-width:719px){
  /* 폼 */
  .paper-input-group .paper-input {float:none}
  .paper-input-group .paper-input:not(:first-child) {margin-top:10px; margin-left:0}
  
  .paper-input-group .paper-input input {width:200px}
  .paper-input.homepage input {width:290px}
  
  /* 사이드바 */
  .search-box .search-input {font-size:16px; line-height:30px}
  .search-box .search-button svg {width:30px; height:30px}
  
  .social-link {width:22px; height:22px}
  
  /* 페이지 네비게이션 */
  .page-navigation {display:none}
  .secondary-navigation {display:block}
}

@media (min-width:0) and (max-width:479px){
  /* 글 목록 */
  .list-item {margin-right:0; width:100%}
  .list-item:not(:first-child) {margin-top:30px}
  
  .list-item .details .title {font-size:22px; line-height:30px}
  
  /* 관련 글 */
  .related-item {width:49%}
  .related-item:nth-child(2n) {margin-left:2%}
  .related-item:nth-child(3) {clear:left}
  .related-item:not(:nth-child(-n+2)) {margin-top:15px}
}