@charset "UTF-8";
/*---------------------------------------------------------------------------------
  스킨: Jupiter
  버전: 1.0.7
  제작자: 롤랑존
  홈페이지: http://photobit.tistory.com
  라이선스: GNU General Public License version 2.0
	라이선스 원문: http://www.gnu.org/licenses/gpl-2.0.html
  설명: 다양한 외부 플러그인을 사용할 줄 아는 블로거에 알맞은 스킨입니다.
---------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------
	CSS 초기화
	==========

  제작자: Eric Meyer
  홈페이지: http://meyerweb.com/eric/tools/css/reset/
  라이선스: none (public domain)
---------------------------------------------------------------------------------*/
html,body {margin:0;padding:0}
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,i,iframe,img,input,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;outline:0;border:0;font-weight:400;font-style:normal;font-size:100%;line-height:1;font-family:inherit}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
b,strong{font-weight:700}
em{font-style:italic}
strong em,em strong{font-weight:700;font-style:italic}
table{table-layout:fixed;border-collapse: collapse;border-spacing: 0}
a{outline:none}
input,textarea{vertical-align:middle}
input[type='text'],input[type='password'],input[type='submit'],input[type='search'],html input[type='button'],input[type='reset']{-webkit-appearance:textfield;border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
/*---------------------------------------------------------------------------------
	기본 태그 설정
	==========
---------------------------------------------------------------------------------*/
::-webkit-input-placeholder{color:#60aade}
:-moz-placeholder{color:#60aade;opacity:1}
::-moz-placeholder{color:#60aade;opacity:1}
:-ms-input-placeholder{color:#60aade}
:placeholder-shown {color:#60aade}
html{min-height:100%;height:auto!important;height:100%}
body{box-sizing:border-box;font-family:Montserrat,'Noto Sans KR',sans-serif;border:none;font-size:16px;color:#798291}
body a{color:#60aade;text-decoration:none}
body a:hover{opacity:.7}
input[type=text],input[type=password],textarea{width:100%;max-width:100%;padding:10px;font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:13px;color:#4691f6;border:1px solid #4691f6;background:#e3effe;border-radius:4px;box-sizing:border-box}
img{max-width:100%;height:auto}
p{line-height:1.7}
hr{width:100%;border:0;margin:25px auto;height:25px;text-align:center;color:#fa6462}
hr:after{content:"* * *";font-weight:700}
button{color:inherit;background-color:transparent;border:none;outline:0;font-family:Montserrat,'Noto Sans KR',sans-serif;font-size:inherit;font-weight:inherit;padding:0;cursor:pointer}
/*---------------------------------------------------------------------------------
	사용자 설정
	==========
---------------------------------------------------------------------------------*/
#tt-body-page .context{width:640px;margin:0 auto}
.clear{clear:both}
.hidden{display:none!important}
.word-keep{word-break:keep-all;word-wrap:break-word}
.word-break{word-break:break-all;word-wrap:break-word}
.ellipsis{display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:20px;height:60px}
#tt-body-page .wrap,footer .wrap,header .wrap{margin:0 auto;position:relative;max-width:978px}
.mask{background-color:rgba(0,0,0,.3);position:absolute;left:0;right:0;top:0;bottom:0}
.mask-over{position:relative}
.radius{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
/*---------------------------------------------------------------------------------
	SVG ICONS
	==========

	홈페이지: http://svgicons.sparkk.fr/
---------------------------------------------------------------------------------*/
.svg-icon{width:24px;height:24px;vertical-align:middle}
.svg-icon path{fill:#4691f6}
.svg-icon.no-link path{fill:#333}
/*---------------------------------------------------------------------------------
	기본 숨김
	==========
---------------------------------------------------------------------------------*/
#tistorytoolbarid,.entry-ccl,.tistoryProfileLayerTrigger{display:none!important}
/*---------------------------------------------------------------------------------
	헤드라이트
	==========
---------------------------------------------------------------------------------*/
h1,h2,h3,h6{font-weight:700}
h1,h2,h3,h4,h5{margin-bottom:20px}
h1{font-size:32px}
h2{font-size:28px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:17px}
h6{font-size:14px;text-transform:uppercase;letter-spacing:1px;margin-bottom:15px}
.article-desc h3,.article-desc h4{margin-top:60px}
/*---------------------------------------------------------------------------------
	Transition
	==========
---------------------------------------------------------------------------------*/
#s,.article-desc,.featured-image a img,input,nav ul li,textarea{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
/*---------------------------------------------------------------------------------
	목록 배치
	==========
---------------------------------------------------------------------------------*/
.col,.col2,.col3,.col4{display:inline-flex;display:block;float:left!important;margin:1% 0 1% 1.6%}
.col2{width:49.2%}
.col3{width:32.26%}
.col4{width:23.8%}
.col a:after{position:absolute;top:0;left:0;right:0;bottom:0;content:" ";opacity:0;transition:opacity .1s ease-out}
.col a:hover:after{opacity:1}
.col img{width:100%!important}
.col .featured-image{overflow:hidden;border:1px solid #efefef}
.col .featured-image img{display:block;-webkit-tap-highlight-color:transparent}
.col .featured-image a:hover img{-webkit-opacity:.8;-moz-opacity:.8;opacity:.8}
.article-desc .col2 .imageblock,.article-desc .col3 .imageblock,.article-desc .col4 .imageblock{margin:0}
/*---------------------------------------------------------------------------------
	SECTION
	==========
---------------------------------------------------------------------------------*/
section.page{margin:0 auto;background:#fff}
section.page.inner{padding:60px}
#tt-body-page section.page.inner{padding:60px 20px}
section.horizontal-share-bar{margin:10px auto;height:45px}
section.comment-container,section.reaction-buttons,section.related{margin:50px auto 0}
section.result{margin-bottom:20px}
section.paging{text-align:center;margin-top:50px}
#tt-body-page section.paging{text-align:right}
section.paging .item{display:inline-block;margin-left:16px}
.no-more-next,.no-more-prev,section.paging .item .selected{opacity:.3}
/*---------------------------------------------------------------------------------
	HEADER
	==========
---------------------------------------------------------------------------------*/
header.headlight{background-color:#fff;position:relative;height:60px}
header.headlight .inner{padding:0 60px}
header.headlight h1{display:inline;font-size:22px;line-height:60px}
header.headlight h1 a{font-weight:700}
header.headlight .social{float:right;line-height:60px}
header.headlight .social a{margin-left:5px}
header.headlight .social a:first-child{margin-left:0}
header.headlight .social img{width:24px;height:24px;display:inline-block;vertical-align:middle}
/*---------------------------------------------------------------------------------
	Image Line
	==========
---------------------------------------------------------------------------------*/
.footer-image-line,.header-image-line{width:100%;height:300px;background-repeat:no-repeat;background-position:center center;background-size:cover}
.header-image-line{background-image:url(./images/header-image-line.jpg)}
.footer-image-line{background-image:url(./images/footer-image-line.jpg)}
/*---------------------------------------------------------------------------------
	Search
	==========
---------------------------------------------------------------------------------*/
.search-form{display:none;opacity:0;padding:0;position:absolute;top:0;left:0;bottom:0;right:0;margin:0!important;pointer-events:none;height:60px}
.search-form.on{display:block;opacity:1;pointer-events:auto}
#s{background:#fff;border:none;padding:0 30px;height:60px;margin:0;font-size:18px;font-weight:700;text-align:center;border-radius:0}
/*---------------------------------------------------------------------------------
	본문:인덱스 페이지
	==========
---------------------------------------------------------------------------------*/
.index{position:relative}
.index a{color:inherit}
.index h2{color:#414a51;font-size:14px;margin-bottom:10px;-webkit-line-clamp:1;height:20px}
.index p{font-size:13px}
.index .category{margin-bottom:10px;color:rgba(34,59,74,.5);font-weight:700;outline:0;font-size:12px;display:inline-block}
.index .summary{-webkit-line-clamp:3}
/*---------------------------------------------------------------------------------
	사이드 바
	==========
---------------------------------------------------------------------------------*/
aside.sidebar{display:none}
#tt-body-page aside.sidebar{display:block;float:right;width:250px}
aside.sidebar section{margin:0 0 50px;font-size:14px;color:#60aade}
aside.sidebar section ul li{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:28px}
aside.sidebar section ul li a{color:#60aade}
aside.sidebar section .title{font-size:16px;position:relative;padding:0 0 15px}
aside.sidebar section .title:after{position:absolute;content:"";bottom:0;left:0;height:2px;width:40px;background:#60aade}
/*---------------------------------------------------------------------------------
	본문
	==========
---------------------------------------------------------------------------------*/
#tt-body-page .post{float:left}
/*---------------------------------------------------------------------------------
	글 저자
	==========
--------------------------------------------------------------------------------*/
header .author{padding:0 0 15px 45px;position:relative;font-size:14px}
header .author img{height:36px;width:36px;position:absolute;left:0;border-radius:50%;margin:0}
header .author .meta{display:block;font-size:14px;font-weight:700;padding:0 0 3px;line-height:1.2}
.author a,header .author .meta .name{font-weight:inherit}
header .author .desc{font-size:12px;line-height:1.2}
/*---------------------------------------------------------------------------------
	ARTICLE
	==========
---------------------------------------------------------------------------------*/
article.page{margin:0 auto}
article .featured-image + .inner{padding:0 0 0 170px}
article .inner{padding:0}
article .notice .inner{padding:0}
article h1{font-size:24px;margin-bottom:60px;line-height:30px}
.article-desc{opacity:0;letter-spacing:-1px;word-spacing:3px;line-height:1.7;font-size:18px}
.article-desc p{margin-bottom:30px;font-weight:300;letter-spacing:.03em}
.article-desc ul{margin-left:24px;margin-bottom:30px}
.article-desc li{list-style-type:disc;margin-bottom:8px;line-height:170%}
.article-desc .imageblock.featured-image-effect:after{content:"";display:block;position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:0 40px 40px 0;border-color:transparent #fff transparent transparent}
.article-desc .imageblock{width:100%;height:auto;overflow:hidden;display:inline-block;position:relative}
.article-desc p[style*='text-align: left'] .imageblock{margin:0}
.article-desc .imageblock img:not([src*='/extension/']){width:100%;height:auto;display:block;-webkit-tap-highlight-color:transparent;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}
.article-desc .imageblock .cap1{padding:10px 20px 0;color:#888;font-size:12px;line-height:130%;text-align:left;display:block;max-width:100%}
.article-desc pre{font-family:Consolas,sans-serif;line-height:180%;margin-bottom:35px}
.article-desc code{line-height:130%;letter-spacing:-1px;padding:16px;word-wrap:normal}
.article-desc blockquote{margin:40px auto;padding:2% 0 2% 5%;position:relative;color:#666;line-height:180%;border-left:10px solid #EEE}
.article-desc cite{font-weight:700;letter-spacing:1px;text-transform:uppercase;display:block;margin-top:16px;color:#444;font-size:12px}
.article-desc cite:before{content:"— "}
/*---------------------------------------------------------------------------------
	TAG
	==========
---------------------------------------------------------------------------------*/
.tags{font-size:14px}
/*---------------------------------------------------------------------------------
	관련 글
	==========
---------------------------------------------------------------------------------*/
.related h4.title{float:left;width:85%;font-weight:700}
.related .more{float:right}
.related li{position:relative;display:block;float:left;width:49.2%;margin:0 0 1.6% 1.6%}
.related li:first-child{margin-left:0}
.related li:nth-child(2n+1){margin-left:0;clear:both}
.related .related-thumb{border-top:1px solid #efefef;border-left:1px solid #efefef;position:relative}
.related .related-thumb:after{content:"";display:block;position:absolute;right:0;bottom:0;width:0;height:0;border-style:solid;border-width:20px 20px 0 0;border-color:transparent #fff transparent transparent}
.related .related-thumb img{display:block;-webkit-tap-highlight-color:transparent}
.related .related-title{text-align:left;font-size:14px;word-break:keep-all;word-wrap:break-word}
.related .related-title .inner{padding:10px}
.related .related-title .inner p.title a{font-weight:700}
/*---------------------------------------------------------------------------------
	COMMNET
	==========
---------------------------------------------------------------------------------*/
.comment-container .module-action{font-size:20px;margin-bottom:20px;font-weight:700}
.comment-container .module-action button{opacity:.3;line-height:1.2}
.comment-container .module-action button:first-child{opacity:1}
/*#tistory-comment{margin-top:60px}*/
#livere-comment,#respond .required,#respond label{display:none}
#respond{margin-bottom:50px}
#respond input,#respond textarea{margin-bottom:20px}
#respond textarea{line-height:160%;height:150px}
#respond button[type=submit]{line-height:1;color:#60aade;padding:11px 10px 8px;border:2px solid #60aade;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:color .6s cubic-bezier(.19,1,.22,1),border-color .4s cubic-bezier(.19,1,.22,1);-moz-transition:color .6s cubic-bezier(.19,1,.22,1),border-color .4s cubic-bezier(.19,1,.22,1);-ms-transition:color .6s cubic-bezier(.19,1,.22,1),border-color .4s cubic-bezier(.19,1,.22,1);-o-transition:color .6s cubic-bezier(.19,1,.22,1),border-color .4s cubic-bezier(.19,1,.22,1)}
#respond button[type=submit]:hover{cursor:pointer;opacity:.7;text-decoration:none}
#respond button[type=submit]:active{top:1px;position:relative}
#tistory-comment .children{padding-left:45px}
.comment-body{position:relative;font-size:14px;width:49.2%;display:inline-flex;display:block;margin-bottom:50px}
.comment-body .arrow-box .author img{left:10px}
.comment-body .author img{width:36px;height:auto;max-height:36px;position:absolute;left:0;border-radius:50%;margin:0}
.comment-body .author{display:block;font-size:16px;font-weight:700;padding:0 0 .32px 45px;line-height:1.2;min-height:19.31px}
.comment-body .meta{font-size:12px;padding:0 0 20px 45px;line-height:1.2}
.comment-body .desc{font-size:14px;line-height:20px}
.comment-body.left{float:left;clear:both}
.comment-body.right{margin-left:1.6%;float:right}
.comment-body.left .action{position:absolute;top:12px;right:10px}
.comment-body.right .action{position:absolute;top:2px;right:0}
/*---------------------------------------------------------------------------------
	FOOTER
	==========
---------------------------------------------------------------------------------*/
footer{margin:0 auto;background-color:#fff}
footer a{font-weight:700}
footer section.inner{padding:60px 20px}
footer .copyright,footer .tt_category{display:inline-flex;display:block;float:left;word-break:keep-all;word-wrap:break-word}
footer .tt_category{margin:20px 0 0;width:66.12%}
footer .tt_category .link_tit,footer .tt_category .sub_category_list{display:none}
footer .tt_category .category_list li{display:inline-flex;display:block;float:left;margin:1% 0 1% 1.6%;width:32.26%;line-height:20px}
footer .copyright{margin:20px 0 0 1.6%;width:32.26%;font-size:14px}
footer .copyright span{display:block;line-height:1.5;opacity:.7}
footer .copyright .desc{margin:0 0 20px}
/*---------------------------------------------------------------------------------
	Youtube, Vimeo Iframe
	==========
---------------------------------------------------------------------------------*/
.responsive-container{position:relative;padding-bottom:56.25%;padding-top:35px;height:0;overflow:hidden;margin-bottom:25px}
.responsive-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}
/*---------------------------------------------------------------------------------
	Twitter Widget
	==========
---------------------------------------------------------------------------------*/
#twitter-widget-0 { border: 1px solid rgba(15,70,100,.12) !important;}
/*---------------------------------------------------------------------------------
	저널
	==========
---------------------------------------------------------------------------------*/
.featured-timeline{margin:32px 0;position:relative}
.featured-timeline blockquote{margin:0;padding:2% 2% 2% 5%}
.featured-timeline .sticky-post{padding:0 0 10px;display:block;font-weight:700}
.featured-timeline .sticky-post:before{margin:0 0 0 -5px;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%2224%22%20height%3D%2224%22%3E%0A%09%09%09%09%09%09%09%3Cpath%20d%3D%22M15.396%2C2.292H4.604c-0.212%2C0-0.385%2C0.174-0.385%2C0.386v14.646c0%2C0.212%2C0.173%2C0.385%2C0.385%2C0.385h10.792c0.211%2C0%2C0.385-0.173%2C0.385-0.385V2.677C15.781%2C2.465%2C15.607%2C2.292%2C15.396%2C2.292%20M15.01%2C16.938H4.99v-2.698h1.609c0.156%2C0.449%2C0.586%2C0.771%2C1.089%2C0.771c0.638%2C0%2C1.156-0.519%2C1.156-1.156s-0.519-1.156-1.156-1.156c-0.503%2C0-0.933%2C0.321-1.089%2C0.771H4.99v-3.083h1.609c0.156%2C0.449%2C0.586%2C0.771%2C1.089%2C0.771c0.638%2C0%2C1.156-0.518%2C1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503%2C0-0.933%2C0.322-1.089%2C0.771H4.99V6.531h1.609C6.755%2C6.98%2C7.185%2C7.302%2C7.688%2C7.302c0.638%2C0%2C1.156-0.519%2C1.156-1.156c0-0.638-0.519-1.156-1.156-1.156c-0.503%2C0-0.933%2C0.322-1.089%2C0.771H4.99V3.062h10.02V16.938z%20M7.302%2C13.854c0-0.212%2C0.173-0.386%2C0.385-0.386s0.385%2C0.174%2C0.385%2C0.386s-0.173%2C0.385-0.385%2C0.385S7.302%2C14.066%2C7.302%2C13.854%20M7.302%2C10c0-0.212%2C0.173-0.385%2C0.385-0.385S8.073%2C9.788%2C8.073%2C10s-0.173%2C0.385-0.385%2C0.385S7.302%2C10.212%2C7.302%2C10%20M7.302%2C6.146c0-0.212%2C0.173-0.386%2C0.385-0.386s0.385%2C0.174%2C0.385%2C0.386S7.899%2C6.531%2C7.688%2C6.531S7.302%2C6.358%2C7.302%2C6.146%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E)}
.featured-timeline .sticky-post+p{margin-bottom:0}
.featured-timeline>p{background:#b07496;color:#fff;padding:8%}
.featured-timeline>p+p{margin-bottom:0;padding:0 8% 8%}
.featured-timeline a{color:#fff;text-decoration:underline}
/*---------------------------------------------------------------------------------
	Media Query
	==========
---------------------------------------------------------------------------------*/
@media (min-width:1024px){.arrow-box{position:relative;background:#f1f4f9;padding:10px}
.arrow-box:after{left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(136,183,213,0);border-left-color:#f1f4f9;border-width:10px;margin-top:-10px}
footer .tt_category .category_list li:nth-of-type(3n+1){margin-left:0;clear:both}}

@media (max-width:1023px){#tt-body-page .context{width:100%;max-width:640px}
#tt-body-page .post{float:none}
.mobile-hidden{display:none!important}
.related .related-title{font-size:11px}
.comment-body{position:relative;font-size:14px;width:inherit;margin-bottom:20px}
.comment-body.left{float:initial;clear:initial}
.comment-body.right{margin-left:0;float:initial}
.comment-body .arrow-box .author img{left:0}
.comment-body.left .action{top:2px;right:0}
footer .tt_category{width:100%;margin-bottom:30px}
footer .tt_category .category_list li{width:49.2%;text-align:right}
footer .tt_category .category_list li:nth-of-type(2n+1){margin-left:0;clear:both}
footer .copyright{width:100%}}

@media only screen and (min-width:1440px){.col{width:32.26%}
.col:nth-of-type(3n+1){margin-left:0;clear:both}
.col .featured-image{width:145px;position:absolute;top:32px;left:0}}

@media only screen and (min-width:1024px) and (max-width:1439px){.col{width:49.2%}
.col:nth-of-type(2n+1){margin-left:0;clear:both}
.col .featured-image{width:145px;position:absolute;top:32px;left:0}}

@media only screen and (max-width:1023px){section.page.inner{padding:60px 20px}
footer .inner{margin:0}
header.headlight .inner{padding:0 20px}
.article-desc .imageblock{margin:0 -20px}
.article-desc .imageblock img:not([src*='/extension/']){-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
.col{width:initial;clear:both;margin:0;padding:10px 0}
.col .featured-image{width:98px;position:absolute;top:30px;left:0}
article .featured-image + .inner{padding:0 0 0 120px}}