@charset "utf-8";
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);*/

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

html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background-color: #f1f1f1; }

body { font-size: 14px; font-family: "Meiryo UI", "나눔고딕", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", "Apple SD 산돌고딕 Neo", "AppleSDGothicNeo", sans-serif; }
h1, h2, h3, h4, h5 { font-family: "Noto Sans CJK KR", "본고딕", "Noto Sans Korean", "나눔고딕", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", "Apple SD 산돌고딕 Neo", "AppleSDGothicNeo", sans-serif; letter-spacing: -0.5px; }

img { max-width: 100%; border: 0; }
fieldset { padding: 2%; border: 1px solid #ddd; }
fieldset legend { padding: 0 10px; }
sup, sub { display: inline-block; height: 0; font-size: 10px; line-height: 0; }
iframe, video, embed, object { max-width: 100%; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
cite, em { font-style: italic; }
blockquote { position: relative; margin: 0; padding: 10px 15px; color: #555; border-left: 5px solid #f1f1f1; }
pre { margin: 10px 0; padding: 40px 40px 35px; font-size: 13px; font-family: "verdana", "나눔고딕", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", "Apple SD 산돌고딕 Neo", "AppleSDGothicNeo", sans-serif; color: #fff; line-height: 170%; tab-size: 4; background-color: #333; overflow-x: auto; overflow-y: hidden; }
hr { margin: 0; padding: 0; height: 0; border: none; border-top: 1px solid #ddd; border-bottom: 1px solid #fafafa; overflow: hidden; }
h1, h2, h3, h4, h5, b, strong { font-weight: 500; }
input, textarea { line-height: 170%; outline: none; }
code { display: inline-block; margin: 1px 0; padding: 2px 5px 3px; font-family: inherit; color: crimson; background-color: #f1f1f1; border-radius: 3px; }
code.red { color: #BE0D0D; background-color: #FFF4F4; border: 1px solid #FFD8D8; }
code.blue { color: #4570CD; background-color: #F4FCFF; border: 1px solid #AFD5E3; }
code.green { color: #267C45; background-color: #F4FFF4; border: 1px solid #A6E6A6; }

a { color: #333; text-decoration: none; }
a:hover { color: #09a; }

/*
 * common
 */
#wrap {  }
#cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 999; }

.clear { clear: both; width: 100%; }

::selection { background-color: #aaa; color: #fff; text-shadow: none; }
::-moz-selection { background-color: #aaa; color: #fff; text-shadow: none; }
::-o-selection { background-color: #aaa; color: #fff; text-shadow: none; }
::-ms-selection { background-color: #aaa; color: #fff; text-shadow: none; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-button { width: 0; height: 5px; }
::-webkit-scrollbar-thumb { background-color: #aaa; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background-color: #888; }

#tistorytoolbarid { display: block; }

/*
 * sidebar
 */
#sidebar, #sidebar:after { max-width: 300px; width: 100%; background-color: #fff; cursor: default; }
#sidebar { position: absolute; top: 0; left: 0; z-index: 30;
-webkit-transition: transform 0.5s;
-moz-transition: transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
}
#sidebar:after { content: ""; position: fixed; top: 0; left: 0; bottom: 0; z-index: -1; }
#sidebar .inner-wrap { position: absolute; right: 0; padding: 100px 30px; max-width: 500px; width: 100%; }

#sidebar h1 { margin: 0 0 55px; padding: 0 10px; text-align: center; font-size: 20px; font-weight: 400; line-height: 200%; color: #666; }

#sidebar .widget { margin: 30px 0 0; padding: 0; line-height: 190%; }
#sidebar .widget h2 { margin: 0 0 3px; padding: 0; font-size: 15px; font-weight: 400; color: #333; }
#sidebar .widget h2:before { content: "*"; color: #888; }
#sidebar .widget ul { margin: 0; padding: 0; }
#sidebar .widget ul li { list-style: none; margin: 0; padding: 0; font-size: 12px; word-break: break-all; }

#sidebar .category img[src*="new_ico"] { display: none; }
#sidebar .category span.c_cnt { font-size: 11px; color: #09a; letter-spacing: -1px; }
#sidebar .category span.new { font-size: 11px; }
#sidebar .category ul li ul li ul { margin: 0 0 0 10px; padding: 0; }
#sidebar .category ul li ul li ul li:before { content: "\F0DA"; font-family: "FontAwesome"; font-size: 10px; padding-right: 5px; }

#sidebar .recentComments {  }
#sidebar .recentComments ul li { padding: 7px 3px 5px; border-bottom: 1px solid #eee; line-height: 180%; }
#sidebar .recentComments ul li:first-child { margin-top: 8px; border-top: 1px solid #eee; }
#sidebar .recentComments .line { display: inline-block; margin: 0 5px; width: 1px; height: 8px; background-color: #bbb; }
#sidebar .recentComments .name { color: #aaa; }
#sidebar .recentComments .date { color: #09a; }
#sidebar .recentComments ul li:hover a { color: #09a; }
#sidebar .recentComments ul li:hover .name { color: #000; }

#sidebar .link {  }

#sidebar .counter {  }
#sidebar .counter ul li { line-height: 170%; }

#sidebar .search input { padding: 10px 5px; width: 100%; background-color: transparent; border: none; border-bottom: 1px dotted #bbb; }
#sidebar .search input:focus { border-color: #09a; }

#sidebar .rss { margin: 100px 0 50px; text-align: center; }
#sidebar .rss a { display: inline-block; padding: 5px 12px 6px; font-size: 11px; color: #fff; line-height: 100%; background-color: #E68A50; border-radius: 3px; box-shadow: inset 0 -10px 6px #E66F25; }

#sidebar .ellipsis ul li { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

#sidebar #recentEntries {  }
#sidebar #recentEntries > .title { display: none; font-family: "Meiryo UI", "Noto Sans CJK KR", "나눔고딕", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", "Apple SD 산돌고딕 Neo", "AppleSDGothicNeo", sans-serif; letter-spacing: -0.5px; }
#sidebar #recentEntries > .title:before { content: "*"; color: #888; }
#sidebar #recentEntries ul li { position: relative; height: 150px; overflow: hidden; background-color: #f1f1f1; }
#sidebar #recentEntries ul li .thumb { display: block; width: 100%; height: 100%; }
#sidebar #recentEntries ul li .thumb img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; vertical-align: middle; }
#sidebar #recentEntries ul li .thumb .title { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; padding: 0 10px; width: 100%; height: 30px; text-align: center; line-height: 30px; color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background-color: #000; background-color: rgba(0,0,0,0.6); }
#sidebar #recentEntries .loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 20px; }
#sidebar #recentEntries .loading img { vertical-align: middle; }

html.recent-auto-height {  }
html.recent-auto-height #sidebar #recentEntries ul li { min-height: 150px; height: auto; }
html.recent-auto-height #sidebar #recentEntries ul li .thumb img { position: inherit; }

#sidebar-toggle { display: none; position: fixed; left: 30px; top: 30px; width: 50px; height: 50px; cursor: pointer; border-radius: 3px; z-index: 20;
-webkit-transition: transform 0.5s;
-moz-transition: transform 0.5s;
-o-transition: transform 0.5s;
transition: transform 0.5s;
}
#sidebar-toggle:before { content: ""; position: absolute; top: 14px; left: 0; right: 0; margin: auto; width: 30px; height: 3px; background-color: #666; }
#sidebar-toggle span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 30px; height: 3px; background-color: #666; }
#sidebar-toggle:after { content: ""; position: absolute; top: 34px; left: 0; right: 0; margin: auto; width: 30px; height: 3px; background-color: #666; }

#sidebar-active-cover { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0.3; cursor: pointer; z-index: 21; }
html.no-opacity #sidebar-active-cover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }

/*
 * sidebar option
 */
#sidebar::-webkit-scrollbar { width: 5px; }
#sidebar::-webkit-scrollbar-button { width: 0; height: 5px; }
#sidebar::-webkit-scrollbar-thumb { background-color: #eee; }
#sidebar::-webkit-scrollbar-thumb:hover { background-color: #ddd; }

html.sidebar-fixed {  }
html.sidebar-fixed #sidebar { position: fixed; bottom: 0; height: 100%; overflow-y: auto; }
html.sidebar-fixed #sidebar:after { display: none; }

html.sidebar-fixed.sidebar-off #sidebar { margin-left: -300px; left: 0; }
html.sidebar-fixed.sidebar-off.sidebar-active #sidebar { transform: translate3d(300px,0,0); }

html.no-csstransforms3d.sidebar-fixed.sidebar-off.sidebar-active #sidebar { margin-left: 0; }

html.sidebar-right {  }
html.sidebar-right #container { margin: 0 300px 0 0; }
html.sidebar-right #content { float: right; }
html.sidebar-right #sidebar,
html.sidebar-right #sidebar:after { right: 0; left: inherit; }
html.sidebar-right #sidebar .inner-wrap { right: inherit; left: 0; }
html.sidebar-right.sidebar-off #sidebar { margin-left: inherit; margin-right: -300px; }
html.sidebar-right.sidebar-off #sidebar-toggle { right: 30px; left: inherit; }
html.sidebar-right.sidebar-off.sidebar-active #sidebar {
-webkit-transform: translate3d(-300px,0,0);
-moz-transform: translate3d(-300px,0,0);
-ms-transform: translate3d(-300px,0,0);
-o-transform: translate3d(-300px,0,0);
transform: translate3d(-300px,0,0);
}

html.no-csstransforms3d.sidebar-right.sidebar-off.sidebar-active #sidebar { margin-right: 0; }

html.sidebar-off {  }
html.sidebar-off #container { margin: 0; }
html.sidebar-off #content { float: none; margin: 0 auto; }
html.sidebar-off #sidebar { position: fixed; bottom: 0; margin-left: -300px; height: 100%; overflow-y: auto; }
html.sidebar-off #sidebar:after { display: none; }
html.sidebar-off #sidebar-toggle { display: block; }
html.sidebar-off.sidebar-active #sidebar {
-webkit-transform: translate3d(300px,0,0);
-moz-transform: translate3d(300px,0,0);
-ms-transform: translate3d(300px,0,0);
-o-transform: translate3d(300px,0,0);
transform: translate3d(300px,0,0);
}

html.no-csstransforms3d.sidebar-off.sidebar-active #sidebar { margin-left: 0; }

html.sidebar-off #sidebar::-webkit-scrollbar { width: 5px; }
html.sidebar-off #sidebar::-webkit-scrollbar-button { width: 0; height: 5px; }
html.sidebar-off #sidebar::-webkit-scrollbar-thumb { background-color: #aaa; }
html.sidebar-off #sidebar::-webkit-scrollbar-thumb:hover { background-color: #888; }

html.sidebar-active { overflow: hidden; }
html.sidebar-active #sidebar-active-cover { display: block; }

/*
 * content
 */
#container { margin: 0 0 0 300px; padding: 0 50px; }
#content { float: left; max-width: 1000px; width: 100%; }

html.content-center {  }
html.content-center #content { float: none; margin: 0 auto; }

.head { position: relative; padding-top: 100px; width: 100%; text-align: center; }
.head h1,
.head h2,
.head span { display: inline-block; margin: 0 20px 50px; padding: 0 5px 10px; font-size: 20px; font-weight: 500; color: #444; line-height: 160%; border-bottom: 1px dashed #ccc; text-shadow: 1px 1px #dedede; word-break: break-word; }

#index-head,
#media-head,
#notice-head { display: none; }
html.index #index-head,
body.tt-body-index,
html.media #media-head,
html.notice #notice-head { display: block; }

.body { padding: 10px 15px; font-size: 13px; line-height: 180%; background-color: #fff; background-color: rgba(255,255,255,1); word-break: break-all; }
.body .data { margin-bottom: 8px; }
.body .data .date { position: relative; float: left; margin: 0 0 0 -27px; padding: 5px 10px; font-size: 11px; color: #fff; background-color: #555; cursor: default; }
.body .data .date:before { content: ""; position: absolute; bottom: -5px; left: 0px; width: 0; height: 0; border-top: 5px solid #252525; border-left: 11px solid transparent; }
.body .data .info { padding: 5px 0; font-size: 12px; color: #555; text-align: right; }
.body .data .info {  }
.body .data .info .category { color: #555; }
.body .data .info .writter { display: none; position: relative; margin: 0 0 0 10px; }
.body .data .info .writter:before { content: ""; position: absolute; left: -8px; top: 5px; width: 1px; height: 8px; background-color: #bbb; }

html.ribbon-original {  }
html.ribbon-original .body .data .date:before { top: 0; bottom: inherit; left: -6px; border-top: 20px solid #555; border-left: 6px solid transparent; }
html.ribbon-original .body .data .date:after { content: ""; position: absolute; bottom: 0; left: -6px; width: 0; height: 0; border-bottom: 20px solid #555; border-left: 6px solid transparent; }


/*
 * tag
 */
.tag { text-align: center; word-break: break-all; }
.tag a { display: inline-block; margin: 0 3px; padding: 0 5px 3px; }
.tag a:hover { background-color: #f5f5f5; }
.tag .cloud5 { font-size: 13px !important; color: #999 !important; }
.tag .cloud5:hover { color: #000 !important; }
.tag .cloud4 { font-size: 15px !important; color: #157586 !important; }
.tag .cloud3 { font-size: 18px !important; color: #333 !important; }
.tag .cloud2 { font-size: 20px !important; color: #09a !important; line-height: 150%; }
.tag .cloud1 { font-size: 22px !important; color: #f55 !important; line-height: 200%; }

/*
 * local
 */
.local {  }
.local .spot:before { content: "ㄴ "; font-size: 11px; color: #888; }
.local .spot[style*="margin-left: 0"] { font-weight: 500; }
.local .spot[style*="margin-left: 0"]:before { display: none; }

/*
 * list
 */

.list { margin: 0 0 10px; padding: 0 10px; background-color: #fff; border-bottom: 1px solid #ddd; }
.list .inner-wrap { padding: 30px 15px 28px; }
.list .inner-wrap .thumb-link { position: relative; display: block; float: right; margin-left: 5px; width: 200px; height: 130px; overflow: hidden; border: 1px solid #fff; box-shadow: 5px 5px #f5f5f5; }
.list .inner-wrap .thumb-link img { position: absolute; top: 0; right: -175%; bottom: 0; left: -175%; margin: auto; max-width: 350px; vertical-align: middle; }
.list .inner-wrap .list-body {  }
.list .inner-wrap .list-body h3 { margin: 0; padding: 0 0 5px; font-size: 20px; letter-spacing: -1px; }
.list .inner-wrap .list-body .desc { margin: 0 0 10px; padding: 0; font-size: 12px; color: #aaa; line-height: 180%; word-break: break-all; text-transform: uppercase; }
.list .inner-wrap .list-body .data { font-size: 11px; }
.list .inner-wrap .list-body .data .line { display: inline-block; margin: 0 5px; width: 1px; height: 8px; background-color: #ddd; }
.list .inner-wrap .list-body .data .category { color: #09a; }
.list .inner-wrap .list-body .data .date { color: #777; }

/*
 * protected
 */
.protected {  }
.protected p { text-align: center; }
.protected i { font-size: 30px; color: #555; }
.protected input {  }
.protected input[type="password"] { margin-top: 10px; padding: 20px 10px 18px; width: 300px; font-size: 11px; border: none; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; }
.protected input[type="button"] { margin-top: 10px; font-size: 12px; border: none; background-color: transparent; cursor: pointer; }

/*
 * article
 */
.article { text-align: justify; }

.article h3 { padding: 7px 10px; margin: 0 0 10px; border-left: 5px solid #666; font-size: 16px; background-color: #fafafa; color: #333; }
.article h3.red { border-left-color: #F6CECE; background-color: #FFF4F4; color: #CD4545; }
.article h3.blue { border-left-color: #B7D9F2; background-color: #F4FCFF; color: #4570CD; }
.article h3.green { border-left-color: #B7F2C7; background-color: #F4FFF7; color: #267C45; }

.article table,
.article table td .imageblock,
.article table td .imageblock img { width: 100% !important; }
.article table { max-width: 100%; }
.article table.dual td { width: 50% !important; vertical-align: top; }
.article table.dual td .imageblock span img { width: 100% !important; }
.article table.triple td { width: 33% !important; vertical-align: top; }

.article .imageblock img { vertical-align: middle; }
.article .imageblock .ExifInfo { padding-top: 3px; }
.article .galleryControl { font-family: inherit !important; }
.article .tt-gallery-box { margin-bottom: 10px; }
.article .tt-gallery-box img { max-width: 100%; height: auto !important; vertical-align: middle; }
.article .cap1,
.article .galleryCaption { margin: 0 !important; padding-top: 3px; text-align: center; color: #555; font-style: italic; word-break: break-all; }
.article .cap1 { width: 100% !important; }

.article .txc-info-wrap { overflow-x: auto; overflow-y: hidden; max-width: 500px; width: 100%; clear: both; }
.article .txc-info { font-size: 13px !important; width: 500px !important; }
.article .txc-info hr { max-width: 100%; width: 100% !important; }
.article .txc-info h3 { border-left: none; background-color: transparent; color: inherit; }
.article .txc-info img { padding: 0; box-shadow: none; border: none; }

.article .moreless_fold { border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fcfcfc; }
.article .moreless_fold span:before { padding: 0 10px 0 5px; content: "\f107"; font-family: "FontAwesome"; color: #aaa; }
.article .moreless_fold span { display: block; padding: 10px 10px 8px; }
.article .moreless_top { border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: #fcfcfc; }
.article .moreless_top span:before { padding: 0 10px 0 5px; content: "\f106"; font-family: "FontAwesome"; color: #aaa; }
.article .moreless_top span { display: block; padding: 10px 10px 8px; }
.article .moreless_content { padding: 10px; border-bottom: 1px solid #eee; }
.article .moreless_bottom { display: none; }
.article a.tx-link,
.article a.key1 { font-weight: 600; cursor: pointer; }
.article div.footnotes { margin-top: 30px; font-size: 12px; border-top: 1px solid #ddd; }
.article div.footnotes ol { padding: 0; margin: 10px 0 0 30px; list-style: decimal-leading-zero; }
.article div.footnotes ol li a { color: #888; font-weight: 400; }
.article .entry-ccl { margin-top: 20px; margin-bottom: 0 !important; line-height: 0; }

.article .another_category { margin-bottom: 10px; padding: 0 0 15px !important; border: none; border-bottom: 1px solid #ddd; }
.article .another_category h4 { font-size: 14px !important; font-weight: 400 !important; }
.article .another_category h4 a { font-size: 14px !important; font-weight: 500 !important; }
.article .another_category table { margin-top: 2px !important; }
.article .another_category th { padding: 12px 0 0 !important; font-size: 13px !important; }
.article .another_category th a:before { content: "■ "; font-size: 11px;  }
.article .another_category th a.current { color: #09a !important; border: none !important; }
.article .another_category th span { display: none; }
.article .another_category td { display: none; }

/*
 * tag_label
 */
.tag_label { margin-bottom: 10px; padding: 0 0 10px; color: #777; word-break: break-all; border-bottom: 1px solid #ddd; }
.tag_label a { display: inline-block; font-size: 12px; color: #777; }
.tag_label a:before { content: "#"; }
.tag_label a:hover { color: #000; }
.tag_label .locationTag { font-size: 13px; }

/*
 * admin
 */
.admin { margin-bottom: 10px; font-size: 11px; text-align: center; letter-spacing: 2px; }
.admin a { color: #777; }
.admin a:hover { color: #e55; }
.admin .line { padding: 0 5px; font-size: 9px; color: #ddd; }

/*
 * communicate
 */
.communicate { margin: 0; padding: 0; clear: both; }
.communicate .communicateWrite { margin: 20px 0 0; padding: 0; }
.communicate .communicateWrite .required:focus { border-color: #fcc; }
.communicate .communicateWrite label span { color: #f00; }
.communicate .communicateWrite .name label,
.communicate .communicateWrite .password label,
.communicate .communicateWrite .homepage label { display: block; margin-top: 10px; padding-left: 5px; float: left; width: 100px; font-size: 11px; }
.communicate .communicateWrite .name input,
.communicate .communicateWrite .password input,
.communicate .communicateWrite .homepage input { margin-bottom: 10px; padding: 10px; width: 300px; border: 1px solid #ddd; cursor: pointer; }
.communicate .communicateWrite .comment > label { display: inline-block; padding: 0 0 10px 5px; width: 100px; font-size: 11px; }
.communicate .communicateWrite .comment textarea { margin: 0; padding: 10px; width: 100%; height: 200px; border: 1px solid #ddd; vertical-align: middle; }
.communicate .communicateWrite .comment .secret { position: relative; float: right; width: 100px; text-align: right; }
.communicate .communicateWrite .comment .secret label { margin-right: 20px; padding: 0 5px 10px 0; font-size: 11px; cursor: pointer; }
.communicate .communicateWrite .comment .secret input { position: absolute; top: 3px; bottom: 0; right: 7px; margin: auto 0; cursor: pointer; }
.communicate .communicateWrite .comment .secret input:focus { border: none; outline: none; }
.communicate .communicateWrite .submit { margin: 0; float: right; }
.communicate .communicateWrite .submit input { margin: 0; padding: 20px 10px 15px; font-size: 11px; line-height: 15px; color: #333; letter-spacing: 2px; background: none; border: none; border-bottom: 1px solid #ddd; cursor: pointer; }
.communicate .communicateWrite .submit input:focus { border-color: #fcc; }

.communicate .communicateList { margin: 0; padding: 0; font-size: 13px; }
.communicate .communicateList ol { padding: 0; margin: 0; }
.communicate .communicateList li { list-style: none; padding: 0; margin: 0; }
.communicate .communicateList ol > li { margin-top: 20px; padding: 00; border-top: 2px solid #555; border-bottom: 1px solid #ddd; }
.communicate .communicateList ol li ul { margin: 0; padding: 0; }
.communicate .communicateList ol li ul li { padding: 0; border-top: 1px dotted #ddd; background-color: #fff; }
.communicate .communicateList li > div { padding: 15px 10px 12px; }
.communicate .communicateList li > div:hover { background-color: #fdfdfd; }
.communicate .communicateList .rp2-wrap { padding-left: 50px; }
.communicate .communicateList .rp_secret p,
.communicate .communicateList .guest_secret p { color: #136B84; }
.communicate .communicateList .date { font-size: 11px; float: right; font-style: italic; color: #777; }
.communicate .communicateList p { margin: 10px 0; padding: 0; }
.communicate .communicateList .control { text-align: right; font-size: 11px; }
.communicate .communicateList .control span { cursor: pointer; }
.communicate .communicateList .control span.edit { color: #555; }
.communicate .communicateList .control span.reply { float: left; color: #09a; }
.communicate .communicateList .tt_more_preview_comments_wrap { text-align: center; cursor: pointer;  padding: 17px 0 15px; font-weight: 400; color: #333; }

.communicate .communicateList .hiddenComment .info .name:before { content: "아이돈노후유아 벗아윌빠인드유 "; color: #aaa; }

.tistoryProfileLayerTrigger { margin-bottom: -1px !important; }
#tistoryProfileLayer * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

.guestbook .communicateWrite { margin: 0; }

/*
 * paging
 */
#paging { margin: 30px 0 0; font-size: 11px; line-height: 200%; text-align: center; cursor: default; }
#paging a { display: inline-block; margin: 0 5px 10px; padding: 0 5px; }
#paging .no-more-prev,
#paging .no-more-next { color: #aaa; cursor: no-drop; }
#paging .selected { position: relative; color: #09a; cursor: default; }
#paging .selected:before { content: ""; position: absolute; top: -4px; right: 0; bottom: 0; left: -10px; display: block; padding: 5px 10px; width: 100%; height: 100%; background-color: #fff; z-index: -1; opacity: 0.85; border-radius: 5px; }

/*
 * recentEntries
 */
#container #recentEntries { padding: 50px 0 0; }
#container #recentEntries > .title { margin: 0 0 5px 5px; padding: 0; font-size: 15px; font-family: "Meiryo UI", "Noto Sans CJK KR", "나눔고딕", "Nanum Gothic", "맑은 고딕", "Malgun Gothic", "Apple SD 산돌고딕 Neo", "AppleSDGothicNeo", sans-serif; letter-spacing: -0.5px; font-weight: 400; color: #555; }
#container #recentEntries > .title > a { color: inherit; }
#container #recentEntries > .title > a:before { content: "〃 "; position: relative; top: -2px; font-size: 11px; color: #555; }
#container #recentEntries ul { margin: 0; padding: 0; list-style: none; overflow: auto; }
#container #recentEntries ul li { position: relative; float: left; margin: 0; width: 25%; height: 150px; font-size: 12px; overflow: hidden; }
#container #recentEntries ul li .thumb img { position: absolute; top: 0; right: -125px; bottom: 0; left: -125px; margin: auto; max-width: none; }
#container #recentEntries ul li .thumb .title { position: absolute; top: 0; left: 0; padding: 0 20px; width: 100%; height: 100%; text-align: center; line-height: 155px; background-color: #555; color: #fff; opacity: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#container #recentEntries ul li .thumb .title { -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; }
#container #recentEntries ul li .thumb .show { opacity: 1; }
#container #recentEntries ul li:nth-child(2n+0) .title { background-color: #333; }
#container #recentEntries ul li:hover .thumb .title { opacity: 0.9; }
#container #recentEntries .loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 20px; }

html.no-opacity #container #recentEntries ul li .thumb .title { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
html.no-opacity #container #recentEntries ul li:hover .thumb .title { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }

/*
 * footer
 */
#footer { padding: 100px 0 50px; font-size: 11px; text-align: center; text-shadow: 1px 1px #fff; cursor: default; }
#footer a { display: inline-block; padding: 0 2px 3px 1px; border-bottom: 1px dotted #aaa; }

/*
 * responsive
 */
#ttCanvas * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }

@media all and (max-width: 960px) {
	#container { margin: 0; }
	#content { float: none; margin: 0 auto; }
	#sidebar, #sidebar:after { max-width: 300px; }
	#sidebar { position: fixed; bottom: 0; margin-left: -300px; height: 100%; overflow-y: auto; }
	#sidebar:after { display: none; }
	#sidebar-toggle { display: block; background-color: rgba(255,255,255,0.8) }
	html.sidebar-active #sidebar {
	-webkit-transform: translate3d(300px,0,0);
	-moz-transform: translate3d(300px,0,0);
	-ms-transform: translate3d(300px,0,0);
	-o-transform: translate3d(300px,0,0);
	transform: translate3d(300px,0,0);
	}

	html.sidebar-right {  }
	html.sidebar-right #container { margin: 0; }
	html.sidebar-right #sidebar,
	html.sidebar-right #sidebar:after { right: 0; left: inherit; border-right: none; border-left-width: 1px; border-left-style: solid; }
	html.sidebar-right #sidebar .inner-wrap { right: inherit; left: 0; }
	html.sidebar-right #sidebar { margin-left: inherit; margin-right: -300px; }
	html.sidebar-right #sidebar-toggle { right: 30px; left: inherit; }
	html.sidebar-right.sidebar-active #sidebar {
	-webkit-transform: translate3d(-300px,0,0);
	-moz-transform: translate3d(-300px,0,0);
	-ms-transform: translate3d(-300px,0,0);
	-o-transform: translate3d(-300px,0,0);
	transform: translate3d(-300px,0,0);
	}

	.responsive-video { position: relative; padding-bottom: 56.25%; width: 100%; }
	.responsive-video iframe,
	.responsive-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}

@media all and (max-width: 640px) {
	#container { padding-right: 15px; padding-left: 15px; }
}

@media all and (max-width: 360px) {
	html, body { height: 100%; overflow-y: auto; }

	#sidebar-toggle { left: 15px; z-index: 30; }
	html.sidebar-right #sidebar-toggle { right: 15px; }
	html.sidebar-off.sidebar-right #sidebar-toggle { right: 15px; }

	html.sidebar-active #sidebar-toggle:before { top: 25px;
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	}
	html.sidebar-active #sidebar-toggle span {
	-webkit-transform: rotateY(90deg);
	-moz-transform: rotateY(90deg);
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY(90deg);
	transform: rotateY(90deg);
	}
	html.sidebar-active #sidebar-toggle:after { top: 25px;
	-webkit-transform: rotateZ(-45deg);
	-moz-transform: rotateZ(-45deg);
	-ms-transform: rotateZ(-45deg);
	-o-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
	}

	.list .inner-wrap .thumb-link { float: none; margin: -30px -25px 20px; width: auto; height: 150px; border: none; border-bottom: 1px solid #eee; box-shadow: none; }

	.communicate .communicateWrite .name label,
	.communicate .communicateWrite .password label,
	.communicate .communicateWrite .homepage label { margin-top: 0; padding-bottom: 5px; }
	.communicate .communicateWrite .name input,
	.communicate .communicateWrite .password input,
	.communicate .communicateWrite .homepage input { width: 100%; }
	.communicate .communicateWrite .homepage input { margin-bottom: 15px; }
	.communicate .communicateWrite .comment .secret input { top: 0; }

	.article .another_category { padding: 0 0 10px !important; }
	.tag_label { margin-bottom: 10px; padding: 0 0 7px; }
	#paging .selected:before { top: -5px; }

	#container #recentEntries ul li { float: none; width: 100%; }
	#container #recentEntries ul li .thumb .title { opacity: 0.8; height: 30px; line-height: 30px; top: 0; bottom: 0; margin: auto 0; }
	#container #recentEntries ul li .thumb .show { height: 100%; line-height: 155px; }
}