티스토리 포스터 스킨 기본 코드

코드를 수정하다보면 원본과 비교할 일이 자주 생겨서 올려둔다.

Tistory Poster Skin Theme Original

HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리 포스터 스킨 기본 코드</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://wlsfl.tistory.com/">Pensée</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">

Category (3)
- Blogging (3)

</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">

<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>

<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

</s_cover_rep>

<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">

</nav>
</div>
</s_cover_group>

<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">

</div>
</s_page_rep>

<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
</s_notice_rep>

<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>

<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">

<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>

<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">

</div>
</div>
</s_tag_label>

<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>

<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>

<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>

</s_permalink_article_rep>
</s_article_rep>
</div>

<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>

<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>

<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>

<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>

</article>
</section>
<hr>

<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://wlsfl.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>

CSS

@charset "utf-8";

/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/

/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');

/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
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, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}

/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}

/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}

#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}

#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}

#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}

#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}

#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}

/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}

.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: unset;
}
.btn:hover {
border-color: #4d4d4d;
}

.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}

.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}

.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}

.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}

.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}

.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}

.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}

.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}

.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}

.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {

position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
height: 0;
border: 0;
border-bottom: 1px solid #000;
}
.entry-content pre {
word-break:break-word;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 50px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe:not([mapdata]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
display:inline-block;
}

.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}

/* Widget & Template Page */

/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}

/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}

/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}

/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
    padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
  margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}

.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}

.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}

.comments .comment-list ul li p {
margin: 14px 0 0;
}

.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}

.revenue_unit_wrap.position_list{
max-width: 860px;
margin: 30px auto
}

코드를 수정하다보면 원본과 비교할 일이 자주 생겨서 올려둔다.

Tistory Poster Skin Theme Original

HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리 포스터 스킨 기본 코드</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://wlsfl.tistory.com/">Pensée</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">

Category (3)
- Blogging (3)

</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">

<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>

<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

</s_cover_rep>

<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">

</nav>
</div>
</s_cover_group>

<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">

</div>
</s_page_rep>

<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
</s_notice_rep>

<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>

<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">

<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>

<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">

</div>
</div>
</s_tag_label>

<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>

<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>

<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>

</s_permalink_article_rep>
</s_article_rep>
</div>

<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>

<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>

<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>

<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>

</article>
</section>
<hr>

<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://wlsfl.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>

CSS

@charset "utf-8";

/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/

/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');

/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
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, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}

/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}

/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}

#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}

#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}

#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}

#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}

#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}

/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}

.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: unset;
}
.btn:hover {
border-color: #4d4d4d;
}

.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}

.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}

.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}

.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}

.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}

.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}

.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}

.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}

.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}

.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {

position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
height: 0;
border: 0;
border-bottom: 1px solid #000;
}
.entry-content pre {
word-break:break-word;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 50px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe:not([mapdata]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
display:inline-block;
}

.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}

/* Widget & Template Page */

/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}

/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}

/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}

/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
    padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
  margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}

.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}

.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}

.comments .comment-list ul li p {
margin: 14px 0 0;
}

.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}

.revenue_unit_wrap.position_list{
max-width: 860px;
margin: 30px auto
}

코드를 수정하다보면 원본과 비교할 일이 자주 생겨서 올려둔다.

Tistory Poster Skin Theme Original

HTML

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>티스토리 포스터 스킨 기본 코드</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
</head>
<body id="tt-body-page" class="<s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<h1><a href="https://wlsfl.tistory.com/">Pensée</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">

Category (3)
- Blogging (3)

</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header>
<hr>
<section class="container">

<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-thumbnail-list'>
<div class='cover-thumbnail-list'>
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-slider'>
<div class="cover-slider">
<ul>
<s_cover_item>
<li<s_cover_item_thumbnail> style="background-image:url();"</s_cover_item_thumbnail>>
<a href="" class="text-box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>

<s_cover name='cover-masonry'>
<div class="cover-masonry">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/R600x0/?fname=" alt=""></s_cover_item_thumbnail></span>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-list'>
<div class="cover-list">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

<s_cover name='cover-gallery'>
<div class="cover-gallery">
<div class="inner">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<figure>
<s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail>
</figure>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</div>
</s_cover>

</s_cover_rep>

<div class="cover-footer">
<s_if_var_footer-image>
<div class="image" style="background-image:url();"></div>
</s_if_var_footer-image>
<s_if_var_footer-text>
<p></p>
</s_if_var_footer-text>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest"><span class="">Pinterest</span></a></s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a></s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a></s_if_var_sns-instagram>
</div>
<nav class="menu">

</nav>
</div>
</s_cover_group>

<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">

</div>
</s_page_rep>

<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
</s_notice_rep>

<s_list>
<div class="post-header">
<span><h1></h1></span>
<span style="padding-left: 5px; font-weight: bold;">()</h</span>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>

<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt protected">보호되어 있는 글입니다.</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">

<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다.<br>
내용을 보시려면 비밀번호를 입력하세요.</p>
<fieldset>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">입력</button>
</fieldset>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>

<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
</div>
</div>
<div class="entry-content">

</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">

</div>
</div>
</s_tag_label>

<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>

<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>

<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>

</s_permalink_article_rep>
</s_article_rep>
</div>

<s_tag>
<div class="hgroup">
<h1>태그</h1>
</div>
<div class="tags">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>

<s_guest>
<div class="guest_inner">
<div class="hgroup">
<h1>방명록</h1>
</div>
<div class="comments">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>

<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</div>
</s_guest>

<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>

</article>
</section>
<hr>

<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://wlsfl.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
</body>
</html>

CSS

@charset "utf-8";

/*
*
* CSS CONTENTS:
*
* 01. Web Font
* 02. Type Selector Reset
* 03. Accessibility Navigation
* 04. Layout Selector
* 05. Components
* 06. Entry Content
* 07. Comment
* 08. Widget & Template Page
* 09. ETC
* 10. Post Type & Color Type
* 11. Retina Display
* 12. Media Screen - Tablet
* 13. Media Screen - Mobie
*
*/

/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');

/* Type Selector Reset */
body {
font-weight: 400;
font-family: 'Noto Sans KR', sans-serif;
font-size: 1em;
line-height: 1.25;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
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, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
margin: 0;
padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
overflow: visible;
cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
-webkit-appearance: none;
}
input, select, textarea, button {
font-family: 'Noto Sans KR', sans-serif;
font-size: 100%;
border-radius: 0;
}
button {
overflow: visible;
margin: 0;
padding: 0;
border: 0;
background: transparent;
}
ul li {
list-style: none;
}
img, fieldset {
border: none;
vertical-align: top;
}
hr {
display: none;
}

/* Accessibility Navigation */
#acc-nav {
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: 0;
}
#acc-nav a {
display: block;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
width: 1px;
height: 1px;
margin-left: -1px;
margin-bottom: -1px;
text-align: center;
font-weight: bold;
font-size: 0.875em;
color: #000;
white-space: nowrap;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
width: 100%;
height: auto;
padding: 10px 0;
background: #000;
color: #fff;
z-index: 1000;
}

/* Layout Selector */
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}
#header h1 a {
display: inline-block;
text-decoration: none;
vertical-align: top;
color: #1a1a1a;
}
#header .mobile-menu {
position: absolute;
top: 20px;
left: 33px;
z-index: 500;
width: 40px;
height: 40px;
outline: none;
}
#header .mobile-menu span {
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin: -2px 0 0 -13px;
background-color: #000;
text-indent: -999em;
}
#header .mobile-menu:before,
#header .mobile-menu:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 26px;
height: 2px;
margin-left: -13px;
background-color: #000
}
#header .mobile-menu:before {
margin-top: -9px;
}
#header .mobile-menu:after {
margin-top: 5px;
}
#header .mobile-menu.on {
position: fixed;
}
#header .mobile-menu.on span {
display: none;
}
#header .mobile-menu.on:before,
#header .mobile-menu.on:after {
margin-top: -2px;
}
#header .mobile-menu.on:before {
transform: rotate(-45deg);
}
#header .mobile-menu.on:after {
transform: rotate(45deg);
}

#header .menu {
position: fixed;
top: 0;
left: -348px;
z-index: 400;
width: 348px;
height: 100%;
padding: 94px 40px 189px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}
#header .menu .social-link {
position: absolute;
left: 40px;
bottom: 129px;
}
#header .menu p {
position: absolute;
left: 40px;
bottom: 79px;
font-size: 0.75em;
color: #9b9b9b;
}
#header .menu.on {
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
}
#header .search input {
display: none;
width: 100%;
height: 40px;
padding: 0 10px;
font-size: 1em;
line-height: 40px;
color: #000;
border: 0;
box-sizing: border-box;
background-color: transparent;
}
#header .search button {
display: none;
position: absolute;
top: 0;
right: 0;
z-index: 10;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
outline: none;
}
#header .search:before {
content: "";
position: absolute;
top: 0;
right: 0;
z-index: 20;
width: 40px;
height: 40px;
background: url(./images/ico_package.png) no-repeat 0 0;
text-indent: -999em;
cursor: pointer;
}
#header .search:hover:before {
background-color: #ebebeb;
}
#header .search.on {
width: 322px;
border-bottom: 1px solid #000;
}
#header .search.on input {
display: block;
outline: none;
}
#header .search.on button {
display: block;
}
#header .search.on:before {
display: none;
}

#gnb {
overflow: auto;
height: 100%;
margin-bottom: 8px;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 1.125em;
line-height: 1.5;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #000;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #333;
}

#gnb ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
#gnb ul li ul {
margin: 22px 0 0;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 6px 0 13px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.5625rem;
}
#gnb ul li ul li ul li a:before {
content: "-";
margin-right: 5px;
color: #333;
}
#gnb ul li ul li ul li a {
padding:0 12px;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
}
#content>.inner {
max-width: 860px;
}

#content .inner:after {
content: "";
clear: both;
display: block;
height: 0;
visibility: hidden;
}

#footer {
position: relative;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
#footer p {
text-align: center;
font-size: 0.75em;
color: #9b9b9b;
}
#footer p a {
text-decoration: none;
color: #9b9b9b;
}
#footer .admin {
color: #666;
}
#footer .admin:before {
content: "";
display: inline-block;
width: 1px;
height: 15px;
margin: 0 9px;
background-color: #b2b2b2;
vertical-align: middle;
}
#tt-body-index #footer {
border-top: 0;
}

/* Components */
.social-link a {
display: inline-block;
width: 18px;
height: 18px;
margin-right: 5px;
text-indent: -999em;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
vertical-align: top;
}
.social-link a:hover {
background-position-y: -68px;
}
.social-link .pinterest {
background-position: 0 -50px;
}
.social-link .facebook {
background-position: -50px -50px;
}
.social-link .twitter {
background-position: -100px -50px;
}
.social-link .instagram {
background-position: -150px -50px;
}

.btn, a.btn {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: unset;
}
.btn:hover {
border-color: #4d4d4d;
}

.cover-thumbnail-list {
margin: 0 auto -1px;
padding: 40px 0 56px;
border-bottom: 1px solid #ebebeb;
}
.cover-thumbnail-list h2 {
margin-bottom: 26px;
font-size: 1em;
}
.cover-thumbnail-list ul {
width: 100%;
}
.cover-thumbnail-list ul li {
float: left;
width: 24.0625%;
margin: 0 0 32px;
padding-left: 1.25%;
}
.cover-thumbnail-list ul li:nth-child(4n+1){
clear: both;
padding-left: 0;
}
.cover-thumbnail-list ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-thumbnail-list ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 11px;
padding-bottom: 75.757575757575758%;
background-color: #f6f6f6;
}
.cover-thumbnail-list ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-thumbnail-list ul li .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-thumbnail-list ul li .category {
display: inline-block;
margin-bottom: 8px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-thumbnail-list ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
padding-right: 10%;
font-weight: 700;
line-height: 1.375em;
}
.cover-thumbnail-list ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-thumbnail-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-slider {
position: relative;
overflow: hidden;
width: 100%;
background-color: #000;
}
.cover-slider ul li {
display: table;
width: 100%;
height: 460px;
text-align: center;
background-position: 50% 50%;
background-size: cover;
}
.cover-slider ul li a {
display: table-cell;
background-color: rgba(0,0,0,0.25);
text-decoration: none;
color: #fff;
vertical-align: middle;
}
.cover-slider ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #fff;
}
.cover-slider ul li .title {
display: block;
max-width: 580px;
margin: 0 auto 28px;
font-size: 2.5em;
line-height: 1.3;
}
.cover-slider ul li .btn {
border-color: #fff;
color: #fff;
}
.cover-slider ul li .btn:hover {
background-color: #fff;
color: #000;
}
.cover-slider .prev,
.cover-slider .next {
position: absolute;
top: 50%;
left: 50%;
z-index: 20;
width: 70px;
height: 70px;
margin: -25px 0 0 0;
background: url(./images/ico_package.png) no-repeat 0 -250px;
text-indent: -999em;
}
.cover-slider .prev {
margin-left: -506px;
background-position: 0 -250px;
}
.cover-slider .next {
margin-left: 436px;
background-position: -100px -250px;
}
.cover-slider .prev:hover,
.cover-slider .next:hover {
background-color: rgba(255,255,255,0.2);
}

.cover-masonry {
margin-bottom: -1px;
padding: 60px 0 49px;
border-bottom: 1px solid #ebebeb;
}
.cover-masonry h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-masonry ul {
display: inline-block;
margin-left: -42px;
vertical-align: top;
}
.cover-masonry ul li {
float: left;
width: 33.3333%;
margin: 0 0 37px;
padding-left: 42px;
box-sizing: border-box;
}
.cover-masonry ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.cover-masonry ul li .thum {
display: block;
margin-bottom: 11px;
}
.cover-masonry ul li .thum img {
width: 100%;
height: auto;
}
.cover-masonry ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-masonry ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444;
}
.cover-masonry ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.cover-masonry ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 6.4em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}

.cover-list {
margin-bottom: -1px;
padding: 30px 0 60px;
border-bottom: 1px solid #ebebeb;
}
.cover-list h2 {
margin: 30px 0 0 0;
font-size: 1em;
}
.cover-list ul li {
border-top: 1px solid #ebebeb;
}
.cover-list ul li:first-child {
border-top: 0;
}
.cover-list ul li a {
display: block;
min-height: 172px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.cover-list ul li figure {
float: right;
position: relative;
width: 172px;
height: 172px;
margin: 0 0 0 80px;
background-color: #f6f6f6;
}
.cover-list ul li figure:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-list ul li figure img {
position: relative;
z-index: 10;
width: 100%;
height: 100%;
}
.cover-list ul li .category {
display: inline-block;
margin-bottom: 7px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.cover-list ul li .title {
display: block;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4444em;
}
.cover-list ul li a:hover .title {
text-decoration: underline;
color: #666;
}
.cover-list ul li .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.8em;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.cover-list ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.cover-gallery {
margin: 0 auto -1px;
padding: 60px 0 75px;
border-bottom: 1px solid #ebebeb;
}
.cover-gallery h2 {
margin-bottom: 30px;
font-size: 1em;
}
.cover-gallery ul {
display: inline-block;
margin-left: -12px;
}
.cover-gallery ul li {
float: left;
width: 25%;
margin: 0 0 12px 0;
padding-left: 12px;
box-sizing: border-box;
}
.cover-gallery ul li a {
display: block;
position: relative;
width: 100%;
background-color: #ebebeb;
}
.cover-gallery ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
position: absolute;
top: 50%;
left:0;
z-index: 30;
overflow: hidden;
width: 100%;
max-height: 4.2em;
text-align: center;
line-height: 1.4;
padding: 0 20px;
color: #fff;
box-sizing: border-box;
transform: translateY(-50%);
visibility: hidden;
}
.cover-gallery ul li a:hover .title {
visibility: visible;
}
.cover-gallery ul li a:hover:after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 20;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.cover-gallery ul li a:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.cover-gallery ul li figure {
height: 0;
padding-bottom: 100%;
}
.cover-gallery ul li figure img {
position: relative;
width: 100%;
height: auto;
z-index: 10;
}

.cover-footer {
position: relative;
z-index: 10;
text-align: center;
}
.cover-footer .image {
height: 300px;
margin-bottom: 80px;
background-position: 50% 50%;
background-size: cover;
}
.cover-footer p {
margin: -5px 0 20px;
text-align: center;
font-weight: 700;
font-size: 1.25em;
color: #000;
}
.cover-footer .menu ul {
text-align: center;
}
.cover-footer .menu ul li {
display: inline-block;
margin: 40px 0 48px;
padding: 0 14px;
font-size: 0.875em;
}
.cover-footer .menu ul li a {
display: block;
text-decoration: none;
color: #282828;
}
.cover-footer .menu ul li a:hover {
text-decoration: underline;
color: #4e2e28;
}
.cover-footer p:first-child {
margin-top: 76px;
}
.cover-footer .social-link:first-child a {
margin-top: 80px;
}

.post-header {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 0 auto 30px;
padding: 57px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 1em;
}
.post-header .list-type {
float: right;
}
.post-header .list-type button {
float: left;
width: 24px;
height: 24px;
margin-left: 4px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
text-indent: -999em;
outline: none;
}
.post-header .list-type button:hover {
background-color: #ebebeb;
}
.post-header .list-type .list {
background-position: 0 -200px;
}
.post-header .list-type .thum {
background-position: -100px -200px;
}
.post-header .list-type .list.current {
background-position: -50px -200px;
}
.post-header .list-type .thum.current {
background-position: -150px -200px;
}

.post-item {
overflow: hidden;
width: 100%;
border-bottom: 1px solid #ebebeb;
}
.post-item a {
display: block;
min-height: 148px;
padding: 30px 0 30px;
text-decoration: none;
color: #080808;
}
.post-item:first-child a {
padding-top: 0;
}
.post-item a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.post-item .thum {
float: right;
overflow: hidden;
max-width: 148px;
margin-left: 80px;
}
.post-item .thum img {
width: 195px;
height: 148px;
margin: 0 0 0 -23.5px;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.post-item .title {
display: block;
margin-bottom: 8px;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.8em;
font-weight: 700;
font-size: 1.125em;
line-height: 1.4;
}
.post-item .excerpt {
display: block;
display:-webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow:hidden;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.post-item .excerpt.protected:before {
content: "";
display: inline-block;
width: 9px;
height: 13px;
margin-right: 10px;
background: url(./images/ico_package.png) no-repeat -0 -100px;
vertical-align: baseline;
}
.post-item .date {
display: block;
font-size: 0.8125em;
color: #999;
}

.pagination {
max-width: 860px;
margin: 60px auto 160px;
text-align: center;
}
.pagination .current {
display: none;
}
.pagination .view-more {
display: inline-block;
width: 158px;
height: 50px;
border: 1px solid #dcdcdc;
font-size: 0.875em;
line-height: 50px;
color: #000;
}
.pagination .view-more:hover {
border-color: #4d4d4d;
background: none;
}
.pagination a {
display: inline-block;
width: 24px;
height: 24px;
margin: 0 4px;
text-decoration: none;
font-size: 0.9375em;
line-height: 24px;
color: #b2b2b2;
vertical-align: middle;
}
.pagination a:hover {
background-color: #ebebeb;
}
.pagination .selected {
color: #000;
}
.pagination .prev,
.pagination .next {
width: 50px;
height: 50px;
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
border: 1px solid #dcdcdc;
text-indent: -999em;
vertical-align: middle;
box-sizing: border-box;
}
.pagination .prev {
background-position: -50px 0;
}
.pagination .next {
background-position: -100px 0;
}
.pagination .prev:hover,
.pagination .next:hover {
background-color: transparent;
border-color: #4d4d4d;
}
.pagination .no-more-prev,
.pagination .no-more-next {display: none;}

.hgroup {
max-width: 860px;
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
}
.hgroup .category {
display: inline-block;
margin-bottom: 16px;
padding-top: 5px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 1.6875em;
line-height: 1.4444em;
}
.hgroup .post-meta {
display: block;
font-size: 0.8125em;
color: #808080;
}
.hgroup .post-meta a {
text-decoration: none;
color: #999;
}
.hgroup .post-meta a:hover {
text-decoration: underline;
}
.hgroup .post-meta span:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 7px 0 10px;
background-color: #ebebeb;
vertical-align: baseline;
}
.hgroup .post-meta span:first-child:before {
content: none;
}

.another_category {
margin: 60px auto 80px;
padding: 0 !important;
border: 0 !important;
}
.another_category h4 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em !important;
}
.another_category h4 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.another_category table {
width: 100%;
border-collapse: collapse;
border: 0 !important;
font-size: 0.9375em;
color: #666;
}
.another_category table th {
padding: 8px 0 4px;
border: 0 !important;
text-align: left;
font-weight: 400;
}
.another_category table th a {
text-decoration: none;
color: #666;
}
.another_category td {
width: 60px;
padding: 8px 0 4px;
border-left: 0 !important;
border-top: 0 !important;
font-size: 0.8125em;
line-height: 1;
color: #b2b2b2;
}

.tags {
position: relative;
overflow: hidden;
max-width: 860px;
margin: 53px auto;
padding: 27px 0 28px 47px;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
color: #999;
box-sizing: border-box;
}
.tags h2 {
float: left;
width: 47px;
margin-left: -47px;
font-weight: 400;
font-size: 1em;
color: #000;
}
.tags .items a {
display:inline-block;
margin-left: 15px;
text-decoration:none;
font-size: 0.8125em;
line-height: 1.5384;
color: #999;
}
.tags .items a:hover {
color: #7a583a;
}
.tags .items a:before {
content: "#";
}

.related-articles {
overflow: hidden;
width: 100%;
margin: 57px 0 69px;
}
.related-articles h2 {
margin-bottom: 28px;
font-weight: 400;
font-size: 1em;
}
.related-articles h2 em {
border-bottom: 1px solid #000;
font-style: normal;
}
.related-articles ul {
}
.related-articles ul li {
float: left;
width: 24.0625%;
padding-left: 1.25%;
}
.related-articles ul li:first-child {
padding-left: 0;
}
.related-articles ul li a {
display: block;
text-decoration: none;
color: #080808;
}
.related-articles ul li a:hover .title {
text-decoration: underline;
color: #4e2e28;
}
.related-articles ul li .thum {
display: block;
position: relative;
overflow: hidden;
height: 0;
margin-bottom: 12px;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.related-articles ul li .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.related-articles ul li .thum img {

position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
}
.related-articles ul li .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Nanum Myeongjo', serif;
font-size: 0.875em;
color: #808080;
}
.related-articles ul li .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 2.75em;
margin-bottom: 9px;
font-weight: 700;
line-height: 1.375;
}
.related-articles ul li .date {
display: block;
font-size: 0.8125em;
color: #999;
}

/* Entry Content */
.entry-content h1 {
margin: 60px 0 19px;
font-size: 1.6875em;
}
.entry-content h2 {
margin: 60px 0 19px;
font-size: 1.5em;
}
.entry-content h3 {
margin: 60px 0 19px;
font-weight: 700;
font-size: 1.3125em;
}
.entry-content h4 {
margin: 60px 0 19px;
font-weight: 400;
font-size: 1.125em;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}
.entry-content p img {
max-width: 100%;
height: auto;
margin-top: 36px;
}
.entry-content hr {
display: block;
height: 0;
border: 0;
border-bottom: 1px solid #000;
}
.entry-content pre {
word-break:break-word;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 50px;
}
.entry-content ul {
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
list-style: inherit;
text-indent: -22px;
}
.entry-content ol {
list-style: inside decimal;
}
.entry-content ol li {
position: relative;
padding-left: 16px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
text-indent: -15px;
list-style: inherit;
}
.entry-content a {
color: #666;
}
.entry-content img.alignleft {
float: left;
margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
display: block;
margin: 0 auto 22px;
}
.entry-content img.alignright {
float: right;
margin: 0 0 22px 22px;
}
.entry-content blockquote {
margin-bottom: 60px;
padding: 16px 20px;
border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
margin-top: 0;
}
.entry-content table {
width:100%;
margin-bottom: 22px;
border: 1px solid #e6e6e6;
border-collapse: collapse;
text-align: center;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.entry-content table thead th {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
padding:7px 0 11px;
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
}
.entry-content input {
display: inline-block;
height: 40px;
padding: 0 10px;
border: 1px solid #e6e6e6;
font-size: 0.875em;
line-height: 1.25;
color: #666;
box-sizing: border-box;
vertical-align: middle;
}
.entry-content .protected_form {
margin-bottom: 40px;
padding: 120px 0 200px;
border-bottom: 1px solid #7a583a;
text-align: center;
}
.entry-content .protected_form p:before {
content: "";
display: block;
width: 64px;
height: 84px;
margin: 0 auto 30px;
background: url(./images/ico_package.png) no-repeat -50px -100px;
}
.entry-content .protected_form input {
width: 220px;
height: 50px;
margin-bottom: 10px;
background-color: transparent;
vertical-align: top;
}
.entry-content .cap1 {
text-align: center;
font-size: 0.875em;
font-style: italic;
}
.entry-content .iframe-wrap {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe:not([mapdata]) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Comment */
.comments {
max-width: 860px;
margin: 0 auto 60px;
padding-bottom: 30px;
border-bottom: 1px solid #e6e6e6;
}
.comments h2 {
font-weight: 400;
font-size: 1em;
color: #000;
}
.comments .comment-list {
font-size:16px;
margin-bottom: 6px;
overflow:hidden;
}
.comments .comment-list ul li {
padding: 30px 0 25px;
border-top: 1px solid #e6e6e6;
position: relative;
min-height: 48px;
}
.comments .comment-list ul li:first-child {
border: none;
}
.comments .comment-list ul li ul li {
padding: 26px 0 0 60px;
border-top: 0;
border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
position: absolute;
overflow: hidden;
top:30px; height:48px;
left:0; right:0;
padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
top:26px;
left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
position: absolute;
left:0; top:0;
width: 48px;
height: 48px;
border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
display:inline-block;
}

.comments .comment-list ul li .author-meta a {
text-decoration:none;
color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
float:left;
font-size: 0.875em;
line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom: 3px;
margin-right: 0;
vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
float:left;
margin-left: 10px;
font-size: 0.75em;
color: #999;
line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
content: "";
display: inline-block;
width: 1px;
height: 9px;
margin-right: 10px;
background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
margin-left: 10px;
}
.comments .comment-list ul li .control {
position: absolute;
top: 33px;
right:0;
}
.comments .comment-list ul li ul li .control {
top: 29px;
}
.comments .comment-list ul li .control a {
margin:0 2px;
text-decoration: none;
font-size: 12px;
color: #999;
}
.comments .comment-list ul li p {
position:relative;
margin: 29px 0 0 60px;
font-size: 0.875em;
line-height: 1.5714;
color: #666;
}
.comments .comment-form .field {
position: relative;
overflow: hidden;
width: 100%;
margin-bottom: 8px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
border: 1px solid #e6e6e6;
font-size: 0.9375em;
line-height: 1.25;
color: #666;
background-color: transparent;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 140px;
height: 52px;
margin-right: 6px;
padding: 10px;
box-sizing: border-box;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 10px;
resize: none;
box-sizing: border-box;
}
.comments .comment-form .field .secret {
display: inline-block;
margin-left: 15px;
vertical-align: middle;
}
.comments .comment-form .field .secret input {
display: none;
}
.comments .comment-form .field .secret label {
font-size: 0.8125em;
line-height: 52px;
color: #666;
outline: none;
cursor: pointer;
}
.comments .comment-form .field .secret label:before {
content: "";
display: inline-block;
width: 19px;
height: 18px;
margin-right: 9px;
border: 1px solid #e1e1e1;
vertical-align: middle;
background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package.png);
background-repeat: no-repeat;
background-position: -150px -100px;
}
.comments .comment-form .field .submit {
float: right;
}

/* Widget & Template Page */

/* ETC */
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 300;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}

/* Post Type & Color Type */
.post-type-thumbnail .post-item {
float: left;
width: 24.0625%;
margin: 0 0 58px;
padding-left: 1.25%;
border: 0;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 0;
}
.post-type-thumbnail .post-item a {
padding: 0;
}
.post-type-thumbnail .post-item .thum {
display: block;
position: relative;
overflow: hidden;
width: 100%;
max-width: none;
height: 0;
margin: 0 0 9px 0;
padding-bottom: 75.757575757575758%;
background-color: #ebebeb;
}
.post-type-thumbnail .post-item .thum:before {
content: "NO IMAGE";
position: absolute;
top: 50%;
left: 0;
z-index: 0;
width: 100%;
height: 18px;
margin: -9px 0 0 0;
text-align: center;
font-family: 'Arial';
font-weight: bold;
font-size: 0.875em;
color: #cbcbcb;
}
.post-type-thumbnail .post-item .thum img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
margin: 0;
}
.post-type-thumbnail .post-item .title {
display: block;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
width: 100%;
height: 2.75em;
font-weight: 700;
font-size: 1em;
line-height: 1.375em;
}
.post-type-thumbnail .post-item .excerpt {
display: none;
}
.post-type-thumbnail .pagination {
margin-top: 0;
}

/* Color Type */
.color-chocolate,
.color-chocolate .cover-footer,
.color-chocolate #footer {
background-color: #f4f2f1;
}
.color-chocolate #header h1 a,
.color-chocolate #gnb ul li a,
.color-chocolate #footer .admin,
.color-chocolate .cover-thumbnail-list ul li a,
.color-chocolate .cover-masonry ul li a,
.color-chocolate .cover-list ul li a,
.color-chocolate .cover-footer p,
.color-chocolate .cover-footer .menu ul li a,
.color-chocolate .post-item a,
.color-chocolate .hgroup h1,
.color-chocolate .hgroup .post-meta a,
.color-chocolate .entry-content h1,
.color-chocolate .entry-content h2,
.color-chocolate .entry-content h3,
.color-chocolate .entry-content h4,
.color-chocolate .entry-content a,
.color-chocolate .related-articles ul li a,
.color-chocolate .comments .comment-list ul li .author-meta span,
.color-chocolate .comments .comment-list ul li .author-meta .date a,
.color-chocolate .pagination .selected {
color: #4e2e28;
}
.color-chocolate #header .menu p,
.color-chocolate #footer p,
.color-chocolate .cover-thumbnail-list ul li .date,
.color-chocolate .cover-masonry ul li .excerpt,
.color-chocolate .cover-list ul li .excerpt,
.color-chocolate .cover-list ul li .date,
.color-chocolate .post-item .excerpt,
.color-chocolate .post-item .date,
.color-chocolate .hgroup .post-meta,
.color-chocolate .another-category td,
.color-chocolate .tags .items a,
.color-chocolate .related-articles ul li .date,
.color-chocolate .comments .comment-list ul li .author-meta .date,
.color-chocolate .comments .comment-list ul li .author-meta .control a {
color: #a69693;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
color: #94817e;
}
.color-chocolate .entry-content p,
.color-chocolate .entry-content table,
.color-chocolate .entry-content ul li,
.color-chocolate .entry-content ol li,
.color-chocolate .another-category table,
.color-chocolate .another-category table th a,
.color-chocolate .comments .comment-list ul li p {
color: #836c68;
}
.color-chocolate #gnb ul li a:hover,
.color-chocolate .cover-footer .menu ul li a:hover,
.color-chocolate .cover-thumbnail-list ul li a:hover .title,
.color-chocolate .cover-masonry ul li a:hover .title,
.color-chocolate .cover-list ul li a:hover .title,
.color-chocolate .post-item a:hover .title,
.color-chocolate .related-articles ul li a:hover .title {
color: #2d140f;
}
.color-chocolate .cover-thumbnail-list ul li .category,
.color-chocolate .cover-masonry ul li .category,
.color-chocolate .hgroup .category {
border-color: #a69693;
}
.color-chocolate .entry-content ul li:before {
background-color: #a69693;
}
.color-chocolate #header .mobile-menu:before,
.color-chocolate #header .mobile-menu:after,
.color-chocolate #header .mobile-menu span {
background-color: #4e2e28;
}
.color-chocolate .pagination a:hover,
.color-chocolate #header .search:hover:before {
background-color: #e7e2e1;
}
.color-chocolate .btn,
.color-chocolate .cover-thumbnail-list
.color-chocolate .cover-masonry
.color-chocolate .cover-list
.color-chocolate .cover-gallery,
.color-chocolate .cover-list ul li,
.color-chocolate .post-item,
.color-chocolate .hgroup,
.color-chocolate .entry-content table,
.color-chocolate .entry-content table thead th,
.color-chocolate .entry-content table tbody td,
.color-chocolate .entry-content blockquote,
.color-chocolate .comments,
.color-chocolate .comments .comment-list ul li,
.color-chocolate .comments .comment-form input[type=text],
.color-chocolate .comments .comment-form input[type=password],
.color-chocolate .comments .comment-form textarea,
.color-chocolate .comments .comment-form .field .secret label:before,
.color-chocolate .pagination .prev,
.color-chocolate .pagination .next,
.color-chocolate .pagination a {
border-color: #e7e2e1;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate #header .search:before,
.color-chocolate .cover-thumbnail-list ul li .thum:before,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button,
.color-chocolate .related-articles ul li .thum:before {
background-image: url(./images/ico_package_chocolate.png);
}
.color-chocolate .btn:hover,
.color-chocolate .pagination .prev:hover,
.color-chocolate .pagination .next:hover {
border-color: #4d4d4d;
}
.color-chocolate #header .search.on {
border-color: #4e2e28;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
#header .search button,
#header .search:before,
.social-link a,
.cover-slider .prev,
.cover-slider .next,
.cover-gallery ul li a:before,
.post-header .list-type button,
.pagination .prev,
.pagination .next,
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
background-image: url(./images/ico_package_2x.png);
background-size: 200px auto;
}
.color-chocolate .social-link a,
.color-chocolate #header .search button,
.color-chocolate .cover-gallery ul li a:before,
.color-chocolate .post-header .list-type button {
background-image: url(./images/ico_package_chocolate_2x.png);
background-size: 200px auto;
}
}

/* Media Screen - Tablet */
@media screen and (max-width:1023px) {
#header .search.on {
width: 180px;
}
#content .guest_inner,
#content>.inner {
padding: 0 40px;
}
.post-header {
padding: 40px;
}
.cover-thumbnail-list {
padding: 40px 40px 65px;
}
.cover-slider ul li .title {
max-width: none;
padding: 0 98px
}
.cover-slider .prev {
left: 14px;
margin-left: 0;
}
.cover-slider .next {
left: auto;
right: 14px;
margin-left: 0;
}
.cover-masonry {
padding: 60px 40px 81px;
}
.cover-list {
padding: 30px 40px 85px;
}
.cover-gallery {
padding: 60px 40px 130px;
}
}

/* Media Screen - Mobie */
@media screen and (max-width:767px) {
#header .mobile-menu {
top: 10px;
left: 11px;
}
#header .menu {
padding: 84px 20px 189px;
}
#header .menu .social-link,
#header .menu p {
left: 20px;
}
#header h1 {
padding: 15px 62px;
line-height: 1.25;
}
#header h1 a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#header .search {
top: 10px;
right: 1px;
}
#header .search.on {
position: absolute;
top: 60px;
left: 0;
right: auto;
z-index: 100;
width: 100%;
padding: 10px 18px 10px 17px;
border: 0;
background-color: #fff;
box-sizing: border-box;
}
#header .search.on input {
border-bottom: 1px solid #000;
}
#header .search.on button {
top: -50px;
right: 1px;
}
#content .guest_inner,
#content>.inner {
padding: 0 18px;
}
.post-header {
padding: 20px 18px;
}
.cover-thumbnail-list {
padding: 40px 18px 65px;
}
.cover-thumbnail-list ul li,
.related-articles ul li {
width: 48.591549295774648%;
    padding-left: 2.816901408450704%;
}
.cover-thumbnail-list ul li:nth-child(odd),
.related-articles ul li:nth-child(odd) {
clear: both;
padding-left: 0;
}
.cover-slider ul li {
width: 100%;
box-sizing: border-box;
}
.cover-slider ul li .title {
display:-webkit-box;
-webkit-line-clamp:4;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 5.2em;
padding: 0 18px;
font-size: 2.125em;
}
.cover-slider .prev {
top: auto;
bottom: 0;
left: 0;
}
.cover-slider .next {
top: auto;
right: 0;
bottom: 0;
}
.cover-masonry {
padding: 60px 18px 81px;
}
.cover-masonry ul li {
float: none;
width: 100%;
}
.cover-masonry ul li .category,
.cover-list ul li .category {
margin-bottom: 8px;
}
.cover-thumbnail-list ul li .title,
.related-articles ul li .title,
.cover-list ul li .title {
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
overflow:hidden;
max-height: 4.2em;
line-height: 1.4;
}
.cover-list {
padding: 30px 18px 80px;
}
.cover-list h2{
  margin: 30px 0 0 0;
}
.cover-list ul li a {
min-height: 98px;
}
.cover-list ul li figure {
width: 113px;
height: 113px;
margin: 0 0 0 18px;
}
.cover-list ul li .title {
-webkit-line-clamp: 2;
margin-bottom: 3px;
padding-top: 6px;
font-size: 1em;
}
.cover-list ul li .category {
display: none;
}
.cover-list ul li .excerpt {
-webkit-line-clamp: 2;
font-size: 0.8125em;
line-height: 1.5;
}
.cover-gallery {
padding: 60px 18px 130px;
}
.cover-gallery ul li {
width: 50%;
}
.post-item a {
min-height: 100px;
}
.post-item .thum {
max-width: 113px;
margin-left: 18px;
}
.post-item .thum img {
width: auto;
height: 113px;
margin: 0 0 0 -16.5px;
}
.post-item .title {
line-height: 1.2;
}
.post-item .excerpt {
-webkit-line-clamp: 2;
}
.post-type-thumbnail .post-item {
width: 48.591549295774648%;
margin-bottom: 26px;
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(4n+1) {
padding-left: 2.816901408450704%;
}
.post-type-thumbnail .post-item:nth-child(2n+1) {
clear: both;
padding-left: 0%;
}
.post-type-thumbnail .post-item .title {
-webkit-line-clamp: 3;
height: auto;
max-height: 4.125em;
}
.entry-content .table-wrap {
overflow: auto;
width: 100%;
}
.entry-content table {
width: 680px;
table-layout: fixed;
}
.entry-content .protected_form input {
display: block;
width: 160px;
margin: 0 auto 10px;
}
.pagination {
padding: 0 18px;
}
.pagination a {
display: none;
}
.pagination .current {
display: block;
font-size: 0.875em;
line-height: 50px;
}
.pagination .prev {
display: block;
float: left;
margin: 0;
}
.pagination .next {
display: block;
float: right;
margin: 0;
}
.another-category table th {
display: block;
padding: 0;
}
.another-category table td {
display: block;
margin-bottom: 19px;
}
.comments .comment-list {
margin-bottom:10px;
margin-top:10px;
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li {
padding-bottom:0;
}
.comments .comment-list ul li ul {
border-top: 1px solid #e6e6e6;
}
.comments .comment-list ul li ul li {
padding:20px 0 0 48px;
}
.comments .comment-list ul li ul li:before {
content: "";
position: absolute;
top: 34px;
left:18px;
width: 12px;
height: 12px;
background: url(./images/ico_package.png) no-repeat 0 -150px;
}
.comments .comment-list ul li .author-meta,
.comments .comment-list ul li ul li .author-meta {
position:relative;
top:0;
left:0;
}
.comments .comment-list ul li .author-meta img {
position: absolute;
top: 0;
left: 0;
}
.comments .comment-list ul li .author-meta .nickname,
.comments .comment-list ul li .author-meta .date {
display: block;
float: none;
line-height: 1.5;
}

.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
margin-bottom:4px;
}

.comments .comment-list ul li .author-meta .date {
margin-left: 0;
margin-top: 2px;
}
.comments .comment-list ul li .author-meta .date::before {
display: none;
}

.comments .comment-list ul li p {
margin: 14px 0 0;
}

.comments .comment-list ul li .control {
position: relative;
top: auto;
right: auto;
display: block;
margin: 9px 0 18px -2px;
}
.comments .comment-list ul li ul li .control {
top: auto;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
width: 100px;
}
.comments .comment-form .field .secret {
margin-left: 0;
}
.comments .comment-form .field .secret label:before {
margin-right: 5px;
}
.comments .comment-form .field .submit {
display: block;
float: none;
margin: 60px auto 0;
}
}

.revenue_unit_wrap.position_list{
max-width: 860px;
margin: 30px auto
}

포털에 내 글이 색인되어 있는지 확인하려면? (0)	2022.08.30
티스토리 커스텀 포스터 스킨 코드 완성판 (0)	2022.07.25

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

티스토리 포스터 스킨 기본 코드

Tistory Poster Skin Theme Original

HTML

Tistory Poster Skin Theme Original

HTML

CSS

Tistory Poster Skin Theme Original

HTML

CSS

Tistory Poster Skin Theme Original

HTML

CSS

CSS

'Blogging' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역