@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;
}

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

/* PAD */

@media (min-width: 640px) and (max-width: 1070px) {
  html, body {
    #container {
      width: 600px;
    }.sidebar {
      top: 250px;
      right: 35px;
      width: 130px;
      border: 1px solid var(--border_color);
      padding: 15px;
      z-index: 99;
      }.sidebar_wrap {
        margin-top: 0;
      }.sidebar_img,
      .category > span {
      display: none;
    }
  }
}

/* MOBILE */

@media (max-width: 639px) {
  html, body{
    #container {
      margin-top: 50px;
      width: 90%;
      height: 1fr;
    }.profile_img {
      width: 50px;
      height: 50px;
      top: -40px;
    }.menu {
      width: 150px;
    }.gallery .list_article {
      width: calc(100% / 2 - 36px);
      height: 135px;
    }.sidebar {
      top: 250px;
      right: 35px;
      width: 130px;
      border: 1px solid var(--border_color);
      padding: 15px;
      z-index: 99;
    }.sidebar_wrap {
      margin-top: 0;
    }.sidebar_img,
     .category > span {
      display: none;
    }.list .list_info,
     .memo .list_info {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 150px;
    }.memo .list_s {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }.menu .ri-xl {
      font-size: 14px;
    }.main_title {
      font-size: 12px;
    }
  }
}

/* 기본 설정 */

body, html {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8em;
  color: var(--font_color);
  background-color: var(--body_bg);
  -webkit-font-smoothing: antialiased;
  animation: fadein 2000ms ease-out;
  -moz-animation: fadein 2000ms ease-out; /* Firefox */
  -webkit-animation: fadein 2000ms ease-out; /* Safari and  Chrome */
  -o-animation: fadein 2000ms ease-out; /* Opera */
}

@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein { /* Firefox */
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein { /* Opera */
    from {opacity:0;}
    to {opacity: 1;}
}

ul, ol, li, a {
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
  color: var(--font_color);
}

a:visited {
  color: inherit;
}

img {
  border-radius: 10px;
}

::selection {
  color: var(--drag_f_color);
  background-color: var(--drag_bg_color);
}

 #container {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  margin-top: 100px;
  margin-bottom: 50px;
  width: 600px;
  border-radius: 10px;
  box-sizing: border-box;
  background-color: #fff;
 }

/* 헤더 */

.header {
  width: 100%;
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
}

.header_img {
  position: relative;
  width: inherit;
  height: 200px;
  overflow: hidden;
  border-radius: 10px;
}

.header_img img {
  position: absolute;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

/* 네비게이션_프로필 */

.nav {
  position: relative;
  margin-top: 15px;
  width: 100%;
  height: 100px;
}

.profile {
  position: relative;
  display: flex;
  width: inherit;
  height: inherit;
  border-bottom: 1px dashed var(--border_color);
  padding-bottom: 15px;
}

.profile_img {
  position: absolute;
  width: 80px;
  height: 80px;
  top: -50px;
  margin-left: 15px;
  border-radius: 50%;
  border: 5px solid #fff;
  overflow: hidden;
}

.profile_img img {
  position: absolute;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.profile_info {
  margin-top: 50px;
  margin-left: 20px;
}

.profile_name {
  font-family: 'Pretendard-Bold';
  font-weight: 700;
  font-size: 13px;
}

.profile_mur {
  font-size: 13px;
}

/* 네비게이션_메뉴 */

.menu {
  position: absolute;
  top: -40px;
  right: 0;
  width: 200px;
  background-color: var(--menu_color);
  border-radius: 10px;
  border: 5px solid #fff;
  padding: 10px;
  margin-right: 15px;
}

.menu ul {
  display: flex;
}

.menu ul li {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

.menu .ri-xl {
  display: inline-block;
  transition: 0.5s;
}

.menu .ri-xl:hover {
  transform: rotate(360deg) !important;
  color: var(--point_color) !important;
}

/* 사이드바 */

.sidebar {
  display: none;
  position: absolute;
  top: 0;
  right: -220px;
  width: 200px;
  height: 1fr;
  background-color: #fff;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  z-index: 1;
}

.sidebar.active {
  display: block;
}

.sidebar_wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

/* 사이드바_프로필 */

.sidebar_img {
  width: 100px;
  height: 100px;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  padding: 7px;
  overflow: hidden;
  margin-bottom: 30px;
}

.sidebar_img img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  border-radius: 5px;
}

/* 카테고리 */

.link_tit {
  display: none;
}

.category {
  width: 100%;
}

.category span {
  display: inline-block;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 13px;
  margin-bottom: 15px;
  padding-bottom: 8px;
  box-sizing: border-box;
  border-bottom: 2px solid var(--point_color);
}

.link_item {
  display: inline-block;
  margin: 5px 0;
  cursor: pointer;
}

.link_item::before {
  content: '\f07b';
  display: inline-block;
  font-family: 'FontAwesome';
  font-weight: 400;
  font-size: 11px;
  color: var(--point_color);
  margin-right: 5px;
}

.sub_category_list {
  display: none;
  padding-left: 13px;
}

.sub_category_list li {
  transition: 0.5s;
  border-radius: 5px;
  box-sizing: border-box;
  margin: 0 0 3px 0;
  padding: 5px 0 5px 15px;
}

.sub_category_list li:hover {
  background-color: var(--menu_color);
}

/* 홈커버_공지사항 */

.cn_title {
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  background-color: var(--point_color);
  border-radius: 5px;
  margin-bottom: 10px;
}

.cn_article {
  margin-bottom: 20px;
}

.cn_wrap {
  margin-bottom: 20px;
}

/* 홈커버_갤러리형 */

.cg_wrap {
  border-top: 1px dashed var(--border_color);
  margin-bottom: 20px;
}

.cg_title {
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  background-color: var(--point_color);
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.cg_article {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cg_content {
  display: flex;
  flex-direction: column;
  width: calc(100% / 3 - 36px);
  height: 170px;
  margin: 7px;
  padding: 10px;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  transition: 0.5s;
}

.cg_list {
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border: 1px solid var(--border_color);
}

.cg_list img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: inherit;
  height: inherit;
  object-fit: cover;
  z-index: 1;
  transition: 0.5s;
}

.cg_list .no_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.cg_info {
  margin-top: 5px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.cg_content:hover {
  background-color: #F0F0F0;
}

.cg_content:hover .cg_list img {
  filter: grayscale(1);
}

/* 홈커버_리스트형 */

.cl_wrap {
  border-top: 1px dashed var(--border_color);
  margin-bottom: 20px;
}

.cl_title {
  display: inline-block;
  font-weight: bold;
  padding: 5px;
  box-sizing: border-box;
  background-color: var(--point_color);
  border-radius: 5px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.cl_content {
  display: flex;
  flex-direction: column;
}

.c_list_l {
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 8px;
  transition: 0.5s;
  border-radius: 5px;
  border: 1px solid var(--border_color);
}

.c_list_l:hover {
  background-color: #F0F0F0;;
}


/* 게시판_리스트형 */

.list .gallery_thumb,
.list .list_s,
.list .playlist_content {
  display: none;
}

.list .list_top {
  display: flex;
  justify-content: space-between;
  padding: 13px;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 10px;
  transition: 0.5s;
}

.list .list_top:hover {
  background-color: #F0F0F0;
}

/* 게시판_갤러리형 */

.gallery .list_s,
.gallery .list_date,
.gallery .playlist_content {
  display: none;
}

.gallery .list_article_wrap {
  display: flex;
  flex-wrap: wrap;
}

.gallery .list_article {
  display: flex;
  flex-direction: column;
  width: calc(100% / 3 - 36px);
  height: 170px;
  margin: 7px;
  padding: 10px;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  transition: 0.5s;
}

.gallery .gallery_thumb {
  position: relative;
  border-radius: 10px;
  width: 100%;
  height: 150px;
  overflow: hidden;
  border: 1px solid var(--border_color);
}

.gallery .gallery_thumb img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: inherit;
  height: inherit;
  object-fit: cover;
  z-index: 1;
  transition: 0.5s;
}

.gallery .gallery_thumb .no_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.gallery .list_top {
  margin-top: 5px;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.gallery .list_article:hover {
  background-color: #F0F0F0;
}

.gallery .list_article:hover .gallery_thumb img {
  filter: grayscale(1);
}

/* 게시판_메모형 */

.memo .gallery_thumb,
.memo .playlist_content {
  display: none;
}

.memo .list_article {
  border: 1px solid var(--border_color);
  border-radius: 10px;
  padding: 15px;
  box-sizing: border-box;
  margin-bottom: 13px;
  transition: 0.5s;
}

.memo .list_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.memo .list_title {
  font-weight: bold;
}

.memo .list_s {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
}

.memo .list_article:hover {
  background-color: #F0F0F0;
}

/* 게시판_플레이리스트 */

.playlist .list_s,
.playlist .list_date,
.playlist .gallery_thumb {
  display: none;
}

.playlist .list_title {
  display: inline-block;
  padding: 15px;
  box-sizing: border-box;
  font-weight: bold;
}

.playlist .list_article {
  border: 1px solid var(--border_color);
  border-radius: 10px;
  margin-bottom: 15px;
  transition: 0.5s;
}

.playlist .playlist_content {
  padding: 0 15px 15px 15px;
  box-sizing: border-box;
}

.playlist .playlist_content iframe {
  border-radius: 10px;
}

.playlist .list_article:hover {
  background-color: #F0F0F0;  
}

/* 본문 */

.article {
  margin-top: 40px;
  padding: 30px;
  box-sizing: border-box;
}

.main_info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.main_title {
  font-weight: bold;
  font-size: 14px;
  border-radius: 5px;
  background-color: var(--point_color);
  padding: 5px 10px;
  box-sizing: border-box;
}

/* 본문_공감 버튼 */

.main_detail .container_postbtn {
  padding: 15px 0;
}

.main_detail .container_postbtn .postbtn_like {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border: none;
  padding: 0;
}

.main_detail .container_postbtn .btn_post,
.main_detail .container_postbtn .btn_post .ico_like {
  padding: 0;
  margin: 0;
}

.main_detail .container_postbtn .btn_post .ico_share,
.main_detail .container_postbtn .btn_post .ico_statistics,
.main_detail .container_postbtn .btn_post .txt_like {
  display: none;
}

.main_btn, .post_btn_wrap {
  display: flex;
}

.container_postbtn button:focus {
  outline: none !important;
}

/* 본문_태그 */

.main_tags span a {
  transition: 0.5s;
}

.main_tags span a::before {
  content: '#';
  display: inline-block;
}

.main_tags span a:hover {
  color: var(--point_color);
}

/* 본문_기타 설정 */

.contents_style p a::before {
  display: inline-block;
  content: '\f0c1';
  font-family: 'FontAwesome';
  font-size: 11px;
  font-weight: 400;
  color: var(--point_color);
  margin-right: 8px;
}

figure.fileblock, #tt-body-page figure.fileblock {
  display: flex;
  border: none;
  width: 200px;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
}

figure.fileblock .filename, #tt-body-page figure.fileblock .filename {
  position: relative;
  width: fit-content;
  color: var(--font_color);
  font-size: 13px;
  font-family: inherit;
  font-weight: inherit;
  margin: 0;
  transition: 0.5s;
}

figure.fileblock a, #tt-body-page figure.fileblock a {
  display: inline-block;
  position: relative;
  height: inherit;
  width: inherit;
  border: 1px solid var(--border_color);
  border-radius: 5px;
}

figure.fileblock a, #tt-body-page figure.fileblock a:hover {
  background-color: var(--point_color);
}

figure.fileblock a::after, #tt-body-page figure.fileblock a::after {
  background-image: none;
}

figure.fileblock .desc, #tt-body-page figure.fileblock .desc {
  left: 50px;
  right: 0;
  top: 3px
}

figure.fileblock .image, #tt-body-page figure.fileblock .image,
figure.fileblock .size, #tt-body-page figure.fileblock .size {
  display: none;
}

/* 댓글 및 방명록 */

.comment {
  display: none;
}

.comment_t {
  display: inline-block;
}

.comment_t::before {
  content: '\EB4D';
  display: inline-block;
  font-size: 14px;
  font-family: 'Remixicon';
  font-weight: 400;
  border-radius: 5px;
  padding: 5px 6px;
  margin: 10px 0;
  border: 1px solid var(--border_color);
  transition: 0.5s;
}

.comment_t:hover::before {
  background-color: var(--point_color);
}

.comment_wrap textarea,
.guest_wrap textarea {
  resize: none;
  width: 100%;
  height: 100px;
  border: 1px solid var(--border_color);
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
  transition: 0.5s;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
}

.comment_wrap textarea:focus,
.guest_wrap textarea:focus {
  outline: none;
  height: 130px;
}

.comment_check,
.guest_check {
  display: flex;
  justify-content: end;
}

.comment_info,
.guest_info {
  display: flex;
  align-items: center;
}

.comment_reply,
.guest_reply_info {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.c_profile, .cr_profile,
.g_profile, .gr_profile {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--border_color);
  padding: 3px;
}

.c_profile img, .cr_profile img,
.g_profile img, .gr_profile img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  border-radius: 50%;
}

.c_name,
.g_name {
  margin-left: 10px;
  font-weight: bold;
}

.cr_name,
.gr_name {
  margin-right: 10px;
  font-weight: bold;
}

.c_date, .c_control,
.g_date, .g_control {
  margin-left: 10px;
}

.cr_date, .cr_control,
.gr_date, .gr_control {
  margin-right: 10px;
}

.cr_content,
.gr_content {
  display: flex;
  justify-content: flex-end;
}

.c_main,
.g_main {
  display: inline-block;
  max-width: 230px;
  background-color: #F0F0F0;
  padding: 10px 15px;
  box-sizing: border-box;
  border-radius: 10px 10px 10px 0;
}

.cr_main,
.gr_main {
  display: inline-block;
  max-width: 230px;
  background-color: var(--point_color);
  padding: 10px 15px;
  box-sizing: border-box;
  border-radius: 10px 10px 0 10px;
}

.write_info,
.guest_write {
  display: flex;
  margin-bottom: 10px;
}

/* 태그 */

.a_tags li {
  display: inline-block;
  margin: 5px;
  padding: 3px 5px;
  border-radius: 5px;
  transition: 0.5s;
}

.a_tags li:hover {
  background-color: var(--point_color);
}

/* 인풋 설정  */

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"] + label::before {
  display: inline-block;
  content: '\EED2';
  font-family: 'Remixicon';
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  padding: 5px 6px;
  transition: 0.5s;
}

input[type="checkbox"]:checked + label::before {
  display: inline-block;
  content: '\EECE';
  font-family: 'Remixicon';
  font-weight: 500;
  font-size: 14px;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  padding: 5px 6px;
}

input[type="checkbox"] + label:hover::before {
  background-color: var(--point_color);
}

input[type="submit"] + label::before {
  display: inline-block;
  content: '\F0DA';
  font-family: 'Remixicon';
  font-weight: 400;
  font-size: 14px;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  padding: 5px 6px;
  margin-left: 5px;
  transition: 0.5s;
}

input[type="submit"] + label:hover::before {
  background-color: var(--point_color);
}

input[type="text"] {
  width: 100px;
  height: 30px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
}

input[type="password"] {
  width: 120px;
  height: 30px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid var(--border_color);
  border-radius: 5px;
  margin-left: 10px;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
}

.serach input[type="text"] {
  width: 100%;
  height: 15px;
  margin-top: 10px;
  padding: 10px;
  box-sizing: border-box;
  font-weight: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* 보호글 */ 

.entry_protected {
  position: relative;
  width: 100%;
  height: 400px;
}

.protected {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.need_password {
  text-align: center;
  margin-bottom: 4px;
}

.e_password input[type="password"] {
  margin-left: 0;
}

/* 리스트 페이징 */

.footer {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.paging {
  position: absolute;
  display: inline-block;
  top: -30px;
  left: 50%;
  transform: translate(-50%);
}

.paging a:last-child {
  margin-left: 15px;
}

/* 기타 설정 */

.tistoryProfileLayerTrigger,
.container_postbtn .postbtn_like + .btn_menu_toolbar {
  display: none;
}

/* 카피라이트(삭제 금지) */

.copyright {
    position: fixed;
    bottom: 0;
    right: 0px;
    padding: 10px;
}
.tt_box_namecard {
    display: none !important;
}