@charset "utf-8";
@font-face {
    font-family: 'Noto Sans';
    src: url(http://i1.daumcdn.net/cfs.tistory/static/font/notokr-regular.woff2) format('woff2'),
    url(http://i1.daumcdn.net/cfs.tistory/static/font/notokr-regular.woff) format('woff');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'Noto Sans';
    src: url(http://i1.daumcdn.net/cfs.tistory/static/font/notokr-bold.woff2) format('woff2'),
    url(http://i1.daumcdn.net/cfs.tistory/static/font/notokr-bold.woff) format('woff');
    font-style: normal;
    font-weight: bold;
}

/* reset */
body,button,input,select,textarea{color:#000;letter-spacing:0}
button,caption,input,table,tbody,td,tfoot,th,thead,tr{margin:0;padding:0}
a,abbr,acronym,address,applet,article,aside,b,big,blockquote,body,button,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,input,ins,kbd,label,legend,li,menu,nav,object,ol,p,q,s,samp,section,small,span,strike,strong,sub,sup,tt,u,ul,var{margin:0;padding:0;border:0}
article,aside,details,dialog,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}

input[type=checkbox]{border:0}
input::-webkit-input-placeholder{opacity: .8; font-size: .75rem;}
input:-moz-placeholder{opacity: .8;font-size: .75rem;}
input::-moz-placeholder{opacity: .8;font-size: .75rem;}
input:-ms-input-placeholder{opacity: .8;font-size: .75rem;}

textarea::-webkit-input-placeholder{opacity: .8; font-size: .75rem;}
textarea:-moz-placeholder{opacity: .8;font-size: .75rem;}
textarea::-moz-placeholder{opacity: .8;font-size: .75rem;}
textarea:-ms-input-placeholder{opacity: .8;font-size: .75rem;}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 반응형 레이아웃 */
@-ms-viewport {width: device-width;}
@-webkit-viewport {width: device-width;}
@-moz-viewport {width: device-width;}
@-ms-viewport {width: device-width;}
@-o-viewport {width: device-width;}
@viewport {width: device-width;}

/* common */
html {font-size: 16px;}
body {color: #333;margin: 0px;font: .875rem/1.6 'Noto Sans', 'Malgun Gothic', 'Dotum', 'AppleGothic', 'Sans-serif';background: #fff;}
input, textarea, select {font: .9rem/180% 'Noto Sans', 'Malgun Gothic', 'Dotum', 'AppleGothic', 'Sans-serif';}
a:link {color: #333;text-decoration: none;}
a:visited {text-decoration: none;color: #333;}
a:hover { color: #e64c4c ;text-decoration: none; ; }
a:active { color: #e64c4c; text-decoration: none; }
input:focus, textarea:focus {/* border: none; */outline: none;}

hr { display: none; }
img { border: 0; }
h1, h2, h3, h4 {margin: 0;padding: 0;font-family: 'Noto Sans', 'Malgun Gothic', 'Dotum', 'AppleGothic', 'Sans-serif';}
h1 { }
h2 { font-size: 1.5rem;}
h3 { font-size: 1.25rem; }
h4 { font-size: 1em; }
input {border: 1px solid #ccc;}
textarea {border: 1px solid #cccccc;}

/* default */
.clear { clear: both; }
.hide, .hidden { display: none;}
.tistorytoolbar { display: none;}
.container {width: 100%;max-width: 960px;min-width: 360px;position: relative;margin: 0 auto;height:  100%;padding: 20px;}

/* pagging */
#paging {padding: 40px 20px;text-align: center;font-size: .8125rem;clear: both;}
#paging .selected {font-weight: bold;color: #fff;background-color:#e64c4c;min-width: 24px;}
#paging .no-more-prev, #paging .no-more-next  { opacity: .5; }
#paging .numbox {
    margin: 0 10px;
}
#paging .num span {display: inline-block;padding: 2px 8px;}
.backdrop {position: fixed;top: 0;right: 0;bottom:0;left: 0;background-color: rgba(0,0,0, .3);z-index: 8;display: none;}
.backdrop.on { display: block;} 

/* header */
header {background-color: #e64c4c;padding: 10px 0;height: 100px;position: relative;z-index: 9;}
header h1 {position: absolute;left: 85px;top: 15px;color: #fff;line-height: 1;}
header h1 a { display: inline-block; text-indent: -10000px; overflow: hidden; width: 220px; height: 20px; background: url('./images/blog_title.png') no-repeat 50% 50%; }
header a:link, header a:visited  { color: #fff; opacity: .8; }
header a:hover, header a:focus   { color: #fff; opacity: 1; }
header h1 small { display: block; opacity: .6; font-size: 11px; margin: 5px 0 0 5px;}
header .blogImage {position: absolute;left: 10px;top: 5px;border: 1px solid #e64c4c;border-radius: 50%;width: 70px;height: 70px;overflow: hidden;z-index: 1;opacity: .9;box-shadow: 0 0 5px rgba(0,0,0, .3);}
header .blogImage:after {content: '';display: block;position: absolute;left: 2px;top: 2px;border: 2px solid #e64c4c;border-radius: 50%;width: 60px;height: 60px;z-index: 2;opacity: .5;} 
header .blogImage img { width: 100%; height: 100%; }
header:after { content:''; display: block; clear: both; height: 0; visibility: hidden; }

header nav {position: absolute;right: 10px;bottom: 0;}
header nav ul { display: block; margin: 0; padding: 0;}
header nav ul li { list-style: none; margin: 0 4px; padding: 0; display: inline-block;}
header nav ul li a { display: block;}
header nav ul li a i {font-size: 18px;}

header .categoryBox {display: none;position: absolute;right: 0;background-color: #e64c4c;top: 90px;bottom: auto;padding: 10px 20px;z-index: 9;}
header .categoryBox.on { display: block;}
header .categoryBox .tt_category > li > a {display: none;}
header .categoryBox li {display: block; margin: 0}
header .categoryBox li li li {margin: 2px 13px;font-size: 13px;}
header .categoryBox li li li a {font-weight: normal;}


header .searchBox {position: absolute;right: 0;top: 80px;width: 250px;background-color: rgb(230, 76, 76);padding: 15px;display: none;z-index: 9;}
header .searchBox input[type=text], header .searchBox button {background-color: rgba(0,0,0, .15);padding: 2px 8px;border: none;color: #fff;height: 30px;}
header .searchBox input[type=text] {width: calc(100% - 30px);font-size: 13px; border-radius:0;}
header .searchBox input::-webkit-input-placeholder { color:rgba(255,255,255, .5);}
header .searchBox input::-moz-input-placeholder { color:rgba(255,255,255, .5);}
header .searchBox input:-moz-webkit-input-placeholder { color:rgba(255,255,255, .5);}
header .searchBox input:-ms-input-placeholder { color:rgba(255,255,255, .5);}
header .searchBox button {cursor: pointer;padding:  4px;float: right;width: 30px;}
header .searchBox button i { opacity: .3;}
header .searchBox button:hover i { opacity: .9;}
header .searchBox.on { display: block} 

#tt-body-index header {text-align: center;height: 300px;}
#tt-body-index header h1 {position: static; margin-top: 20px; }
#tt-body-index header h1 small {}
#tt-body-index header .blogImage {position: relative;display: inline-block;margin: 20px;left: auto;top: auto;}
#tt-body-index header .blogMenu {position: static; }
#tt-body-index header .categoryBox {position: static;}
#tt-body-index header .category_list:after { content: ''; clear: both; display: block; height:0; visibility: hidden;}
#tt-body-index header .category_list > li {float: left !important;text-align: left;margin: 10px 0 0 10px;width: 210px;}

#tt-body-index header .searchBox {position: static;}
#tt-body-index header .searchBox.on {display: inline-block;} 

/* list_content */
article h2 { text-align: center; }
.list_content {width: 100%;margin: 30px 2% 0 0;padding-left: 25%;position: relative;overflow: hidden;}
.list_content h3 { margin-top: -3px}
.list_content:before {content: '\e07f';display: block;position: absolute;top: 0;left: 0;z-index: 0;color: #ffffff;background-color: #e8e8e8;border: 1px solid #e4e4e4;box-sizing: border-box;width: 22.5%;height: 100%;text-align:center;line-height: 130px;font-family: 'simple-line-icons';font-size: 3rem;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;}
.list_content .thumbnail{float:left;width: 22.5%;height: 100%;position: absolute;left: 0;}
.list_content .thumbnail a { display: block; height: 100%;}
.list_content .thumbnail img {width: 100%;height: 100%; object-fit: cover;}
.list_content p a {
 display: block;
 font-size: 13px;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3; /* 라인수 */
 -webkit-box-orient: vertical;
 word-wrap:break-word;
 line-height: 1.5em;
 height: 4.5em;
 margin: 10px 0;
 }
.list_content .category, .list_content time {display: block;font-size: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.list_content .category i, .list_content time i {color: #e64c4c;}
.list_content .category a {color: #e64c4c;}
.list_content .category a:hover { text-decoration: underline;}

#tt-body-index .list_content {float: left;width: 22.75%;margin: 30px 3% 0 0;padding-top: 160px;padding-left: 0; position: relative;}
#tt-body-index .list_content:before {width: 100%; height: 150px; line-height: 150px;}       
#tt-body-index .list_content:nth-child(4n) { margin-right:0;}
#tt-body-index .list_content:nth-child(4n+1) { clear: left;}
#tt-body-index .list_content h3 {font-size: 1rem;letter-spacing: -1px;font-weight: bold;}
#tt-body-index .list_content .thumbnail {display: block;position: absolute;width: 100%;top: 0;left: 0;overflow: hidden;height: 150px;z-index: 1;}

#tt-body-page .list_content { display: none;}

/* related */
.area_related {float: left;width: 100%;margin: 0;}
.area_related h3 {font-size: .95rem;font-weight: bold;position: relative;border-bottom: 1px solid #ccc;line-height: 2;float: left;width: 100%;}
.area_related h3 small {margin-top: 4px;float: right;font-size: 12px;opacity: .7;}
.list_related li {float: left;width: 22.75%;margin: 20px 3% 10px 0;list-style: none;text-align: center;}
.list_related li:last-child { margin-right: 0; }
.list_related li.text_type {padding-top: 155px;position: relative;}
.list_related li.text_type:before {content: '\e07f';display: block;position: absolute;top: 0;left: 0;z-index: 0;color: #ffffff;background-color: #f0f0f0;border: 1px solid #e4e4e4;width: 100%;height: 150px;text-align:center;line-height: 150px;font-family: 'simple-line-icons';font-size: 3rem;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;box-sizing: border-box;}
.list_related li a { display: block; }
.list_related .thumbnail {display: block;width: 100%;height: 280px;overflow: hidden;margin-bottom: 5px;}
.list_related .thumbnail img { width: 100%;height: 100%;
    object-fit: cover;
}
.list_related .date {font-size: 12px; opacity: .7;}


/* main */
main .nonEntry h2 {line-height: 2;text-align: center;border-bottom: 1px solid #ccc;letter-spacing: -1px;}
main .nonEntry h2 em { font-style: normal;}
main .nonEntry h2 small { color: #e64c4c; margin-left: 8px;} 
main article {padding: 30px 0;}
main article h2 {line-height: 1.3;text-align: left;border: none;}
main article .titleWrap {border-bottom: 1px solid #c6c6c6;/* width:100%; *//* float: left; */margin-bottom: 4px;}
main article .titleWrap i {color: #e64c4c;}
main article .titleWrap .category, main article .titleWrap .category a {color: #e64c4c;font-weight: bold;}
main article .titleWrap .date, main article .titleWrap .category  {font-size: .75rem;opacity: .9;vertical-align: middle;}
main article .titleWrap .date {float: left;display: inline-block;margin-top: 8px;}
main article ul {float: right;margin-left: 4px;}
main article ul li {list-style: none;display: inline-block;line-height: 28px;}
main article ul li a {display: inline-block;min-width: 28px;height: 28px;background-color: rgb(230, 230, 230);border-radius: 3px;text-align: center;line-height: 30px; padding: 0 8px}
main article ul li a:hover {background-color: #d9d9d9;}
main article .titleWrap:after {content: ''; display: block; clear: both; height: 4px; visibility: hidden;}
main article .article { clear: both; padding-top: 30px;}

main .tags {margin-bottom: 20px;padding-left: 50px;position: relative;}
main .tags h3 {color: #e64c4c;font-size: .8125rem;font-weight: bold;line-height: 1.4;position: absolute;top: 3px;left: 0;}
main .tags a:before { content: '#';}

/* comment */
#comment {clear: both;}
#comment h3 {font-size: .95rem;border-bottom: 1px solid #ccc;font-weight: bold;line-height: 2;}
#comment li {clear:both;list-style: none;padding: 10px 10px 10px 70px;position: relative;border-bottom: 1px solid #e3e3e3;}
#comment li li { border-bottom: none;margin: 0 -10px; background-color: rgba(0,0,0, .1);}
#comment .profile-img {position: absolute;left: 10px;top: 10px;width: 50px;height: 50px;border: 4px solid #d5d5d5;border-radius: 50%;overflow:hidden;margin-right: 10px;}
#comment .profile-img img { width:100%; height: 100%;}
#comment .name { font-weight: bold;}
#comment time {font-size: 12px;opacity: .9;}
#comment .control {position: absolute;right: 10px;top: 10px;font-size: 12px;}
#comment .control a { margin: 0; display: inline-block; background-color: rgba(0,0,0, .1); padding: 2px 6px 1px; border-radius: 2px; }
#comment li li .control a { background-color: white;}
#comment p {display: block;padding-bottom: 10px;}
#comment .commentList { margin-bottom: 30px;}
#comment .commentWrite { margin-bottom: 30px;}
#comment .commentWrite h3 {border: none;}
#comment .commentWrite ul {
    padding: 10px;
    background-color: rgba(0,0,0, .1);
    display: block;
    margin-bottom: 8px;
    }
#comment .commentWrite li {padding: 0;border: none;float: left;clear: none;margin-bottom: 8px;width: calc(50% - 4px);margin-right: 8px;}
#comment .commentWrite li.pw { margin-right:0;}
#comment .commentWrite li input[type=text], #comment .commentWrite li input[type=password]  {width: 100%;padding: 0 4px; height: 1.8rem;}
#comment .commentWrite .txtWrite, #comment .commentWrite .url,#comment .commentWrite .btnWrite {display: block;width: 100%;float: none;clear: both;}
#comment .commentWrite textarea {width: 100%;padding: 4px;}
#comment .commentWrite .btnWrite { text-align: right; font-size: 12px; font-weight: bold; display:block; }
#comment .commentWrite .btnWrite input[type=checkbox] { visibility: hidden; width: 0; height: 0; }
#comment .commentWrite .btnWrite label { cursor: pointer; margin-right: 10px; color:#888; }
#comment .commentWrite .btnWrite label i {font-size: 18px;vertical-align: text-top;}
#comment .commentWrite .btnWrite input[type=checkbox]:checked + label { color: #e64c4c } 
#comment .commentWrite .btnWrite button {padding: 10px 20px;font-size: 12px;cursor: pointer;background-color: #e64c4c;color: #fff;text-transform: uppercase;font-weight: bold;}

/* guest */
#guestbook li {clear:both;list-style: none;padding: 10px; position: relative;border-bottom: 1px solid #e3e3e3;}
#guestbook li li {border-bottom: none;margin: 0 -10px 0 20px;background-color: rgba(0,0,0, .1);}
#guestbook .profile-img {position: absolute;left: 10px;top: 10px;width: 50px;height: 50px;border: 4px solid #d5d5d5;border-radius: 50%;overflow:hidden;margin-right: 10px;}
#guestbook .profile-img img { width:100%; height: 100%;}
#guestbook .name { font-weight: bold;}
#guestbook time {font-size: 12px;opacity: .9;}
#guestbook .control {position: absolute;right: 10px;top: 10px;font-size: 12px;}
#guestbook .control a { margin: 0; display: inline-block; background-color: rgba(0,0,0, .1); padding: 2px 6px 1px; border-radius: 2px; }
#guestbook li li .control a { background-color: white;}
#guestbook p {display: block;padding-bottom: 10px;}
#guestbook .guestList { margin-bottom: 30px;}
#guestbook .guestWrite {padding: 30px 0;border-bottom: 1px solid #ccc;}
#guestbook .guestWrite ul {
    padding: 10px;
    background-color: rgba(0,0,0, .1);
    display: block;
    margin-bottom: 8px;
    }
#guestbook .guestWrite li {padding: 0;border: none;float: left;clear: none;margin-bottom: 4px;width: calc(50% - 2px); margin-right: 4px;}
#guestbook .guestWrite li.pw { margin-right:0;}
#guestbook .guestWrite li input[type=text], #guestbook .guestWrite li input[type=password]  { width: 100%; padding: 0 4px; height: 1.8rem;}
#guestbook .guestWrite .txtWrite, #guestbook .guestWrite .url, #guestbook .guestWrite .btnWrite {display: block;width: 100%;float: none; clear:both;}
#guestbook .guestWrite textarea {width: 100%;padding: 4px;}
#guestbook .guestWrite .btnWrite { text-align: right; font-size: 12px; font-weight: bold; display:block; }
#guestbook .guestWrite .btnWrite input[type=checkbox] { visibility: hidden; width: 0; height: 0; }
#guestbook .guestWrite .btnWrite label { cursor: pointer; margin-right: 10px; color:#888; }
#guestbook .guestWrite .btnWrite label i {font-size: 18px;vertical-align: text-top;}
#guestbook .guestWrite .btnWrite input[type=checkbox]:checked + label { color: #e64c4c } 
#guestbook .guestWrite .btnWrite button {padding: 10px 20px;font-size: 12px;cursor: pointer;background-color: #e64c4c;color: #fff;text-transform: uppercase;font-weight: bold;}

/* sidebar */
main aside {background-color: #616161;float: left;width: 100%;color: #b4b4b4;padding-bottom: 20px;font-size: .75rem;line-height: 1.8;}
main aside section {width: 22.75%;float:left;margin-right: 3%;padding: 10px 0;}
main aside section#tagbox, main aside section#counter  { margin-right:0;}
main aside ul {margin: 0;list-style: none;}
main aside li {list-style: none;}
main aside li a:link, main aside li a:visited {color: rgba(255,255,255, .6);display: block;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; /* 라인수 */-webkit-box-orient: vertical;word-wrap:break-word;}
main aside li a:hover { color: inherit; text-decoration: none;}
main aside h3 {margin-bottom: 5px;font: bold 14px "Open Sans", sans-serif;position: relative;}
main aside h3:after {
    display: block;
    content: '';
    width: 20px;
    height: 1px;
    overflow: hidden;
    background-color: #ea6767;
    margin: 4px 0;
    }
main aside .cnt {font-size: 0.85em;color: #ea6767;}
main aside .date {font-size: 11px;margin-right: 8px;}
main aside .name {font-size: 11px;}
main aside i { opacity: .7}

#profile {}
#profile .inner {text-align: center;background-color: rgba(230, 76, 76, 0.6);color: #fff;padding: 15px;}
#profile h2 { font-size: 16px;  }
#profile h2 small { display: block; font-size: 11px; opacity: .6;}
#profile .blogImage { display:inline-block; width: 70px; height: 70px; overflow: hidden; margin-top: 10px;}
#profile .blogImage img { width: 100%; height: 100%; border-radius: 50%;}
#profile .email { font-size: 11px; opacity: .6; }
#profile ul.sns { padding: 0; margin-top:20px;}
#profile ul.sns li {display: inline-block;line-height: 24px;}
#profile ul.sns li a {display: inline-block;width: 26px;height: 26px;background-color: rgba(0,0,0, .15);border-radius: 50%;/* color: #fff; */font-size: 14px;}
#profile ul.sns li a i { vertical-align: middle;}
ul.count { clear: both; display: block; padding: 0; margin-top:10px;}

#tagbox li { display: inline-block; margin-right: 2px}
#tagbox li a, .tags a {display: inline-block;font-size: 11px;background-color: rgba(166, 166, 166, 0.3);padding: 0 5px;line-height: 1.8;}
.tags { color: #999;}
.tags a {font-size: .8125rem;margin: 2px;}
#notice { display: none;}
#counter ul {padding: 10px 15px;background-color: rgba(255,255,255,.05);font-size: 12px;text-align: right;}
#counter ul li {position: relative;text-align: right;display: inline-block;line-height: 1.2;height: 30px;}
#counter ul li.today {color: #67b7ea;padding-right: 10px;}
#counter ul li.today:after {content:'';display: inline-block;width:1px;height: 26px;background-color: #828282;position: absolute;top: 0;right: 3px;transform: skewX(-20deg);}
#counter ul li.yesterday {display: none;}
#counter h3 { display: none;}
#counter em {text-transform: uppercase;font-style: normal;font-size: 10px;font-weight: bold;display: block;color: #909090;}
#counter ul:after {content:''; display: block; clear: both; height: 0; visibility: hidden;}

/* footer */
footer {clear: both;background-color: #3a3a3a;text-align: center;color: #8e8e8e;font-size: .75rem;}
footer a:link, footer a:visited  {color: #ea6767;opacity: .6;}
footer a:hover { text-decoration: none;opacity: 1; }
footer .toTop {margin-top: 13px;position: fixed;right: 15px;bottom: 15px;z-index: 99;}
footer .toTop a {color: rgba(149, 149, 149, 0.3);font-size: 24px;}

@media (max-width: 768px) {
    header .blogMenu {right:10px}
    header .categoryBox, header .searchBox {right:0}
    .container {padding: 20px !important;}
    main aside section, #tt-body-index .list_content {width: 48%; margin-right:4%;}
    main aside section:nth-child(2n), #tt-body-index .list_content:nth-child(2n)  { margin-right:0;} 
    #tt-body-category #content h2 { font-size: 1.4rem }
    .list_content {margin-top: 20px;padding-left: 26%;}
    .list_content h3 { font-size: 1rem }
    .list_content:before {width: 23%;line-height: 120px;}
    .list_content .thumbnail {width: 23%}
    .list_related .thumbnail {height: 120px;}
    .list_related li.text_type { padding-top: 125px;}
    .list_related li.text_type:before {height: 120px;line-height: 120px;}
}

@media (max-width: 480px) {
    header .categoryBox, header .searchBox {top:55px}
    .container {padding: 15px !important;}
    main aside section {width: 100%; margin-right:0;}
    main aside section#profile { margin-bottom:20px;}
    main  h2 { font-size: 1.2rem }
    .list_content .thumbnail {width: 30%;}
    .list_content {margin-top: 20px;padding-left: 35%;}
    .list_content:before {width: 30%;line-height: 90px;}
    #tt-body-index .list_content {padding-top: 130px;padding-left:0; }
    #tt-body-index .list_content:before {height: 120px; line-height: 120px;}
    #tt-body-index .list_content .thumbnail {height: 120px;}
    #tt-body-index .list_content .category, .list_content time {font-size: 11px;}
    .list_content h3 {font-size: .875rem; white-space: nowrap; overflow:hidden; text-overflow: ellipsis}
    .list_content p a { font-size: .725rem;
     -webkit-line-clamp: 2; /* 라인수 */
     height: 3em;
     }
     main aside, #counter ul  { text-align: center !important;}
     main aside h3 { position: relative; margin-bottom: 10px;}
     main aside h3:after { position: absolute; left: 50%; margin-left: -10px;}
    .list_related li {width: 48%; margin-right: 4%;}
    .list_related li:nth-child(2n) { margin-right:0;}
    .list_related .thumbnail {height: 100px;}
    .list_related li.text_type { padding-top: 105px;}
    .list_related li.text_type:before { height: 100px; line-height: 100px;}
    
    main article h2 { font-size: 1.25rem;}
    header { height: 70px}
    header .blogImage { display: none;}
    header h1 {left: 10px;top: 0;}
}

/* */
.fb-like { text-align: right; overflow: hidden; position: absolute !important; height: 30px; width: 60px; top: 10px; right: 0px; }
.fb-comments { display: block !important; margin-right: auto; margin-left: auto; }
.toTop {   position: fixed;  z-index: 99999;  right: 15px;  bottom: 15px;  height: 30px;  width: 30px;  margin: 0;}
.toTop a { background: url(images/up.png) no-repeat; background-size: 100% 100%; height: 30px; width: 30px; display: inline-block; text-indent: -10000px; }


/* Tedition utility  */
.tistorytoolbar { display: none !important; }
.entry-content img { display: block; max-width: 100%; height: auto; }
div.article iframe { max-width: 100% !important; }
.imageblock {max-width: 100%;text-align: center;}
.imageblock img {width:auto !important; max-width: 640px !important;height: auto;}
#tt-body-page figure.imageblock img {width:auto !important; max-width: 640px !important;height: auto;}

.tt-span-1, .tt-span-2, .tt-span-3, .tt-span-4, .tt-span-5, .tt-span-6, .tt-span-7, .tt-span-8, .tt-span-9, .tt-span-10, .tt-span-11, .tt-span-12 {max-width: 100% !important; overflow: hidden;}
.tt-span-1 { width: 6% !important; }
.tt-span-2 { width: 14% !important; }
.tt-span-3 {width:  calc(25% - 20px) !important;}
.tt-span-4 { width: 31% !important; }
.tt-span-5 { width: 39% !important; }
.tt-span-6 { width: 48% !important; }
.tt-span-7 { width: 53% !important; }
.tt-span-8 { width: 59% !important; }
.tt-span-9 { width: 72% !important; }
.tt-span-10 { width: 80% !important; }
.tt-span-11 { width: 88% !important; }
.tt-span-12 { width: 100% !important; }
#ttCanvas{ width: 100% !important; padding-top: 0 !important; z-index: 0 !important;
    position: relative;  }
#ttCanvas li { padding-bottom: 20px !important }
/* 티에디션 재설정 */
.tt-span-3 {margin: 0 10px !important;}
.tt-span-3-border {width: 100% !important;height: 280px !important;}
.tt-span-4 {margin-right: 3.5% !important; }
.tt-span-4-border {width: 100% !important;}
.tt-wrap-thumb-link {/* height: auto !important; *//* margin-bottom: 0px !important; */border-radius: 10px;}
.tt-wrap-thumb-link img {margin-left: 0 !important;margin-top: 0 !important;width: 100% !important;height: 100% !important;object-fit: cover;}

.tt-span-1-border, .tt-span-2-border, .tt-span-3-border, .tt-span-4-border, .tt-span-5-border, .tt-span-6-border, .tt-span-7-border, .tt-span-8-border, .tt-span-9-border, .tt-span-10-border, .tt-span-11-border, .tt-span-12-border { border: none !important; }
.tt-post-title a {font-weight: bold !important;color: #666 !important;}
.forMobile { display: none; }
@media screen and (max-width: 640px) {
	.forMobile { display: block; margin-top: -20px !important; }
	.forWeb { display: none; }
	.tt-span-12  { overflow: inherit !important }
	.tt-span-6-border {width: 25% !important;margin-right: 3.5% !important;height: 100px !important;border-radius: 5px;}
	.tt-span-6 { width: 70% !important; }
	.tt-span-3 {width: calc(50% - 20px) !important}
	.tt-span-3:nth-child(2) {margin-right: 0 !important; margin-bottom: 20px !important;}
	
	.imageblock img {width:auto !important; max-width: 100% !important;height: auto;}
#tt-body-page figure.imageblock img {width:auto !important; max-width: 100% !important;height: auto;}
}
@media screen and (max-width: 480px) {
.tt-span-6 { width: 68% !important; }
.tt-span-6-border {height: 80px !important;border-radius: 3px;}
}
.tt-post-title {width: 100% !important;float: none !important;font-weight: bold;}
.tt-post-summary a {height: 57px;overflow:hidden;display: block;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;word-wrap: break-word;width: 100%;display: -webkit-box;}
/* for 티에디션 comment count */
.tt-post-etcinfo, .tt-post-etcinfo span, .tt-post-etcinfo span a { opacity: 1.0 !important; filter: alpha(opacity=100) !important;color: #ADADAD !important;}
.tt-post-comment a .cnt { color: #7A8EA5 !important; padding-right: 2px !important; padding-left: 2px !important; letter-spacing: 0px; }

.tt-item-title {display: flex !important;justify-content: center;align-items: center;flex-direction: column;width: 100% !important;text-align: center;}
.tt-item-title a span {
    margin: 0 !important;
    display: inline-block !important;
    width:  100% !important;
    color: #333 !important;
	line-height: 1.2;
	background-color: #eee;
}
/* .tt-item-title:before,  */
.tt-item-title:after {
    content: '';
    display: inline-block;
    border-top: 1px solid #e64c4c;
    width: 20px;
    margin: 10px;
}

/* adsbygoogle */
.adsbygoogle_wt {float: right; margin-bottom: 20px; margin-left: 10px;}
.adsbygoogle_wb {float: none; margin-bottom: 20px; text-align: center; margin-right: auto; margin-left: auto; overflow: hidden; width: 100%;}
.adsbygoogle_mt { float: none; margin-bottom: 20px; margin-top: 10px;display:none;text-align: center; }
.adsbygoogle_mb { float: none; margin: 10px auto 20px; border-top: 1px dotted #eee; text-align: center; display: none; }
@media screen and (max-width: 480px) {
.adsbygoogle_wt, .adsbygoogle_wb { display:none; }
.adsbygoogle_mt, .adsbygoogle_mb{ display: inherit; }
}