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

/* 카테고리 - 이미지 버튼 */
.ib                     { cursor:pointer;}
/* 카테고리 - 트리 셀 */
.branch3                { cursor:pointer;}
/* 카테고리 - 카테고리 옆 개수 스타일 */
	.c_cnt                  { letter-spacing:0px; color: #717171; }
/* 이미지 아래 캡션 스타일 */
.cap1                   { color:#999;  text-align:center; padding:4px 0; margin:0;}
/* 그림 */
.imageblock             { margin:5px 0;}
/* 그림 2개 배치 */
.dual                   { margin-bottom:5px;}
/* 그림 3개 배치 */
.triple                 { margin-bottom:5px;}

/* 비밀 댓글 (로그아웃시 비밀글 표현)    */
.hiddenComment .name:before {content:"S E C R E T";}

/* 페이징 - 현재 페이지 */
.paging {clear:both; width:100%; text-align:center; margin:30px 0}
.prev { transition-duration:0.8s; padding-right:10px}
.next {transition-duration:0.8s; padding-left:10px}
.prev:hover {transition-duration:0.8s; color:#BDBDBD}
.next:hover {transition-duration:0.8s; color:#BDBDBD}

/* 본문 - more / less */
.moreless_fold {margin-top:18px; padding-left:5px;}
.moreless_top {margin-top:18px; padding-left:5px;}
.moreless_content {margin:5px 0 2px 0; }
.moreless_bottom {text-align:right; }

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

/* 반드시 들어가야하는 스타일 끝 - 이 아래는 자유롭게 추가, 삭제 가능 */
/*reset*/
* {margin:0; padding:0; border:0;}
body { font-family: 'Spoqa Han Sans', 'Sans-serif'; font-size: 8pt; color: #222222; background-color: #9adaec;}
li   { list-style-type: none; }
a:link    { text-decoration: none;}
a:visited { text-decoration: none;}
a:active  { text-decoration: none;}
a:hover   {text-decoration: none;}

.category ul li .link_item img {width: 10px;} 
.inputFont { font-family: 'Spoqa Han Sans', 'Sans-serif'; font-size: 8pt; letter-spacing: -1px; }

/*media query*/
@media screen and (min-width:905px) {
	#container { margin: 60px auto 0; padding-top: 60px; width: 900px; height: 545px; position: relative; z-index: 8;}
	#content   { margin: 0 52px;  width: 800px; height: 540px; position:relative; overflow: auto; overflow-x: hidden;  }
	#footer    { position: relative; z-index: 9; width: 900px; height: 55px; }
	#footer nav ul li.topBtn { display: none; }
}

@media screen and (max-width:904px) { /* width */
	#container { margin: 60px auto 0; padding-top: 60px; width:98%; height: 545px;position: relative; z-index: 8; }
	#content   { margin: 0 2%; width: 96%; height: 489px; position: relative; overflow: auto; overflow-x: hidden; display:block; }
	#footer    { position: relative; z-index: 9; width: 100%; height: 55px; }
	#footer nav ul li.topBtn { display: none; }
}

@media screen and (max-width:904px) and (max-height:664px) { /*footer fixed*/
	#container { margin: 35px auto 0 auto; padding-top: 40px; width:98%; height:100%; position: relative; z-index: 8; }
	#content   { margin: 0 2% 55px 2%; width: 96%; height:100%; position: relative; overflow: auto; overflow-x: hidden; display:block; }
	#footer    { position: fixed; bottom:0px; width: 98%; height: 55px; }
	#tistorytoolbarid {display: none;}
	#footer nav ul li.topBtn { display: block; }
}

@media screen and (min-width:500px) { /*guest width*/
	.guestWrite { display: block; float: left; width: 50%; max-width: 392px; position:fixed; }
	.guestList  { display: block; float: right; width: 50%;}
	.guestWrite textarea { width: 90%; max-width:100% }
}

@media screen and (max-width:499px) { /*guest width*/
	.guestWrite, .guestList { display: block; }
	.guestWrite textarea    { width: 95%; max-width:100% }
}

@media screen and (max-width:335px) { /*searchList title ellipsis*/
	.searchList ol li a { width: 60%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
}


/*container*/
#container { border-radius: 3px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.16); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.16);  box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.16); }

/*header*/
#header { width: 217px; overflow: hidden; color: #222; position: absolute; z-index: 10; top: -29px; left: 30px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.1); }
#header .profile-img  { float: left; cursor:pointer;}
#header .profile-img img { width:58px; height:57px; }
#header .profile-name { float: right; display: block; width: 159px; height: 55px; text-align: center; line-height: 55px; font-weight: 600; border-bottom: 2px solid #283c63; cursor:default;}

/*header - category*/
.category {display:none; clear: both; position:relative; z-index: 10; }
.category ul { list-style-type:none;}
.category ul li .link_tit {display:none} /*그룹카테미출력*/
.category ul li ul li a {position:relative; display:block; padding:15px 10px 15px 25px; letter-spacing:3px; color: #283c63; font-size:9pt; font-weight:500; }
.category ul li ul li a, .category ul li ul li a:after, .category ul li ul li a:before { transition: all .5s; }
.category ul li ul li a:hover { color: #ffffff; }
.category ul li ul li a:after { display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 100%; height: 1px; content: '.'; color: transparent; background: #9adaec; visibility: none; opacity: 0; z-index: -1;}
.category ul li ul li a:hover:after { opacity: 1; visibility: visible; height: 100%; }

/* content - entryProtected */
.entryProtected { width:100%; text-align: center; margin:50px auto ;}
.entryProtected h2 { padding-bottom:5px; }
.entryProtected h2 a { color: #283c63; font-weight: 600; }
.entryProtected .date { padding-bottom: 20px; margin-bottom: 20px; color: #a9a9a9; font-style:italic; }
.entryProtected .passsword { margin-bottom:20px; border: none; border-bottom: 2px solid #ededed; width: 150px; height: 15px; text-align:center; }
.entryProtected .passEnter { background-color: #ffffff; font-size: 10pt; color: #9adaec; }

/*content - searchList */
.searchList ol li { border-bottom: 1px solid #ededed; padding: 12px 0;}
.searchList ol li a { color: #222222; transition: all .5s; display:inline-block;}
.searchList ol li a:hover { color: #9adaec; transition: all .5s; }
.searchList ol li .date { display:inline-block; float: right; color: #a9a9a9; font-style:italic; margin-right:2px; }

/*content - titleWrap*/
.titleWrap { overflow:hidden; }
.titleWrap img  { float: left; margin:3px 10px 40px 0; }
.titleWrap h2   { margin-left: 21px;}
.titleWrap h2 a { color: #283c63; font-weight: 600; }
.titleWrap .date { float: left; margin: 5px 15px 40px 0; color: #a9a9a9;}
.titleWrap .cate { margin: 5px 15px 40px 0; color: #a9a9a9;}
.titleWrap .cate a { color: #a9a9a9; }
.titleWrap .admin {width: 100%; text-align: center; margin: 10px 0 20px 0;}
.titleWrap .admin a { color: #00b7ef; }

/*content - article*/
.article { font-size: 9pt; color: #222222; letter-spacing: -1px; text-align:justify; }

/*content - comment */
.cnt {display: block; width: 100%; padding: 5px 3px 5px 0; color: #00b7ef;}
.commentWrite { display: block; width: 100%; border-top: 1px solid #ebebeb; padding: 10px 0; }
.commentWrite input { margin-right: 5px; height:20px; border: none; border-bottom: 1px solid #283c63; color: #283c63; float: left; }
.commentWrite textarea { background-color: #f7f7f7; width: 100%; margin-top:10px; }
.commentWrite .replySubmit { margin-top:10px; padding:3px 0; background-color: #ffffff; width: 100%; color: #00b7ef; transition: all .5s; }
.commentWrite .replySubmit:hover {background-color: #00b7ef; color: #ffffff; transition: all .5s; }
.guest-checkbox { display:block; margin: 5px 0 0 5px; color: #283c63; font-size: 12pt; }
.guest-checkbox input[type="checkbox"], .guest-checkbox .checked {display: none; }
.guest-checkbox input[type="checkbox"]:checked ~ .checked{display: inline-block; }
.guest-checkbox input[type="checkbox"]:checked ~ .unchecked{display: none; }

.commentList ol li { border-top: 1px solid #ebebeb; padding: 30px 0 0 0; }
.commentList ol li .name   { color: #00b7ef; margin-right:10px; }
.commentList ol li .name a { color: #00b7ef; }
.commentList ol li .date   { color: #ededed; }
.commentList ol li .date a { color : #ededed; margin-left: 10px; }
.commentList ol li .control a { color : #ededed; margin-right:10px; }
.commentList ol li .control a:hover { color: #283c63 }
.commentList ol li p { font-size: 9pt; letter-spacing: -1px; text-align:justify; padding: 5px 0 30px 0; }
.commentList ol li ul li { padding:30px 15px 0 30px; }

/*content - guestbook*/
.guestbook  { overflow: hidden; width: 100%; }
.guestWrite .gwl  { display: block; margin-bottom: 10px; font-size: 9pt; }
.guestWrite input { height: 20px; margin-bottom: 15px; color: #222222; border: none; border-bottom: 1px solid #283c63; ;}
.guestWrite textarea { margin-bottom: 25px; width: 90%; max-width: 90%;color: #222222; border: none; border-bottom: 1px solid #283c63; }
.guestWrite button   { margin-bottom: 25px; background-color: #ffffff; font-size: 10pt; color: #00b7ef; padding: 3px 5px; border: 1px solid #00b7ef; }

.guestList ol li { border-top: 1px solid #ebebeb; padding:30px 0 0 0; }
.guestList ol li .name   { color: #00b7ef; margin-right:10px; }
.guestList ol li .name a { color: #00b7ef; }
.guestList ol li .tistoryProfileLayerTrigger {display:none;}
.guestList ol li .date   { color: #ededed; }
.guestList ol li .date a { color : #ededed; margin: 0 10px; }
.guestList ol li .control a { color : #ededed; margin-right:10px; }
.guestList ol li .control a:hover { color: #283c63 }
.guestList ol li p { font-size: 9pt; letter-spacing: -1px; text-align:justify; padding: 5px 0 30px 0; }
.guestList ol li ul li { padding:30px 15px 0 30px; }
.guestList ol li ul li .control a   { margin-left:10px; }
.guestList ol li ul li .guest_admin { background-color: #fff; }

/*footer*/
#footer { margin: 0 auto; border-radius: 0 0 3px 3px; background-color: #ffffff; border-top: 1px solid #ebebeb; }
#footer nav    { overflow:hidden;}
#footer nav ul { float:right; list-style-type:none;}
#footer nav ul li  {float:left;  position: relative;  font-size:12pt; color: #ebebeb;}
#footer nav ul li a { display:block; padding: 19px 20px; color: #ebebeb; }
#footer nav ul li:hover  { border-top: 3px solid #00b7ef; transition: all 0.1s; color: #00b7ef;}
#footer nav ul li.search { display: none; width: 200px; height:44px; text-align: center; }
#footer nav ul li.search:hover {border: none; }
#footer .searchForm { margin-top:5px; border:none; border-bottom: 2px solid #ededed; width: 100%; height: 20px;}
#footer button { margin-top:5px; padding:3px 0; font-size: 9pt; background-color: #ffffff; width: 100%; color: #00b7ef; transition: all .5s; }
#footer button:hover {background-color: #00b7ef; color: #ffffff; transition: all .5s; }


::-webkit-input-placeholder { color: #283c63; font-size: 8pt;  transition: opacity 250ms ease-in-out; }
:focus::-webkit-input-placeholder {opacity: 0.5;}
:-ms-input-placeholder { color: #283c63; font-size: 8pt; }
::-moz-placeholder { color: #283c63; font-size: 8pt; }
:-moz-placeholder  { color: #283c63; font-size: 8pt; }
::selection          { background:#00b7ef; color: #FFF; text-shadow: none; }
::-moz-selection     { background:#00b7ef; color: #FFF; text-shadow: none; }
::-webkit-selection  { background:#00b7ef; color: #FFF; text-shadow: none; }
::-webkit-scrollbar  { width: 5px;background-color: #F5F5F5; }
::-webkit-scrollbar-track { background-color: #F5F5F5;}
::-webkit-scrollbar-thumb { background-color: #E7E7E7; }