@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

/* 반드시 들어가야 하는 스타일 시작 */
* {margin:0; padding:0; border:0; cursor: url('images/small.cur'), auto;}
/*comment toggle*/
.comment{display:none;}

body {
  font-family: 'Spoqa Han Sans', 'Sans-serif'; 
  font-size: 8pt;
  color: #737373;
}
.inputFontNavy {font-family: 'Spoqa Han Sans', 'Sans-serif'; font-size:8pt; color:#444f5a} /*Navy*/
.bdBtm {border-bottom: 1px dashed #d9d9d9} /*textarea border*/
a {text-decoration:none; color: #737373}
a:hover {text-decoration:none; }

/* 페이징 - 현재 페이지 */
.paging {margin:25px 0 50px 0;}
.paging .num a{display:inline-block; width:24px; height:24px; border-radius:12px; background-color:#444f5a; }

.prev, .next {display:inline-block; width:24px; height:24px; border-radius:12px; background-color:#444f5a; }
.prev {margin-right:15px}
.next {float:right}
.prev img, .next img {padding:5px 0 0 5px;}
.prev:hover {background-color:#727d88; transition-duration:0.8s}
.next:hover {background-color:#727d88; transition-duration:0.8s}

/* 카테고리 - 이미지 버튼 */
	.ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
	.branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
	.c_cnt                  { font:9px/9px tahoma; letter-spacing:0px; color: #717171; }

/* 달력 월 표시 */
	.cal_month              { font:0.95em Verdana, Helvetica, Arial, Gulim, sans-serif;  height:18px; }
/* 달력 요일 표시(th 영역) */
	.cal_week1              { font:0.95em Dotum, Arial, sans-serif;  height:18px;  font-weight:normal;}
/* 달력 일요일 표시(th 영역) */
	.cal_week2              { font:0.95em Dotum, Arial, sans-serif; }

/* 달력 Week(tr 영역)  */
	.cal_week               { }
	.cal_current_week       { }
/* 달력 Day(td 영역) */
	.cal_day                { height:16px; color:#A3A3A3; font:10px/10px tahoma; text-align:center; }
/* 달력 Day, 일요일 (td 영역)  */
	.cal_day_sunday         { }
	.cal_day_sunday a		{ }
/* 달력 지난 달 날짜 표시(td)   */
	.cal_day1               { }
/* 달력 다음 달 날짜 표시(td)   */
	.cal_day2               { }
/* 달력 이번 달 날짜 표시(td) */
	.cal_day3               { }
/* 달력 오늘 날짜 표시(td) */
	.cal_day4               { background:url(images/bg_today.gif) no-repeat 5px 2px; color:#fff; }
/* 달력 글쓴 날 링크 스타일 */
	a.cal_click:link        { }
	a.cal_click:visited     { }
	a.cal_click:hover       { }

/* 종류별 코멘트 [##_rp_rep_class_##] */
	.rp_general             { }
	.rp_admin               { background:url(images/iconAdmin.gif) no-repeat;  padding-left:20px; }
	.rp_secret              { color:#f30;}
/* 종류별 방명록 글 [##_guest_rep_class_##] */
	.guest_general          { }
	.guest_admin            { background:url(images/iconAdmin.gif) no-repeat; padding-left:20px;}
/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
	.hiddenComment { background:url(images/iconSecret.gif) no-repeat;  padding-left:20px;  font-weight:normal;}

/* 이미지 아래 캡션 스타일 */
	.cap1                   { color:#999;  text-align:center; padding:4px 0; margin:0;}
/* 그림 */
	.imageblock             { margin:5px 0;}
/* 왼쪽 */
	.left                   { }
/* 가운데 */
	.center                 { }
/* 오른쪽 */
	.right                  { }
/* 그림 2개 배치 */
	.dual                   { margin-bottom:5px;}
/* 그림 3개 배치 */
	.triple                 { margin-bottom:5px;}

/* 본문 - more / less */
	.moreless_fold, .moreless_top, .moreless_bottom {color:#424242; font:12px tahoma; text-decoration:underline; }
	.moreless_fold {margin-top:18px; padding-left:14px; background:url(images/iconMore.gif) no-repeat left 5px; }
	.moreless_top {margin-top:18px; padding-left:14px; background:url(images/iconLess.gif) no-repeat left 5px; }
	.moreless_content {margin:5px 0 2px 0; }
	.moreless_bottom {padding-right:14px; background:url(images/iconLess.gif) no-repeat right 5px; text-align:right; }

/* 키워드 */
	.key1 { cursor: pointer; border-bottom: 1px dotted #ccc; }

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */

/* mobile */
@media all and (min-width : 320px) and (max-width : 589px) {
	body {font-size:10pt;-webkit-appearance:none;}
	#tistorytoolbarid {display:none;}
	#container {width: 290px; margin: 0 auto; padding: 15px;}
	#header {width:290px; padding: 10px 0; text-align:center}
	#content {width: 290px; clear:both}
	#sidebar {display:none; width:290px; margin-top:10px}
	#sidebar a{float:left; margin-right: 5px; }
	#sidebar #toggle{float:right; margin-right: 0px;}
	#sidebar .sGuest{background:#444f5a}
	#sidebar .search {display:none; width:290px; clear:both; text-align:center;}
	#sidebar .search .sInput {width:260px; height:25px; }
	#sidebarBtn {width:290px; text-align:center; color:#ffc8c8;}
	
	#content .searchList { padding-top:30px}
	#content .searchList ol li>a {width: 200px;}
	
	.commentList li {font-size:9pt;}
	.commentList li .rp_general {margin:10px 0}
	
	.guestInput {height:30px; color: #444f5a;}
	.commentWrite .cName {width:140px;}
	.commentWrite .cHome {width:260px;}
	.commentWrite textarea {width:100%; height:50px; border:1px dashed #d9d9d9;}
	.commentSubmit {float:right; display:inline-block; padding:5px 10px; border-radius:0 0 5px 5px; -webkit-appearance:none; background-color:#dddddd}
	
	.guestWrite {margin-bottom:25px}
	
	.titleWrap {text-align:center; margin-top:20px}
	.titleWrap p {display:none;}
	.titleWrap .date {display:block; width:290px;}

	.secret {padding-top:20px}
	
	.guestList{font-size:9pt}
	.guestWrite .guestInputHome {width:250; height:30px; margin-right:10px; color: #444f5a;}
}

/*PC & Pad*/
@media all and (min-width : 590px) {
	#container {width: 560px; margin: 0 auto; padding: 15px;}
	#header {clear:both; width:510px; padding: 50px 0 40px 0;}
	#content {width: 510px; letter-spacing: 0.8px; line-height: 25px; margin-right:15px; float: left;}
	#sidebar {float:right; width:35px;}
	#sidebar .sGuest{background:#444f5a}
	#sidebar .search { display:none; text-align:center; color: #FFF; margin-bottom:15px; width:110px;}
	#sidebar .search .sInput {display:inline; width:80px; height: 25px; float:left; border-bottom:1px dashed #d9d9d9; color: #444f5a;
  font-size: 8pt;}

	#sidebarBtn {display:none;}
	.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
	}
	.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
		-webkit-animation-name: hvr-bob-float, hvr-bob;
		animation-name: hvr-bob-float, hvr-bob;
		-webkit-animation-duration: .3s, 1.5s;
		animation-duration: .3s, 1.5s;
		-webkit-animation-delay: 0s, .3s;
		animation-delay: 0s, .3s;
		-webkit-animation-timing-function: ease-out, ease-in-out;
		animation-timing-function: ease-out, ease-in-out;
		-webkit-animation-iteration-count: 1, infinite;
		animation-iteration-count: 1, infinite;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
		-webkit-animation-direction: normal, alternate;
		animation-direction: normal, alternate;
	}
	
	#content .searchList ol li>a {width: 440px;}
	.guestInput {height:20px; margin-right:10px; color: #444f5a;}
	.cName, .cPw, .cHome {width:150px;}
	.cHome {margin-right:0px}
	.commentWrite textarea {width:100%; height:50px; border-bottom:1px dashed #d9d9d9;}
	
	.titleWrap p{float:left}
	
	.secret {padding-top:50px}
	.guestWrite .guestInputHome {width:180; height:20px; margin-right:10px; color: #444f5a;}
}

#sidebar .submit {float:right;margin: 0; padding: 0; text-align: right; border: none; background: url('images/side_search.png') no-repeat left top; width:25px; height:25px; transition-duration:0.5s;}
#sidebar .submit:hover {background: url('images/side_search_hover.png') no-repeat left top;margin-left:5px; transition-duration:0.5s;}

#category {overflow: hidden;}
#category ul {padding:0; margin:0; list-style-type:none;}
#category ul li a {display:none;}
#category ul li ul li {float: left; margin-right: 10px;}
#category ul li ul li:last-child {margin-right: 0px;}
#category ul li ul li a {display: block; background: #ffc8c8; color: #ffffff; padding: 5px 9px; border-radius: 10px;}
#category ul li ul li a:hover {background:#444f5a; color:#ffc8c8; transition-duration:0.8s}

/*sidebar*/
#sidebar a {display: block; background: #d9d9d9; width: 15px; height: 15px; padding: 10px; border-radius: 30px; margin-bottom: 15px;}

@-webkit-keyframes hvr-bob {
  0%   {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
  50%  {-webkit-transform: translateY(-4px); transform: translateY(-4px);}
  100% {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
	}
	@keyframes hvr-bob {
		0%   {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
		50%  {-webkit-transform: translateY(-4px); transform: translateY(-4px);}
		100% {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
	}
	@-webkit-keyframes hvr-bob-float {100% {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
	}
	@keyframes hvr-bob-float {100% {-webkit-transform: translateY(-8px); transform: translateY(-8px);}
}



/* content */
#content .entry .titleWrap .date{color:#3e4149; float:left; margin-right:20px}
#content .entry .titleWrap a {display:il}
#content .article a{border-bottom:1px dashed #ffc8c8; transition-duration:0.5s;}
#content .article a:hover{font-style:italic;color:#ffc8c8;transition-duration:0.5s;}
.titleWrap {margin-bottom:30px; color:#3e4149;}
.titleWrap a{color:#3e4149;}
.titleWrap .date {float:left; margin-right:15px; font-style:italic;}

/*content - protected post*/
.secret {text-align:center;}
.secret>img {padding-bottom:15px;}
.secret>input {text-align:center; width:100px; height:25px; margin:30px 0 5px 0;}
.secret .submit {
	background:url('images/article_submit.png') no-repeat 7px; 
	background-color:#ffc8c8;
	width:30px;
	height:30px;
	border-radius:20px;
	transition-duration:0.5s;
}
.secret .submit:hover{background-color:#444f5a; transition-duration:0.5s;}

/*content - article list*/
#content .searchList ol li {list-style-type:none; height: 50px;}
#content .searchList ol li>a {display:inline-block; height:11px; text-overflow: ellipsis;}
#content .searchList ol li span.date {display:inline-block; width:70px; float:right; text-align:right; color:#d9d9d9;}

/*comment - write form*/
.entry .actionTrail {margin:30px 0 15px 0; text-align:center; }
.entry .actionTrail .cnt {color:#444f5a; font-size:7pt; line-height:8px}
.commentList {border-top:1px dashed #d9d9d9; padding: 5px 0;}
.commentSubmit {float:right; display:inline-block; padding:5px 10px; border-radius:0 0 5px 5px;}
input[type=checkbox] {display:none;vertical-align: bottom;}
input[type=checkbox] + label{
	background: url('images/write_secret.png') no-repeat;
	height: 20px;
	width: 20px; 
	display:inline-block; 
	padding: 0;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	vertical-align: bottom;
}
input[type=checkbox]:checked + label{
	background: url('images/write_secret_checked.png') no-repeat; 
	height: 20px; 
	width: 20px; 
	display:inline-block;
	padding: 0;
	transition-duration:0.5s;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	vertical-align: bottom;
}

/*comment- list*/
.commentList ol>li:first-child {margin-top:25px;}
.commentList li {list-style-type:none; margin-bottom:15px}
.commentList li .rp_admin {list-style-type:none; padding:0; margin:0;}
.commentList li .name {color:#444f5a; padding:0; margin:0;}
.commentList li .tistoryProfileLayerTrigger {display: none;}
.commentList li .control a{display:inline-block; float:right; margin-right:10px; color:#d9d9d9;}
.commentList li .date {float:right; color:#ffc8c8;}
.commentList li ul li {list-style:none;}
.commentList li ul li .rp_admin {margin-left:15px;}
.commentList li ul li .rp_general {margin-left:15px;}
.commentList li ul li span.name a{color:#444f5a;}

/*guest - write*/
.guestWrite .guestInfo {width:510px height:100px; text-align:center; padding:40px 0}
.guestWrite .guestInfo img {padding-bottom:15px;}
.guestWrite .guestInputHome {margin-right:10px; color: #444f5a;}
.guestWrite textarea {width:100%; height:200px; border-top:1px dashed #d9d9d9}

/*guest - comment*/
.hiddenComment .name:before{content:"S E C R E T";}

.guestList {margin-top:50px}
.guestList li .guest_secret, .guestList li .hiddenComment {padding:0}
.guestList li:first-child {margin-top:10px;}
.guestList li {list-style-type:none; margin-bottom:15px}
.guestList li .tistoryProfileLayerTrigger {display: none;}
.guestList li .name {color: #444f5a;}
.guestList li .guest_admin .name a, .name{color: #444f5a;}
.guestList ol .guest_secret .name a{color: #444f5a;}
.guestList li .date {float:right; color:#ffc8c8;}
.guestList li .control a{float:right;margin-right:10px;color:#d9d9d9;}
.guestList ol li ul li .guest_secret {padding-left:20px}
.guestList ol li ul li .guest_secret .name a, .name{color: #444f5a;}
	
::-webkit-scrollbar-track{background-color: #F5F5F5;}
::-webkit-scrollbar{width: 5px;	background-color: #F5F5F5;}
::-webkit-scrollbar-thumb{background-color: #ffc8c8;}


/* Float 버그 */
.floatWrapper:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.floatWrapper {display: inline-block;}
/* Hides from IE-mac \*/
* html .floatWrapper {height: 1%;}
/* End hide from IE-mac */