티스토리 커스텀 포스터 스킨 코드 완성판

2022. 10. 6. 일자

Tistory Custom Poster Skin Theme (Complete Version)

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>


<meta name="msvalidate.01" content="68CCCAC99B5B40F744ACC8BABB30D42F" />


<script type="text/javascript">
var lnk = new Array();
lnk['w'] = "/manage/posts/";               // 설정 - 글관리
lnk['e'] = "/manage/newpost/";             // 글쓰기
lnk['a'] = "/manage/statistics/blog/";     // 방문통계
lnk['s'] = "/manage/statistics/referrer/"; // 유입경로
lnk['d'] = "/manage/design/skin/edit#/";   // 스킨 편집

var hlnk = new Array();
lnk['f'] = "https://www.naver.com/"; //해당 주소 링크로 가기
lnk['g'] = "https://www.google.co.kr/"; //해당 주소 링크로 가기

function Movepage(lnkGo) {
if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){
  isNetscape=(document.layers);
  eventChooser = (isNetscape) ? lnkGo.which : event.keyCode;
  which = String.fromCharCode(eventChooser).toLowerCase();
  for (var i in lnk)
   if (which == i) window.location = lnk[i];
  for (var i in hlnk)
   if (which == i) location.hrdf = hlnk[i];
}
}
document.onkeypress = Movepage;
</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">
<p><a href="https://wlsfl.tistory.com/">Pensée</a></p>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">


<ul class="tt_category" style="padding-bottom: 30px;">

Category (3)
- Blogging (3)

</nav>

    <div id="sidebar">
      <s_sidebar>
      
    <s_sidebar_element>
     
        <s_rct_notice>
          <div class="notice">
Notice
            <ul>
              <s_rct_notice_rep>
                <li>
                  <a href="" target='_blank'></a>
                </li>
              </s_rct_notice_rep>
            </ul>
          </div>
        </s_rct_notice>
      </s_sidebar_element>
      </s_sidebar>

    <s_sidebar>
    <s_sidebar_element>
      
        <div class="counter">
  Stats
  <span class="today">Today : </span>
          <span class="total">Total :  </span>
        </div>
      </s_sidebar_element>
    </s_sidebar>
    </div>

<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>
</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></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-size: 18px; font-weight: bold;">()</h</span>
<div class="list-type">
  
</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/R128x128/?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_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;
}
figcaption { /* 이미지 설명 글자 */
font-weight: 350;

color: #757575;
}
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 p { /* 헤더 글자 Pravda */
/* font-family: 'Roboto', sans-serif; */
padding-top: 20px;
padding-bottom: 28px;
text-align: center;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #1a1a1a;
}
#header p 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;
margin-top: 14px;
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 { /* 사이드바 X자 버튼 */
position: fixed;
left: 300px;
width: 24px;
height: 112px;
}
#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;
overflow-y: auto; /* 사이드바 스크롤바 */
z-index: 400;
width: 270px; /* 사이드바 너비 */
height: 100%;
padding: 94px 40px 30px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}

/* Scrollbar Design */

::-webkit-scrollbar {
  width: 10px;  /* 세로축 스크롤 바 길이 */
  height: 20px;  /* 가로축 스크롤 바 길이 */
}
::-webkit-scrollbar-button:start {
  background-color: white; /* Top, Left 방향의 이동 버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: white; /* Bottom, Right 방향의 이동 버튼 */
}
::-webkit-scrollbar-track-piece {
  background-color: white; /* 스크롤 바 배경 색상 */
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray; /* 스크롤 바 색상 */
}

#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 { /* 사이드바 여백 */
padding-left: 20px;
padding-top: 20px;
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
margin-top: 14px;
}
#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 {
height: 920px;
margin-bottom: 8px;
}
#gnb ul a.link_tit { /* 사이드바 'Category' 글자 */
display: block;
font-size: 18px;
font-weight: bold;
line-height: 2.3;
margin-bottom: 0px;
text-decoration: none;
color: #000000;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 16px;
font-weight: 350;
line-height: 2.3;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #9e9e9e;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #9e9e9e;
}

#gnb ul li a:hover {
color: #b51200;
}
#gnb ul li ul {
margin-left: 10px;
margin-top: 6px;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 11.9px 0 11.9px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 16px;
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;
}
#gnb ul li ul li ul li a:hover {
color: #b51200;
}

div#sidebar { /* 사이드바 모듈 */
margin-top: 0px;
}
div#sidebar .notice { /* 공지사항 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
padding-bottom: 15px;
text-decoration: none;
color: #000000;
}
div#sidebar .notice ul {
margin-top: 12px;
}
div#sidebar .notice ul li {
font-size: 16px;
font-weight: 350;
line-height: 1.6 !important;
margin-bottom: 6px;
}
div#sidebar .notice ul li a {
text-decoration: none !important;
color: #000000;
}
div#sidebar .notice ul li a:hover {
color: #b51200;
}
div#sidebar .counter { /* 카운터 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding-top: 12px;
color: #000000;
}
div#sidebar .counter span.today {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
margin-top: 12px;
color: #9c9c9c !important;
}
div#sidebar .counter span.total {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
padding-top: 7px;
color: #9c9c9c !important;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
word-wrap:break-word; /* 본문 여백 초과하는거 줄바꿈 */
}
#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;
}
.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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 35px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 18px;
}
.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 {
color: #b51200;
}
.post-item .thum {
float: left;
overflow: hidden;
max-width: 148px;
margin-right: 50px;
}
.post-item .thum img { /* 대표 이미지 크기 */
width: 100%;
height: 100%;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Noto Sans KR', sans-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: 20px;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
}
.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: 15px auto 35px;
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: 'Noto Sans KR', sans-serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 24px;
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 {
color: #b51200;
}
.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: 'Noto Sans KR', sans-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 { /* 제목1 서식 */
margin: 19px 0 19px;
font-size: 24px;
}
.entry-content h2 { /* 제목2 서식 */
margin: 19px 0 19px;
font-size: 22px;
}
.entry-content h3 { /* 제목3 서식 */
margin: 19px 0 19px;
font-weight: 700;
font-size: 20px;
}
.entry-content h4 { /* 제목4 서식 */
margin: 19px 0 19px;
font-weight: 400;
font-size: 18px;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
font-weight: 350 !important;
line-height: 1.6;
color: #000000;
}
.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-all;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 20px;
}
.entry-content ul { /* 디스크 들여쓰기 */
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
font-weight: 350;
line-height: 1.6;
color: #000000;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
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 {
font-size: 18px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
padding: 16px 20px;
border-left: 10px solid #515151;
}
.entry-content blockquote {
color: #000000 !important;
}
.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 30px;
}
#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 img { /* 모바일 대표 이미지 크기 */
width: 80px;
height: 80px;
  margin-left: 10px;
    margin-top: 20px;
}
.post-item .title {
line-height: 1.4;
}
.post-item .excerpt {
-webkit-line-clamp: 4; /* 모바일 메인 홈 스니펫 줄 갯수 */
}
.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
}

2022. 10. 6. 일자

Tistory Custom Poster Skin Theme (Complete Version)

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>


<meta name="msvalidate.01" content="68CCCAC99B5B40F744ACC8BABB30D42F" />


<script type="text/javascript">
var lnk = new Array();
lnk['w'] = "/manage/posts/";               // 설정 - 글관리
lnk['e'] = "/manage/newpost/";             // 글쓰기
lnk['a'] = "/manage/statistics/blog/";     // 방문통계
lnk['s'] = "/manage/statistics/referrer/"; // 유입경로
lnk['d'] = "/manage/design/skin/edit#/";   // 스킨 편집

var hlnk = new Array();
lnk['f'] = "https://www.naver.com/"; //해당 주소 링크로 가기
lnk['g'] = "https://www.google.co.kr/"; //해당 주소 링크로 가기

function Movepage(lnkGo) {
if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){
  isNetscape=(document.layers);
  eventChooser = (isNetscape) ? lnkGo.which : event.keyCode;
  which = String.fromCharCode(eventChooser).toLowerCase();
  for (var i in lnk)
   if (which == i) window.location = lnk[i];
  for (var i in hlnk)
   if (which == i) location.hrdf = hlnk[i];
}
}
document.onkeypress = Movepage;
</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">
<p><a href="https://wlsfl.tistory.com/">Pensée</a></p>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">


<ul class="tt_category" style="padding-bottom: 30px;">

Category (3)
- Blogging (3)

</nav>

    <div id="sidebar">
      <s_sidebar>
      
    <s_sidebar_element>
     
        <s_rct_notice>
          <div class="notice">
Notice
            <ul>
              <s_rct_notice_rep>
                <li>
                  <a href="" target='_blank'></a>
                </li>
              </s_rct_notice_rep>
            </ul>
          </div>
        </s_rct_notice>
      </s_sidebar_element>
      </s_sidebar>

    <s_sidebar>
    <s_sidebar_element>
      
        <div class="counter">
  Stats
  <span class="today">Today : </span>
          <span class="total">Total :  </span>
        </div>
      </s_sidebar_element>
    </s_sidebar>
    </div>

<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>
</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></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-size: 18px; font-weight: bold;">()</h</span>
<div class="list-type">
  
</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/R128x128/?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_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;
}
figcaption { /* 이미지 설명 글자 */
font-weight: 350;

color: #757575;
}
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 p { /* 헤더 글자 Pravda */
/* font-family: 'Roboto', sans-serif; */
padding-top: 20px;
padding-bottom: 28px;
text-align: center;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #1a1a1a;
}
#header p 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;
margin-top: 14px;
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 { /* 사이드바 X자 버튼 */
position: fixed;
left: 300px;
width: 24px;
height: 112px;
}
#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;
overflow-y: auto; /* 사이드바 스크롤바 */
z-index: 400;
width: 270px; /* 사이드바 너비 */
height: 100%;
padding: 94px 40px 30px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}

/* Scrollbar Design */

::-webkit-scrollbar {
  width: 10px;  /* 세로축 스크롤 바 길이 */
  height: 20px;  /* 가로축 스크롤 바 길이 */
}
::-webkit-scrollbar-button:start {
  background-color: white; /* Top, Left 방향의 이동 버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: white; /* Bottom, Right 방향의 이동 버튼 */
}
::-webkit-scrollbar-track-piece {
  background-color: white; /* 스크롤 바 배경 색상 */
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray; /* 스크롤 바 색상 */
}

#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 { /* 사이드바 여백 */
padding-left: 20px;
padding-top: 20px;
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
margin-top: 14px;
}
#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 {
height: 920px;
margin-bottom: 8px;
}
#gnb ul a.link_tit { /* 사이드바 'Category' 글자 */
display: block;
font-size: 18px;
font-weight: bold;
line-height: 2.3;
margin-bottom: 0px;
text-decoration: none;
color: #000000;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 16px;
font-weight: 350;
line-height: 2.3;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #9e9e9e;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #9e9e9e;
}

#gnb ul li a:hover {
color: #b51200;
}
#gnb ul li ul {
margin-left: 10px;
margin-top: 6px;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 11.9px 0 11.9px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 16px;
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;
}
#gnb ul li ul li ul li a:hover {
color: #b51200;
}

div#sidebar { /* 사이드바 모듈 */
margin-top: 0px;
}
div#sidebar .notice { /* 공지사항 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
padding-bottom: 15px;
text-decoration: none;
color: #000000;
}
div#sidebar .notice ul {
margin-top: 12px;
}
div#sidebar .notice ul li {
font-size: 16px;
font-weight: 350;
line-height: 1.6 !important;
margin-bottom: 6px;
}
div#sidebar .notice ul li a {
text-decoration: none !important;
color: #000000;
}
div#sidebar .notice ul li a:hover {
color: #b51200;
}
div#sidebar .counter { /* 카운터 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding-top: 12px;
color: #000000;
}
div#sidebar .counter span.today {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
margin-top: 12px;
color: #9c9c9c !important;
}
div#sidebar .counter span.total {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
padding-top: 7px;
color: #9c9c9c !important;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
word-wrap:break-word; /* 본문 여백 초과하는거 줄바꿈 */
}
#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;
}
.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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 35px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 18px;
}
.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 {
color: #b51200;
}
.post-item .thum {
float: left;
overflow: hidden;
max-width: 148px;
margin-right: 50px;
}
.post-item .thum img { /* 대표 이미지 크기 */
width: 100%;
height: 100%;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Noto Sans KR', sans-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: 20px;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
}
.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: 15px auto 35px;
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: 'Noto Sans KR', sans-serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 24px;
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 {
color: #b51200;
}
.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: 'Noto Sans KR', sans-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 { /* 제목1 서식 */
margin: 19px 0 19px;
font-size: 24px;
}
.entry-content h2 { /* 제목2 서식 */
margin: 19px 0 19px;
font-size: 22px;
}
.entry-content h3 { /* 제목3 서식 */
margin: 19px 0 19px;
font-weight: 700;
font-size: 20px;
}
.entry-content h4 { /* 제목4 서식 */
margin: 19px 0 19px;
font-weight: 400;
font-size: 18px;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
font-weight: 350 !important;
line-height: 1.6;
color: #000000;
}
.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-all;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 20px;
}
.entry-content ul { /* 디스크 들여쓰기 */
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
font-weight: 350;
line-height: 1.6;
color: #000000;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
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 {
font-size: 18px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
padding: 16px 20px;
border-left: 10px solid #515151;
}
.entry-content blockquote {
color: #000000 !important;
}
.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 30px;
}
#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 img { /* 모바일 대표 이미지 크기 */
width: 80px;
height: 80px;
  margin-left: 10px;
    margin-top: 20px;
}
.post-item .title {
line-height: 1.4;
}
.post-item .excerpt {
-webkit-line-clamp: 4; /* 모바일 메인 홈 스니펫 줄 갯수 */
}
.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
}

2022. 10. 6. 일자

Tistory Custom Poster Skin Theme (Complete Version)

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>


<meta name="msvalidate.01" content="68CCCAC99B5B40F744ACC8BABB30D42F" />


<script type="text/javascript">
var lnk = new Array();
lnk['w'] = "/manage/posts/";               // 설정 - 글관리
lnk['e'] = "/manage/newpost/";             // 글쓰기
lnk['a'] = "/manage/statistics/blog/";     // 방문통계
lnk['s'] = "/manage/statistics/referrer/"; // 유입경로
lnk['d'] = "/manage/design/skin/edit#/";   // 스킨 편집

var hlnk = new Array();
lnk['f'] = "https://www.naver.com/"; //해당 주소 링크로 가기
lnk['g'] = "https://www.google.co.kr/"; //해당 주소 링크로 가기

function Movepage(lnkGo) {
if ((event.srcElement.tagName != 'INPUT') && (event.srcElement.tagName != 'TEXTAREA')){
  isNetscape=(document.layers);
  eventChooser = (isNetscape) ? lnkGo.which : event.keyCode;
  which = String.fromCharCode(eventChooser).toLowerCase();
  for (var i in lnk)
   if (which == i) window.location = lnk[i];
  for (var i in hlnk)
   if (which == i) location.hrdf = hlnk[i];
}
}
document.onkeypress = Movepage;
</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">
<p><a href="https://wlsfl.tistory.com/">Pensée</a></p>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">


<ul class="tt_category" style="padding-bottom: 30px;">

Category (3)
- Blogging (3)

</nav>

    <div id="sidebar">
      <s_sidebar>
      
    <s_sidebar_element>
     
        <s_rct_notice>
          <div class="notice">
Notice
            <ul>
              <s_rct_notice_rep>
                <li>
                  <a href="" target='_blank'></a>
                </li>
              </s_rct_notice_rep>
            </ul>
          </div>
        </s_rct_notice>
      </s_sidebar_element>
      </s_sidebar>

    <s_sidebar>
    <s_sidebar_element>
      
        <div class="counter">
  Stats
  <span class="today">Today : </span>
          <span class="total">Total :  </span>
        </div>
      </s_sidebar_element>
    </s_sidebar>
    </div>

<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>
</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></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-size: 18px; font-weight: bold;">()</h</span>
<div class="list-type">
  
</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/R128x128/?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_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;
}
figcaption { /* 이미지 설명 글자 */
font-weight: 350;

color: #757575;
}
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 p { /* 헤더 글자 Pravda */
/* font-family: 'Roboto', sans-serif; */
padding-top: 20px;
padding-bottom: 28px;
text-align: center;
font-size: 34px;
font-weight: 700;
line-height: 1;
color: #1a1a1a;
}
#header p 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;
margin-top: 14px;
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 { /* 사이드바 X자 버튼 */
position: fixed;
left: 300px;
width: 24px;
height: 112px;
}
#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;
overflow-y: auto; /* 사이드바 스크롤바 */
z-index: 400;
width: 270px; /* 사이드바 너비 */
height: 100%;
padding: 94px 40px 30px;
background-color: #fff;
box-sizing: border-box;
transition: left .5s ease-in-out;
}

/* Scrollbar Design */

::-webkit-scrollbar {
  width: 10px;  /* 세로축 스크롤 바 길이 */
  height: 20px;  /* 가로축 스크롤 바 길이 */
}
::-webkit-scrollbar-button:start {
  background-color: white; /* Top, Left 방향의 이동 버튼 */
}
::-webkit-scrollbar-button:end {
  background-color: white; /* Bottom, Right 방향의 이동 버튼 */
}
::-webkit-scrollbar-track-piece {
  background-color: white; /* 스크롤 바 배경 색상 */
}
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background-color: gray; /* 스크롤 바 색상 */
}

#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 { /* 사이드바 여백 */
padding-left: 20px;
padding-top: 20px;
left: 0;
}

#header .search {
position: absolute;
top: 20px;
right: 19px;
width: 0;
padding-right: 40px;
margin-top: 14px;
}
#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 {
height: 920px;
margin-bottom: 8px;
}
#gnb ul a.link_tit { /* 사이드바 'Category' 글자 */
display: block;
font-size: 18px;
font-weight: bold;
line-height: 2.3;
margin-bottom: 0px;
text-decoration: none;
color: #000000;
}
#gnb ul li {
margin-bottom: 6px;
font-size: 16px;
font-weight: 350;
line-height: 2.3;
}
#gnb ul li a {
display: block;
text-decoration: none;
color: #9e9e9e;
}
#gnb ul li ul li ul li a.link_sub_item{
color: #9e9e9e;
}

#gnb ul li a:hover {
color: #b51200;
}
#gnb ul li ul {
margin-left: 10px;
margin-top: 6px;
}
#gnb ul li ul li {
font-size: 1em;
}
#gnb ul li ul li ul {
margin: 11.9px 0 11.9px;
}
#gnb ul li ul li ul li {
margin: 0;
font-size: 16px;
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;
}
#gnb ul li ul li ul li a:hover {
color: #b51200;
}

div#sidebar { /* 사이드바 모듈 */
margin-top: 0px;
}
div#sidebar .notice { /* 공지사항 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
padding-bottom: 15px;
text-decoration: none;
color: #000000;
}
div#sidebar .notice ul {
margin-top: 12px;
}
div#sidebar .notice ul li {
font-size: 16px;
font-weight: 350;
line-height: 1.6 !important;
margin-bottom: 6px;
}
div#sidebar .notice ul li a {
text-decoration: none !important;
color: #000000;
}
div#sidebar .notice ul li a:hover {
color: #b51200;
}
div#sidebar .counter { /* 카운터 모듈 */
display: block;
font-size: 18px;
font-weight: bold;
text-decoration: none;
padding-top: 12px;
color: #000000;
}
div#sidebar .counter span.today {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
margin-top: 12px;
color: #9c9c9c !important;
}
div#sidebar .counter span.total {
display: block;
font-size: 16px !important;
font-weight: 350 !important;
padding-top: 7px;
color: #9c9c9c !important;
}

#content .inner {
max-width: 960px;
margin: 0 auto;
word-wrap:break-word; /* 본문 여백 초과하는거 줄바꿈 */
}
#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;
}
.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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 'Noto Sans KR', sans-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: 35px 0 15px;
border-bottom: 1px solid #ebebeb;
}
.post-header h1 {
float: left;
font-size: 18px;
}
.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 {
color: #b51200;
}
.post-item .thum {
float: left;
overflow: hidden;
max-width: 148px;
margin-right: 50px;
}
.post-item .thum img { /* 대표 이미지 크기 */
width: 100%;
height: 100%;
}
.post-item .category {
display: inline-block;
margin-bottom: 16px;
border-bottom: 1px solid #a3a3a3;
font-family: 'Noto Sans KR', sans-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: 20px;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
}
.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: 15px auto 35px;
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: 'Noto Sans KR', sans-serif;
font-size: 0.875em;
color: #808080;
}
.hgroup h1 {
display: block;
margin-bottom: 9px;
font-weight: 700;
font-size: 24px;
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 {
color: #b51200;
}
.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: 'Noto Sans KR', sans-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 { /* 제목1 서식 */
margin: 19px 0 19px;
font-size: 24px;
}
.entry-content h2 { /* 제목2 서식 */
margin: 19px 0 19px;
font-size: 22px;
}
.entry-content h3 { /* 제목3 서식 */
margin: 19px 0 19px;
font-weight: 700;
font-size: 20px;
}
.entry-content h4 { /* 제목4 서식 */
margin: 19px 0 19px;
font-weight: 400;
font-size: 18px;
}
.entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
font-weight: 350 !important;
line-height: 1.6;
color: #000000;
}
.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-all;
white-space:pre-wrap;
word-wrap:break-word;
}
.entry-content pre code.hljs {
padding: 20px;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 20px;
}
.entry-content ul { /* 디스크 들여쓰기 */
list-style: disc inside;
}
.entry-content ul li {
position: relative;
padding-left: 22px;
font-size: 0.9375em;
font-weight: 350;
line-height: 1.6;
color: #000000;
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;
font-weight: 350;
line-height: 1.6;
color: #000000;
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 {
font-size: 18px !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
margin-left: 20px !important;
padding: 16px 20px;
border-left: 10px solid #515151;
}
.entry-content blockquote {
color: #000000 !important;
}
.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 30px;
}
#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 img { /* 모바일 대표 이미지 크기 */
width: 80px;
height: 80px;
  margin-left: 10px;
    margin-top: 20px;
}
.post-item .title {
line-height: 1.4;
}
.post-item .excerpt {
-webkit-line-clamp: 4; /* 모바일 메인 홈 스니펫 줄 갯수 */
}
.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

티스토리 커스텀 포스터 스킨 코드 완성판

Tistory Custom Poster Skin Theme (Complete Version)

HTML

Tistory Custom Poster Skin Theme (Complete Version)

HTML

CSS

Tistory Custom Poster Skin Theme (Complete Version)

HTML

CSS

Tistory Custom Poster Skin Theme (Complete Version)

HTML

CSS

CSS

'Blogging' 카테고리의 다른 글

티스토리툴바