@font-face {
    font-family: 'omyu_pretty';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/omyu_pretty.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
}
/* mobile */

@media (max-width: 675px) {
  body,html{
    #container {
      display: grid;
      grid-template-areas: 'sidebar'
                           'article'
                           'footer';
      grid-auto-columns: 100%; 
      width: 80%;
      margin-top: 50px;
      padding: 20px;
      border: 1px solid var(--border_color);
    }.sidebar {
      padding-bottom: 20px;
      border-bottom: 1px dashed var(--border_color);
    }.article {
      margin-top: 20px;
      padding: 0;
    }.gallery .list_content {
      width: calc(100% / 2 - 12px);
      height: 150px;
    }.gallery .list_thumb {
      top: -150px;
    }.list .list_info {
      max-height: 40.8px;
    }.list .list_title_wrap {
      display: inline-block;
      overflow: hidden;
    }.webzin .list_content {
      grid-template-columns: 100px 220px;
    }.webzin .list_info {
      display: flex;
    }.paging {
      right: 150px;
      bottom: -50px;
    }.category {
      top: 230px;
      left: 50%;
      width: 150px;
      z-index: 99;
    }.c_gallery_item {
      height: 95px;
    }.c_gallery_thumb {
      top: -102px;
    }.ct_bg {
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: rgba(212, 212, 212, 0.493);
    }
  }
}

/* 기본 설정 */

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'omyu_pretty';
  font-size: 11px;
  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;
  -webkit-animation: fadein 2000ms ease-out;
  -o-animation: fadein 2000ms ease-out;
}

@keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-moz-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-webkit-keyframes fadein {
    from {opacity:0;}
    to {opacity:1;}
}
@-o-keyframes fadein {
    from {opacity:0;}
    to {opacity: 1;}
}

#container {
  display: grid;
  grid-template-areas: 'sidebar article'
                       'sidebar footer';
  grid-auto-columns: 200px 400px;
  width: 600px;
  margin: 0 auto;
  margin-top: 230px;
  padding: 20px;
  border: 1px solid var(--border_color);
  background-color: #fff;
}

.sidebar {
  position: relative;
}

.article {
  position: relative;
  padding: 0 0 0 20px;
  box-sizing: border-box;
  height: 287.8px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.footer {
  position: relative;
}

.article::-webkit-scrollbar {
  display: none;
}

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

a:visited {
  color: var(--font_color);
}

.scroll::-webkit-scrollbar {
  display: none;
}

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

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

.profile {
  width: 100%;
  max-height: 250px;
  overflow: hidden;
}

.profile_img {
  width: inherit;
  max-height: inherit;
  object-fit: cover;
}

/* 사이드바_메뉴 */

.menu {
  display: flex;
  margin-top: 10px;
  border: 1px solid var(--border_color);
}

.menu li {
  flex: 1;
  text-align: center;
  padding: 3px 0;
  box-sizing: border-box;
  border-right: 1px dashed var(--border_color);
}

.menu li:last-child {
  border-right: none;
}

.menu li:hover,
.menu li a:hover {
  text-decoration: line-through;
  color: var(--point_color);
}

.m_category {
  cursor: pointer;
}

/* 사이드바_검색 */

.search {
  position: absolute;
  top: -55px;
  left: -20px;
}

.search input[type="text"] {
  width: 50px;
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-bottom: 1px solid var(--border_color) !important;
  text-align: left;
}

.search input[type="text"]:focus {
  outline: none;
}

/* 카테고리 */

.link_tit {
  display: none;
}

.category {
  display: none;
  position: absolute;
  top: -20px;
  left: 710px;
  transform: translate(-50%);
  width: 150px;
  border: 1px solid var(--border_color);
  border-bottom: none;
  text-align: center;
  background-color: #fff;
}

.category_list > li {
  cursor: pointer;
}

.category_list > li > a {
  transition: 0.4s;
}

.category_list > li > a:hover {
  background-color: var(--point_color);
}

.category_list .link_item {
  display: block;
  border-bottom: 1px solid var(--border_color);
  padding: 10px 0;
}

.sub_category_list {
  display: none;
}

.sub_category_list li {
  border-bottom: 1px solid var(--border_color);
  padding: 10px 0;
  transition: 0.4s;
}

.sub_category_list li:hover {
  background-color: rgb(238, 238, 238);
}

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

.c_notice_title {
  display: inline-block;
  padding: 3px 5px;
  margin-bottom: 10px;
  border: 1px solid var(--border_color);
}

.c_notice_content {
  margin-bottom: 15px;
}

.c_notice_thumb img {
  width: 100%;
}

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

.c_gallery {
  margin-bottom: 10px;
}

.c_gallery_title {
  display: inline-block;
  padding: 3px 5px;
  margin-bottom: 10px;
  border: 1px solid var(--border_color);
}

.c_gallery_content {
  display: flex;
  flex-wrap: wrap;
}

.c_gallery_item {
  display: inline-block;
  position: relative;
  width: calc(100% / 3 - 12px);
  height: 130px;
  margin: 5px;
  border: 1px solid var(--border_color);
  overflow: hidden;
}

.c_gallery_item > a {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 99;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
}

.c_gallery_c_title {
  position: absolute;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  color: #fff;
  text-align: center;
  z-index: 99;
}

.c_gallery_thumb {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  top: -136px;
}

.c_gallery_no_img {
  position: absolute;
}

.c_gallery_thumb > img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c_gallery_item:hover a {
  opacity: 1;
}

.c_gallery_item:hover .c_gallery_thumb {
  filter: blur(2px);
}

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

.c_list_content {
  display: flex;
  flex-wrap: wrap;
}

.c_list_title {
  display: inline-block;
  padding: 3px 5px;
  margin-bottom: 10px;
  border: 1px solid var(--border_color);
}

.c_list_item {
  width: calc(100% / 2 - 10px);
  border-bottom: 1px solid var(--border_color);
  padding-bottom: 10px;
  margin: 0 10px 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: normal;
  overflow: hidden;
}

.c_list_c_title:hover {
  text-decoration: line-through;
  color: var(--point_color);
}

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

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

.list .list_info {
  display: flex;
  white-space: nowrap;
  margin-bottom: 18px;
  border: 1px solid var(--border_color);
  transition: 0.4s;
}

.list .list_date {
  display: inline-block;
  border-right: 1px dashed var(--border_color);
  padding: 10px;
  white-space: nowrap;
}

.list .list_title_wrap {
  display: inline-block;
  overflow: hidden;
  padding: 10px;
}

.list .list_title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.list .list_info:hover {
  background-color: rgb(238, 238, 238);
}

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

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

.gallery .list_content_wrap {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.gallery .list_content {
  display: inline-block;
  position: relative;
  width: calc(100% / 3 - 12px);
  height: 130px;
  margin: 5px;
  border: 1px solid var(--border_color);
  overflow: hidden;
}

.gallery .list_info {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.gallery .list_info > .list_title_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 90;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.3s ease;
}

.gallery .list_title {
  position: absolute;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  color: #fff;
  text-align: center;
  z-index: 99;
}

.gallery .list_thumb {
  position: relative;
  width: 100%;
  height: 100%;
  top: -130px;
  overflow: hidden;
  transition: 0.3s;
}

.gallery .list_thumb img {
  z-index: -1;
  width: inherit;
  height: inherit;
  object-fit: cover;
}

.gallery .list_no_img {
  z-index: -2 !important;
}

.gallery .list_content:hover .list_info > .list_title_wrap {
  opacity: 1;
}

.gallery .list_content:hover .list_thumb {
  filter: blur(2px);
}

/* 게시판_웹진형 */

.webzin .playlist_content {
  display: none;
}

.webzin .list_content {
  display: grid;
  grid-template-areas: 'info info'
                       'thumb item';
  grid-template-columns: 100px 278px;
  grid-template-rows: 40px 100px;
  border: 1px solid var(--border_color);
  margin-bottom: 18px;
}

.webzin .list_info {
  grid-area: info;
  display: flex;
  border-bottom: 1px solid var(--border_color);
  transition: 0.5s;
  white-space: nowrap;
}

.webzin .list_thumb {
  grid-area: thumb;
  height: 100px;
  overflow: hidden;
  border-right: 1px solid var(--border_color);
}

.webzin .list_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.webzin .list_item {
  grid-area: item;
  padding: 10px;
  box-sizing: border-box;
}

.webzin .list_date {
  display: inline-block;
  border-right: 1px dashed var(--border_color);
  padding: 10px;
}

.webzin .list_title {
  display: inline-block;
  padding: 10px;
}

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

.webzin .list_content:hover .list_info {
  background-color: rgb(238, 238, 238);
}

/* 게시판_메모형 */

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

.memo .list_content {
  border: 1px solid var(--border_color);
  margin-bottom: 18px;
  transition: 0.5s;
}

.memo .list_info {
  display: flex;
  white-space: nowrap;
  border-bottom: 1px solid var(--border_color);
}

.memo .list_date {
  display: inline-block;
  border-right: 1px dashed var(--border_color);
  padding: 10px;
  white-space: nowrap;
}

.memo .list_title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px;
}

.memo .list_item {
  padding: 10px;
}

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

.memo .list_content:hover {
  background-color: rgb(238, 238, 238);
}

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

.playlist .list_thumb,
.playlist .list_s {
  display: none;
}

.playlist .list_content {
  border: 1px solid var(--border_color);
  margin-bottom: 18px;
}

.playlist .list_info {
  display: flex;
  border-bottom: 1px solid var(--border_color);
}

.playlist .list_date {
  display: inline-block;
  border-right: 1px dashed var(--border_color);
  padding: 10px;
}

.playlist .list_title {
  display: inline-block;
  padding: 10px;
}

/* 본문 */

.main_wrap {
  display: flex;
  border: 1px solid var(--border_color);
}

.main_date {
  padding: 10px;
  border-right: 1px dashed var(--border_color);
}

.main_title {
  padding: 10px;
}

.main_article {
  position: relative;
  margin-top: 10px;
}

/* 본문_태그 */

.main_tags {
  margin: 10px 0;
}

/* 본문_기타 */

figure[data-ke-type='opengraph'],
#tt-body-page figure[data-ke-type='opengraph'] {
  margin: 10px;
}

figure[data-ke-type='opengraph'] a,
#tt-body-page figure[data-ke-type='opengraph'] a {
  display: flex;
  border: 1px solid var(--border_color);
  height: 100px;
}

figure[data-ke-type='opengraph'] div.og-image {
  width: 120px;
  border-right: 1px solid var(--border_color);
}

figure[data-ke-type='opengraph'] div.og-text {
  left: 120px;
  padding: 10px;
}

figure[data-ke-type='opengraph'] div.og-text p.og-title,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-title {
  font-size: 15px;
  font-family: inherit;
  margin-bottom: 0 !important;
}

figure[data-ke-type='opengraph'] div.og-text p.og-desc,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-desc {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.0em;
}

figure[data-ke-type='opengraph'] div.og-text p.og-host,
#tt-body-page figure[data-ke-type='opengraph'] div.og-text p.og-host {
  bottom: 0;
  font-size: 10px;
}

/* 본문_파일 */

figure.fileblock,
#tt-body-page figure.fileblock {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 200px;
  height: 50px;
  border: 1px solid var(--border_color);
  border-radius: 0;
}

figure.fileblock a,
#tt-body-page figure.fileblock a {
  height: inherit;
  transition: 0.4s;
}

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

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

figure.fileblock .filename,
#tt-body-page figure.fileblock .filename {
  font-size: inherit;
  font-family: inherit;
  font-weight: bold;
}

figure.fileblock .desc,
#tt-body-page figure.fileblock .desc {
  left: 50%;
  right: 0;
  transform: translate(-50%);
}

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

figure.fileblock a::after,
#tt-body-page figure.fileblock a::after {
  display: inline-block;
  content: '\EC54';
  font-family: 'Remixicon';
  font-size: 15px;
  font-weight: 400;
  width: fit-content;
  height: fit-content;
  background-image: none;
}

/* 본문_공감 */

.main_detail .container_postbtn {
  display: flex;
  padding: 0;
}

.main_detail .container_postbtn .postbtn_like .wrap_btn {
  position: absolute;
  top: 0;
  right: 0;
}

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

.main_detail .container_postbtn .btn_post {
  padding: 0;
  border: none
}

.main_detail .container_postbtn .postbtn_like {
  border: none;
  border-radius: 0;
  padding: 0;
}

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

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

/* 댓글 및 방명록록 */
.comment_wrap textarea,
.guest_wrap textarea {
  resize: none;
  font-family: inherit;
  font-size: inherit;
  border: 1px solid var(--border_color);
  width: 100%;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
}

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

.comment {
  display: none;
}

.comment_t {
  display: inline-block;
  margin: 10px 0;
}

.write_info,
.guest_write {
  display: flex;
}

.comment_check,
.guest_check {
  display: flex;
  flex-direction: row;
  width: fit-content;
  border: 1px solid var(--border_color);
}

.comment_secret,
.guest_secret_c {
  border-right: 1px dashed var(--border_color);
  transition: 0.4s;
}

.comment_submit,
.guest_submit {
  transition: 0.4s;
}

.comment_secret:hover,
.comment_submit:hover,
.guest_secret_c:hover,
.guest_submit:hover {
  background-color: var(--point_color);
}

.comment_list,
.guest_list {
  margin-top: 10px;
}

.comment_info, .comment_reply,
.guest_info, .guest_reply_info {
  display: flex;
  border-bottom: 1px solid var(--border_color);
}

.comment_list > ol > li {
  border: 1px solid var(--border_color);
  border-bottom: none;
  margin-bottom: 10px;
}

.c_name, .cr_name,
.g_name, .gr_name {
  font-weight: bold;
}

.c_name, .cr_name,
.c_date, .cr_date,
.c_control, .cr_control,
.g_name, .gr_name,
.g_date, .gr_date,
.g_control, .gr_control {
  border-right: 1px dashed var(--border_color);
  padding: 5px;
}

#comment_list, #comment_reply,
#guest_list {
  border-bottom: 1px solid var(--border_color);
}

#comment_list p, #comment_reply p,
#guest_list p, #guest_reply p {
  padding: 5px;
  margin: 0;
}

.guest_list {
  border: 1px solid var(--border_color);
}

.write_password {
  width: 100%;
}

/* 인풋 */

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

input[type="checkbox"] + label::before {
  display: inline-block;
  content: '\EED2';
  font-family: 'Remixicon';
  font-weight: 500;
  font-size: 13px;
  padding: 3px 5px;
}

input[type="checkbox"]:checked + label::before {
  display: inline-block;
  content: '\EECE';
  font-family: 'Remixicon';
  font-weight: 500;
  font-size: 13px;
  padding: 3px 5px;
}

input[type="submit"] + label::before {
  display: inline-block;
  content: '\F0D8';
  font-family: 'Remixicon';
  font-weight: 400;
  font-size: 13px;
  transition: 0.5s;
  padding: 3px 5px;
}

input[type="text"] {
  width: 100px;
  border: 1px solid var(--border_color);
  border-right: none;
  border-bottom: none;
  font-family: inherit;
  font-size: inherit;
  padding: 7px 10px;
}

input[type="password"] {
  width: 100%;
  border: 1px solid var(--border_color);
  border-left: 1px dashed var(--border_color);
  border-bottom: none;
  font-family: inherit;
  font-size: inherit; 
  padding: 7px 10px;
  box-sizing: border-box;
}

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

.e_password input[type="password"] {
  border: none;
  font-family: inherit;
  font-size: inherit; 
}

/* 공지사항 */

.a_notice .container_postbtn {
  display: none;
}

/* 태그 */

.a_tags li {
  display: inline-block;
  padding: 3px 5px;
  margin: 3px;
  border: 1px solid var(--border_color);
  transition: 0.4s;
}

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

/* 리스트 페이징 */

.paging {
  position: absolute;
  bottom: -50px;
  right: -420px;
}

/* 보호글 */

.protected {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border_color);
}

.need_password {
  text-align: center;
  padding: 5px;
  border-bottom: 1px dashed var(--border_color);
}

/* 기타 */

.tistoryProfileLayerTrigger {
  display: none;
}

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

.copyright {
  position: fixed;
  bottom: 0;
  right: 0px;
  padding: 10px;
}