@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

.bodymove {
    transform: translateX(259px);
    transition: all ease 0.5s;
}

.bodyremove {
    transform: translateX(0);
    transition: all ease 0.5s;
}

/*카테고리 바 누르면 잘리기 */
.whole {
    overflow: hidden !important ;
}

ol, ul, li {
	list-style: none;
    padding:0; margin: 0;
}

a {
	text-decoration: none;
}

/* 드래그 블럭 설정 */
::selection {
    background-color: #f8efd1;
}

::-moz-selection {
    background-color: #f8efd1;    
}


/* 본문 전체 설정 */
body {
    position: absolute;
    left:50%; top:45%; transform: translate(-50%, -50%);
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    color: black;
    background-color: #fefefe;
}

/* 헤더 시작 */
.header {
    width:947px;
    background-color: #fefefe;
}

/* copyright 삭제 금지 */
.copyright {
    display:inline-block;
    float: left;
    margin-left: 3px;
    font-size: 6pt;
}

.copyright a {
    color: #626262;
}

.copyright a:hover {
    color: #dfdee4;
    transition: ease all 0.3s;
}

.wifi {
    display: inline-block;
    float: right;
    margin-right: 4px;
}

.battery {
    display: inline-block;
    float: right;
}

.option {
    display: inline-block;
    margin-right:20px;
}

/*헤더 끝*/

/*카테고리바 시작*/
#categorybar{
    width: 260px; height:655px;
    overflow:hidden;
    background-color: #f2f2f6;
    z-index: 999;
    transition: all 0.5s;
    position: absolute;
    transform: translateX(-100%);   
    display: none;
}

#categorybar header {
    font-family: 'Pretendard-Regular';
    font-size: 22pt;
    font-weight: bold;
    color:#3b3b3b;
    text-align: left;
    line-height: 70px;
    margin-left: 20px;
    margin-top: 50px;
}

#categorybar .all-cate {
    display: block;
    font-family: 'Pretendard-Regular';
    font-size: 14.5pt;
    font-weight: bold;
    color:#3b3b3b;
    text-align: left;
    margin-left:22px;
    margin-bottom: 14px;
}

#categorybar .cate-icon1{
    display: block;
    position: absolute;
    font-size: 12pt;
    color: #e4af0b;
    transition: transform 0.4s;
    left:220px;
    top:122px;
}

#categorybar a .cate-icon1.rotate{
    transform: rotate(90deg);
}

#categorybar #menu a.link_item{
    display: block;
    width:230px; height:35px;
    line-height: 30px;
    font-size: 12pt;
    color: #3b3b3b;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: 10px;
}

#menu a.link_item:hover {
    background-color: #dfdee4;
}

.category_list {
    position:static;
    display: none;
}

.category_list .show{
    display:block !important;
}

/* 2차 카테고리 */
.sub_category_list {
    position:static;
    display: none;
}

.sub_category_list a.link_sub_item {
    display: block;
    width:180px; height:35px;
    line-height: 30px;
    font-size: 11pt;
    color: #3b3b3b;
    text-align: left;
    padding-left: 15px;
    margin-left: 10px;
    border-radius: 10px;
}

a.link_sub_item:hover {
    background-color: #dfdee4;
}

/* 카테고리 앞 아이콘 */
#categorybar #menu a.link_item::before {
    content: "\e185";
    font-family: "Font Awesome 5 Free";
    font-weight: 300;
    font-size: 15pt;
    vertical-align: top;
    margin-left: 10px;
    margin-right: 4px;
    color: #dbb13d;
}

.overlay{
    position: fixed;
    display: none;
    width:947px; height:655px;
    background: rgba(0,0,0,0.1);
    z-index: 998;
}

/* 카테고리 New 버튼 삭제 */
.link_tit img, .link_item img {
    display: none;
}

/* 세부 카테고리 New 버튼 삭제 */
a.link_sub_item img {
    display: none;
}

/* 글 목록 New 버튼 삭제 */
.menu-title img {
    display: none;
}

/* 전체 글 수 설정 */
.link_item span.c_cnt{
    color:#828187;
    display: inline-block;
    float: right;
    margin-right:25px;
    font-size: 11pt;
}

.link_sub_item span.c_cnt {
    color:#828187;
    display: inline-block;
    float: right;
    padding-right:12px;
    font-size: 11pt;
}


/* 기존 카테고리 전체 보기 삭제 */
.link_tit {
    display: none;
}


/* 사이드바 시작 */
#sidebar {
    width: 302px; height: 655px;
    display: inline-block;
    float: left;
    vertical-align:top;
    background-color: #f2f2f6;
}

/*폴더*/

#folder-icon {
    font-size:15pt;
    display: inline-block;
    color: #d9ab2b;
    vertical-align: middle;
    cursor: pointer;
}

.folder {
    color: #d9ab2b;
    display: inline-block;
    position: relative;
    right: 120px;
    top: 10px;
    margin-left: 15px;
    margin-top: 18px;
    margin-bottom: 5px;
    cursor: pointer;
}

/* 제목 */
.information span {
    display: inline-block;
    float: left;
    margin-left:20px;
    margin-bottom: 10px;
    margin-top:5px;
    font-family: 'Pretendard-Regular';
    font-size: 26pt;
    font-weight: 1000;
    color:black;
}

/* 검색창 */
.search-bar {
    display: block;
    background-color: #e3e3e8;
    width:275px; height:29px;
    margin-bottom:12px;
    margin-top: 65px;
    border-radius: 9px;
}

.search input {
    display: block;
    float:left;
    margin-top:1px;
    margin-left:10px;
    width:200px; height:23px;
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 12pt;
    font-weight: 100;
    background-color: #e3e3e8;
}

input:focus, textarea:focus {
    outline: none;
}

input[type="text"]::placeholder {
    color: #979797;
    font-family: 'Pretendard-Regular';
}

.search-icon{
    font-size: 18px;
    color: #78787d;
    float:left;
    position: relative; /*absolute 좌표값의 기준점이 바로 부모 요소 중 position을 적용한 요소로 결정된다. 따라서 부모 요소를 relative 포지션으로 설정할 필요가 있음 */
    left: 7px;
    top:3px;
    margin-right:0;
}

.search button {
    display:none;
}

/*글 목록*/
.article-list {
    background: #fefefe;
    border-radius: 10px;
    width: 275px;
    height: 445px;
    vertical-align: top;
    overflow-y: overlay;
}

.reallist{
    text-align: left;
    padding: 12px;
}

.reallist .menu-title {
    color: black;
    display:block;
    font-size: 11.5pt;
    font-weight: 300;
}

.reallist .article-date {
    color:#979797;
    font-weight: 100;
}

.reallist:hover {
    background-color: #dbb13d;
    transition:0.5s;
}

.reallist:hover .menu-title{
    color:#fefefe;
}

.reallist:hover .article-date {
    color:#fefefe;
}

/* info 설정 */

.info img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin-bottom: 25px;
    margin-top: 60px;
    object-fit: cover;
}

.info span {
    font-weight: bold;
    font-size: 13pt;
}

.info .desc {
    display: inline-block;
    font-weight: lighter;
    text-align: middle;
    margin-left: 14%;
    margin-right: 14%;
}

.info .sns-icon {
    display: inline-block;
    font-size: 14.5pt;
    top: 80%;
    right: 52%;
    color:#dbb13d;
}

.info .guestbook-icon {
    display: inline-block;
    top: 80%;
    left: 51%;
    font-size: 15pt;
    color:#dbb13d;
}

.info .sns-icon:hover, .info .guestbook-icon:hover{
    color:#e3e3e8 ;
    transition: all ease 0.2s;
}

/*'글' 페이지로 이동하면 article-list 안보이게, info 보이게 */
#tt-body-page .article-list {display: none;}
#tt-body-page .info {display: block;}

/*카테고리 페이지에서 info 안보이게 */
#tt-body-category .info {display:none;}

/*홈 화면에서 info 안보이게 */
#tt-body-index .article-list {display: none;}
#tt-body-index .info {display: block;}

/* 방명록 페이지로 넘어가면 info 보이게 */
#tt-body-guestbook .article-list {display: none;}
#tt-body-guestbook .info {display: block;}

/* 검색 페이지로 넘어가면 info 안보이게 */
#tt-body-search .info {display:none;}

/*스크롤바*/
.article-list::-webkit-scrollbar {
    width: 5.7px;
    background-color: #fefefe;
    border-radius: 50%;
}

.article-list::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 42%, 0.29);
    border-radius: 100px;
}

.article-list::-webkit-scrollbar-track {
    background-color:#fefefe;
    border-radius: 100px;
}

/*스크롤바 부드럽게*/
html {
    scroll-behavior:smooth;
}

/* 사이드바 끝 */


/* 컨테이너 */
.container {
    background-color: #fefefe;
    display: inline-block;
    width: 645px; height: 655px;
    vertical-align:top;
    overflow: auto;
    overflow-x: hidden;
}

/* 글 본문 */
#article-title{
    text-align: left;
    margin-top: 70px;
    margin-left: 40px;
    margin-bottom: 40px;
    font-size: 22pt;
    font-weight: bolder;
    color: #3b3b3b;
}

.article-content {
    text-align: left;
    margin-left: 40px;
    margin-right: 30px;
    font-size: 13.5pt;
    font-weight: normal;
    color:#626262;
    line-height: 130%;
}

/* 공감 버튼 삭제 */

.postbtn_like {
    display: none;
}

.container_postbtn {
    display: none;
}

.another_category {
    margin-top: 35px !important;
    margin-bottom: 20px !important;
}

/* 글 페이지에서의 a 태그 */
.article-content a {
    border-bottom: 1px solid;
    color:#dbb13d;
}

.article-content a:hover{
    color: #979797;
    transition: 0.5s;
}

/* 댓글 */
.comment {
    margin-left:40px;
    text-align: left;
    font-size: 10pt;
    line-height: 1.5;
    display: none;
}

#comment-body {
    margin-bottom: 20px;
}

#comment-left a {
    color: #3b3b3b;
}

.comment .control {
    display: inline-block;
}

.control i {
    color: #828187;
    font-size: 9pt;
    transition: all ease 0.3s;
    vertical-align: middle;
}

.control i:hover {
    color: #e4af0b;
}

/* 댓글 버튼 */
.comment-button {
    text-align: right;
    color:#dbb13d;
    font-size: 18pt;
    margin-right: 50px;
    margin-bottom: 45px;
    display: relative;
    cursor: pointer;
}

.cbrotate {
    transform: rotate(180deg);
    transition: all ease 0.5s;
}

/* 댓글 입력 창 */
.textarea textarea {
    width: 545px;
    height: 87px;
    border-radius: 15px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    margin-top: 10px;
    resize: none;
}

/* 익명 로그인 댓글 닉네임 패스워드 창 */
.input-guest input[type=text] {
    width: 150px;
    height: 23px;
    margin-left: 3px;
    margin-right: 8px;
    border-radius: 10px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    margin-top: 5px;
}

.input-guest input[type=text]::placeholder {
    color: #979797;
    font-family: 'Pretendard-Regular';
}

/* 댓글 잠금, 등록 정렬 */
.commentwrite-input {
    text-align: right;
}

/* 댓글 등록*/
.commentwrite-input input[type=submit] {
    width: 44px;
    height: 30px;
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    margin-right: 40px;
    margin-bottom: 20px;
    background-color: transparent;
    cursor: pointer;
}

.commentwrite-input input[type=submit]:hover {
    color: #dfdee4;
    transition: ease all 0.3s;
}

.comment-date {
    display: inline;
    font-size: 9pt;
    color: #979797;
}

/* 댓글 잠금 */
.commentwrite-input input[type=checkbox] {
    vertical-align: middle;
}

/* 답글 */
#reply-body {
    margin-left:45px;
    margin-bottom: 20px;
    margin-top: -10px;
}

/* 본문 스크롤 커스텀 */

.container::-webkit-scrollbar {
    width: 7px;
    background-color: #fefefe;
    border-radius: 50%;
}

.container::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 42%, 0.29);
    border-radius: 100px;
}

.container::-webkit-scrollbar-track {
    background-color:#fefefe;
    border-radius: 100px;
}


/*방명록*/
.guestbook {
    overflow-x:hidden;
}

.guestbook > span {
    display: inline-block; 
    float: left;
    margin: 0;
    padding-top: 50px;
    padding-left: 50px;
    padding-bottom: 50px;
    font-size: 22pt;
    font-weight: bolder;
    color: #3b3b3b;
    position: relative;
}

#textBody {
    width: 535px;
    height: 87px;
    border-radius: 15px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    resize: none;
}

/*미로그인자 닉네임, 비밀번호, 잠금*/
#guestName {
    display: block;
    position: relative;
    top:109px;
    right:75px;
    float: left;
    width: 150px;
    height: 23px;
    border-radius: 10px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    margin-right: 15px;
}

#guestPassword {
    display: block;
    position: relative;
    top:109px;
    right:80px;
    float: left;
    width: 100px;
    height: 23px;
    border-radius: 10px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 4px 1px #e3e3e8;
}

.guest-lock-checkbox input[type=checkbox] {
    vertical-align: middle;
    display: inline-block;
}

.guest-lock-checkbox {
    vertical-align: middle;
    display: inline-block;
}

/*방명록 제출버튼*/
.guest-submit-button {
    display: inline-block;
    margin-bottom: 10px;
    cursor: pointer;
}

.guest-submit-button input[type="submit"] {
    display: inline-block;
    width: 70px;
    height: 30px;
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 12pt;
    background-color: transparent;
    transition: ease all 0.3s;
    vertical-align: middle;
}

.guest-submit-button input[type="submit"]:hover {
    color: #e4af0b;
}

/*방명록 스크롤 커스텀 */
.guestbook::-webkit-scrollbar {
    width: 7px;
    background-color: #fefefe;
    border-radius: 50%;
}

.guestbook::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 42%, 0.29);
    border-radius: 100px;
}

.guestbook::-webkit-scrollbar-track {
    background-color:#fefefe;
    border-radius: 100px;
}

/*페이지네이션*/
.pagination {
    margin-top: 15px;
}

.pagination a {
    color:#78787d;
}

.pagination :hover {
    color: #e4af0b;
    transition: all ease 0.3s;
}

/* 방명록 리스트 */
/* 댓글 */
/* 전체 적용 */
.guest-container {
    overflow: auto;
}

.guest-container span.date {
    font-size: 9pt;
    color: #979797;
    vertical-align: bottom;
}

span.name > a {
    text-decoration: none;
    float:left;
}

span.name {
    font-weight: bold;
    font-size: 12pt;
    color: #626262;
    vertical-align: top;
    float:left;
    margin-left:12px;
}

.guestinfo {
    display:inline-block;
    float:left;
    margin-left:7px;
}

p.guest-desc {
    margin-left: 50px;
    text-align: left;
    padding-left: 12px;
}

.logo {
    border-radius: 50%;
    width:50px; height: 50px;
    float:left;
}

/* 방명록 프로필 버튼 제거 */
.name .tistoryProfileLayerTrigger {display:none;}

/* 방명록 페이지 하이퍼링크 색상, 커서*/
#tt-body-guestbook a {color: #78787d; cursor:pointer;}


/* 관리자 적용 */
.guest_admin {
    border-radius: 15px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#f2f2f6;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top:20px;
    margin-bottom: 5px;
    text-align: left;
    display: inline-block;
    max-width: 500px;
    min-width: 270px;
}

/* 일반, 비밀글 */
.guest_general, .guest_hidden, .guest_secret {
    border-radius: 15px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    color: #626262;
    background-color:#fefefe;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 15px;
    margin-bottom:5px;
    margin-left:20px;
    text-align: left;
    display: inline-block;
    max-width: 400px;
    min-width: 270px;
    float:left;
}

.guest-reply button.modify, button.reply {
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 5pt;
    padding: 0;
    margin-left:2px;
    background-color: transparent;
    vertical-align: middle;
    color:#979797;
    cursor: pointer;
}

button.modify :hover {
    color:#e4af0b;
}

button.reply :hover {
    color:#e4af0b;
}

.guest-reply button.modify {
    margin-left:5px;
}

/* 답글 */
.guest-reply2 .guest_admin {
    border-radius: 15px;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color:#e3e3e8;
    border:none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    margin-top: 5px;
    margin-bottom: 5px;
    max-width: 400px;
    min-width: 270px;
    float:right;
    margin-right:15px;
}

.guest-reply2 .guest_admin a.modify {
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 5pt;
    margin-left:10px;
    background-color: transparent;
    vertical-align: middle;
    color:#979797;
}


.guest-reply2 a.reply {
    border:none;
    font-family: 'Pretendard-Regular';
    font-size: 5pt;
    margin-left:2px;
    background-color: transparent;
    vertical-align: middle;
    color:#979797;
}


/* 비밀글 설정 secret */

input[name="secret"] {
    visibility: hidden;
}

input[name="secret"]:after {
    content: "\f09c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11pt;
    visibility: visible;
    color:#626262;
    transition: all ease 0.5s;
    padding-left: 10px;
    position: relative;
    bottom: 2px;
    cursor: pointer;
}

input[name="secret"]:checked::after {
    font-family: "Font Awesome 5 Free";
    content: "\f023";
    font-weight: 900;
    font-size: 11pt;
    visibility: visible;
    color: black;
    transition: all ease 0.5s;
    padding-left: 10px;
    position: relative;
    bottom: 2px;
    cursor: pointer;
}

/* 보호글 페이지 */

.protected_form input[type=password] {
    border: none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    text-align: center;
    margin-right: 10px;
    border-radius: 50px;
    padding: 5px;
    color: #3b3b3b;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
}

.protected_form button[type=submit] {
    border: none;
    box-shadow: 1px 1px 5px 1px #e3e3e8;
    cursor: pointer;
    color: #3b3b3b;
    font-family: 'Pretendard-Regular';
    font-size: 10pt;
    background-color: #fefefe;
    border-radius: 50px;
    padding: 5px;
}

.protected_form button[type=submit]:hover {
    color: #dfdee4;
    transition: all ease 0.3s;
}

form.protected_form {
    margin-top: 30px;
}

.protected-article {
    margin-top: 240px;
    margin-bottom: 240px;
}

/* 카테고리 페이지에서 보호글 마진 조절 */
#tt-body-category .protected-article {
    margin: 0;
    margin-top: 70px;
    text-align: left;
    margin-left: 40px;
}

#tt-body-category .protected-article h2 {
    font-size: 22pt;
    font-weight: bolder;
    color: #3b3b3b;
}

#tt-body-category .protected-article .info-wrap {
    display: none;
}

/* 첫 페이지에서 보호글 마진 조절*/
#tt-body-index .protected-article {
    margin: 0;
    margin-top: 70px;
    text-align: left;
    margin-left: 40px;
}

#tt-body-index .protected-article h2 {
    font-size: 22pt;
    font-weight: bolder;
    color: #3b3b3b;
}

#tt-body-index .protected-article .info-wrap {
    display: none;
}