@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&family=Noto+Sans+KR&family=Noto+Serif+KR&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&family=Oleo+Script+Swash+Caps&display=swap&family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Eagle+Lake&family=Noto+Sans+KR&display=swap');
@font-face{
    font-family:"Font_Awesome_5_Free";
    src:url(./images/fa-solid-900.woff2) format("woff2"),
        url(./images/fa-solid-900.woff) format("woff"),
        url(./images/fa-solid-900.ttf) format("truetype"),
        url(./images/fa-solid-900.svg#fontawesome) format("svg");
    font-style:normal;
    font-weight:900;
    font-display: block;
}
/*
 *
 *
 *
 *
 **** 레이아웃 ****
 **** 헤더 ****
 **** 컨테이너 ****
 **** 컨텐츠 ****
  *** 본문 ***
   ** 목차 **
   ** 공감버튼 **
   ** 이전/다음 글 **
   ** 관련글 목록 **
   ** 섬네일 관련글 **
 **** 댓글 ****
 **** 사이드바 ****
   ** 사이드바숨김 **
 **** 사이드바배치 ****
 **** 푸터 ****
 **** 다크모드 ****
 **** 미디어 쿼리 1080 ****
 메이션 효과 ***
 ***** 애드센스 **** 
 **** 애니****
 ***** 포토가이드 ***

 *
 *
 *
 */


html {
    scroll-behavior: smooth;
}
body {
    -webkit-text-size-adjust: 100%;
    font-weight: 400;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 16px;
    line-height: 1.25;
    color: #1c1c26;
    word-break:break-all;
}
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;
    box-sizing: border-box;
}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption {
    display: block;
}
button,input[type=submit],input[type=reset],input[type=button] {
    overflow: visible;
    cursor: pointer;
}
input[type=text],input[type=email],input[type=password],input[type=submit],textarea {
    -webkit-appearance: none;
}
input,select,textarea,button {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 100%;
    border: 1px solid #ececec;
    outline: 0;
    padding: 10px;
    overflow: visible;
    margin: 0;
    background: transparent;
    max-width: 100%;
}
ul li {
    list-style: none;
}
hr {
    display: none;
}
table {
    border-collapse: collapse;
}
a,a:link {
    text-decoration: none;
    color: #1c1c26;
    transition: .3s;
}
a:visited {
    text-decoration: none;
}
a:hover,a:focus {
    text-decoration: none;
    color: #20c749;
}
a:active {
    text-decoration: none;
}
img {
    border: 1px solid #ececec;
}
fieldset {
    border: none;
    vertical-align: top;
}

#header .inner .blog_menu ul li,
#content .post-item,.post-cover,.toc,.toc p,.article_page .prev_page a,.article_page .next_page a,#content .pagination .prev,#content .pagination .next,.another-category,.another-category p,
.comment-list ul ul,.comment-list ul ul li,.comment-list p,.comment-form input,.comment-form select,.comment-form textarea,.comment-form button,.comment-form .submit button,.comment-form input[id="secret"] + label::before,
.sidebar .notice,.sidebar .category,.sidebar .recent,.sidebar .popular,.sidebar .recent-comment,
.sidebar .tags,.sidebar .social-channel,.sidebar .social-list,.sidebar .count,.sidebar .archive,.sidebar h2,
img { box-shadow: 0 1px 5px #e6e6e649; }    

/**** 레이아웃 ****/
#header {
    width: 100%;
}
#header .side-menu {
    display: none;
    position: absolute;
    top: 0;
    left: unset;
    right: 10px;
}
#container {
    border-top: 0px solid #ececec;
    border-bottom: 0px solid #ececec;
}
#content {
    width: 100%;
    max-width: 800px;    
    padding: 5px 20px 30px 0;
    border-right: 1px solid #ececec;
}

#aside {
    position: relative;
    padding: 5px 0 30px 20px;
    box-sizing: border-box;    
    transition: all 900ms cubic-bezier(.9, 0, .33, 1);
    -webkit-transition: all 900ms cubic-bezier(.9, 0, .33, 1);    
}

/**** 헤더 ****/

#header .inner h1 {    
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1080px;
    margin: 50px auto 10px;
}

#header .inner {
    width: 100%;
    text-align: center;
    font: 7.6rem 'Eagle Lake', cursive;
}
#header .inner .blog_menu {
    max-width: 90%;
}
#header .inner .blog_menu ul {
    display: flex;
    overflow: auto;
    padding: 3px 0;
    white-space:nowrap;
}
.blog_menu ul::-webkit-scrollbar {
    display: none;
}
#header .inner .blog_menu ul li {
    position: relative;
    font-size: 0.8em;
    padding: 5px 10px;
    margin-right: 5px;
    border: 1px solid #ececec;
}
#header .inner .blog_menu ul li:last-child {
    margin-right: 0;
}
#header .inner .blog_menu ul li.current::before {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 3px;
    left: 10%;
    width: 80%;
    height: 10%;
    background: linear-gradient( to right, #97ffa8, #8dd7f9 );
}
#header .inner .search {
    width: 30px;
    height: 30px;
    padding: 5px;
    margin-left: auto;
    border-radius: 30px;
    transition: .3s;
    cursor: pointer;
}
#header .inner .search::before,
#header .inner .search.on button::before {
    font: 20px 'fontawesome';
    content: "\f002";
    text-shadow: 1px 1px 1px #e6e6e649;
}
#header .inner .search input {
    display: none;
}
#header .inner .search input:focus {
    outline: 0;
}
#header .inner .search input::placeholder {
    color: #bcbcbc;
    font-size: 0.7em;
}
#header .inner .search button {
    display: none;
}
#header .inner .search.on {
    position: relative;
    width: 200px;
    border: 0;
    box-shadow: unset;
}
#header .inner .search.on::before {
    display: none;
}
#header .inner .search.on input {
    position: absolute;
    display: block;
    width: 100%;
    height: 30px;
    top: 0;
    right: 0;
    color: #353535;
    border: 1px solid #ececec;
    border-radius: 30px;
}

#header .inner .search.on button {
    position: absolute;    
    display: block;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    cursor: pointer;
    padding: 0;
    background: #61ce67;
    border-radius: 30px;
}

/**** 컨테이너 ****/
.content-wrap {
    display: flex;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto -50px;  

}
.meta,.date {
    font: 1.0em  'Noto Sans KR', sans-serif;
    margin-top: 10px;
}

.ad-container { 
    margin: 25px auto;
    margin-top: 50px;
    padding: 10px; 
    background: #f9f9f9; 
    border-radius: 10px; 
    max-width: 100%; 
    overflow: hidden; 
    }

/**** 컨텐츠 ***/
#content .post-header h1 {
    font: 1.2em 'jua';
    padding: 10px 0;
    border-bottom: 0px solid #ececec;
    margin-bottom: 5px;
}
#tt-body-tag #content .tags a {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    border: 1px solid #ececec;
}
.not-found { 
    font-size: 1em;
    line-height: 2;
}
.not-found .search,
.not-found .tag,
.not-found .category,
.not-found .archive {display: none;}
#tt-body-search .not-found .search,
#tt-body-tag .not-found .tag,
#tt-body-category .not-found .category,
#tt-body-archive .not-found .archive {
    display: block;
}
#tt-body-archive .post-header .conform:before {
    content: "'";
}
#tt-body-archive .post-header .conform:after {
    content: "' 에 등록된 글";
}
#tt-body-tag .post-header .conform:before {
    content: "'#";
}
#tt-body-tag .post-header .conform:after {
    content: "'의 검색결과";
}
#tt-body-search .post-header .conform:before {
    content: "'";
}
#tt-body-search .post-header .conform:after {
    content: "'의 검색결과";
}
#tt-body-archive .post-header .count:before
#tt-body-tag .post-header .count:before,
#tt-body-search .post-header .count:before {
    content: "'";
}
#tt-body-archive .post-header .count:after,
#tt-body-tag .post-header .count:after,
#tt-body-search .post-header .count:after {
    content: "'개의 글을 찾았습니다.";
}
/*** 리스트 ***/

.post-item {
    float: left;
    margin: 0 0 20px 3.37838%;
    width: 350px;
    display: inline-block;
    margin-top: 50px;
}

.post-item:nth-child(3n+1) {
    clear: both;
    margin-left: 12px
}

.post-item .thumbnail {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 0;
    margin-bottom: 5px;
    padding-bottom: 100%;
    background-color: #f8f8f8;
    border-radius: 10px
}

.post-item .thumbnail img {
    width: 100%;
    height: auto
}

.post-item .title {
    display: block;
    overflow: hidden;
    font-size: 1.4rem;
    font-weight: 600;
    max-width: 100%;
    margin-bottom: 4px;
    padding-top: 9px;
    text-overflow: ellipsis;
    line-height: 1.4
}

.post-item .excerpt,.sidebar .post-list ul li .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.post-item .excerpt {
    overflow: hidden;
    max-width: 100%;
    margin-bottom: 15px;
    font-size: .9125em;
    line-height: 1.5;
    color: #222;
    -webkit-line-clamp: 3
}

.post-item.protected .thum::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 47px;
    margin: -24px 0 0 -17px;
    background: url("images/ico_package.png") 0 -120px/120px no-repeat
}


.thumnail img {width: 120px;height: 120px;box-shadow: 0px 0px 3px gray;}
.list_content:hover .thumnail img {
	-webkit-transition-duration: .3s;
	transition-duration: .3s;
	-webkit-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
.thumnail {
	position: relative;
	display: block;
	float: left;
	overflow: hidden;
	margin-right: 24px;
}

.thumnail a {
	display: block
}

@media only screen and (max-width: 400px) {
	.thumnail {
		display:none;
	}
}
@media only screen and (max-width: 600px) {
	#header_wrap {
		height:45px;
	}
	.small-thumbnail .thumnail img {
		width:50px;
		height: 50px
	}

	.small-thumbnail .thumnail {
		margin-right: 15px
	}

	.small-thumbnail .list_content {
		/* display: table!important; */
	}

	.small-thumbnail .list_content .post_text {
		height: 40px!important;
		font-size: 12px!important;
		display: inline-block!important
	}

	.small-thumbnail .list_detail_wrap {
		font-size: 12px!important
	}
}



/** 보호글 **/
.protected_form h2 {
    border-bottom: 1px solid #ececec;
}
.protected_form p {
    text-align: center;
    margin: 35px 0 25px;
}
.protected_form .wrap {
    display: block;
    text-align: center;
}
/*** 본문 ***/
.post-cover {
    background: none !important;
    border: 1px solid #ececec;
    margin-bottom: 20px;
    
}
.post-cover .inner {
    position: relative;
    padding: 55px 0 35px;
    overflow: hidden;
    margin: 0px;
    min-width: 100%;
    max-width: 310px;
    width: 100%;
    background: #e8ebe8;
    text-align: center;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);  
}
.post-cover h1 {
    clear: both;
     font: 1.6em 'Eagle Lake', cursive;
    padding: 20px;
    margin-bottom: 20px;
    text-shadow: 0 1px 1px #26262649;
}
.post-cover .inner .category {
    position: absolute;
    font-size: 1.0em;
    top: 0;
    right: 0;
    padding: 5px 10px;
    border-bottom: 1px solid #ececec;
    border-left: 1px solid #ececec;
}
.post-cover .inner .meta {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 5px 22px;
    border-top: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

/** 이미지 링크 **/

.img_link {
    position: relative;
    width: 100%;

    padding-bottom: 82.5%;
    background: black;
    box-shadow: 0 10px 7px -5px rgba(0, 0, 0, 0.3);
 
}
.mat {
    position: absolute;
  
    background: white;
    top: 3.0303%; bottom: 3.0303%; left: 2.5%; right: 2.5%;
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) inset;
  }

  .art {
    position: absolute;
    overflow:hidden;
    height:auto;
    top: 16.129%; bottom: 16.129%; left: 13.158%; right: 13.158%;
  }
  
  .art img {
     width: 100%;
    }

  .art:after {
    content: '';
    display: block;
    position: absolute;
   
    top: 0;
    width: 100%;
    height: ;
    box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.20) inset;
  }



/* 목차 스타일 */
.book-toc {
    position: relative;
    width: 100%;
    border: 1px solid #f3f5f1;
    padding: 10px 20px 10px 15px;
    margin-top: -19px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120;
}
#toc * {
    font-size: 20px;
    color: #000 !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 10px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}


/* 글 제목1,2,3 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	border-left: #517135 12px solid;
	border-bottom: 1px solid #517135;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}


/** 목차 **/
#book-toc {
    margin: 20px 0;
    border: 1px solid #ececec;
}
#book-toc p {
    border-bottom: 1px solid #ececec;
    text-shadow: 0 1px 1px #26262649;
    padding: 20px 10px 10px;
}
#book-toc p::before {
    font: 1.2em 'fontawesome';
    margin-right: 15px;
    content: "\f0cb";   
}
#toc {
    max-height: 238px;
    overflow-y: auto;
    overflow-x: hidden;
}
#toc li {
    border-bottom: 1px solid #ececec;
}
#toc li:last-child {
    border-bottom: 0;
}
#toc li a { 
    display: block;
    padding: 8px 10px; 
    font: 1em  'Noto Sans KR', sans-serif;
}
#book-toc.icon li a::before {
    font: 1em 'fontawesome';
    margin-right: 15px;
}
#toc li li:first-child {
    border-top: 1px solid #ececec;
}
#toc li li {
    background: #f5f5f5;
}
#toc li li a {
    font-size: .95em;
}
#book-toc.icon li li a::before {
    font: .95em 'fontawesome';
    margin-right: 15px;
    margin-left: 20px;
}
#toc li li li {
    background: #e7e7e7;
}
#toc li li li a {
    font-size: .9em;
}
#book-toc.icon li li li a::before {
    font: .9em 'fontawesome';
    margin-right: 15px;
    margin-left: 40px;
}


#book-toc.numbering ul {
	counter-reset : toc-counter;
}  
#book-toc.numbering li a::before{
	counter-increment: toc-counter;
	content: counters(toc-counter,"-")".";
	margin-right: 10px;
}


#book-toc.numbering ul { counter-reset: toc-h2counter; }
#book-toc.numbering ul ul { counter-reset: toc-h3counter; }
#book-toc.numbering ul ul ul { counter-reset: toc-h4counter; }
#book-toc.numbering li a::before { 
    counter-increment: toc-h2counter;	
    content: counter(toc-h2counter) ".";
	margin-right: 10px;
}
#book-toc.numbering li li a::before {
	counter-increment: toc-h3counter;
	content: counter(toc-h2counter) "-" counter(toc-h3counter) ".";
	margin-right: 10px;
    margin-left: 15px;
}
#book-toc.numbering li li li a::before {
	counter-increment: toc-h4counter;
	content: counter(toc-h2counter) "-" counter(toc-h3counter) "-" counter(toc-h4counter) ".";
	margin-right: 10px;
    margin-left: 30px;
}


.entry-content h2,
.entry-content h3,
.entry-content h4 {
    padding: 20px 0 10px;
    text-shadow: 0 1px 1px #26262649;
}
.entry-content p {
    font: 1.em 'Noto Sans KR';
    line-height: 1.8;
    max-width: 70rem;
    margin: 0 auto;
}
.entry-content p a { 
    color: #3498db;
    font-size: .8em;
}    
.entry-content p a:hover { 
    color: #0004ff;
}   
.entry-content p a::after { 
    font-family: 'fontawesome';
    content: "\f0c1";
    margin-left: 5px;
} 
.entry-content table td {
    padding: 10px;
}
.entry-content .text-box,
.entry-content .txc-textbox {
    background: none !important;
}
figure[data-ke-type='opengraph'], #tt-body-page figure[data-ke-type='opengraph'] {
    margin: 0;
}
#content .inner .tags {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
    align-items: center;
}
#content .inner .tags h2 {
    font-size: 1em;
    margin-right: 10px;    
    flex: 0 0 auto;
}
#content .inner .tags h2::before { 
    font-family: 'fontawesome';
    content: "\f02b";
    margin-right: 10px;    
}
#content .inner .tags ul {
    font-size: 0;
}
#content .inner .tags a {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px 5px 0 0;
    font-size: 0.8rem;
    border: 1px solid #ececec;
}

/** 공감버튼 **/
.container_postbtn { 
    padding: 0px !important;
    margin: 20px 0 10px; 
}

/** 이전/다음 글 **/
.article_page {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 20px 0;
    max-width: 70rem;
    margin: 0 auto;
}
.article_page a {
    border: 1px solid #ececec;
}
.article_page figure {
    position: relative;
    width: 58px;    
    height: 58px;
    flex: 0 0 auto;
}
.article_page figure::after {
    font: 3em 'fontawesome';
    content: "\58";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 
.article_page figure::before {
    font: 2em 'fontawesome';
    content: "\f03e";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 
.article_page figure img {
    position: absolute;
    z-index: 1;
    border: 0;
}
.article_page .prev_page,
.article_page .next_page {
    width: 45%;
}
.article_page .prev_page a {
    display: flex;
    flex-direction: row;
    border: 1px solid #ececec;
}
.article_page .prev_page .wrap {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid #ececec;
}
.article_page .text {
    display: block;
}
.article_page .prev_page .text::before {
    font-family: 'fontawesome';
    content: "\f191";
    margin-right: 15px;
}
.article_page .next_page a {
    display: flex;
    flex-direction: row-reverse;    
}
.article_page .next_page .wrap {
    padding: 0 10px;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid #ececec;
}
.article_page .next_page .text::after {
    font-family: 'fontawesome';
    content: "\f152";
    margin-left: 15px;
}
.article_page .title {
    box-sizing: border-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;   
    text-overflow: ellipsis;   
}


/** 관련글 목록 **/
.another-category {
    border: 1px solid #ececec;
    max-width: 70rem;
    margin: 0 auto;
}
.another-category p {
    border-bottom: 1px solid #ececec;   
    padding: 20px 10px 10px;
}  
.another-category p::before {
    font-family: 'fontawesome';
    content: "\f00b";
    margin-right: 10px;
}  
.another-category table {
    width: 100%;	
    counter-reset: another-category-counter;
}    
.another-category tr {
    font-family: 'Noto Sans KR', sans-serif;
    border-bottom: 1px solid #ececec;
}    
.another-category tr:last-child {
    border-bottom: 0;
}  
.another-category th {
    display: flex;
    text-align: left;
    padding: 10px;
}
.another-category th a {
    display: inline-block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;   
    text-overflow: ellipsis;   
}
.another-category th a::before {
	counter-increment: another-category-counter;
	content: counter(another-category-counter) ".";
	margin-right: 10px;
}
.another-category th span {
    font-size: 0.7em;
}
.another-category td {
    width: 100px;
    font-size: 0.8em;
    text-align: right;
    padding: 10px;
}

/** 섬네일 관련글 **/
.related-articles {
    padding: 20px 0;
}
.related-articles ul {
    display: flex;
    justify-content: space-between;    
    flex-wrap: wrap;
    max-width: 70rem;
    margin: 0 auto;
}
.related-articles li {
    width: 48%;
}
.related-articles li a {
    position: relative;
}

.related-articles figure { 
    position: relative;
    width: 100%; 
    padding-bottom: 100%;
}
.related-articles figure img {
    position: absolute;
    z-index: 1;
}
.related-articles figure::after {
    font: 3em 'fontawesome';
    content: "\58";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 
.related-articles figure::before {
    font: 2em 'fontawesome';
    content: "\f03e";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 

.related-articles li a .title {
    position: absolute;
    left: 1px;
    bottom: -1px;
    z-index: 2;
    padding: 5px;    
    width: 100%;
    font: 1.0em  'Noto Sans KR', sans-serif;
    background: #ececec99;
    box-sizing: border-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;   
    text-overflow: ellipsis;  
    transition: .3s;   
}
.related-articles li a:hover .title {
    background: #26262699;
    color: #FFF;
    text-shadow: 0 1px 1px #26262649;
}

/**** 댓글 ****/
.comments h2 {
    font: 1.2em  'Noto Sans KR', sans-serif;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
    margin-bottom: 35px;
    max-width: 70rem;
    margin: 0 auto;
}
.comment-list {
    display: flex;
 
}
.comment-list ul {
    width: 100%;
  
}
.comment-list li {
    border: 1px solid #ececec;
    margin-bottom: 20px;
}
.comment-list .author-meta {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: flex-end;
    padding: 15px 10px;
    border-bottom: 1px solid #ececec;
    font-size: 0.5rem;
}
.comment-list .author-meta img {
    width: 58px;
    margin-right: 20px;
    border-radius: 58px;
}
.comment-list .author-meta .nickname,
.comment-list .author-meta .date,
.comment-list .author-meta .control {    
    position: relative;
    font: 1.6em  'Noto Sans KR', sans-serif;
    margin-right: 10px;
}
.comment-list .author-meta .control button {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    background: #3498db;
    vertical-align: middle;
    transition: .3s;
}
.comment-list .author-meta .control button::before {
    font: 0.5em 'fontawesome';
    content: "\f142";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.comment-list .author-meta .control .link {
    position: absolute;
    display: none;
    font-size: .8em;
    top: -40px;
    left: -105px;
    width: 120px;
    background: #ececec;
    padding: 5px;
    text-align: center;
}
.comment-list p {
    padding: 20px 10px;
    line-height: 1.6; 
}
.comment-list ul ul {
    display: flex;
    flex-direction: column;
    padding-top: 20px;
    border-top: 1px solid #ececec;
    margin: 0px 0px 0px -20px;
    max-width: 20rem;
}
.comment-list li li {
    margin: 0 20px 20px 20%;
    width: 100%;
}
.comment-list li li p {
    border: 0;
    margin: 0;
}
.comment-form {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    position: relative;
    max-width: 70rem;
    margin: 0 auto;
}
.comment-form .submit {
    padding: 10px 10px;
    text-align: right;
}
.comment-form .submit button {
    font: 1.1em  'Noto Sans KR', sans-serif;
    padding: 0 20px;
    background: #3498db;
    border: 1px solid #ececec;
    color: #fafafa;
    transition: .3s;
}
.comment-list .author-meta .control button:hover,
.comment-form .submit button:hover {
    background: #ff7600;
}
.comment-form .field {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 5px;
}
.comment-form input[type="text"] {
    width: 35%;
    margin-right: 5px;
}
.comment-form input[type="password"] {    
    width: 35%;
    margin-right: auto;
}
.comment-form input[id="secret"] {
	display: none;
}
.comment-form input[id="secret"] + label::before {
    font-family: 'fontawesome';
    content: "\f0c8";
    margin-right: 10px;
    color: #3498db;
    transition: .3s;
}
.comment-form input[id="secret"]:checked + label::before {
    font-family: 'fontawesome';
    content: "\f14a";
    margin-right: 10px;
    color: #3498db;
    transition: .3s;
}
.comment-form .secret label { transition: .3s; }
.comment-form .secret label:hover {
    color: #ff7600;
}

/** 페이징 **/


.pagination {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
    background: #fff;
    padding: 20px 20px;
    display: inline-block;
}

.pagination a {
    display: inline-block;
    margin-top: 60px;
    margin: 0 auto;
    font-size: 2.25em;
    line-height: 3.0rem;
    vertical-align: top;
    color: #333
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4 {
    clear: both; 
    margin: 29px 0 22px;
    padding: 4px 1px;
    line-height: 1.5;
    color: #000
}

.entry-content h4 {
    font-size: 1.2em;
}


.pagination .selected,.sidebar ul li a,.sidebar ul li a:hover {
    color: #333
}

.pagination .next,.pagination .prev {
    width: 22px;
    height: 22px;
    background: url("images/ico_package.png") 0 -50px no-repeat;
    text-indent: -999em
}

.pagination .next {
    background-position-x: -50px
}

.pagination .view-more {
    display: block;
    margin: 0;
    padding: 12px 0 11px;
    border: 1px solid #eee;
    text-align: center;
    font-size: .875em;
    color: #999
}


/**** 사이드바 ****/
.sidebar .social-channel,
.sidebar .notice,
.sidebar .category,
.sidebar .recent,
.sidebar .popular,
.sidebar .recent-comment,
.sidebar .tags,
.sidebar .count,
.sidebar .archive { 
    width: 300px;    
    margin: 0 0 35px;
    border: 0px solid #fff;
}
.sidebar .module.module_plugin {    
    margin: 0 0 35px;
    border: unset;
    box-shadow: unset;
}
.sidebar h2 {
    font: 1em  'Noto Sans KR', sans-serif;
    padding: 20px 10px 10px;
    border-bottom: 0px solid #fff;
    text-shadow: 0 1px 1px #26262649;
}
.sidebar h2::before {
    font-family: 'fontawesome';
    margin-right: 10px;
}
.sidebar .notice h2::before {
    content: "\21";
}
.sidebar .category h2::before {
    content: "\f802";
}
.sidebar .recent h2::before {
    content: "\f03a";
}
.sidebar .popular h2::before {
    content: "\e4b7";
}
.sidebar .recent-comment h2::before {
    content: "\f075";
}
.sidebar .tags h2::before {
    content: "\f02b";
}
.sidebar a {
    font-size: 1.1em;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 30px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.sidebar ul {
    padding: 10px 0;
}
.sidebar li {
    padding: 10px;
    border-bottom: 0px solid #fff;
    transition: .3s;
} 
.sidebar li:last-child {
    border-bottom: 0;
}
.sidebar .category li {
    border: 0;
    padding: 0;
}
.sidebar .category li a {
    padding: 0 10px 10px;
}
.sidebar .category li a img {
    border: 0;
}
.sidebar .category li a::before {
    font-family: 'fontawesome';
    content: "\f07c";
    margin-right: 10px;    
}
.sidebar .category ul ul {
    padding: 0;
}
.sidebar .category li li {
    padding: 10px 0;
}
.sidebar .category li li.cat-sub-menu a::before {
    content: "\f65e";
}
.sidebar .category li li.expanded a::before {
    content: "\f65d";
}
.sidebar .category li li a {
    padding: 0 10px;
}
.sidebar .category li li a::before {
    content: "\f07b";
}
.sidebar .category ul ul ul {
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    margin-top: 10px;
}
.sidebar .category li li li a::before {
    content: "\f07b" !important;
    margin-left: 10px;
}
.c_cnt {
 
}
.sidebar .thum {
    float: left;
    width: 90px;
    height: 90px;
    margin-right: 10px;
}    
.sidebar .recent span,
.sidebar .popular span {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;   
    line-height: 23px;
    text-overflow: ellipsis; 
}
.sidebar .social-channel ul {
    text-align: center;
    padding: 0;
}
.sidebar .social-channel li {
    font-size: 2em;
    display: inline-block;
    border: 0;
}
.sidebar .tags ul {
    display: flex;
    flex-wrap: wrap;
}
.sidebar .tags li {
    padding: 5px;
    margin: 5px;
    border: 1px solid #ececec;
}
.sidebar .count p {
    margin-left: 10px;
}
.sidebar .archive a {
    display: inline-block;
}
.thum { 
    position: relative; 
    background: #ececec13;
    transition: .3s;
}
.thum::after {
    font: 3em 'fontawesome';
    content: "\58";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 
.thum::before {
    font: 2em 'fontawesome';
    content: "\f03e";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
} 
.sidebar .thum img {
    position: absolute;
    width: 100%;
    z-index: 1;
    box-sizing: border-box;
}
.side-sticky {
    position: sticky;
    top: 50px;
}
.sidebar.side-footer {
    display: flex;
    flex-wrap: wrap;
}
.sidebar.side-footer div {
    width: 32%;
    margin-right: 2%;
    max-width: unset;
}
.sidebar.side-footer div:nth-child(3n+3) {
    margin-right: 0;
}

/** 사이드바숨김 **/
.side-menu {
    display: none;
    padding: 0;
    width: 30px;
    cursor: pointer;
    z-index: 2;
    transition: all 900ms cubic-bezier(.8, 0, .33, 1);
    -webkit-transition: all 900ms cubic-bezier(.8, 0, .33, 1);    
}
.side-menu .line {
    padding: 0;
    width: 30px;
    background: linear-gradient( to right, #077c2e, #fdda10 );
    height: 4px;
    margin: 4px 0;
    transition: all 700ms cubic-bezier(.9, 0, .33, 1);
}
.side-menu .line.line--1 {
    width: 30px;
    transform: rotate(0) translateY(0);
}
.side-menu .line.line--1.line-cross {
    width: 30px;
    transform: rotate(45deg) translateY(11px);
    background: linear-gradient( to right, #077c2e, #fdda10 );
}
.side-menu .line.line--2 {
    width: 30px;
    transform: translateX(0);
}
.side-menu .line.line--2.line-fade-out {
    width: 0px;
    transform: translate(30px);
    opacity: 0;
}
.side-menu .line.line--3 {
    width: 30px;
    transform: rotate(0) translateY(0);
}
.side-menu .line.line--3.line-cross {
    width: 30px;
    transform: rotate(-45deg) translateY(-11px);
    background: linear-gradient( to right, #97ddff, #F98DB9 );
}   
.side-menu:hover .line.line--1 {
    width: 15px;
    transform: rotate(-400deg);
}
.side-menu:hover .line.line--2 {
    transform: rotate(180deg);
}
.side-menu:hover .line.line--3 {
    width: 15px;
    transform: rotate(400deg);
}
.side-menu:hover .line.line--1.line-cross {
    width: 15px;
    transform: rotate(400deg) translatex(0px);
}
.side-menu:hover .line.line--2.line-fade-out {
    width: 30px;
    transform: translate(-15px);
    opacity: 1;
}
.side-menu:hover .line.line--3.line-cross {
    width: 15px;
    transform: rotate(-400deg) translateY(0px);
}
.side-on #aside {
    transform: translate(0) !important;    
    background: #fffffff2;
    border-radius: 0 !important;    
    border-left: 1px solid #ececec;
    overflow: auto;
}
.side-on #aside .sidebar * { 
    background: none;
    border: none !important;
    box-shadow: none !important; 
}
.dimmed {
    position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    border-radius: 0 0 0 100%;
    transition: all 900ms cubic-bezier(.8, 0, .33, 1);
    -webkit-transition: all 900ms cubic-bezier(.8, 0, .33, 1);
}
.side-on .dimmed {
    z-index: 20;
    width: 100%;
    background: #00000099;
    border-radius: 0;    
}
#aside::-webkit-scrollbar {
    display: none;
}

/**** 사이드바배치 왼쪽 ****/
.layout-aside-left #content {
    order: 2;
    padding: 50px 0 30px 20px;
    border-left: 1px solid #ececec;    
    border-right: 0;
}
.layout-aside-left #aside {
    padding: 50px 20px 30px 0;
}
/**** 사이드바배치 없음 ****/
.layout-aside-none #content {
    margin: 0 auto;
    padding: 50px 0 30px;
    border: 0;
}
.layout-aside-none #aside {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 50;
    width: 365px;
    height: 100%;
    transform: translate(365px);
    border-radius: 0 0 0 100%; 
    padding: 80px 10px 25px 50px;
    box-sizing: border-box;
}
.layout-aside-none #aside .sidebar { display: none; }
.layout-aside-none.side-on .sidebar { display: block; }
.layout-aside-none .side-menu {
    display: block;
    position: absolute;
    top: 100px;
    left: -45px;
}
.layout-aside-none.side-on .side-menu {
    left: 15px;
}
.page-top {
    position: sticky;
    display: block;
    bottom: 30px;
    left: 100%;
    margin: 0 30px 20px 0;
    z-index: 15;
    width: 50px;
    height: 50px;
    background: linear-gradient( to top, #f6faf7, #0c0c0c );
    border-radius: 30px;
    text-align: center;
    transition: .5s;
}
.page-top::before {
    font-family: 'fontawesome';
    content: "\f102";
    color: #FFF;
    vertical-align: middle;
}
.page-top:hover {
    transform: rotate(360deg);
}
/**** 푸터 ****/
#footer .inner { padding: 35px 0 50px; margin: 0 auto; }

/**** 다크모드 ****/
body.dark-mode { background-color: #262626; color: #ececec; }

.dark-mode a,
.dark-mode a:link,
.dark-mode #header .inner .search.on input,
.protected_form button,
.dark-mode figure[data-ke-type='opengraph'] div.og-text p.og-title, 
.dark-mode #tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title { color: #ececec !important; }
.dark-mode a:hover { color: #ff7600; }
.dark-mode * { border-color: #1c1c26 !important; } 
.dark-mode .comment-list .author-meta .control .link,
.dark-mode textarea,.dark-mode input,.dark-mode .c_cnt { background: #363636; }
.dark-mode #header .inner .blog_menu ul li,
.dark-mode #content .post-item,
.dark-mode .post-cover,
.dark-mode #book-toc,
.dark-mode #book-toc p,
.dark-mode .article_page .prev_page a,
.dark-mode .article_page .next_page a,
.dark-mode .another-category,
.dark-mode .another-category p,
.dark-mode #content .pagination .prev, 
.dark-mode #content .pagination .next,
.dark-mode .comment-list p,
.dark-mode .comment-form input, 
.dark-mode .comment-form select, 
.dark-mode .comment-form textarea, 
.dark-mode .comment-form button,
.dark-mode .comment-form .submit button,
.dark-mode .comment-form input[id="secret"] + label::before,
.dark-mode .sidebar .notice,
.dark-mode .sidebar .category,
.dark-mode .sidebar .recent,
.dark-mode .sidebar .popular,
.dark-mode .sidebar .recent-comment,
.dark-mode .sidebar .tags,
.dark-mode .sidebar .social-channel,
.dark-mode .sidebar .social-list,  
.dark-mode .sidebar .count,    
.dark-mode .sidebar .archive,                
.dark-mode .sidebar h2,
.dark-mode img { box-shadow: 0 1px 5px #26262649; }
.dark-mode.side-on #aside, .dark-mode.layout-aside-none.side-on #aside { background: #262626f2; }
.dark-mode::-webkit-scrollbar-track {
    background: #262626;
    border: 3px solid #262626;    
    box-shadow: inset 1px 1px 1px 0px #ececec99;
}    


@media screen and (max-width: 1080px) and (prefers-color-scheme: dark) {
    
}

/**** 미디어 쿼리 1080 ****/
@media screen and (max-width: 1080px) {
    #header .inner,
    #footer .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    #content,
    .layout-aside-left #content,
    .layout-aside-none #content {
        margin: 0 auto;
        padding: 50px 0 30px;
        border: 0;
    } 
    #content .post-header h1 {
        padding: 10px 20px;
    }       
    #aside {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 50;
        width: 365px;
        height: 100%;
        transform: translate(365px);
        border-radius: 0 0 0 100%; 
        padding: 80px 10px 25px 50px !important;
        box-sizing: border-box;
    }
    #aside .sidebar { display: none; }
    .side-on #aside .sidebar { display: block; }
    #aside .side-menu {
        display: block ;
        position: absolute;
        top: 60px;
        left: -45px;
    }
    .side-on #aside .side-menu {
        top: 110px;
        left: 15px;
    }
}
@media screen and (max-width: 767px) {
    #header .side-menu { display: block; }
    #aside .side-menu { display: none; }
    .side-on #aside .side-menu { display: block; }
    #header .inner h1 { font: 3.0em 'Eagle Lake', cursive; }    
    #tt-body-page #content { padding-top: 0;} 
    #tt-body-archive #content .inner,
    #tt-body-tag #content .tags,
    #tt-body-tag #content .inner,    
    #tt-body-search #content .inner,
    #tt-body-index #content .inner { padding: 0 20px 20px; }
    .post-cover { border-top: 0; }
    .entry-content { padding: 0 0px; }
    .article_page,
    .related-articles { padding: 20px 10px; }
    .another-category {
        border-left: 0;
        border-right: 0;
    }
    .comments h2 {
        padding: 10px 20px;
    }
    #container_postbtn,
    .comments .comment-form,    
    #tt-body-page #content .tags {
        padding: 0 20px;
    }
    .page-top {
        display: none;
    }
    .sidebar.side-footer div {
        width: 100%;
        margin-right: 0;
    }
}
/**** 애드센스 ****/
.ad_middle,
.middle-ads {
    margin: 20px 0
}
.ad-middle-left {
    margin: auto;
    overflow: hidden;
    padding: 5px;
}
.ad-middle-right {
    margin: auto;
    overflow: hidden;
    padding: 5px;
}
.adsbygoogle.middle-left {
    display: block;
    width: 336px;
    height: 280px;
}
.adsbygoogle.middle-right {
    display: block;
    width: 336px;
    height: 280px;
}
.revenue_unit_wrap.position_list {
    margin: 0 auto 30px;
}

/**** 애니메이션 효과 ****/
/* 로딩.. */
.loader {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loader-title {
    position: absolute;
    z-index: 1;
    margin-top: 35px;
    width: 100%;
    text-align: center;
}
.loader-circle {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid #3498db !important;
    border-bottom: 3px solid #3498db !important;  
    width: 120px;
    height: 120px; 
    -webkit-animation: spin 2.5s linear infinite; /* Safari */
    animation: spin 2.5s linear infinite;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.87), 0 0 19px 0 rgba(0, 0, 0, 0.16) inset;  
}
.loader-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;       
    width: 120px;
    height: 120px;  
}
.loader-wrap p {    
    position: absolute;
    display: block;
    width: 100%;
    z-index: 1;
    bottom: -40px;
    text-align: center;
}
/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}






/**** 포토가이드 ****/

/*
02. Structure
-------------------------------------------------------------------*/
/* basic */
.wrapper { position: relative; width: 100% }
.row { width: 100%; margin: 0 auto; padding: 0 50px; max-width: 80.000rem }
.row:before, .row:after { content: " "; display: table }
.holder { width: 100%; margin: 50px auto }

/* container & main */
#container { min-height: 100% }
#main { opacity: 0 }
#main.active { opacity: 1 }

/* sub structure */
.limit, .comport { width: 100%; margin: 0 auto 30px }
.shrink { width: 100% }
.clearfix { display: block }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 }
.prelative { position: relative }
.hidden { display: none !important }
.fright { float: right }
.fleft { float: left }
.shadow-top { box-shadow: 0 -1px 0 rgba(0,0,0,.05) }
.shadow-bottom { box-shadow: 0 1px 0 rgba(0,0,0,.05) }

/* section */
.section-line { border-bottom: 1px solid #f2f2f2; padding-bottom: 30px }

/* touch scroll */
.noscroll { overflow: hidden }

/* vertical align */
.vtable { display: table }
.vtable-cell { display: table-cell; vertical-align: middle }

/* top button */
#function { display: none; width: 44px; height: 44px; position: fixed; bottom: 20px; right: 50px; z-index: 99999; font-size: 0; padding: 0; color: transparent }
#function.active { display: block }
#function .svg-icon { width: 20px; height: 20px }
#function .top .svg-icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) }
#function .svg-icon path { fill: #fefefe }
#function a { display: inline-block; width: auto; background: rgba(27, 27, 27, 0.4); padding: 12px; vertical-align: middle; white-space: nowrap }

/* text */
.text-limit { overflow: hidden; line-height: 1.250rem; min-height: 1.250rem }
.text-limit-to-two-lines { max-height: 2.500rem }
.text-limit-to-three-lines { max-height: 3.750rem }

/*
03. Transition & Keyframes
-------------------------------------------------------------------*/
/* Transition */
.grid-item .item-content-caption { -webkit-transition: opacity 0.15s; transition: opacity 0.15s }
.comment-form input[type="text"], .comment-form input[type="password"], .comment-form textarea { -webkit-transition: background-color 0.15s; transition: background-color 0.15s }
.sidebar .widget.list a { -webkit-transition: padding 0.15s ease-in-out; transition: padding 0.15s ease-in-out }
#toggle-menu { -webkit-transition: -webkit-transform.5s ease-in-out; transition: transform .5s ease-in-out }
#toggle-menu span { -webkit-transition: -webkit-transform .25s ease-in-out; transition: transition .25s ease-in-out }

/* Keyframes */
@-webkit-keyframes spin { from{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)} }
@keyframes spin{ from{transform:rotate(0deg)}to{transform:rotate(360deg)} }

/**
04. Header
-------------------------------------------------------------------*/
/* 헤더 */
.header-wrapper { position: fixed; top: 0; width: 100%; padding: 0; z-index: 88888; opacity: 0; height: 70px; min-height: 70px; -webkit-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000), min-height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000), min-height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000), min-height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); box-shadow: 0 1px 0 rgba(0,0,0,.05) }
.header-wrapper.active { opacity: 1 }
#container.background.expand .header-wrapper { box-shadow: none;
/*background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6))*/ }
#header { width: 100%; height: 70px }
#header .svg-icon { margin-top: -2px }
#header .link_item { font-weight: 400 }
#header ul { display: block; top: 0 }
#header li { display: inline-block; margin-left: 10px; line-height: 70px; height: 100%; vertical-align: top }
#header .gnb { width: calc(100% - 140px); height: 70px; float: left; overflow: hidden; display: inline-block; padding-right: 30px }
#header .gnb > ul { white-space: nowrap }
#header .gnb > ul> li { margin-left: 0 }
#header .gnb .category_list > li { padding-left: 10px; padding-right: 10px; margin-left: 0 }
#header .gnb .category_list > li:first-child { padding-left: 0 }
#header .gnb .sub_category_list li { display: block; margin-left: 0; white-space: normal; height: auto }
/* 스틱 헤더 */
.header-wrapper.sticky { height: 50px; min-height: 50px }
#container.background.expand .header-wrapper.sticky { box-shadow: 0 1px 0 rgba(0,0,0,.05) }
.header-wrapper.sticky #header { height: 50px }
.header-wrapper.sticky #header li, .header-wrapper.sticky #header.thumb .gnb .category_list > li > a { line-height: 50px }
.header-wrapper.sticky #header .home-link-logo { max-height: 30px; line-height: 50px }
.header-wrapper.sticky #header .gnb, .header-wrapper.sticky #header .mini-gnb { height: 50px }
/* 홈 */
#header .home { width: 150px; padding-right: 30px }
#header .home li:first-child { margin-left: 0 }
#header .home a { vertical-align: middle; display: inline-block }
#header .home-link-logo { max-height: 50px; line-height: 70px; vertical-align: middle; margin-left: 0 }
/* 블로그 타이틀 */
#header .blogtitle { display: none; cursor: pointer }
/* 네비 */
#header .nav { width: calc(100% - 150px) }
/* 카테고리 드롭다운 목록 */
#header.dropdown .gnb > ul { float: left }
#header.dropdown .gnb .category_list > li { float: left }
#header.dropdown .gnb .category_list > li.has-child { cursor: pointer }
#header.dropdown .gnb .sub_category_list { display: none; position: absolute; width: 200px; top: 100%; padding: 11px 20px; margin-left: -20px; border-right: 1px solid rgba(0,0,0,.05); border-bottom: 1px solid rgba(0,0,0,.05); border-left: 1px solid rgba(0,0,0,.05) }
#header.dropdown .gnb .category_list > li.has-child:hover .sub_category_list { display: block }
#header.dropdown .gnb .sub_category_list > li { line-height: 1 }
#header.dropdown .gnb .sub_category_list > li > a { line-height: 1.2 }
#header.dropdown .gnb .sub_category_list > li:first-child { border-top-width: 0 }
#header.dropdown .gnb .sub_category_list > li { padding-top: 8px; padding-bottom: 9px; border-top: 1px dashed #e5e5e5 }
/* 카테고리 썸네일 목록*/
#header.thumb .gnb .category_list > li { position: static; cursor: pointer }
#header.thumb .gnb .category_list > li > a { display: inline-block; line-height: 70px }
#header.thumb .gnb .category_list > li > a img { margin-bottom: 2px }
#header.thumb .gnb .sub_category_list { display: none; line-height: 40px; padding: 40px 0; position: absolute; top: 100%; left: 0; width: 100%; z-index: 99999; overflow: hidden }
#header.thumb .gnb .has-child.active .sub_category_list { display: block }
#header.thumb .gnb .sub_category_list > li { width: 100%; position: relative; margin: 0 auto; padding: 0 50px; max-width: 100.000rem }
#header.thumb .gnb .sub_category_list > li .category-wrapper { display: none; float: right; margin-left: 0; top: 50px; left: 0 }
#header.thumb .gnb .sub_category_list.expand > li .category-wrapper { margin-left: 0; width: 100% }
#header.thumb .gnb .sub_category_list > li.active .category-wrapper { display: block }
#header.thumb .gnb .sub_category_list > li:first-child > a { border-top-width: 0; top: 0 }
#header.thumb .gnb .sub_category_list > li > a { position: absolute; left: 50px; line-height: 1.3; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; vertical-align: top; padding-top: 8px; padding-bottom: 9px; border-top: 1px dashed #e5e5e5 }
#header.thumb .gnb .sub_category_list > li > a img { margin-bottom: 2px }
#header.thumb .gnb .sub_category_list .category-item { display: inline-block; color: #fefefe; vertical-align: top; padding-left: 0; margin-left: 1.6% }
#header.thumb .gnb .sub_category_list .category-item:first-child { margin-left: 0 }
#header.thumb .gnb .sub_category_list .category-item .item-content-caption { padding: 0 10px; text-align: center }
#header.thumb .gnb .sub_category_list .category-item .item-content-caption .text { font-size: 0.643rem; opacity: 0.7; margin: 5px 0 }
#header.thumb .gnb .sub_category_list .category-item .item-content-caption h2 { font-size: 0.857rem; margin-bottom: 0; font-weight: 400; line-height: 1.250rem }
#header.thumb .gnb .sub_category_list .category-item a:hover img { -webkit-animation-name: fadeIn; animation-name: fadeIn }
#header.thumb .gnb .sub_category_list .category-item .item-content-image-wrap { width: 100%; overflow: hidden }
#header.thumb .gnb .sub_category_list .category-item .item-content-image-wrap img { display: block }
#header.thumb .gnb .sub_category_list .category-item.opps { width: 100% !important }
#header.thumb .gnb .sub_category_list .category-item.opps .item-content-caption { padding: 0 }
#header.thumb .gnb .sub_category_list .category-item.opps h2 { color: #FEFEFE; font-weight: 400; text-align: left }
#header.thumb .gnb .sub_category_list .category-item .item-content-caption .text .category, #header.thumb .gnb .sub_category_list .category-item .item-content-caption .text .spot, #header .gnb .sub_category_list .category-item .item-content-caption .context { display: none }
/* 카테고리 썸네일 목록 개수 설정에 따른 너비 조정 */
#header.thumb .gnb .sub_category_list.tt-index > li > a { width: 15.33% }
#header.thumb .gnb .sub_category_list.tt-page > li > a { width: 18.72% }
/* index: expand 6 items, default 5 items */
#header.thumb .gnb .sub_category_list.expand.tt-index .category-item { width: 15.33% }
#header.thumb .gnb .sub_category_list.default.tt-index .category-item { width: 18.72% }
#header.thumb .gnb .sub_category_list.default.tt-index > li .category-wrapper { width: calc(100% - 16.93% - 50px); margin-left: calc(16.93% + 50px) }
/* page: expand 5 items, default 4 items */
#header.thumb .gnb .sub_category_list.expand.tt-page .category-item { width: 18.72% }
#header.thumb .gnb .sub_category_list.default.tt-page .category-item { width: 23.8% }
#header.thumb .gnb .sub_category_list.default.tt-page > li .category-wrapper { width: calc(100% - 20.32% - 50px); margin-left: calc(20.32% + 50px) }
#header.thumb .gnb .sub_category_list.expand.tt-page .category-item:nth-child(n+6) { display: none }
#header.thumb .gnb .sub_category_list.default.tt-page .category-item:nth-child(n+5) { display: none }

/* 미니 메뉴*/
#header .mini-gnb { width: 140px; height: 70px; float: right; display: inline-block; text-align: right }
#header .mini-gnb ul { width: 100% }
#header .mini-gnb li:first-child { margin-left: 0 }
#header .mini-gnb a { font-size: 0.875em; height: 100%; font-weight: 400 }
#header .mini-gnb .active > a, #header .backend.active a { color: #212121 }
#header .mini-gnb .front, #header .mini-gnb .backend, #header #mini-gnb-share { display: none }
#header .mini-gnb .front.active, #header .mini-gnb .backend.active, #tt-body-page #header #mini-gnb-share.active { display: inline-block }
#header .mini-gnb .backend { margin-left: 0 }
#header .mini-gnb .backend .svg-icon.logout path { fill: #1ccacd }
#header #toggle-search, #header #mini-gnb-share, #header #toggle-mini-gnb { cursor: pointer }
#header #toggle-mini-gnb > .svg-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg) }
#header #toggle-mini-gnb.active > .svg-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
/* 공유 닫기 버튼 */
#share-bar-close { display: none; position: fixed; right: 20px; top: 10px; width: 25px; height: 50px; cursor: pointer; z-index: 99999 }
/* 모바일 메뉴 버튼 */
#toggle-menu { cursor: pointer; text-align: center; position: relative; float: left; top: 0; display: none; width: 25px; height: 50px; -webkit-transform: rotate(0deg); transform: rotate(0deg) }
#toggle-menu span { display: block; position: absolute; height: 2px; width: 20px; background: #212121; border-radius: 3px; opacity: 1; left: 2px; -webkit-transform: rotate(0deg); transform: rotate(0deg) }
#toggle-menu span:nth-child(1) { top: 18px }
#toggle-menu span:nth-child(2), #toggle-menu span:nth-child(3) { top: 24px }
#toggle-menu span:nth-child(4) { top: 30px }
#toggle-menu.open span:nth-child(1) { top: 30px; width: 0%; left: 50% }
#toggle-menu.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg) }
#toggle-menu.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg) }
#toggle-menu.open span:nth-child(4) { top: 30px; width: 0%; left: 50% }
/* 모바일 메뉴 */
#mobile-gnb { display: none; width: 100% }
#mobile-gnb.active { display: block }
#mobile-gnb .svg-icon { width: 20px; height: 20px }
#mobile-gnb a { color: #212121 }
#mobile-gnb .home-link { font-weight: 700 }
#mobile-gnb ul li { margin-top: 10px; margin-bottom: 10px; 
text-indent: 15px;
    line-height: 30px;
    font-size: 1.2rem; }
#mobile-gnb .widget { background: #f5f5f5; padding: 10px 20px;  font-size: 1.5rem; margin: 0; position: fixed; top: 50px; left: 0; right: 0; bottom: 0; width: 100%; overflow: auto; z-index: 99999 }
#mobile-gnb .category-info .category_list > li { border-bottom: solid 1px #fefefe; padding-bottom: 10px }
#mobile-gnb .category-info .category_list > li:last-child { border-bottom: none }
#mobile-gnb .category-info .sub_category_list li { margin-left: 10px; opacity: 0.7 }
#mobile-gnb .category-info .sub_category_list li:last-child { margin-bottom: 0 }

/**
05. Page Title
-------------------------------------------------------------------*/
.pagetitle-wrapper { padding: 95px 0 25px; margin: 0 }
.pagetitle-wrapper.background { margin-top: 70px; padding-top: 25px }
.pagetitle-wrapper.background.expand { margin-top: 0; padding-top: 75px }
.pagetitle-wrapper.background #pagetitle { min-height: 200px }
#pagetitle { text-align: center; opacity: 0; position: relative; width: 100% }
#tt-body-page #pagetitle { margin-top: 11px }
#pagetitle.active { opacity: 1 }
#pagetitle a { color: inherit; font-weight: inherit }
#pagetitle .logo { display: none; margin-bottom: 25px }
#pagetitle .logo .svg-icon { width: 42px; height: 42px }
#pagetitle .category { display: inline-block; color: #1ccacd; margin-bottom: 11px }
#pagetitle h1 { display: inline-block; font-size: 2.257em; line-height: 1.2; word-break: break-all; word-wrap: break-word; margin-bottom: 0; font-weight: 400 }

/**
06. Navigation
-------------------------------------------------------------------*/
#navigation { display: block; padding: 0; margin: 0; text-align: center }
#navigation .page-hidden, #navigation .interword, #navigation .item-paging-interword { display: none }
#tt-body-guestbook #navigation .page-hidden { display: inline-block }
#navigation .svg-icon { width: 20px; height: 20px }
#navigation .top .svg-icon { -webkit-transform: rotate(90deg); transform: rotate(-90deg) }
#navigation .svg-icon path { fill: #bfbfbf }
#navigation li { display: inline-block }
#navigation .action li { margin-left: 20px }
#navigation .action li:first-child { margin-left: 0 }
.paging-prev a, .paging-next a { color: #212121 }
.no-more-prev, .no-more-next { opacity: 0.3 }
.paging-num .selected { color: #E5E5E5 }

/**
07. Widgets
-------------------------------------------------------------------*/
/*
SVG Icons

제작자: Eric Meyer
홈페이지: mobile-gnb
라이선스: free
-------------------------------------------------------------------*/
.svg-icon { width: 25px; height: 25px; vertical-align: middle }
.svg-icon path { fill: #212121 }
/* 저널 */
.featured-timeline { margin-top: 50px; margin-bottom: 25px }
.featured-timeline .sticky-post { padding: 0 0 10px; display: block; font-weight: 400; color: #212121 }
.featured-timeline .sticky-post:before { margin: 1px 5px 0 -3px; display: inline-block; vertical-align: middle; content:  url(data:image/svg+xml,%3Csvg%20class%3D%22svg-icon%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20%20width%3D%2220%22%20height%3D%2220%22%3E%0A%09%09%09%09%09%09%09%3Cpath%20d%3D%22M14.999%2C8.543c0%2C0.229-0.188%2C0.417-0.416%2C0.417H5.417C5.187%2C8.959%2C5%2C8.772%2C5%2C8.543s0.188-0.417%2C0.417-0.417h9.167C14.812%2C8.126%2C14.999%2C8.314%2C14.999%2C8.543%20M12.037%2C10.213H5.417C5.187%2C10.213%2C5%2C10.4%2C5%2C10.63c0%2C0.229%2C0.188%2C0.416%2C0.417%2C0.416h6.621c0.229%2C0%2C0.416-0.188%2C0.416-0.416C12.453%2C10.4%2C12.266%2C10.213%2C12.037%2C10.213%20M14.583%2C6.046H5.417C5.187%2C6.046%2C5%2C6.233%2C5%2C6.463c0%2C0.229%2C0.188%2C0.417%2C0.417%2C0.417h9.167c0.229%2C0%2C0.416-0.188%2C0.416-0.417C14.999%2C6.233%2C14.812%2C6.046%2C14.583%2C6.046%20M17.916%2C3.542v10c0%2C0.229-0.188%2C0.417-0.417%2C0.417H9.373l-2.829%2C2.796c-0.117%2C0.116-0.71%2C0.297-0.71-0.296v-2.5H2.5c-0.229%2C0-0.417-0.188-0.417-0.417v-10c0-0.229%2C0.188-0.417%2C0.417-0.417h15C17.729%2C3.126%2C17.916%2C3.313%2C17.916%2C3.542%20M17.083%2C3.959H2.917v9.167H6.25c0.229%2C0%2C0.417%2C0.187%2C0.417%2C0.416v1.919l2.242-2.215c0.079-0.077%2C0.184-0.12%2C0.294-0.12h7.881V3.959z%22%3E%3C%2Fpath%3E%0A%09%09%09%09%09%09%3C%2Fsvg%3E) }
/* 다음 공감 버튼 */
.daum_like_wrapper { margin: 50px 0 30px }
/* 다음 지도 */
#TixIntroMap { max-width: 100% }
/* 반응형 Iframe */
.responsive-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden }
.responsive-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100% }
.responsive-container + p.cap1 { margin-top: -25px }
/* 검색 */
#search-wrapper { display: none; width: 100%; max-width: 300px; height: 0; position: relative; margin: 20px auto 0; background: rgba(255,255,255,0.7) }
#search-wrapper.active { display: block; height: 50px }
.search-form { border: none }
.search-form #s { display: block; background: none; width: 100%; height: 50px; line-height: 1.2; font-size: 1.586em; padding: 10px 10px; text-align: center }
.search-form #s:-webkit-input-placeholder { color: rgba(255,255,255,0.8) }
.search-form #s:-ms-input-placeholder { color: rgba(255,255,255,0.8) }
.search-form #s:focus { outline: none }
.search-form .submit { background-image: url(data:image/svg+xml,%3Csvg%20class%3D%22svg-icon%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2225%22%20height%3D%2225%22%3E%0A%09%3Cpath%20fill%3D%22%23fa8072%22%20d%3D%22M1.729%2C9.212h14.656l-4.184-4.184c-0.307-0.306-0.307-0.801%2C0-1.107c0.305-0.306%2C0.801-0.306%2C1.106%2C0%0A%09l5.481%2C5.482c0.018%2C0.014%2C0.037%2C0.019%2C0.053%2C0.034c0.181%2C0.181%2C0.242%2C0.425%2C0.209%2C0.66c-0.004%2C0.038-0.012%2C0.071-0.021%2C0.109%0A%09c-0.028%2C0.098-0.075%2C0.188-0.143%2C0.271c-0.021%2C0.026-0.021%2C0.061-0.045%2C0.085c-0.015%2C0.016-0.034%2C0.02-0.051%2C0.033l-5.483%2C5.483%0A%09c-0.306%2C0.307-0.802%2C0.307-1.106%2C0c-0.307-0.305-0.307-0.801%2C0-1.105l4.184-4.185H1.729c-0.436%2C0-0.788-0.353-0.788-0.788%0A%09S1.293%2C9.212%2C1.729%2C9.212z%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E); background-position: center; background-repeat: no-repeat; width: 40px; height: 100%;
 position: relative; top: -48px; right: 1px; border: none; background-color: transparent; cursor: pointer }
/* 티스토리 툴바 & 프로필 숨김 */
#tistorytoolbarid, .tistoryProfileLayerTrigger, .link_tit { display:none !important }
/* 툴팁 */
li.tooltips { position: relative; display: inline }
li.tooltips span { position: absolute; color: #FEFEFF; background: #212121; font-size: 0.688rem; height: 30px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px }
li.tooltips span:after { content: ''; position: absolute; bottom: 100%; left: 50%; margin-left: -8px; width: 0; height: 0; border-bottom: 8px solid #212121; border-right: 8px solid transparent; border-left: 8px solid transparent }
li:hover.tooltips span { visibility: visible; opacity: 0.8; width: 60px; top: 60px; left: 50%; margin-left: -30px; z-index: 999 }
/* 로더 */
#loader-wrapper { display: none; position: fixed; background: transparent; width: 100%; height: 100%; left: 0; top: 0; z-index: 100 }
#loader-wrapper.active { display: block }
#loader-wrapper div { position: absolute; z-index: 9999; top: 50%; left: 50% }
#loader-wrapper .spinner-wrapper { width: 40px; height: 40px; background: #fff; border-radius: 50%; border: 1px solid rgba(31,45,61,0.1); margin: -15px -15px -15px -20px }
#loader-wrapper .spinner { display: inline-block; width: 30px; height: 30px; border-width: 2px; border-style: solid; border-color: #1F2D3D transparent transparent; border-radius: 50%; animation: spin 1s linear infinite; margin: -15px }
/* 버튼 */
.link-button-wrapper { margin: 0 auto 30px; text-align: center }
.link-button { cursor: pointer; background: #fff; border: 1px solid rgb(10, 10, 10); display: inline-block; padding: 10px 15px; border-radius: 4px; margin: 0 auto; color: #c57c40 }
/* 공지사항 슬라이더 */
.notice-slider-wrapper { display: none; width: 280px }
.notice-slider-wrapper.active { display: block }
#notice-slider .svg-icon { width: 15px; height: 15px; vertical-align: top; margin-right: 2px }


/*
*/


08. Main Content
-------------------------------------------------------------------*/
.search-thumbs-wrap { margin: 0 auto 50px; margin-top: -30px;
 max-width: 100.000rem; overflow: hidden }
.search-thumbs-wrap .grid-item .item-content-image-wrap { width: 100%; position: relative; overflow: hidden }
.search-thumbs-wrap .grid-item .item-content-image { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: block }
.search-thumbs-wrap .grid-item .item-content-image:before { content: ""; display: block; opacity: 0; background: rgba(0, 206, 209, .8); position: absolute; width: 100%; height: 100%; z-index: 1 }
.search-thumbs-wrap .grid-item .item-thumbnail-link:hover .item-content-image { -webkit-animation-name: fadeIn; animation-name: fadeIn }
.search-thumbs-wrap .grid-item .item-thumbnail-link:hover .item-content-image:before { opacity: 0.4 }
.search-thumbs-wrap .grid-item .item-content-caption-wrapper { width: 100%; display: table }
.search-thumbs-wrap .grid-item .item-content-caption { display: table-cell; vertical-align: middle; text-align: center }
.search-thumbs-wrap .grid-item .item-content-caption h2 { font-size: 1.125em; line-height: 1.250em; font-weight: 400; margin-top: 5px; margin-bottom: 0; letter-spacing: .8px; overflow: hidden }
.search-thumbs-wrap .grid-item .item-content-caption .text { font-size: 0.750em; opacity: 0.8; font-weight: 400 }
.search-thumbs-wrap .grid-item .item-content-caption .context { display: none; margin-top: 5px; font-size: 0.929em; line-height: 1.250rem }
.search-thumbs-wrap .grid-item .item-content-header { display: none }
/* masonry */
.search-thumbs-wrap .grid-item { opacity: 0; cursor: pointer; overflow: hidden; break-inside: avoid; outline: 0 }
.search-thumbs-wrap .grid-item.active { opacity: 1 }
/* tile */
.search-thumbs-wrap.tile .grid-item { margin-bottom: 0.5% }
.search-thumbs-wrap.tile .gutter-sizer { width: 0.5% }
.search-thumbs-wrap.tile .grid-item.front-image .item-content-caption { padding: 1.571em }
.search-thumbs-wrap.tile .grid-item .item-content-caption h2 { font-size: 1.143em; word-break: break-all; word-wrap: break-word; letter-spacing: -0.07em; max-height: none }
.search-thumbs-wrap.tile .grid-item.grid-item--width-one.front-image .item-content-caption, .search-thumbs-wrap.tile .grid-item.grid-item--width-one.front-text .item-content-caption, .search-thumbs-wrap.tile .grid-item.grid-item--width-one.only-text .item-content-caption { padding: 8px 12px }

.search-thumbs-wrap.tile .grid-item .item-content-image.remove-background { background: none !important }
/* image aspect ratio */
.search-thumbs-wrap .grid-item .item-content-image-wrap.three-two { padding-top: 66.66% }
.search-thumbs-wrap .grid-item .item-content-image-wrap.four-three { padding-top: 75% }
.search-thumbs-wrap .grid-item .item-content-image-wrap.sixteen-nine { padding-top: 56.25% }
.search-thumbs-wrap .grid-item .item-content-image-wrap.one-one { padding-top: 100% }
/* only text */
.search-thumbs-wrap .grid-item.only-text  { background-color: #fefefe }
.search-thumbs-wrap .grid-item.only-text .item-content-image-wrap { opacity: 0 }
.search-thumbs-wrap .grid-item.only-text .item-content-caption-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100% }
.search-thumbs-wrap .grid-item.only-text .item-content-caption { opacity: 1; position: relative; overflow: hidden; width: 100%; text-align: center; padding: 1.571em }
.search-thumbs-wrap .grid-item.only-text .item-content-caption h2, .search-thumbs-wrap .grid-item.only-text .item-content-caption .text, .search-thumbs-wrap .grid-item.only-text .item-content-caption .context { color: #212121 }
/* caption align */
.search-thumbs-wrap.caption-align-bottom .grid-item .item-content-caption-wrapper { margin: auto 0 0 !important }
.search-thumbs-wrap.caption-align-bottom .grid-item .item-content-caption { vertical-align: bottom; text-align: left !important }
.search-thumbs-wrap.caption-align-bottom .grid-item.grid-item--width-one.front-image .item-content-caption, .search-thumbs-wrap.caption-align-bottom .grid-item.grid-item--width-one.front-text .item-content-caption, .search-thumbs-wrap.caption-align-bottom .grid-item.grid-item--width-one.only-text .item-content-caption { padding: 1.571em }
/* front image */
.search-thumbs-wrap .grid-item.front-image { background-color: transparent;  -webkit-filter: grayscale(100%);}
.grid-item.front-image:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

.search-thumbs-wrap .grid-item.front-image .item-content-caption-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100% }
.search-thumbs-wrap .grid-item.front-image .item-content-caption { color: #fefefe; position:relative; opacity: 0; overflow: hidden; width: 100%; text-align: center; padding: 1em; z-index: 1 }
.search-thumbs-wrap .grid-item.front-image .item-content-caption h2 { overflow: hidden; font-size: 1.214em }
.search-thumbs-wrap .grid-item.front-image .item-content-caption h2.title { margin-top: 0 }
.search-thumbs-wrap .grid-item.front-image .item-content-caption .context { display: none; overflow: hidden; max-height: 3.750rem }
.search-thumbs-wrap .grid-item.front-image .item-thumbnail-link:hover .item-content-caption { opacity: 1 }
/* front text */
.search-thumbs-wrap .grid-item.front-text  { background-color: transparent }
.search-thumbs-wrap .grid-item.front-text .item-content-image:before { opacity: 1; background-color: rgba(0,0,0,.4) }
.search-thumbs-wrap .grid-item.front-text .item-content-caption-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100% }
.search-thumbs-wrap .grid-item.front-text .item-content-caption { opacity: 1; position: relative; overflow: hidden; width: 100%; text-align: center; padding: 1em; z-index: 1 }
.search-thumbs-wrap .grid-item.front-text .item-content-caption h2 { color: #fefefe }
.search-thumbs-wrap .grid-item.front-text .item-content-caption .text { color: #FEFEFF }
.search-thumbs-wrap .grid-item.front-text .item-thumbnail-link:hover .item-content-image:before { opacity: 0 }
.search-thumbs-wrap .grid-item.front-text .item-thumbnail-link:hover .item-content-caption { opacity: 0 }
/* image and text */
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption { padding: 0 3px; width: 100%; text-align: left; min-height: 119px; max-height: 119px; display: block; overflow: hidden }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption h2 { overflow: hidden; font-size: 1.214em }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption h2.title { margin-top: 0 }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption .text { opacity: 0.8; margin-top: 10px }
.search-thumbs-wrap .grid-item.image-and-text .item-content-image-wrap + .item-content-caption .text { margin-top: 15px }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption .context { display: block; overflow: hidden; max-height: 3.750rem }
/* front text on box */
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption-wrapper { position: relative; padding: 1.714em 2.000em; border: 1px solid #f2f2f2 }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption { overflow: hidden; width: 100%; backface-visibility: hidden; background-color: #FEFEFF; text-align: left; min-height: 109px; max-height: 109px; display: block; overflow: hidden }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption:before { content: ""; display: block; border: 12px solid transparent; border-bottom-color: #f2f2f2; position: absolute; z-index: 2; top: -24px; left: 2.000em; margin-bottom: -24px }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption:after { content: ""; display: block; border: 11px solid transparent; border-bottom-color: #fefefe; position: absolute; z-index: 3; top: -21px; left: 2.000em; margin-left: 1px; margin-bottom: -21px }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption h2 { overflow: hidden; font-size: 1.214em }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption .text { opacity: 0.8 }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption .context { display: block; overflow: hidden; max-height: 3.750rem }

/**
09. Post formats
-------------------------------------------------------------------*/

/* 원 문자 */
.number-circle {
		padding-left:8px;
		padding-right:8px;
		border-radius: 100%;
		border: 2px solid #aaa;
   	height:50px;
		width:50px;
}

/* 인기글 popular post */

.popularPost {
	max-width: 330px;
}

.popularPost ul {
	padding:0px 15px;
}
.popularPost ul li {
	border-radius: 3px;
	width: 100%;
	display: inline-block;
	position: relative;
	font-size: 15px;
	border-bottom: 1px solid #f6f6f6;
}
.popularPost ul li:last-child {
	border-bottom:none;
}
.popularPost ul li a {
	font-weight: normal;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 5px;
}

.popularPost ul li a:hover {
	color: #668ee6;
	transition: .5s;
}

.popularPost .side-crop-img {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 2px;
	position: relative;
}

.popularPost .popular-right {
	height: 50px;
	display: inline-block;
}

.popularPost .left-pop {
	position: relative;
	float: left;
	overflow: hidden;
}
.popularPost-info .left-pop img {
	margin-left: 10px;
	border-radius: 7px;
}
.popularPost .right-pop {
	overflow: hidden;
	padding: 6px 10px 0 15px;
    font-size: 17px;
    margin-top: -8px;
    line-height: 21px;
}

.popularPost-list {

	margin-top:10px;
}

.popularPost-list a {
	display: table;
	width: 100%;
	
	table-layout: fixed;
}

.popularPost-info {
	display: table-cell;
	vertical-align: middle;
}

/* 이미지 컬러에서 흑백 */

img:hover {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%);
  -o-transition: .5s ease-in-out;
} 

img {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%); 
  -o-transition: .5s ease-in-out;

}

/*본문 하단 애드센스 광고 2개 */

.bottom-ads {
    display: flex;
    margin: 20px 0 20px;
}
#ad-bottom-left {
    margin: auto;
    overflow: auto;
    padding: 5px;
}
#ad-bottom-right {
    margin: auto;
    overflow: hidden;
    padding: 5px;
}
.adsbygoogle.bottom-left {
    display: block;
    width: 336px;
    height: 280px;
}
.adsbygoogle.bottom-right {
    display: block;
    width: 336px;
    height: 280px;
}

/*본문 하단 애드센스 광고 2개 끝 */

/* 카테고리 다른글 꾸미기 */
div .another_category h4 {
    color:#000 !important;
    font-weight:400;
    font-size: 15px;
    font-size: 1.2rem !important;
    }
div .another_category h4 a {
    font-family:'Noto Sans KR', sans-serif;
    font-weight:400;
    color:#07a !important;
    }
div .another_category table th,
div .another_category table td {
    font-size: 16px;
    font-size: 1.1rem !important;
    } 
/* 댓글 수 표시 */
div .another_category th span {
    display: none;
    font-family: 'Noto Sans KR', sans-serif; 
    font-size: 15px;
    font-size: 1.1rem;
    color:#07a !important;
    }
/* 목록 이미지 삽입 */
div .another_category th a {
    padding-left: 55px;
    background: url(images/gangchu.png) no-repeat 0;
    color:#000 !important;
    line-height: 30px;
    }
/* 선택글 색상 변경 & 밑줄 삭제 */
div .another_category th a.current {
    color: #07a;
    border-bottom:none !important;
    }
/* 날짜 숨기기 추가 */
div .another_category td {display:none;}
/* 테두리 숨기기와 아래 공간 추가 */
div .another_category {border: none !important;}
/* 마우스 오버시 효과 - 글 색상 변경 & 움직이기 효과 */
div .another_category table th a:hover{
    padding-right: 30px;    
    color: #e4850a !important;
    }
/* 현재글 색상 */
div .another_category table th a.current {
    font-weight: 400; 
    color:#07a !important;
    }
/* 맨아래 밑줄 추가 */
div .another_category table {border-bottom: 1px solid #ddd; }
/*카테고리 더 보기 끝*

10. Single post
-------------------------------------------------------------------*/
/* 글 관련 정보 */
.article-info { display: none; margin-top: 25px; position: relative; font-size: 1.100em; font-weight: 400; line-height: 1.2 }
/* 댓글 수 */
.reply-cnt { cursor: pointer }
/* 글 관련 태그 */
.article-tag { width: 100% }
.article-tag .title { font-size: 1.129em; display: inline; font-weight: 400 }
.article-tag .tags a { font-size: 0.957em; line-height: 2; margin-left: 7px }
.article-tag .tags a:hover { text-decoration: underline }
.article-tag .tags a:first-child { margin-left: 0 }
/* 이전다음글 */
.article-prev-next, .article-prev-ajax, .article-next-ajax { display: none }
.article-prev-next.active, .article-prev-ajax.active, .article-next-ajax.active { display: table }
.article-prev-next li { position: relative; width: 49.5%; min-height: 100px; margin: 0 auto; font-size: 0.975em; line-height: 1.3; overflow: hidden }
.article-prev-next img { display: block }
.article-prev-next .caption-wrapper { width: 100% }
.article-prev-next .caption { position: relative; overflow: hidden; width: 100%; z-index: 2 }
.article-prev-next .article-prev-ajax .caption { text-align: left; padding: 1.571em 1.571em 1.571em 2.571em }
.article-prev-next .article-next-ajax .caption { text-align: right; padding: 1.571em 2.571em 1.571em 1.571em }
.article-prev-next .caption .text { font-size: 0.950em; color: #FEFEFF; font-weight: 400 }
.article-prev-next .article-prev-ajax .caption .text { margin-left: 1px }
.article-prev-next .caption h2 {  font-size: 1.071em; letter-spacing: -0.07em; margin-bottom: 0; word-break: break-all; color: #FFF; line-height: 1.250em; font-weight: 400; overflow: hidden }
.article-prev-next .svg-icon { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2 }
.article-prev-next .article-prev-ajax .svg-icon { left: 0 }
.article-prev-next .article-next-ajax .svg-icon { right: 0 }
.article-prev-next .mask { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; background: #212121; opacity: 0.3; z-index: 1 }
/* 이전다음글: 썸네일 타입 */
.article-prev-next li.thumb-type .svg-icon path { fill: #FEFEFF !important }
.article-prev-next li.thumb-type a:hover .mask { background: rgba(3, 169, 244, 0.4) }
/* 이전다음글: 텍스트 타입 */
.article-prev-next li.text-type .mask { display: none }
.article-prev-next li.text-type .caption .text { color: #212121 }
.article-prev-next li.text-type .caption h2 { color: #212121 }
.article-prev-next li.text-type .svg-icon path { fill: #212121 }
/* 카테고리의 다른 글 */
.article-related li { display: block; float: left; margin: 0 0 1.6% 1.6%; width: 23.8%; vertical-align: top }
.article-related li:nth-child(4n+1) { margin-left: 0; clear: both }
.article-related .article-related-link { position: relative; display: block; width: 100%; color: inherit; padding-bottom: 8px }
.article-related .article-related-link:hover .article-related-title { color: #00ced1 }
.article-related.edge .article-related-thumb:after { content: ""; display: block; position: absolute; left: 3px; top: -1px; width: 0; height: 0; border-style: solid; border-width: 10px 10px 10px 10px; border-color: #fefefe #fefefe transparent #fefefe }
.article-related.edge .article-related-link:hover .article-related-thumb:after { border-color: #00bcd4 #00bcd4 transparent #00bcd4 }
.article-related .article-related-thumb img { display: block; margin-bottom: 10px }
.article-related .article-related-date { font-size: 0.625em; text-align: center }
.article-related .article-related-title { font-size: 0.995em; line-height: 1.250em; padding: 8px 6px 0 }
/* 섹션 타이틀 */
h4.title { font-size: 1.000em }
h4.title .svg-icon { width: 20px; height: 20px; position: relative; top: -1px }
/**
11. Sidebar
-------------------------------------------------------------------*/
/* Sidebar */
.sidebar .widget { margin-top: 40px; word-break: break-all }
.sidebar .widget .header { margin-top: 0; margin-bottom: 20px; font-size: 1.25em; text-transform: uppercase; letter-spacing: 1px; overflow: hidden; position: relative }
.sidebar .widget .header span { display: inline-block; position: relative; font-weight: 700 }
.sidebar .widget .header span:after { content: ""; height: 1px; margin-left: 10px; position: absolute; top: 50%; width: 75pc; left: 100%; background-color: #f2f2f2 }
.sidebar .widget .tt_category > li { padding-bottom: 0 !important }
/* : blog info */
.sidebar .widget.bloginfo img { background: #fefefe }
.sidebar .widget.bloginfo img.block { margin-bottom: 8px }
.sidebar .widget.bloginfo img.float { border-radius: 50%; float: left; margin-right: 8px; width: 45px }
/* : list type*/
.sidebar .widget.list ul > li > a { display: inline-block; line-height: 20px; vertical-align: middle }
.sidebar .widget.list > ul > li > a:hover { padding-left: 10px }
.sidebar .widget.list > ul > li:first-child { padding-top: 0; border-top-width: 0 }
.sidebar .widget.list > ul > li { padding-top: 8px; padding-bottom: 9px; border-top: 0px dashed #fff }
/* : category list */
.sidebar .widget.list ul.category_list > li > a:hover { color: #1ccacd }
.sidebar .widget.list ul.category_list > li:not(.has-child) > a:hover { padding-left: 10px }
.sidebar .widget.list ul.category_list > li:first-child { padding-top: 0; border-top-width: 0 }
.sidebar .widget.list ul.category_list > li { padding-top: 8px; padding-bottom: 9px; border-top: 0px dashed #fff }
.sidebar .widget.list ul.sub_category_list { padding-top: 9px }
.sidebar .widget.list ul.sub_category_list > li:first-child { padding-top: 8px }
.sidebar .widget.list ul.sub_category_list > li:last-child { padding-bottom: 0 }
.sidebar .widget.list ul.sub_category_list > li { padding-top: 8px; padding-bottom: 9px; border-top: 0px dashed #fff }
.sidebar .widget.list ul.sub_category_list > li > a.link_sub_item { margin-left: 10px }
.sidebar .widget.list ul.category_list, .sidebar .widget.list ul.sub_category_list { margin-bottom: 0 }
.sidebar .widget.list ul.category_list img { margin-bottom: 3px }
/* : category list : sub category dropdown */
.sidebar .widget.list ul.category_list > li.has-child .moreless_fold, .sidebar .widget.list ul.category_list > li.has-child .moreless_top { float: right; top: -7px; position: relative; cursor: pointer }
.sidebar .widget.list ul.sub_category_list.dropdown { display: none }
.sidebar .widget.list ul.sub_category_list.dropdown.active { display: block }
/* : tag box */
.sidebar .widget.box ul > li { display: inline-block }
.sidebar .widget.box ul > li { margin-bottom: 5px; padding: 5px 20px; border: 1px solid #e5e5e5; border-radius: 20px; line-height: 2 }
.sidebar .widget.box ul > li > a { display: inline-block; vertical-align: middle; word-break: break-all }
/* : counter */
.sidebar .widget.counter ul > li { font-weight: 700; color: #FEFEFF; border: none }
.sidebar .widget.counter .yesterday { background-color: #675b58; }
.sidebar .widget.counter .total { background-color: #212121 }
.sidebar .widget.counter .today { background-color: #282423 }

/* First Sidebar */
.sidebar-first-wrapper { display: none; width: 100%; overflow: hidden; margin-top: 50px; margin-bottom: 50px }
#sidebar-first:before { content: ""; width: 100%; height: 100%; position: fixed; top: 0; z-index: -1; overflow: hidden; margin-left: -30px }
#sidebar-first .widget { width: 100%; font-size: 0.929em }

/* Second Sidebar */
.sidebar-second-wrapper { display: none; padding-top: 70px; overflow: hidden }
#sidebar-second .widget { display: block; float:left; margin: 0 0 70px 5% }

/**
12. Post Content
-------------------------------------------------------------------*/
/* 폰트 */
/*.article-desc.effect { font-family: "Noto Serif KR', serif", "맑은 고딕", "Malgun Gothic", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", sans-serif }*/
/* 효과 */
.article-desc.effect.font-size-small { font-size: 1.000em }
.article-desc.effect.font-size-default { font-size: 1.071em }
.article-desc.effect.font-size-large { font-size: 1.314em }
.article-desc.effect *:first-child { margin-top: 0 }
.article-desc.effect { word-wrap: break-word }
.article-desc.effect.break { word-break: break-all }
.article-desc.effect.keep { word-break: keep-all }
.article-desc.effect.justify { text-align: justify }
.article-desc.effect a { font-weight: 400 }
.article-desc.effect p { margin: 0 auto 30px }
.article-desc.effect h1, .article-desc.effect h2, .article-desc.effect h3, .article-desc.effect h4, .article-desc.effect h5, .article-desc.effect h6 { margin: 50px 0 15px; line-height: 1.2 }
.article-desc.effect h1 { font-size: 1.575em }
.article-desc.effect h2 { font-size: 1.450em }
.article-desc.effect h3 { font-size: 1.325em }
.article-desc.effect h4 { font-size: 1.200em }
.article-desc.effect h5 { font-size: 0.938em }
.article-desc.effect h6 { font-size: 0.875em; text-transform: uppercase; letter-spacing: 1px }
.article-desc.effect ul { list-style: disc; margin-left: 1.500em; margin-bottom: 50px }
.article-desc.effect ul ul { list-style: circle }
.article-desc.effect ul ul ul { list-style: square }
.article-desc.effect ol { list-style: decimal; margin-left: 1.500em }
.article-desc.effect ol ol { list-style: lower-alpha }
.article-desc.effect ol ol ol { list-style: lower-roman }
.article-desc.effect ul ul, .article-desc.effect ul ol, .article-desc.effect ol ul, .article-desc.effect ol ol { margin-bottom: 0 }
.article-desc.effect li { margin-bottom: 0.5em; line-height: 1.7 }
.article-desc.effect ul ul li, .article-desc.effect ul ol li, .article-desc.effect ol ul li, .article-desc.effect ol ol li { margin-top: 0.5em }
.article-desc.effect ol > li:last-child, .article-desc.effect ul > li:last-child { margin-bottom: 0 }
.article-desc.effect pre, .article-desc.effect pre { line-height: 1.8; margin-bottom: 35px; overflow-x: auto; background-color: #f2f2f2; padding: 20px }
.article-desc.effect blockquote { margin: 0 0 35px; padding: 0 0 0 20px; color: #7F7F7F; position: relative }
.article-desc.effect blockquote *:last-child { margin-bottom: 0 }
.article-desc.effect blockquote:before { content: "\201C"; position: absolute; top: 0; left: 0; font-size: 40px; color: salmon }
.article-desc.effect cite { font-weight: 400; letter-spacing: 1px; text-transform: uppercase; display: block; color: #212121; font-size: 0.750em; line-height: 1.2; margin-top: -20px }
.article-desc.effect cite:before { content: "— " }
.article-desc.effect hr.dashed { position: relative; display: block; width: 20%; height: 20px; border: 0; margin: 20px auto 50px; border-bottom: 3px double #e5e5e5 }
.article-desc.effect hr.dashed:before { position: absolute; top: 50%; left: 50%; width: 40px; margin-left: -20px; text-align: center; background: #fefefe; display: inline-block; vertical-align: middle; content: "x"; color: #e5e5e5 }
.article-desc.effect div { line-height: 1.733333333 }
/* imageblock */
.article-desc.effect .imageblock { width: 100%; display: block; height: auto }
.article-desc.effect .imageblock img[src*="/extension/"] { width: auto }
.article-desc.effect .imageblock img { width: 100% }
.article-desc.effect.image-shape-round .imageblock img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.article-desc.effect.image-shape-round table .imageblock img {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.article-desc.effect .imageblock .cap1, .article-desc.effect .pcap1, .article-desc.effect .responsive-container + p.cap1 { display: block; padding: 10px 10px 0; max-width: 100%; margin: 0 auto 20px; opacity: 0.8; font-size: 0.857em; font-weight: 400; line-height: 1.3 }
.article-desc.effect .pcap1 { margin-top: -40px; margin-bottom: 30px }
.article-desc.effect.caption-align-left .imageblock .cap1, .article-desc.effect.caption-align-left .pcap1, .article-desc.effect.caption-align-left .responsive-container + p.cap1, .article-desc.effect.caption-align-left .imageblock .exif-info { text-align: left }
.article-desc.effect.caption-align-center .imageblock .cap1, .article-desc.effect.caption-align-center .pcap1, .article-desc.effect.caption-align-center .responsive-container + p.cap1, .article-desc.effect.caption-align-center .imageblock .exif-info { text-align: center }
.article-desc.effect.caption-align-right .imageblock .cap1, .article-desc.effect.caption-align-right .pcap1, .article-desc.effect.caption-align-right .responsive-container + p.cap1, .article-desc.effect.caption-align-right .imageblock .exif-info { text-align: right }
.article-desc.effect p.float-left-imageblock { margin-top: 5px; margin-bottom: 0 }
.article-desc.effect p.float-right-imageblock { margin-top: 5px; margin-bottom: 0 }
/* exifinfo */
.article-desc.effect .imageblock .ExifInfo { display: none }
.article-desc.effect .imageblock .exif-info { padding: 10px 5px 0; margin: 0 auto 20px }
.article-desc.effect .imageblock .exif-info .camera { margin: 0 auto 10px; font-size: 0.929em; font-weight: 400 }
.article-desc.effect .imageblock .exif-info .meta { font-size: 0.857em; font-weight: 400; line-height: 1.3 }
.article-desc.effect .imageblock .exif-info .bar { padding: 0 3px; margin: 0 auto; font-size: 0.857em; font-weight: 400 }
/* 더보기 */
/*.moreless_fold, .moreless_top, .moreless_bottom { color: #181F1C; font-weight: 400 }*/
.moreless_fold span:after { display: inline-block; content: url(data:image/svg+xml,%3Csvg%20class%3D%22svg-icon%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20fill%3D%22%231ccacd%22%20d%3D%22M11.611%2C10.049l-4.76-4.873c-0.303-0.31-0.297-0.804%2C0.012-1.105c0.309-0.304%2C0.803-0.293%2C1.105%2C0.012l5.306%2C5.433c0.304%2C0.31%2C0.296%2C0.805-0.012%2C1.105L7.83%2C15.928c-0.152%2C0.148-0.35%2C0.223-0.547%2C0.223c-0.203%2C0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803%2C0.012-1.104L11.611%2C10.049z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); -webkit-transform: rotate(90deg); transform: rotate(90deg); top: 3px; position: relative }
.moreless_top span:after, .moreless_bottom span:after { display: inline-block; content: url(data:image/svg+xml,%3Csvg%20class%3D%22svg-icon%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20fill%3D%22%231ccacd%22%20d%3D%22M11.611%2C10.049l-4.76-4.873c-0.303-0.31-0.297-0.804%2C0.012-1.105c0.309-0.304%2C0.803-0.293%2C1.105%2C0.012l5.306%2C5.433c0.304%2C0.31%2C0.296%2C0.805-0.012%2C1.105L7.83%2C15.928c-0.152%2C0.148-0.35%2C0.223-0.547%2C0.223c-0.203%2C0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803%2C0.012-1.104L11.611%2C10.049z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); top: 3px; position: relative }
.moreless_content { margin-bottom: 30px }
/* 그리드 */
.article-desc.grid-image .grid { margin-bottom: 30px }
.article-desc.grid-image .grid .imageblock { width: 100% !important }
.article-desc.grid-image .grid-item, .article-desc .grid-item--col2, .article-desc .grid-item--col3 { margin: 0 0 1% !important; overflow:hidden }
.article-desc.grid-image .grid-item, .article-desc .grid-sizer { width: 15.83% }
.article-desc.grid-image .grid-item--col2 { width: 49.5% }
.article-desc.grid-image .grid-item--col3 { width: 32.66% }
.article-desc.grid-image .gutter-sizer { width: 1% }
.article-desc.grid-image .grid .cap1, .article-desc.grid-image .grid .exif-info { margin-bottom: 0 }
/* 강제 확대 */
.article-desc.force-enlargement-image .imageblock { width: 100% !important }
/* tistory table */
.article-desc.effect .txc-table { margin-bottom: 30px; /*width: 100% !important*/ }
/* tistory 각주 */
.article-desc.effect div.footnotes { padding: 15px; background: #f8f8f8 }
.article-desc.effect ol.footnotes li { list-style-type: none; counter-increment: list; position: relative }
.article-desc.effect ol.footnotes li:before { content: counter(list) "."; position: absolute; left: -2.5em; width: 2em; text-align: right; color: #f9650d }

/**

 */ /*  
/* 인용구 닫기 따옴표 추가 */
#tt-body-page blockquote[data-ke-style='style1']::after {
  content: '';
  display: block;
  background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0;
  padding-top: 34px;
  transform: rotate(180deg);
}

 /* 인용1 */
.article_view blockquote {
    border-left: 4px solid #d0d0d0;
    padding: 0px 0 3px 12px;
    font-size: inherit;
    margin:0;
}


/* 인용2 */
.article_view blockquote[data-ke-style="style3"]::before {
    content: '';
    width: 90%;
    height: 10px;
    background-color: #fff;
    display: block;
    position: relative;
    top: -25px;
    margin: 0 auto;
}

.article_view blockquote[data-ke-style="style3"] {
    position: relative;
    border: 10px solid #ddd !important;
    padding: 15px 30px !important;
    background-color: #fff !important;
    margin: 0;
    font-size: inherit;
}

.article_view blockquote[data-ke-style="style3"]::after {
    content: '';
    width: 90%;
    height: 10px;
    background-color: #fff;
    display: block;
    position: relative;
    bottom: -25px;
    margin: 0 auto;
}

/**
14. Gallery
-------------------------------------------------------------------*/
/* 인덱스 페이지 갤러리 */
.index-gallery-wrapper { display: none; text-align: center; padding: 70px 0 }
.index-gallery-wrapper.active { display: block }
#index-gallery .owl-item .vtable-wrapper { padding: 20px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100% }
#index-gallery .owl-item .vtable { display: table; position: relative; margin: auto; width: 100%; height: 100%; border: 2px solid #fefefe }
#index-gallery .owl-item .vtable-cell { position: relative; z-index: 1; height: 100%; padding: 10px }
#index-gallery .owl-item .vtable-cell hr { width: 5%; border: 1px solid #fefefe; margin: 0 auto 20px }
#index-gallery h2 { font-weight: 700; font-size: 0.857em; color: #fefefe; line-height: 1.250rem; -webkit-text-shadow: 0px 0px 10px rgba(0,0,0,0.7); text-shadow: 0px 0px 10px rgba(0,0,0,0.7) }
#index-gallery .context { font-weight: 700; font-size: 1.143em; color: #fefefe; line-height: 1.250rem; max-height: 6.250rem; overflow: hidden; -webkit-text-shadow: 0px 0px 10px rgba(0,0,0,0.7); text-shadow: 0px 0px 10px rgba(0,0,0,0.7) }
/*#index-gallery .owl-item a:before { content: ""; display: block; opacity: 0; background: rgba(255,255,255,0.9); position: absolute; width: 100%; height: 100%; z-index: 1 }*/
/*#index-gallery .owl-item a:hover:before { opacity: 1 }*/
/*#index-gallery .owl-item a:hover .vtable { display: table }*/
#index-gallery.owl-theme .owl-controls { margin-top: 0 }

/* 퍼머링크 페이지 이미지 맵 */
.imap-wrapper { display: none; text-align: center; width: auto }
.imap-wrapper.active { display: block }
.imap-wrapper h4.title.toggle { margin-bottom: 0 }
.imap-wrapper h4.title span { cursor: pointer; margin-left: 6px }
.imap-wrapper h4.title .svg-icon path { fill: #1ccacd }
#imap { display: none }
#imap.active { display: block }
#imap p { font-size: 0.857em; width: 100%; color: #212121; padding: 10px 10px 0 25px; line-height: 1.286em; overflow: hidden; margin: 0; text-align: justify; position: relative }
#imap p:before { content: "\201C"; position: absolute; top: 20px; left: 0; font-size: 40px; color: salmon }

/* 퍼머링크 페이지 이미지 맵: 효과 */
.imap-icon, .imap-anchor-icon { display: none; cursor: pointer; background: #fefefe; padding: 4px; position: absolute; top: 15px; right: 15px }
.imap-anchor-icon { -webkit-transform: rotate(-90deg); transform: rotate(-90deg) }
.article-desc.effect span[id^="imap"]:hover .imap-icon { display: block }
.owl-item:hover .imap-anchor-icon { display: block }

/* 이전다음 컨트롤 */
.owl-theme .owl-controls .owl-nav .owl-prev, .owl-theme .owl-controls .owl-nav .owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) }
.owl-theme .owl-controls .owl-nav .owl-prev { left: 0 }
.owl-theme .owl-controls .owl-nav .owl-next { right: 0 }

/**
15. Description
-------------------------------------------------------------------*/
.author-desc { display: none }
.author-desc.active { display: block }
.author-desc .avatar { vertical-align: top; padding-right: 20px }
.author-desc img { border-radius: 50% }
.author-desc h4 { margin-bottom: 20px }
.author-desc p { margin-bottom: 0 }
.author-desc hr { width: 18px; border: 1px solid #e6e6e6; margin: 0 auto 20px }
.author-desc ul { margin-top: 8px }
.author-desc li { display: inline-block; margin-left: 20px }
.author-desc li:first-child { margin-left: 0 }
.author-desc li a { font-weight: 700 }

/**
16. Footer
-------------------------------------------------------------------*/
.footer-wrapper {}
#footer { margin: 70px auto; font-size: 0.997em; text-align: center }
#footer a { color: inherit }
#footer li { display: inline-block; margin-left: 10px; margin-right: 10px; line-height: 1.2 }
#footer .maker { display:none; opacity: 0.6 }
#footer .maker.active { display: inline-block }
#footer li svg:first-child { margin-left: 0 }
#footer .svg-icon { width: 20px; height: 20px; margin-left: 10px }
#footer .svg-icon path { fill: #BFC0C0 }
#footer .logo { display: none }
#footer .logo .svg-icon { width: 64px; height: 64px; margin-left: 0 }
#footer .social { display: none; margin-top: 30px }
#footer .social.active { display: block }
#footer .credits { margin: 30px 0 0 }
#footer .credits li { margin-bottom: 10px }


/**
마이갤러리
-------------------------------------------------------------------*/
.mybox {
    clear: both;
    font: 4.3rem 'Eagle Lake', cursive;
    margin: 10px;    
    text-shadow: 0 1px 1px #26262649;
}

.mybox_m {
    clear: both;
    font: 1.2rem 'Eagle Lake', cursive;
    height: 30px;
    margin: 10px;
    text-shadow: 0 1px 1px #26262649;
}

.adbox {
    clear: both;
    margin: 10px;    
    max-width: 60rem;
}



/**
17. Responsive
-------------------------------------------------------------------*/
/* Responsive: 기본 */
@media (max-width: 800px) {
/* document setup */

body { font-size: 14px; background: #FEFEFF }

/* structure */
#wrapper { padding: 10px 0 0 }
#function { right: 20px }

/* basic */
.row { padding: 0 20px }
.mobile-hidden { display: none !important }
.holder { margin: 20px auto }
.post-cover h1 {
    clear: both;
    font: 2.2em 'Eagle Lake', cursive;
    padding: 20px;
    margin-bottom: 20px;
    text-shadow: 0 1px 1px #26262649;
}

/* header */
.header-wrapper { height: 50px; min-height: 50px }
#header, #header .mini-gnb { height: 50px }
#header .nav, #header .mini-gnb { width: 63px }
#header li, .header-wrapper.sticky #header.thumb .gnb .category_list > li > a { line-height: 50px }
#header .home { display: none }
#header .blogtitle { display: block; height: 50px; line-height: 50px; width: calc(100% - 166px); text-align: center; position: absolute; top: 0; left: 83px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#header h1 { font-size: 1em; text-overflow: ellipsis; white-space: nowrap; overflow: hidden }
#header .svg-icon { width: 20px; height: 20px }
#toggle-menu { display: block }

/* 공지사항 슬라이더 */
.notice-slider-wrapper { margin: 0 auto 25px }
#notice-slider div { text-align: center }

/* pagetitle */
.pagetitle-wrapper.background { padding: 50px 0 }

/* comment */
.comment-meta img, .comment-author .svg-icon { width: 32px; height: 32px }
.comment-meta, .comment-content { margin-left: 40px }

/* comment timeline */
.comment-list .comment > ul > li.timeline:before, .comment-list .comment > ul > li.timeline:after { left: 15px }
.comment-list .comment > ul > li.timeline:after { top: 34px; bottom: 0 }

/* 페이징 */
#navigation .item-paging-num, #navigation .item-paging-interword { display: none !important }
}
@media only screen and (min-width: 801px) {
.noscroll { overflow: auto }
#mobile-gnb.active { display: none !important }
}
/* 페이지 타이틀 */
@media only screen and (max-width: 425px) {
  #pagetitle h1 { font-size: 1.429em }
  .pagetitle-wrapper.background #pagetitle { min-height: 164px }
}

/* Responsive: 카테고리의 다른 글 */
@media only screen and (max-width: 600px) {
.article-related li { width: 49.2%; margin-bottom: 25px }
.article-related li:nth-child(2n+1) { margin-left: 0; clear: both }
}

/* Responsive: 두 번째 사이드바 */
@media only screen and (max-width: 425px) {
.sidebar-second-wrapper { padding-bottom: 30px }
#sidebar-second .widget { width: 100%; margin-left: 0; margin-bottom: 40px }
}
@media only screen and (min-width: 426px) and (max-width: 768px) {
.sidebar-second-wrapper { padding: 70px 35px 30px }
#sidebar-second .widget { width: 47.5%; margin-bottom: 40px }
#sidebar-second .widget:nth-child(2n+1) { margin-left: 0; clear: both }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
#sidebar-second .widget { width: 30% }
#sidebar-second .widget:nth-child(3n+1) { margin-left: 0; clear: both }
}
@media only screen and (min-width: 1025px) {
#sidebar-second .widget { width: 21.25% }
#sidebar-second .widget:nth-child(4n+1) { margin-left: 0; clear: both }
}
/* Responsive: 태그 및 소셜 플러그인 */
@media only screen and (max-width: 425px) {
.article-tag, .share-bar-group { width: 100%; float: none !important }
.article-tag { margin-bottom: 30px }
.share-bar-group ul { text-align: center }
.share-bar-group.small li.sbg { width: 32px !important; height: 32px !important; border-radius: 50% }
}
/* Responsive: 검색 페이지 */
@media only screen and (max-width: 425px) {
.search-thumbs-wrap .grid-item, .search-thumbs-wrap .grid-sizer {width:47.5% }
.search-thumbs-wrap .grid-item { margin-bottom: 5%; border: 1px solid #eee }
.search-thumbs-wrap .grid-item.text-on-box { border: none }
.search-thumbs-wrap .gutter-sizer { width: 5% }

.search-thumbs-wrap .grid-item .item-content-header, .search-thumbs-wrap .grid-item .item-content-caption { padding: 8px 10px !important }
.search-thumbs-wrap .grid-item .item-content-header h2, .search-thumbs-wrap .grid-item .item-content-caption h2 { margin-top: 0; font-size: 0.929em !important; line-height: 1.250em; max-height: none }
.search-thumbs-wrap .grid-item.front-image .item-content-caption h2, .search-thumbs-wrap .grid-item.front-text .item-content-caption h2 { max-height: 3.750em }
.search-thumbs-wrap .grid-item .item-content-caption .text { display: none }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption { min-height: 64px; max-height: 64px }
.search-thumbs-wrap .grid-item.image-and-text .item-content-caption h2 { max-height: 48px; overflow: hidden }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption-wrapper { padding: 0 }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption  { min-height: 64px; max-height: 64px }
.search-thumbs-wrap .grid-item.text-on-box .item-content-caption h2 { max-height: 48px; overflow: hidden }
.search-thumbs-wrap .grid-item .item-content-caption .context { display: none !important }

/* tile */
.search-thumbs-wrap.tile .grid-item, .search-thumbs-wrap.tile .grid-sizer {width: 100%; border:1px solid gray }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-quadruple-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-three-two { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-two-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item.only-text .item-content-image-wrap { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-caption h2 { max-height: none }
}
@media only screen and (min-width: 425px) and (max-width: 768px) {
.search-thumbs-wrap .grid-item, .search-thumbs-wrap .grid-sizer { width: 47.5% }
.search-thumbs-wrap .grid-item { margin-bottom: 5% }
.search-thumbs-wrap .gutter-sizer { width: 5% }

/* tile */
.search-thumbs-wrap.tile .grid-item, .search-thumbs-wrap.tile .grid-sizer { width: 49.75%; padding-bottom: 0; border-bottom: none }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-quadruple-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-three-two { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-two-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item.only-text .item-content-image-wrap { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-caption h2 { font-size: 1.243em }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
.search-thumbs-wrap .grid-item, .search-thumbs-wrap .grid-sizer { width: 30% }
.search-thumbs-wrap .grid-item { margin-bottom: 5% }
.search-thumbs-wrap .gutter-sizer { width: 5% }

.search-thumbs-wrap .grid-item .item-content-caption h2 { font-size: 1.000em }
/* tile */
.search-thumbs-wrap.tile .grid-item, .search-thumbs-wrap.tile .grid-sizer { width: 33% }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-quadruple-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-three-two { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-image-wrap.mixed-two-one { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item.only-text .item-content-image-wrap { padding-top: 100% !important }
.search-thumbs-wrap.tile .grid-item .item-content-caption h2 { font-size: 1.143em }
}
@media only screen and (min-width: 1025px) {
.search-thumbs-wrap .grid-item, .search-thumbs-wrap .grid-sizer { width: 28.33% }
.search-thumbs-wrap .grid-item { margin-bottom: 7.5% }
.search-thumbs-wrap .gutter-sizer { width: 7.5% }
/* expand */
.search-thumbs-wrap.expand .grid-item, .search-thumbs-wrap.expand .grid-sizer { width: 22.75% }
.search-thumbs-wrap.expand .grid-item { margin-bottom: 3% }
.search-thumbs-wrap.expand .gutter-sizer { width: 3% }
/* tile */
.search-thumbs-wrap.tile .grid-item, .search-thumbs-wrap.tile .grid-sizer { width: 16.25% }
.search-thumbs-wrap.tile .grid-item--width-one { width: 16.25% }
.search-thumbs-wrap.tile .grid-item--width-double { width: 33% }
.search-thumbs-wrap.tile .grid-item--width-triple { width: 49.75% }
.search-thumbs-wrap.tile .grid-item--width-quadruple { width: 66.5% }
}
/* Responsive: 이전다음글 */
@media only screen and (max-width: 425px) {
.article-prev-next li { width: 100% }
.article-prev-next li.article-next-ajax.active { margin-top: 1% }
.article-prev-next .title { display: none }
}
/* Responsive: 썸네일 목록 */
@media only screen and (max-width: 800px) {
#header.thumb .gnb .sub_category_list .category-item { display: none }
}
@media only screen and (min-width: 801px) and (max-width: 1024px) {
/* 카테고리 썸네일 목록 개수 설정에 따른 너비 조정 */
#header.thumb .gnb .sub_category_list.tt-index > li > a { width: 18.72% }
#header.thumb .gnb .sub_category_list.tt-page > li > a { width: 23.8% }
/* index: expand 5 items, default 4 items */
#header.thumb .gnb .sub_category_list.expand.tt-index .category-item { width: 18.72% }
#header.thumb .gnb .sub_category_list.default.tt-index .category-item { width: 23.8% }
#header.thumb .gnb .sub_category_list.default.tt-index > li .category-wrapper { width: calc(100% - 20.32% - 50px); margin-left: calc(20.32% + 50px) }
#header.thumb .gnb .sub_category_list.expand.tt-index .category-item:nth-child(n+6) { display: none }
#header.thumb .gnb .sub_category_list.default.tt-index .category-item:nth-child(n+5) { display: none }
/* page: expand 4 items, default 3 items */
#header.thumb .gnb .sub_category_list.expand.tt-page .category-item { width: 23.8% }
#header.thumb .gnb .sub_category_list.default.tt-page .category-item { width: 32.26% }
#header.thumb .gnb .sub_category_list.default.tt-page > li .category-wrapper { width: calc(100% - 25.4% - 50px); margin-left: calc(25.4% + 50px) }
#header.thumb .gnb .sub_category_list.expand.tt-page .category-item:nth-child(n+5) { display: none }
#header.thumb .gnb .sub_category_list.default.tt-page .category-item:nth-child(n+4) { display: none }
}