@import url('https://webfontworld.github.io/sunn/SUIT.css');
/**{font-family:'Noto Sans JP' , 'Noto Sans KR' , sans-serif;	font-display: optional;}*/
* {font-family: 'SUIT';}
html {scroll-behavior: smooth;}
body{background-color:#fff;margin:0;font-family: 'SUIT';height:100vh;overflow-y: overlay;}
.material-icons, .material-symbols-outlined{width: 24px;height: 24px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
textarea{
  -moz-appearance:none;  /* Firefox */
  -webkit-appearance:none;
  border-radius: 0;
}
input{
  -moz-appearance:none;  /* Firefox */
  -webkit-appearance:none;
  border-radius: 0;
}
::selection {background: rgb(70, 205, 170);color: #fff;}
.inner{height:100vh}
.top_remote{
  position:fixed;
  top:16px;
  left:16px;
  display: flex;
  z-index: 100;
}
.bottom_remote{position: fixed;bottom:16px;right:16px;display: flex;z-index: 100;}
.remote_name{position:absolute;bottom:72px;text-align: center;width:72px;opacity: 0;pointer-events: none;color:black;transition: all 0.2s;}
.pie .remote_name{font-size:0.8em;bottom:56px;}
.bottom_remote button, .top_remote button{color:#fff;margin:12px;background-color: #000;width:48px;height:48px;border-radius: 100%;display: flex;justify-content: center;align-items: center;transition: all 0.2s;cursor: pointer;border:2px solid black;}
.bottom_remote button:hover, .top_remote button:hover{background-color: #fff;color:black;}
.bottom_remote button:hover .remote_name, .pie:hover .remote_name{opacity: 1;}

.sidebar{min-width: 350px;max-width: 350px;margin-left:0px;margin-bottom:0px;display: flex;flex-direction: column;max-height: 100vh;overflow: scroll;background: black;}
.mobile_close_button{text-align: right;}
.mobile_close_button button{background: none;
  border: none;
  color: white;}
.blog_title{text-align: left;font-size: 3em;font-weight: 250;line-height: 150%;margin-left: 16px;margin-top:0}
.blog_menu{display: flex;justify-content: space-around;margin-bottom: 16px;}
.blog_menu button{font-size:1em;border:0;background:none;color:#fff;margin:8px;padding:0;border-radius: 100%;transition: all 0.2s;cursor: pointer;}
.blog_menu button:hover{background: #fff;color:#000;}
.blog_menu .material-symbols-outlined{padding:8px;}

/* 스크롤바 스타일 */

::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0)
}
.sidebar::-webkit-scrollbar {
    width: 15px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #fff;
    border: 5px solid #000;
    border-radius: 100px;
}
.sidebar::-webkit-scrollbar:horizontal {
  display:none;
}


.articles::-webkit-scrollbar {
    width: 15px;
}
.articles::-webkit-scrollbar-thumb {
    background: #000;
    border: 5px solid #fff;
    border-radius: 100px;
}

.articles::-webkit-scrollbar-track {
  box-shadow: none;
  background-color: transparent;
}
.articles::-webkit-scrollbar:horizontal {
  display:none;
}
.articles::-webkit-scrollbar-track-piece:start {
  background: transparent;
    }
.articles::-webkit-scrollbar-track-piece:end {
  background: transparent;
}

/* 스크롤 인디케이터 스타일 */

.pie {
  --p:0;
  
  aspect-ratio:1;
  position:relative;
  display:inline-grid;
  place-content:center;
  border:2px solid #000;
  color:#fff;margin:12px;background-color: #000;width:44px;height:44px;border-radius: 100%;display: flex;justify-content: center;align-items: center;transition: all 0.2s;
}
.pie .material-symbols-outlined{mix-blend-mode: difference;opacity:0;transition: opacity 0.2s;}
.pie:before, .pie:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.pie:before {
  inset:0;
  background:
    radial-gradient(farthest-side,white 98%,#0000) top/22px 22px no-repeat,
    conic-gradient(white calc(var(--p)*1%),#0000 0);
  /* -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - 22px),#000 calc(100% - 22px));
          mask:radial-gradient(farthest-side,#0000 calc(99% - 22px),#000 calc(100% - 22px)); */
}
.pie:after {
  inset:calc(50% - 22px/2);
  background:white;
  transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - 44px/2));
}
.animate {
  animation:p 1s .5s both;
}
.no-round:before {
  background-size:0 0,auto;
}
.no-round:after {
  content:none;
}

.category_box{height: 100%;}
.side_section{color:#fff;background-color:#000;padding:48px;}
.side_title{color:#fff;font-size:1.2em;margin-top:48px;font-weight:bold;display: flex;align-items: center;}
.side_title span{margin: 0 8px;}
.articles{max-height: 100vh;overflow: scroll;width: 100%;}
.article_section{padding:72px;max-width:720px;margin: 0 auto;}
.titleWrap{margin-bottom: 64px;}
.title_link{font-size:2em;color:#000;margin-bottom:0;text-decoration:none;}
.title_link:hover{color:gray;}
.notice a{font-size:1em}.notice ul{padding:0;list-style-type:none;margin-left:50px;}
.sidebar a{text-decoration: none;transition: all 0.2s; position: relative;display: inline-block;}
.sidebar a:link{color:gray;text-decoration: none;}
.sidebar a:visited{color:gray;text-decoration: none;}
.sidebar a:hover{color:#fff;}
.sidebar a:after{content: ''; /* 사이드바 링크 밑줄 애니메이션 */
	position: absolute;
	width: 100%;
	opacity: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #fff;
	transition: opacity 0.2s;}
.sidebar a:hover:after {
	opacity: 1;
	}
a:link{color:#000;}
a:visited{color:#000;}
a:hover{color:gray;text-decoration: none;}
.link_tit{margin-bottom: 5px;}
.new_icon{filter: invert(15%) sepia() saturate(10000%) hue-rotate(360deg);width: 8px;transition: filter 0.1s;} /* 새 글 아이콘 어거지로 빨갛게 만들어놓기 */
.list_title .new_icon{margin: 4px;}
.category:hover a:link{color:white;}
.category:hover a:visited{color:white;}
/* .category:hover .new_icon{filter: invert(15%) sepia() saturate(10000%) hue-rotate(360deg);width: 8px;} */
.category>ul{list-style: none;padding: 0;margin-left: 50px;font-size: 1em;}
.category>ul>li>ul{list-style: none;padding-left: 0;margin-top:10px}
.category>ul>li>ul>li{margin-top:10px}
.category>ul>li>ul>li>ul{list-style: none;padding:0;}
.category>ul>li>ul>li>ul>li{margin-top:3px; margin-left:15px;}
.postBox .side_title{display: flex;justify-content: space-between;}
.postBox:hover a:link{color:white;}
.postBox:hover a:visited{color:white;}
.recentPost ul{padding:0;list-style-type:none;margin-left:50px;}
.recentPost .cnt{font-size:1em}
.popularPost{color:#000;} .popularPost a{color:#000;font-size:1em;transition: all 0.2s;}.popularPost ul{padding:0;list-style-type:none;margin-left:50px;}
.popularPost .cnt{font-size:1em}
.recentComment{color:gray} 
.recentComment:hover a:link{color:white;}
.recentComment:hover a:visited{color:white;}
.recentComment a{font-size:1em;transition: all 0.2s;}.recentComment ul{padding:0;list-style-type:none;margin-left:50px;}
.recentComment .name{font-size:1em}.recentComment .date{font-size:1em}
.search{border-bottom:2px solid #fff;}
.search_box{height:2em;width:100%;border:0; background-color:#000;color:#fff}
.search_btn{font-size:1em;border:0;background:none;color:#fff;margin:8px;padding:0;border-radius: 100%;height: 24px;cursor:pointer;transition: all 0.2s;}
.search_btn:hover{background: #fff;color:#000}
.m_search_btn{font-size:1.5em;border:0;background:none;color: white;}
.m_search_box{font-size:1.5em;border:0;border-bottom: 2px solid white;background: none;color:white;}
.notice:hover a:link{color:white;}
.notice:hover a:visited{color:white;}
.notice a{transition: all 0.2s;}
.counter_cont{margin-left:50px;margin-top:10px}
.profile_pic{text-align: center;}
.profile_pic img{width: 96px;
    height: 96px;
    margin: 16px;
    border-radius: 100%;}
.owner{font-size: 1.5em;text-align: center;margin:0;}
.desc{color:gray;text-align: center;}

.mono_copyright{text-align: center;color:gray;margin-top:48px;}
.mono_copyright a{transition: all 0.2s;}
.mono_copyright:hover a:link{color:white;}
.mono_copyright:hover a:visited{color:white;}

.cover_title{text-align: center;font-size: 2em;}
/* 홈 커버 슬라이드 */
.slide{
  /* height: 512px; */
  width: 100%;
}

/* 홈 커버 풀 스크린 */
.fullscreen{
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.fullscreen_image{
  aspect-ratio:1;
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.5);
}
.fullscreen_cont{
  position: relative;
    bottom: 175px;
    margin: 60px;
    color: white;
}
.fullscreen_title{
  font-size: 3em;
}

/* 홈 커버 지그재그 스퀘어 */
.zigzag_square_item{
  display:flex;
}
.zigzag_square_item:nth-child(2n){
  flex-direction: row-reverse;
}
.zigzag_square_image_box{
  width:50%;
  background: url(images/no_images.png) no-repeat center;
  background-size: cover;
}
.zigzag_square_image{
  aspect-ratio:1;
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.zigzag_square_title_box{
  aspect-ratio:1;
  width:calc(50% - 64px);
  padding:32px;
  cursor: pointer;
}
.zigzag_square_title{
  font-size: 2em;
  transition: color 0.2s;
}

/* 홈 커버 스퀘어 */
.square{
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
    grid-column-gap: 0px;
    align-items: end;
}
.square_item{
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
.square_item:nth-child(2n){
  flex-direction: row-reverse;
}
.square_image_box{
  background: url(images/no_images.png) no-repeat center;
  background-size: cover;
}
.square_image{
  aspect-ratio:1;
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.square_title_box{
  aspect-ratio:1;
  padding:32px;
  cursor: pointer;
}
.square_title{
  font-size: 2em;
  transition: color 0.2s;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.square_text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.square_title_box:hover .square_title, .zigzag_square_title_box:hover .square_title{color:gray;}
.article_password_btn, .square_btn{font-size:1em;border:0;background:none;color:#000;padding:0;margin:8px;border-radius: 100%;height: 24px;transition: all 0.2s;}
.square_btn{margin:0;}

.article_password_btn:hover, .square_title_box:hover .square_btn, .zigzag_square_title_box:hover .square_btn{background: #000;color:#fff}
.article_password_box{border: none;border-bottom: 2px solid black;font-size:1.2em}

.artc_category a{color:gray;}
.artc_category span::before {content: "|";}
.tagText a{color:#000;}
.comment ul{list-style-type:none;}.comment ol{list-style-type:none; padding:0;}
.commentList{border-bottom:2px solid #000;}
.commentList>ol>li{border-top:2px solid #000;padding-top:15px;}
.commentWrite{padding-top:16px;}
.rep_image{width:2.5em;height:2.5em;border-radius:1.25em;}
.rep_info{display:flex;flex-direction:row;}
.rep_remote{display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;}
.rep_remote span,.rep_remote>span{margin-right:5px;}

.date{color:#777777;margin-right:8px;}
/* .date::before{content: "|";} */
.date a:link{color:#000;}
.date a:visited{color:#000;}
.date a:hover{color:gray;}

.name a:link{color:#000;}
.name a:visited{color:#000;}
.name a:hover{color:gray;}

.reply{min-width:100%;max-width:100%;height:5em;border-left:none;border-right:none;border-top: 0;border-bottom:2px solid #000;}
.replybtn, .guest_btn{margin: 5px;background-color: #000;border: 2px solid #000;border-radius: 35px;min-width: 100px;height: 46px;cursor: pointer;color:white;transition: all 0.2s;}
.replybtn:hover, .guest_btn:hover{background-color:#fff;color:#000;}

.tag_title{font-size:2em;}
.taglog ul{list-style: none;
  display: flex;
  flex-wrap: wrap;
  row-gap: 32px;}
.taglog ul a{color: white;}
.tag_words{background: black;border: 2px solid black;border-radius: 50px;padding: 12px;text-decoration: none;margin-right:4px;transition: all 0.2s;}
.tag_words:hover{background: #fff;color:#000}


.paging{margin-bottom:2em;margin-top: 25px;border:0;border-radius:35px;height:3em;    flex-wrap: wrap;display: flex;justify-content: space-around;align-items: center;padding:0 4px;}
.paging a{-webkit-transition: background-color 0.15s;transition: background-color 0.15s;margin: 0 2px;border-radius: 30px;padding: 5px;width: 25px;height: 25px;text-align: center;}
.paging a span, .paging a i{position: relative;top:3px;}
.paging a:hover{background-color:#000;color:#fff;}
.no-more-prev, .no-more-next, .selected{color:#cccccc}
.article_menu{display: flex;justify-content: center;flex-direction: row;max-width: 720px;padding: 0 48px;margin: 0 auto;}
.numbox{display:flex;}
.page_num{width:1.5em;height:1.5em;text-align:center;margin-left:2px; margin-right:2px;}
.page_num:hover{width:1.5em;height:1.5em;background-color:#d5d5d5;border-radius:0.75em;}
.guestbook, .taglog{margin-bottom: 60px; padding:72px; border-radius: 0 0 35px 35px;max-width: 720px;margin: 0 auto;}
.guestWrite{border-top:2px solid #000;}
.guest_write{min-width:100%;max-width:100%;height:5em;border-left:none;border-right:none;border-top:0;border-bottom:2px solid #000;}
.guestList{padding:30px;} .guestList ul{list-style-type:none;}.guestList ol{padding:0;}
.control a:link{color:#000;}
.control a:visited{color:#000;}
.control a:hover{color:gray;}

.article_list{padding:72px;max-width:720px;margin: 0 auto;}
.article_list>div>p{font-size:2em;text-align: center;}
.article_list>ol{list-style: none;padding: 0;}
.article_list>ol>li{display: flex;align-items: center;cursor:pointer;}
.article_list>ol>li a{text-decoration: none;}
.article_list>ol>li:hover a{text-decoration: underline;}
.article_list .list_image{
  width:256px;
  height: 256px;
  min-width: 256px;
  background: url(images/no_images.png) no-repeat center;
  background-size: cover;
}
.article_list .list_image>img{
  aspect-ratio:1;
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.article_list .list_cont{
  padding-left: 32px;
    overflow: hidden;
    height: 11em;
}
.list_title{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  font-size: 1.5em;
  margin-bottom: 8px;
  text-overflow: ellipsis;}
.list_cont_summary{
  overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    color: gray
}

.textinput {border:0;background-color: #00000000;border-bottom:2px solid #000;-webkit-appearance: none;width: 185px;}
footer{text-align:center;max-width:720px;margin:48px;margin: 0 auto;}
.left{float:left;margin-left:1em;margin-right:1em;}
.right{float:right;margin-left:1em;margin-right:1em;}
.f:link{color:#000;}
.f:visited{color:#000;}
.f:hover{color:gray}

/* Slideshow container */
.slide_cont{
  position: relative;
    margin-top: -448px;
    padding: 64px;
    color: white;
  cursor: pointer;
  }
.slide_cont .square_btn{color:#fff;}
.slide_cont:hover .square_btn{background-color: #fff;color:#000;}
.slide_title{
  font-size: 2em;
}
.slide_text{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.slide_image{
  width: 100%;
  height: 512px;
  object-fit: cover;
  cursor: pointer;
  filter: brightness(0.5);
}
  /* Hide the images by default */
  .slideshow {
    height: 512px;
	/* display: none; */
  }
  
/*여기까지 슬라이드쇼 CSS*/


/*데스크탑*/
@media screen and (min-width:1250px){
	.inner{display:flex;flex-wrap:nowrap;justify-content:left;flex-direction:row;align-items: stretch;min-width:100%;}
  .top_remote, .mobile_close_button{display: none;}
}
/*태블릿*/
@media screen and (max-width:1249px) and (min-width:700px){
	.inner{display:flex;flex-wrap:wrap;justify-content:left;flex-direction:column;align-items:flex-start;min-width:100%;flex-direction: column-reverse;align-items: center;}
	.sidebar{    position: fixed;
    left: 0;
    margin-left: -350px;
    width: 100%;
    z-index: 150;
    transition: margin-left 0.2s;} .side_section{width:auto}
	.articles{width: 100%;}
	.article_section, .article_menu, .guestbook, .taglog, .article_list, footer{width:auto;}
}
/*모바일*/
@media screen and (max-width:699px){
	.inner{display:flex;flex-wrap:wrap;justify-content:center;flex-direction:column;align-items:flex-start;min-width:100%;align-items: center;}
	.sidebar{margin: 0;width: 100%;} .side_section{width:auto}
  .sidebar{    position: fixed;
    left: 0;
    margin-left: -350px;
    width: 100%;
    z-index: 150;
    transition: margin-left 0.2s;}
  .square{
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
  .square_title{
    font-size: 1em;
  }
  .square_text{display: none;}
	.profile_box, .category_box{border-radius: 0px;}
	.articles{width: 100%;}
	.article_section, .article_menu, .guestbook, .taglog, .article_list, footer{padding:32px;width:auto;}
  .article_list .list_image {
    width: 128px;
    height: 128px;
    min-width: 128px;
  }
  .list_title{
    font-size: 1.2em;
  }
  .article_list .list_cont {
    padding: 8px 0 8px 8px;
    overflow: hidden;
    height: 4em;
  }
  .list_cont_summary{
    display:none;
  }
}