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

html, body { margin: 0; padding: 0; }

body, input, textarea { font-size: 13px; font-family: "나눔고딕", "맑은 고딕", Verdana, serif; }

p { margin: 0 !important; padding: 0 !important; }

input, textarea {
box-sizing: border-box; /* Opera/IE 8+ */
-webkit-box-sizing: border-box; /* Safari, Chrome et al */
-moz-box-sizing: border-box; /* Firefox */
}

a { text-decoration: none;
-moz-transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s; }
a:hover { text-decoration: none; }

img { border: 0; max-width: 100%; }
iframe, embed, object { max-width: 100%; }

::-moz-selection { background-color: #333; text-shadow: 1px 1px #000; color: #fff; }
::selection { background-color: #333; text-shadow: 1px 1px #000; color: #fff; }


/*
 * 블로그 크기 - header/content, sidebar 의 max-width 값이 합계 100%가 되지 않게 설정해주세요.
 */
#wrap { max-width: 2000px; }

#header,
#content { max-width: 75%; }

#sidebar { max-width: 23%; }


/*
 * 공통
 */
#wrap { margin: 0 auto; line-height: 180%; padding: 0 50px; }

#header h1,
#entry .titleWrap .date .category,
#sidebar .widget h3 { font-family: "나눔고딕", "Nanum Gothic", "맑은 고딕", Verdana, serif; }

#tailbar .widget h3,
#content h2 { font-family: "나눔명조", "나눔고딕", "맑은 고딕"; font-size: 30px; }

#go_top { right: 10px; }
#fixed_category { left: 10px; }
#go_top, #fixed_category { padding: 10px; background: #333; font-size: 13px; position: fixed; bottom: 10px; color: #fff; border: 1px solid #333; border-radius: 50%; line-height: 100%;
transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s; }
#go_top:hover, #fixed_category:hover { cursor: pointer; }


/*
 * 헤더
 */
#header { padding: 80px 0 30px; }

#header h1 { font-size: 15px; margin: 0; padding: 2px 5px; color: #fff; border-left: 5px solid #666; background-color: #959595; display: inline; text-shadow: 1px 1px #666; }

#header .default .blog_menu { margin-top: 5px; font-size: 11px; font-family: verdana; }
#header .default .blog_menu ul { padding: 0; margin: 0; }
#header .default .blog_menu li { margin-right: 30px; list-style: none; float: left; list-style-position: inside; letter-spacing: 2px; text-transform: lowercase }
#header .blog_menu li a { color: #777; }
#header .blog_menu li a:hover { color: #f99; }


/*
 * 컨텐츠
 */
#content { float: left; width: 100%; border-top: 2px solid #000; color: #333; word-break: break-all; }
#content a { color: #333; }
#content a:hover { color: #3a3; }

#post_list { padding:0; margin:0; }
#post_list ul { padding:0; margin:0; border-top:1px solid #ccc; }

#post_list li { padding:10px 5px 8px; border-bottom:1px solid #ccc; list-style-type:none; list-style-position:inside; }
#post_list li:hover { background:#fbfbfb; }
#post_list .list_date, #post_list .cnt { font-size: 11px; }
#post_list .cnt { margin-left: 5px; }

#entry { padding-bottom: 20px; border-bottom: 2px solid #000; }
#entry h2 { padding: 0; margin-top: 30px; letter-spacing: -2px; text-align: center; }

#entry .titleWrap { width: 95%; }
#entry .titleWrap .date { letter-spacing: 2px; text-align: center; margin-top: 30px; font-size: 11px; }
#entry .titleWrap .date_monthday { color: #d1556c; }
#entry .titleWrap .date .category { background: #959595; padding: 2px 5px; border-left: 5px solid #666; color:#fff; margin-right: 5px; text-shadow: 1px 1px #666; }
#entry .titleWrap .admin { letter-spacing: 2px; text-align: center; margin-top: 30px; }

#entry .article { padding: 50px 0; font-size: 15px; }
#entry .article h3 { border-left: 8px solid #666; border-right: 8px solid #666; background: #888; padding: 8px; text-shadow: 1px 1px #666; color: #fff; }
#entry .article pre { padding: 10px; margin: 10px 0; max-width: 738px; overflow-x: auto; overflow-y: hidden; border: 1px solid #b2b2b2; font: 12px/180% Lucida Console; background: #f7f7f7; }
#entry .article ul li { line-height: 200%; }

#entry .moreless_fold { background: url('./images/icon_more.gif') center left no-repeat; color: #000; padding: 0 0 0 20px; }
#entry .moreless_top { background: url('./images/icon_less.gif') center left no-repeat; color: #000; padding: 0 0 0 20px; }
#entry .moreless_bottom { background: url('./images/icon_less.gif') center right no-repeat; color: #666; padding: 0 20px 0 0; text-align: right; }

#entry a.tx-link { font-weight: bold; }
#entry a.key1 { border-bottom: 1px dashed #3a3; font-weight: bold; cursor: pointer; }

#entry .cap1 { max-width: 100%; margin: 10px 0 0; padding: 0; text-align: center; color: #777; font-size: 12px; }

#tagTrail { margin-bottom: 30px; }
#tagTrail .tagText { font-size: 15px; }


/*
 * 트랙백, 댓글, 방명록
 */
#actionTrail { font-size: 15px; }

#trackback { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 0 10px; background: #fafafa; margin-top: 15px; }
#trackback h3 { font-size: 11px; }
#trackback ol { padding: 0; border-top: 1px dashed #eee; }
#trackback ol li { list-style: none; border-bottom: 1px dashed #eee; }
#trackback ol li h4 { margin: 10px 0; }

#commentList, #guestList { margin-top: 20px; }
#commentList img, #guestList img { border-radius: 50%; vertical-align: middle; }
#commentList ol, #guestList ol { list-style: none; padding: 0; margin: 0; }
#commentList ol li, #guestList ol li { padding: 0; border-top: 2px solid #333; margin-bottom: 20px; }
#commentList ol li:hover, #guestList ol li:hover { background: #fafafa; }
#commentList ol li div, #guestList ol li div { border-bottom: 1px solid #ccc; padding: 15px 10px 10px; }
#commentList ol li ul, #guestList ol li ul { list-style: none; padding: 0; margin: 0; }
#commentList ol li ul li, #guestList ol li ul li { border: none; margin-bottom: 0; }

#commentList .control, #guestList .control { float: right; }
#commentList .control a, #guestList .control a { background: #eee; padding: 4px 6px; font-size: 11px; }
#commentList .control a:hover, #guestList .control a:hover { background: #333; color: #fff; }

#commentList .name, #guestList .name { font-size: 14px; font-weight: bold; }
#commentList .date, #guestList .date { float: none; font-size: 12px; }

#commentWrite .name, #commentWrite .password, #commentWrite .homepage,
#guestWrite .name, #guestWrite .password, #guestWrite .homepage { font-size: 12px; max-width: 60%; width: 100%; padding: 5px 0 5px 60px; border: 1px solid #ccc; }

#commentWrite .name, #guestWrite .name { background: url('./images/input_name.gif') 5px center no-repeat; }
#commentWrite .password, #guestWrite .password { background: url('./images/input_password.gif') 5px center no-repeat; }
#commentWrite .homepage, #guestWrite .homepage { background: url('./images/input_homepage.gif') 5px center no-repeat; }

#commentWrite textarea, #guestWrite textarea { width: 100%; border: 1px solid #ccc; padding: 10px; }

#commentWrite input.submit, #guestWrite input.submit { width: 100px; padding: 10px; background: #333; color: #fff; cursor: pointer; border: 1px solid #000;
-moz-transition: .3s;
-webkit-transition: .3s;
-o-transition: .3s;
-ms-transition: .3s;
transition: .3s; }
#commentWrite input.submit:hover, #guestWrite input.submit:hover { background-color: #fff; color: #333; }


/*
 * 리스트의 썸네일을 위한 속성 ( http://www.yongzz.com/view.php?bbs=know&no=9 )
 */
.thumb-box { float: right; margin-top: -3px; width: 50px; height: 50px; border-radius: 20%; border: 1px solid #ccc; overflow: hidden; background: #fff; }
.thumb-box #str { display: none; }
.thumb-box img{ border: 0; width: 50px; height: 50px; border-radius: 20%; }
.thumb-box img.dno{ display: none; }


/*
 * 페이징
 */
#paging { text-align: center; margin: 30px; }


/*
 * 사이드바, 꼬리바
 */
#sidebar { width: 100%; border-top: 2px solid #000; padding-top: 30px; float: right; overflow: hidden; line-height: 160%; }
#sidebar a { color: #666; line-height: 200%; }
#sidebar a:hover { color: #99f; }
#sidebar img { max-width:100% !important; height: auto; border-radius: 5%; }

#sidebar .widget { color: #888; float: left; width: 100%; margin-bottom: 30px; }
#sidebar .widget h3 { font-size: 13px; color: #666; margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc; text-shadow: #eee 1px 1px; }
#sidebar .widget h3 a { line-height: 160%; }

#tailbar { border-top: 1px solid #ccc; padding-top: 20px; }
#tailbar .widget { line-height: 200%; float: left; width: 30%; padding: 0 1.65% 30px; color: #888; font-size: 14px; word-break: break-all; overflow: hidden; }
#tailbar .widget h3 { line-height: 100%; font-size: 20px; color: #666; text-shadow: #eee 1px 1px; }
#tailbar a { color: #666; }
#tailbar a:hover { color: #99f; }

.category_widget { margin: 0; padding: 0 !important; }
.category_widget a { line-height: 200%; }
.category_widget ul { list-style: none; margin: 0; padding: 0; }
.category_widget li { list-style-type: none; list-style-position: inside; }
.category_widget ul li ul li ul li { padding-left: 10px; list-style: none; }
.category_widget ul li ul li ul li:before { content: "\f0da"; font-family: FontAwesome; padding-right: 5px; }

.search { border: 1px solid #ccc; width: 100%; padding: 5px 10px; }

.blog-img { margin-bottom: 30px; }


/*
 * 하단 카피라이트
 */
#footer { font-size: 10px; font-family: verdana; padding: 20px 0; text-align: right; border-top: 1px solid #ccc; color: #aaa; letter-spacing: 2px; }
#footer a { color: #888; }
#footer a:hover { color: #f99; }


/*
 * 반응형 속성
 */
.imageblock { max-width: 100% !important; width: auto !important; height: auto; margin-bottom: 10px; }
.imageblock img { max-width: 100% !important; height: auto; }
.imgblock { display: block; }
.imgblock td { display: block; }
.tt-gallery-box img { max-width: 100%; height: auto !important; }

#header .collapse { display: none; }
#fixed_category { display: none; }
#view-category { display: none; }

@media all and (min-width: 1024px) {
#view-category { display: none !important; }
}

@media all and (max-width: 768px) {
#wrap { padding: 0 10px; }

#header { padding-bottom: 10px; }
#header .default { display: none; }
#header .collapse { display: block; }
#header .collapse h1 { float: left; line-height: 120%; }
#header .collapse button { cursor:pointer; font-size: 21px; border:0; background: transparent; color: #777; text-shadow: 1px 1px #eee; margin: 0; padding: 0; }
#header .collapse #submenu { display: none; margin-top: 5px; }
#header .collapse .blog_menu { text-align: right; }
#header .collapse .blog_menu ul { padding: 0; margin: 0; }
#header .collapse .blog_menu li { list-style: none; list-style-position: inside; padding: 5px 10px; border-right: 5px solid #ccc; background: #fafafa; text-shadow: 1px 1px #eee; margin-bottom: 5px; }

#sidebar .widget, #tailbar .widget { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }

.hide-widget { display: none; }
}

@media all and (max-width: 1023px) {
#header, #content, #sidebar, #footer, #tailbar { max-width: 100%; margin: 0 auto; float: none; clear: both; }

#sidebar .widget, #tailbar .widget { width: 30%; margin-left: 2.5%; float: left; }
#tailbar .widget { padding-left: 0; padding-right: 0; }
.blog-img { display: none; }

#fixed_category { display: block; }

#view-category { position: fixed; background: #fff; bottom: 50px; left: 10px; max-height: 300px; height: 80%; width: 220px; display: none; opacity: 0.95; border: 1px solid #ccc; padding: 10px; overflow-y: auto; z-index: 100; box-sizing: border-box; }
#view-category a { color: #666; line-height: 200%; }
#view-category a:hover { color: #99f; }
}