/* 배경 */
html {background: #edeced; }


::selection {color: #d3c4e3; background: transparent; } /* 드래그 색 */

::-webkit-scrollbar {display: none; } /* 스크롤 바 */

*{-webkit-tap-highlight-color: transparent;} /* 모바일 터치 영역 */




@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

body {word-break: break-all; font-family: 'Noto Sans KR', sans-serif; font-size: 8pt; color: #666; }

.load {display: none; } /* FOUC 현상 방지용. 삭제하지마세요 */

* {border: 0px; padding: 0px; margin: 0px; }
ul, li {list-style: none; } /* 기본적으로 불릿 생성됨 */




/* 링크 */
a {text-decoration: none; color: #666; } 
.article a:hover {color: #e8dff2; transition-duration: 0.2s; cursor: pointer; }


/* 기본 입력란 */
.inputFontGray:focus {outline-color: #b28bdb; }

.inputFontGray {
-webkit-appearance:none;
color: #666; font-size: 8pt;
width: 120px; height: 20px; 
border: 1px solid rgba(149,149,149,0.2); }

input::-webkit-input-placeholder {
color: rgba(149,149,149,0.3); font-size: 6pt; letter-spacing: 0.5px; 
padding-left: 10px; } 
input::-moz-placeholder {
color: rgba(149,149,149,0.3); font-size: 6pt; letter-spacing: 0.5px;
padding-left: 10px; }
input::-ms-placeholder {
color: rgba(149,149,149,0.3); font-size: 6pt; letter-spacing: 0.5px;
padding-left: 10px; }



/*******************************************************************************/

/* 모바일 */
@media all and (min-width: 320px) and (max-width: 599px) {
	
html {background: #e6e6e6; } /* 피씨랑 색감이 달라서 배경색 따로 지정 */

#container {
position: fixed; top: 4%; left: 4%; 
width: 92%; height: 90%;
background: ;
border: 0px solid rgba(149,149,149,0.3); }	
	
#main {
width: 92%; height: 3%;  
background: #fff; 
border-bottom: 1px dashed rgba(149,149,149,0.3);
padding: 3% 4%; }	
	
#content {
width: 92%; height: 88.4%; overflow-y: scroll;
background: #fff;
padding: 4%; } 
	
.gallery {width: 31.3% !important; }

} /* <- 지우면 반응형 깨짐. 되도록 수정하지마세요 */



/* 패드 */
@media all and (min-width: 600px) and (max-width: 1023px) {

html {background: #e6e6e6; } /* 피씨랑 색감이 달라서 배경색 따로 지정 */

#container {
position: fixed; top: 4%; left: 17%; 
width: 66%; height: 85%;  
background: ;
border: 0px solid rgba(149,149,149,0.3); }	
	
#main { 
width: 92%; height: 3%;
padding: 2.8% 4% 0.5%; 
background: #fff; 
border-bottom: 1px dashed rgba(149,149,149,0.3); }	

.category {font-size: 8pt !important; }	
	
#content {
width: 92%; height: 89.4%; overflow-y: scroll;
background: #fff;
padding: 4%;} 
	
.gallery {width: 31.6% !important; }

} /* <- 지우면 반응형 깨짐. 되도록 수정하지마세요 */

/*******************************************************************************/



/* 컴퓨터 */
@media all and (min-width: 1024px) {

/* 모바일 관리자 아이콘 */
.tab_admin {display: none;} 
	
#container {
position: relative;
width: 460px;
border: 1px solid rgba(149,149,149,0.3); border-radius: 0px; 
background: rgba(255,255,255,1); 
margin: 5% auto; }

#main {
display:inline-block;
position: relative; 
width: 430px; 
background: rgba(195,195,195,0); 
border-bottom: 1px dashed rgba(149,149,149,0.3); border-radius: 0px;
padding: 12px 15px; } 
	
#content {width: 430px; background: rgba(195,195,195,0); padding: 15px; }
	
}	/* <- 지우면 반응형 깨짐 */	



/* 메인 메뉴 아이콘 */
#main i {color: #999; opacity: 0.8; cursor: pointer; }
.menuicon i {float: left; font-size: 10pt; margin-right:12px; }


/* 모바일 관리자 창 */
.mobile {display: none; }

.back {
position: fixed; z-index: 2; top: 0; left: 0; 
width: 100%; height: 100%; 
background: rgba(0,0,0,0.7); }

.admincategory {
position: fixed; z-index: 3; top: 40%; left: 50%; transform: translate(-50%, -50%); 
text-align: center; font-size:pt; 
width: 150px; 
background: rgba(255,255,255,1); 
border-radius: 10px; border: 1px solid rgba(149,149,149,0.4); }

.admincategory, .admincategory a, .admincategory i {color: #666 !important; }

.admincategory a {display: block; width: 100%; height: 100%; }

.admincategory li {
background: rgba(255,255,255,0); 
border-bottom: 1px solid rgba(149,149,149,0.4);
padding: 10px 10px; }

.admincategory li:last-child {border-bottom: 0px; }


/* 검색창 */
.searchInput {float: right; height: auto; } 


/* 카테고리 아이콘 */
.categoryicon {float: right; font-size: 11pt; margin-left: 15px; }

/* 카테고리 */
.category {
display: none; 
position: absolute; z-index: 1; top: 36px; right: 0px; 
font-size: 7pt; letter-spacing: 0.5px;/* 자간 */ 
width: 100px; overflow:hidden;
background: rgba(255,255,255,1); 
border: 1px solid rgba(149,149,149,1); border-bottom: 0px; 
box-shadow: -2px 2px 2px rgba(149,149,149,0.4); }

.category, .category a, .category i {color: #666 !important; }

.category a {display: block; width: 100%; height: 100%; }

.category li {
border-bottom: 1px solid rgba(149,149,149,1); 
padding: 7px 10px; 
transition-duration: 0.2s; cursor: pointer; }

.category li:hover {background-color: #e8dff2; transition-duration: 0.2s; }

.secret {background: #e8dff2; }

.secret li:hover {background: #d1bde3 !important; } 


/* 카테고리명+글 갯수 */
.catename {
text-align: center; font-size: 6pt; font-weight: 700; color: #8f68bf;
margin: 5px 0 20px;   }



/* -----리스트형----- */
.list img {display: none; }

.list {
position: relative; 
width: 100%; height: 45px;
border-bottom: 1px dotted rgba(149,149,149,0.3); 
transition-duration: 0.2s; } 

.list:nth-child(2) {border-top: 1px dotted rgba(149,149,149,0.3); }

.list a {display: block; width: 100%; height: 100%;}

.list:hover {background: #ecdff5; transition-duration: 0.2s; }

/* 제목, 날짜 */
.list .title p {
position: absolute; top: 50%; left: 5%; transform: translate(-0%, -50%);
-ms-transform: translate(-0%, -50%);
overflow: hidden;
font-size: 8pt;	font-weight: ; color: #888;
white-space: nowrap; max-width: 90%; text-overflow: ellipsis;
cursor:pointer; }

.list .title .date {
position: absolute; top: 50%; right: 5% !important; transform: translate(-0%, -50%);
-ms-transform: translate(-0%, -50%);
font-size: 6pt; color: #999;
white-space: nowrap;
cursor:pointer; }



/* -----갤러리형----- */
.gallery img {
width: 100%; height: 100%;
border-radius: 0px;
cursor: pointer; }

.gallery .thumbimg {position: absolute; top: 0; left: 0; }

.gallery {
float: left;
position: relative;  
width: 31.94%; /* 썸네일 가로 비율 */
background: ;
margin: 3px; } 

.gallery:hover img {-webkit-filter: grayscale(0) brightness(0.4);
														filter: grayscale(0) brightness(0.4); }

/* 제목, 날짜 */
.gallery .title {
position: absolute; 
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff; font-size: 6pt; font-weight: 700;  
white-space: nowrap; max-width: 80%; overflow: hidden; text-overflow: ellipsis; 
opacity: 0; cursor: pointer; }

.gallery:hover .title {opacity: 1; }



/* 보호글 */
.protected {margin: 70px auto; }
.protectedwrap {text-align: center; }
.passwordInput {margin: 30px auto 0; }


/* 본문 */
.titlewrap  {
border-bottom: 0px solid rgba(149,149,149,0.2);
padding-bottom: 7px; margin: 10px 0 30px 0;  }

.titlewrap .title .tc {color: #8f68bf; font-size: 8pt; font-weight: 700; }
.titlewrap .title .t {color: #777; font-size: 8pt; font-weight: 700; padding-left: 3px; }

.titlewrap .admin {float: right; color: red; }
.titlewrap .admin a {color: red; }

.article img {max-width: 100% }

.article {line-height: 2; text-align: justify; } /* 줄 높이, 양쪽 정렬 */


/* 더보기 접기 */
.moreless_fold span {
color: #fff; 
background: #d1bde3; 
border-radius: 5px;
padding: 2px 5px; }

.moreless_content {
font-size: 8.5pt; 
background: #F6F6F6;
border: 1px dashed #D5D5D5; 
padding: 8px; margin: 7px 0; }

.moreless_top, .moreless_bottom {text-align: right; }

.moreless_top span, .moreless_bottom span {
color: #fff;  
background: #d1bde3; 
border-radius: 5px;
padding: 2px 5px; }
.moreless_top {display: none; }


/* 댓글액션 */
.article {position: relative; }

.actiontrail { 
position: absolute; bottom: -5px; left: 0;
color: #777; font-size: 6pt;
opacity: 0.5; cursor: pointer; }
.actiontrail:hover {color: #e8e2ef; transition-duration: 0.2s; } 


/* 댓글 div */
.comment {margin-top: 20px; }

/* 비로그인 입력 메뉴 */
.secretcontainer {display: inline-block; width: 100%; margin-bottom: 5px; }
.nameInput, .passInput {width: 40.5%; }
.secretcheck {float: right; margin-left: 5px; }

/* 댓글 입력란 */
.guestInput {
width: 82.5%; height: 58px; 
background: #fff; 
resize: vertical; }

/*댓글 등록 버튼*/
.guestSubmit { 
float: right; 
width: 16%; height: 60px; 
color: #999; font-size: 9pt; 
background: #fff; 
border: ; }


/* 댓글 리스트 */
.commentlist {border-bottom: 1px dotted rgba(149,149,149,0.4); margin-top: 35px; }
.commentlist li {border-top: 1px dotted rgba(149,149,149,0.4); margin: 0px 0; } 

.commentlist ol li ul li {padding-left: 35px; } /* 대댓글 */

/* 댓글 하나당 */
.rp_general, .rp_secret, .rp_admin {margin: 15px 0; } 

.commentlist .comment-title {margin-bottom: 6px; }

.rp_general .name, .rp_secret .name {
color: #fff; 
background: #cdcdcd;
border-radius: 5px;
padding: 1px 4px; }

.rp_admin .name {
color: #fff; 
background: #d1bde3;
border-radius: 5px;
padding: 1px 4px; } 
.rp_general .name a, .rp_secret .name a, .rp_admin .name a {color: #fff; }

.hiddenComment .name:before {content: "SECRET"; } /* 비밀댓글 로그아웃시 표현 */

.commentlist .date {color: #999; font-size: 6pt; padding-left: 5px; }

.commentlist .control a {float: right; color: #999; font-size: 6pt; } /* 수정,삭제 */

.commentlist  p {color: #666; text-align: justify; margin: 0px 0; } /* 댓글 내용 */


/* 방명록 */
.guest-text {font-weight: 700; margin: 5px 0 10px 3px; }

.guestlist {border-bottom: 1px dotted rgba(149,149,149,0.4); margin-top: 35px; }
.guestlist li {border-top: 1px dotted rgba(149,149,149,0.4); margin: 0px 0; } 

.guestlist ol li ul li {padding-left: 35px; } /* 대댓글 */

/* 댓글 하나당 */
.guest_general, .guest_secret, .guest_admin {margin: 15px 0; } 

.guestlist .guest-title {margin-bottom: 6px; }

.guest_general .name, .guest_secret .name {
color: #fff; 
background: #cdcdcd;
border-radius: 5px;
padding: 1px 4px; }

.guest_admin .name {
color: #fff; 
background: #d1bde3;
border-radius: 5px;
padding: 1px 4px; } 
.guest_general .name a, .guest_secret .name a, .guest_admin .name a {color: #fff; }

.guestlist .date {color: #999; font-size: 6pt; padding-left: 5px; }

.guestlist .control a {float: right; color: #999; font-size: 6pt; } /* 수정,삭제 */

.guestlist  p {color: #666; text-align: justify; margin: 0px 0; } /* 댓글 내용 */


/* 페이징 */
.paging {
display: inline-block;
position: relative; 
text-align: center;
width: 100%;
margin: 45px 0 15px; }

.paging a.num span {color: rgba(149,149,149,0.8); font-size: 8pt; cursor: pointer; }
.paging a.num span.selected {
font-weight: 700;
border: 2px solid #e8dff2; border-radius: 8px;
padding: 1px 5px; }

.prev {color: rgba(149,149,149,0.8); padding-right: 15px; transition-duration: 0.2s; }
.prev i {cursor: pointer; }
.prev:hover {color: #e8e2ef; transition-duration: 0.2s; }

.next {color: rgba(149,149,149,0.8); padding-left: 15px; transition-duration: 0.2s; }
.next i {cursor: pointer; }
.next:hover {color: #e8e2ef; transition-duration: 0.2s; }


/* 카피라이트(★★카피라이트 수정, 삭제하지마세요★★) */
#copyright {
position: fixed; bottom: 10px; right: 10px; 
font-size: 9px; }
#copyright a {color: rgba(149,149,149,0.4); }