@charset "UTF-8";

/*skin start*/

/* font */
 @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;}


/* CSS Document */
 * {padding: 0; margin: 0; box-sizing: border-box; font-family: 'Pretendard-Regular';
 outline: none; font-size: inherit; line-height: inherit; word-break:break-all;}
 a { text-decoration: none; background: transparent; }
 ul, li, ol {list-style: none; padding:0; margin: 0;}
 input:focus, textarea:focus, ::placeholder { outline: none; border: none;}
 button {padding: 0; border:0; background: transparent;}
 img {vertical-align: bottom;}
 textarea {resize: none;}
 .newpost {vertical-align: middle; width: 12px !important; height: 12px !important;}
 .newpost, .c_cnt {display: none;}


 /* loading */
 #loading
 { width: 100%; height: 100%; top: 0; left: 0; background: #ffffff;
 position: fixed; display: flex; z-index: 999; opacity: 0.9;}
 #loading > img { display: flex; width: 70px; height: 70px; margin: auto;}


/* layout */
 #whole {position: relative; margin: 100px auto; font-size: 11.5px; line-height: 15px;
 display: flex; justify-content: center;}
 #content {position: relative;}
 #sidebar {position: relative; left: 0; padding: 5px; margin: auto 0;}
 .w-container {width: calc(100% - 10px); height: calc(100% - 220px); margin: 5px; 
 overflow:hidden; padding: 5px;}
 .wrap {height: 100%; overflow-y: auto;}

/* content toolbar */
 .c-toolbar {display: flex; justify-content: space-between; align-items: center;}

 .toolbar-info {display: flex; align-items: center; padding: 3px;}
 .toolbar-img {position: relative;}
 .toolbar-img img {width: 23px; height: 20px;}

 .toolbar-icon button[aria-label=Close]:active { display: block; outline: 1px dotted #000; outline-offset: -3px;}
 .toolbar-icon {display: flex; padding: 3px 5px;}
 .toolbar-icon button {display: block; min-height: 15px; min-width: 15px; padding: 0;
 border: none; border-radius: 0; box-sizing: border-box;}
 
 .toolbar-icon button[aria-label=Minimize] {background-image: url(./images/svg1.svg);
 background-position: bottom 3px left 4px; background-repeat: no-repeat;}
 .toolbar-icon button[aria-label=Maximize] {background-image: url(./images/svg2.svg);
 background-position: top 2px left 3px;background-repeat: no-repeat;}
 .toolbar-icon button[aria-label=Close] {background-image: url(./images/svg3.svg);
 background-position: top 3px left 4px; background-repeat: no-repeat;}


/* content menu */
 .w-menu {display: flex; margin: 1px 2px; position: relative;}
 
 .w-name {padding: 2px 5px;}
 .w-name span {border-bottom: solid 1px #000;}

 .n-list,  .ca-list, .v-list, .h-list, .o-list {display: none; text-align: left;
 position: absolute; width: 100px;
 padding: 3px; margin-top: 2px; z-index: 99;}
 .n-list li a, .v-list li a, .h-list li a{display: block; margin: 2px; padding: 2px;}
 .searchbtn, .o-list li {margin: 2px; padding: 2px;}
 
 .cate_li {display: flex; justify-content: space-between; align-items: center;}
 .sub_item {padding: 3px; margin: 1px;}
 
 .ca-list li {position: relative;}
 .link_tit {position: relative; display: block; padding: 3px; margin: 1px}
 .category_list > li > a::after{content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight:700;}

 .link_item {display: flex; justify-content: space-between;  padding: 3px; margin: 1px}
 .sub_category_list {display: none;}
 .sub_category_list a {display: block; padding: 3px;}
 .sub_category_list > li > a:before{content:"-"; }
 .sub_category_list {position: relative; padding: 0 3px;}
 

/* search , hlep pop-up */
 .search {display: none; position: absolute; top:150px; left: 50%; width: 230px; 
 transform: translate(-50%, -50%); padding: 3px; z-index: 999;}
 .searchbtn {cursor: pointer;}
 .search-head {display: flex; justify-content: space-between; padding: 2px; height: 20px;}
 .search-icon button, .w-icon button{display: block; min-height: 15px; min-width: 15px; padding: 0;
 border: none; border-radius: 0; box-sizing: border-box;}
 .search-icon button[aria-label=Close], .w-icon button[aria-label=Close] {background-image: url(./images/svg3.svg);
 background-position: top 3px left 3px; background-repeat: no-repeat;
 margin-left: 2px;}
 .search-inner { display: flex; padding: 10px; flex-direction: row; align-items: center; justify-content: center;}
 .search-inner input[type="text"] { font-family: 'Pretendard-Regular'; border:none; background-color: #FFF;
 box-sizing: border-box; padding: 3px 4px; }
 .search-inner input[type="button"] {margin-left: 5px; border: none; box-sizing: border-box; padding: 0 10px; height: 22px; font-family: 'Pretendard-Regular'; }
 .search-inner input[type="button"]:active { display: block; outline: 1px dotted #000; outline-offset: -4px;}
 
 .help-text {display: none; position: absolute; 
 top: 160px; left: 50%; width: 200px; transform: translate(-50%, -50%);
 padding: 1px; z-index: 999;}
 .w-head {display: flex; justify-content: space-between; align-items: center; padding: 3px;}
 .help-inner {padding: 10px;}
 .text-title {text-align: center; font-weight: bold; margin-bottom: 10px;}
 .text-desc {text-align: left;}

 .help-img {display: none; position: absolute; 
 top: 180px; left: 50%; width: 250px; transform: translate(-50%, -50%);
 padding: 1px; z-index: 999;}
 .help-imgdesc {position: relative; overflow: hidden;}
 .help-imgdesc img {width: 100%; object-fit: cover;}


/* blog info */
 .w-bloginfo {display: flex; padding: 5px 10px; align-items: center;}

 .info-img {position: relative;}
 .info-img img {width: 80px; height: 80px; border-radius: 50%; object-fit: cover;}
 
 .info-text {width: calc(100% - 90px); text-align: left; margin-left: 10px;}
 .info-text span {font-weight: bold;}
 .progress {padding: 3px; margin-top: 10px; width: 99%; height: 1.4rem; overflow: hidden; font-size: .75rem; background-color: silver;
 border-radius: 0rem;}
 .progress-bar-blocks { background-image: linear-gradient(90deg,transparent 75%,#ddd 25%);
 background-size: 1rem 1rem;}
 .progress-bar { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox;
 display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal;
 -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center;
 -ms-flex-pack: center; justify-content: center; text-align: center;  transition: width .6s ease;}



/* paging */
 .w-paging {display: flex; justify-content: space-between;
 padding: 3px 5px; align-items: center; height: 25px;}
 .p-prev a, .p-next a {display: block; padding: 2px 10px;}


/* footer */
 .w-footer {display: flex; height: auto; padding: 3px 5px;}
 .w-footer li {height: 100%; width: calc(100% / 4); display: flex; justify-content: center;
 align-items: center;}
 .w-footer img {width: 16px; height: 16px;}
 .w-footer li a {height: 28px; width: 100%; display: flex; justify-content: center;
 align-items: center;}


/* sidebar */
 .icon {display: flex; flex-direction: column;}
 .link, .category, .cate-l {display: inline-block;
 margin-bottom: 20px; text-align: center; padding: 3px;}
 .link img, .category img, .cate-l img {margin-bottom: 5px; width: 32px; height: 32px;}


/* sidebar folder */
 #category {display: none; position: fixed; top: 7%; left: 10%;
 padding: 3px; z-index: 992;}
 .title-bar {display: flex; align-items: center; justify-content: space-between;
 padding: 3px 2px 3px 3px;}
 .title-text {display: flex; font-weight: bold; letter-spacing: 0; align-items: center;}
 .title-text img {width: 20px; height: 20px; margin-right: 5px;}
 .title-icon {display: flex; align-items: center;}
 .title-icon button {display: block; min-height: 15px; min-width: 15px; padding: 0;
 border: none; border-radius: 0;}

 .title-icon button[aria-label=Close] { background-image: url(./images/svg3.svg);
 background-position: top 3px left 3px; background-repeat: no-repeat;}

 .ca-list > ul > li > a {display: none;}
 #category .catelist {background: #fff; padding: 5px; text-align: left;}
 #category .catelist li {display: inline-block; text-align: center;}
 #category .catelist li a, #link .catelist li a {display: block; padding: 5px;}

 #music .video-container {height: 300px;}
 #music {display: none; position: fixed; top: 12%; left: 30%;  width: 400px;
 padding: 3px; z-index: 993;}
 #music .catelist {background: #FFF; 
 box-sizing: border-box; padding: 5px; }
 #music .catelist iframe {width: 100%; height: 100%;}

 #link {position: fixed; top: 17%; left: 20%;  display: none; width: 300px;
 padding: 3px; z-index: 994;}
 #link .catelist {background: #FFF; 
 box-sizing: border-box; padding: 5px; text-align: left; }
 #link .catelist li {display: inline-block; text-align: center;} 
 #link .catelist li:last-child {margin-right: 0;}

 .cate-folder img {width: 32px; height: 32px; }

/* hr, box-shadow */
 #content hr {height: 1px; width: calc(100% - 1px); margin:0;}
 hr2 {width: 1px; margin: 2px; border: solid 1px;
 border-right-color: #aeaeae; border-bottom-color: #aeaeae;
 border-top-color: #fff; border-left-color: #fff;}

 #content, .c-toolbar, .search, .help-text, .help-img, .w-head, #category, #music, #link
 {box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;}
 .toolbar-icon button, .search-icon button, .n-list, .ca-list, .v-list, .search-inner input[type="button"],
 .h-list, .o-list, .w-icon button, .p-prev, .p-next, .w-footer li a, .title-icon button, #list-summary .list-wrap a,
 #list-playlist .list-wrap a, div[data-ke-type='moreLess'] .btn-toggle-moreless, #tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless,
 .container_postbtn .postbtn_like, .comment-input input[type="checkbox"]+label:before, .comment-send,
 .protected-password input[type="button"]
 {box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;}
 .search-inner input[type="text"], .search-icon button[aria-label=Close]:active, .w-icon button[aria-label=Close]:active,  .toolbar-icon button[aria-label=Close]:active,
 .search-inner input[type="button"]:active, .w-icon button[aria-label=Close]:active, .progress,
 .p-prev a:active, .p-next a:active, .w-footer li a:active, .w-container, .title-icon button[aria-label=Close]:active,
 .category-name select, #list-summary .list-wrap a:hover, #list-basic .list-wrap a:hover, .w-footer li a:hover,
 #list-playlist .list-wrap a:hover, .c-title, #notice, div[data-ke-type='moreLess'].open .moreless-content,
 .c-notice.inner, .c-gallery.inner, .c-list.inner, .c-playlist.inner, .c-swiper.inner,
 .notice-title, .tag-desc li a:hover, .article-title, blockquote[data-ke-style='style3'],
 div[data-ke-type='moreLess'] .btn-toggle-moreless:hover, .article-cate a:hover, .article-tag a:hover,
 figure.fileblock a:hover, .container_postbtn .postbtn_like .wrap_btn:hover, .article-paging a:hover,
 .comment-btn, .related-btn, .comment-textarea, .comment-type, #article-related, 
 .sguest-input input[type="text"], .sguest-input input[type="password"], .comment-input input[type="checkbox"]:checked+label:before,
 .comment-input input[type="checkbox"]+label:hover::before, .comment-send:hover, .protected-password input[type="password"],
 .protected-password input[type="button"]:hover, .p-prev:hover, .p-prev a:hover, .p-next a:hover, .p-next:hover
 {box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;} 
 ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button
 {box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;} 

/* hover */
 .w-name:hover:hover {cursor: pointer; box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;}
 .category:hover, .link:hover, .cate-l:hover, .cate-folder a:hover, 
 .help-t:hover, .help-i:hover, .searchbtn:hover, .comment-btn:hover,
 .related-btn:hover, .comment-send:hover, .comment-input input[type="checkbox"]+label:hover::before {cursor: pointer;}
 #category .catelist li a:hover, #link .catelist li a:hover, .cate-l:hover,
 .category:hover, .link:hover, .cate-l:hover, .cate-folder a:hover {outline-offset: -2px;}


/* list */ 
 .empty {text-align: center; margin: 10px 0; width: 100%;}
 .list-inner:after{content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .list-wrap a {background: transparent;}
 
 .category-name {display: flex; align-items: center; justify-content: flex-start;
 margin-bottom: 5px;}
 .category-name span { font-size: 13px; font-weight: bold;}
 .category-name select {font-family: 'Pretendard-Regular'; font-size: 8px; padding: 3px; border: none;
 width: calc(100% - 4px); margin: 1px; background-image: url(./images/icon4.svg); background-position: top 2px right 2px;
 background-repeat: no-repeat; appearance: none; -webkit-appearance: none;}
 .category-name select:focus, .container_postbtn .btn_post:focus {border: none; outline: none;}

 .list-inner {height: 100%; overflow-y: auto;}

/* list-basic */
 #list-basic .list-wrap{ display: block;}
 #list-basic .list-td{ width: 100%; display: flex; flex-direction: row; justify-content: space-between;
 align-items: center;}
 #list-basic .list-title { width: 70%; height: 100%; font-weight: bold;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-basic .list-lock .list-title:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 2px;}
 #list-basic .list-date {display: flex; align-items: center;}
 #list-basic .list-wrap a {display: flex; padding: 5px;}
 #list-basic .thumbnail, #list-basic .summary {display: none;}
/* list-gallery */
 #list-gallery .list-wrap a:hover .newpost, #list-summary .list-wrap a:hover .newpost  {-webkit-transform: none; transform: none;}
 #list-gallery .list-inner {display: flex; flex-wrap: wrap;}
 #list-gallery .list-wrap{float: left; width: calc((100% - 0px) / 3); margin: 0;
 position: relative; box-sizing: border-box;}
 #list-gallery .list-wrap a{display: block; box-sizing: border-box;}
 #list-gallery .list-wrap .thumbnail {width: 100%; overflow: hidden; position: relative;}
 #list-gallery .list-wrap .thumbnail img{width:100%; object-fit: cover;
 -webkit-transform: scale(1); transform: scale(1);	-webkit-transition: .5s ease-in-out;
 transition: .5s ease-in-out;}
 #list-gallery .list-wrap .thumbnail:hover img{	-webkit-transform: scale(1.3); transform: scale(1.3);}
 #list-gallery .list-lock .thumbnail-info:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;}
 #list-gallery .list-lock .thumbnail:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 position: absolute; display: flex; justify-content: center; align-items: center;
 width: 100%; height: 100%; opacity: 1;}
 #list-gallery .list-td, #list-gallery .summary, #list-gallery .thumbnail-info {display: none;}
/* list-summary */
 #list-summary .list-inner {display: flex; flex-wrap: wrap;}
 #list-summary .list-wrap{float: left; width: calc((100% - 5px) / 1); margin: 1px;
 position: relative; box-sizing: border-box;}
 #list-summary .list-wrap a{display: flex; padding: 5px;}
 #list-summary .list-wrap .thumbnail {width: 120px; height: 120px; overflow: hidden; position: relative;}
 #list-summary .list-wrap .thumbnail img{width:100%; object-fit: cover; -webkit-transform: scale(1);
 transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
 #list-summary .list-wrap a:hover img{-webkit-transform: scale(1.3); transform: scale(1.3);}
 #list-summary .summary {padding: 5px; width: calc(100% - 120px); display: flex; flex-direction: column;
 justify-content: space-between;}
 #list-summary .summary-desc {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
 text-overflow: ellipsis;}
 #list-summary .summary-title {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 text-overflow: ellipsis; font-weight: bold;}
 #list-summary .summary-date {text-align: right;}
 #list-summary .list-lock .summary-title:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;}
 #list-summary .list-lock .thumbnail:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 position: absolute; display: flex; justify-content: center; align-items: center;
 width: 100%; height: 100%; opacity: 1;}
 #list-summary .list-td, #list-summary .thumbnail-info {display: none;}

 #list-playlist .list-wrap a{ float: left; width: 98%; border-bottom: 0 !important; margin-bottom: 5px; padding: 3px;}
 #list-playlist .list-wrap a{display: block; box-sizing: border-box;}
 #list-playlist .list-title {overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;}
 #list-playlist .list-title span {font-weight: bold;}
 #list-playlist .list-inner {display: block; background: none; padding: 0;}
 #list-playlist .list-date {display: none;} 
 #list-playlist .summary {display: block;} 
 #list-playlist .summary-desc {margin:0;}
 #list-playlist .list-info,  #list-playlist .list-cate,  #list-playlist .thumbnail,
 #list-playlist .summary-date, #list-playlist .list-td{display: none;}
 #list-playlist .list-lock .summary-desc:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 2px;}

/* article */
 .article-cate a, .article-tag a {padding: 3px;}
 #article {padding: 0;}
 .article-title {text-align: center; background: #fff; padding: 3px;}
 .article-title span {font-weight: bold; font-size: 12px;}
 .article-date {display: flex; justify-content: space-between;
 padding: 3px 0;}

 .article-tag a::before {content: '#'; margin-right: 3px;}


/* container_postbtn */
 .container_postbtn {padding: 10px 0 !important;}
 .container_postbtn .postbtn_like {border-radius: 0 !important; padding: 0 !important;}


/* article paging , article-related */
 .article-paging {display: flex; justify-content: space-between; 
 font-size: 11px; font-weight: bold; margin: 5px 0;} 
 .article-paging a {padding: 3px;}
 .article-btn {text-align: center;}
 .comment-btn, .related-btn {padding: 3px; background: #fff;}


 #article-related { display: none; padding: 5px;}
 #article-related:after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 #article-related .rd-inner {font-size: 11px; font-weight: bold; text-align: right;}
 #article-related .rd-wrap { float: left; width: calc((100% - 8px) / 4); margin: 1px; position: relative;}
 #article-related .rd-title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 text-align: center;  width: 100%; height: 100%; 
 font-size: 12px; font-weight: bold;}
 #article-related .thumb_related img {width: 100%; object-fit: cover;}


/* blockquote */
 blockquote[data-ke-style='style1'] span:before{ content: ''; display: block; background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0; padding-top: 25px; transform: rotate(0deg);
 margin-top: 10px; }
 blockquote[data-ke-style='style1'] span:after{ content: ''; display: block; background: url(https://t1.daumcdn.net/keditor/dist/0.4.9/image/blockquote-style1.svg) no-repeat 50% 0; padding-top: 25px; transform: rotate(180deg); 
 margin-bottom: 10px;}

 blockquote[data-ke-style='style2'] { padding:5px; margin:10px 0;  font-size: 12px; line-height:20px; font-weight: bold;
 text-align: left; background: #fff;}
 blockquote[data-ke-style='style3'] { padding: 5px; margin:10px 0; font-size: 8pt; line-height: 20px; overflow-y: auto;}
 blockquote p  {font-size: 13px !important;}
 blockquote, blockquote p {text-align: center;}
 
 .btn-toggle-moreless{padding: 5px; font-family: 'Pretendard-Regular'; font-size: 10.5px !important; font-weight: bold;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless {line-height: 23px !important;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless:before{content:"\f0d7"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless:before{content:"\f0d8"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 div[data-ke-type='moreLess'].open .moreless-content{margin:0; padding:5px; overflow: hidden;}
 figure.fileblock {margin-top: 10px !important; margin-bottom: 10px !important;}
 figure.imageblock.alignCenter {margin: 0 auto !Important;}
 #tt-body-page figure.imageblock img, figure.imageblock img {margin: 10px 0 !important;}
 figure.imagegridblock, #tt-body-page figure.imagegridblock {margin: 10px 0 !important;}
 figure.imagegridblock .image-container {justify-content:  center !important;}


/* comment */
 .tistoryProfileLayerTrigger {display:none !important;} 
 #comment {display: none; margin: 5px 0;}
 .comment-write {padding: 0;}
 .comment-textarea {display: flex; flex-direction: column; background: #fff;}
 .comment-textarea textarea {width: 100%; height: 70px; font-family: 'Pretendard-Regular';
 padding: 5px; background: none; border: none;}
 .comment-textarea textarea:focus {transition-duration: 0.3s;}
 .comment-input { display: flex; justify-content: flex-end; align-items: center; margin: 5px 0;}
 .comment-type:last-child {border-bottom: none;}
 .comment-send {padding: 5px; height: 24px;}
 .comment-secret {height: 14px;}
 .comment-input input[type=submit] { background: transparent;}
 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{ content: '공개'; padding: 5px;}
 .comment-input input[type="checkbox"]:checked+label:before{ content: '비밀글'; padding: 5px;}
 .sguest-input  {display: flex;}
 .sguest-input input[type="text"], .sguest-input input[type="password"] {border:none; background: none;
 padding: 5px; border-radius: 0 !important; width: 50%; background: #fff;}
 #comment-list, #reply-list {padding: 5px;} 
 .reply-type {padding-left: 15px;}
 .comment-info {display: flex; flex-direction: row; justify-content: space-between;}
 .comment-left {display: flex;}
 .comment-img {display: none;}
 .comment-name, .comment-date {margin-right: 5px;}
 .comment-name span {font-weight: bold;}
 .comment-edit {display: flex;}
 .comment-edit a {display: flex; align-items: center; justify-content: center;}
 .comment-edit a:first-child {margin-right: 5px;}

 
 #guestbook {padding: 0;}
 #guestbook .comment-write {margin: 5px 0;}
 #guestbook .comment-textarea textarea {height: 50px;}



/* notice */
 #notice {padding: 3px; margin: 5px 0;}
 #notice:first-child {margin-top: 0;}
 #notice:last-child {margin-bottom: 0;}
 .notice-title {text-align: center; padding: 3px 10px; background: #fff;} 
 .notice-title span {font-weight: bold; text-align: center;}
 .notice-date {text-align: center; margin: 5px 0;}
 #notice figure.imageblock img {margin: 0 !important;}
/* notice 공감버튼 */
 #notice .container_postbtn {display: none;}
/* notice - profile */
 #notice .article-profile {display: flex; margin: 0 15px 0 0; align-items: center;}
 #notice .summary-1,  #notice .summary-dot,  #notice .summary-2 {margin-right: 10px;}
 #notice .summary-1 img {width: 32px; height: 32px; border-radius: 50%;}
 #notice .summary-dot {border-radius: 50%; width: 4px; height: 4px;}


/* protected */ 
 #protected { display: flex; margin: 0 auto; height: 100%; flex-direction: column;
 align-items: center; justify-content: center; padding: 20px;}
 .protected-info {display: flex; width: 100%; flex-direction: column; justify-content: space-between;}
 .protected-cate {text-align: center;}
 .protected-td {text-align: center; display: none;}
 .protected-title span {font-size: 13px; font-weight: bold;}
 .protected-desc {font-size: 13px; font-weight: bold; margin-bottom: 10px; text-align: center}
 .protected-desc span {font-size: 13px; font-weight: bold;}
 .protected-wrap {display: flex; flex-direction: column;}
 .protected-password input[type="password"] {height: 25px; border: none; font-family: 'Pretendard-Regular'; 
 background: #fff; padding: 3px;}
 .protected-password input[type="button"] {height: 25px; border:none; font-family: 'Pretendard-Regular';
 background: none; padding: 3px;}


/* tag */
 #tag {text-align: left;}
 .tag-desc ul {display: flex; flex-wrap: wrap; flex-direction: row;}
 .tag-desc li a {display: block; padding: 5px;}
 .tag-desc a:before{content: "#"; font-weight:bold; margin-right: 1px; } 


/* cover */
 .cover-inner {margin-right: 0;}
 .cover-inner .inner:not(:last-child) {margin: 5px 0;}
 .c-notice.inner, .c-gallery.inner, .c-list.inner, .c-playlist.inner, .c-swiper.inner {padding: 3px;}
 .c-title {text-align: center; margin-bottom: 5px; background: #fff;
 padding: 3px;}
 .c-title span {font-weight: bold; padding: 5px; margin: 5px 0;} 

 .c-notice .c-img {position: relative; width: 100%; text-align: center; margin-bottom: 5px;}
 .c-notice .c-img img {max-width: 100%;}

 .c-gallery.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-gallery .c-gwrap { float: left; width: calc((100% - 6px) / 3); margin: 1px; position: relative;}
 .c-gallery .c-thumbnail {width: 100%; overflow: hidden; position: relative;}
 .c-gallery .c-thumbnail img {width:100%; object-fit: cover;  -webkit-transform: scale(1);
 transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
 .c-gallery .c-thumbnail:hover img {-webkit-transform: scale(1.3); transform: scale(1.3);}
 .c-gallery .c-listtitle {text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 overflow: hidden; display: none;}
 .c-gallery .thumbnail-text {display: none;}

 .c-list .clist-wrap a {display: block; padding: 5px 0;} 
 .c-list .c-listtd {display: flex; flex-direction: row; justify-content: space-between;
 align-items: center;}
 .c-list .c-listtext {overflow: hidden;text-overflow: ellipsis;
 display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
 .c-list .c-date  {width: 40%; display: flex; justify-content: flex-end; align-items: center;}
 .c-list .c-listtitle {overflow: hidden; text-align:left; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;text-overflow: ellipsis; width: 80%;}
 .c-list .c-proimg img {width: 32px; height: 32px; object-fit: cover; border-radius: 50%;}
 .c-list .c-listtitle span {font-weight: bold;}
 .c-list .c-summary { display: none; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

 .c-playlist .thumbnail-title {text-align: left; font-weight: bold; margin-bottom: 5px;}

/* swiper */
 .swiper { width: 100%; margin: 0 !important; }
 .swiper-slide { text-align: center; font-size: 18px; background: #fff;
 /* Center slide text vertically */
 display: -webkit-box; display: -ms-flexbox;
 display: -webkit-flex; display: flex;
 -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center;
 justify-content: center; -webkit-box-align: center; -ms-flex-align: center;
 -webkit-align-items: center; align-items: center; }
 .swiper-slide img { display: block; width: 100%; object-fit: cover; height: 100%;}
 .swiper-pagination-bullet {background: #ffffffb6 !important; opacity: 100 !important;}
 .swiper-pagination-bullet-active {background: #aeaeae !important; opacity: 100 !important;}



/* 반응형 */ 
 @media (max-width:800px){
 #whole{ width: 100% !important; height: auto !important; overflow: hidden;
 padding: 5px;
 margin: 0 auto; display: flex; flex-direction: column; margin-bottom: 30px;}
 #header {margin-bottom: 0; height: auto;}
 #content {width: 100% !important; height: 100% !important;
 display: flex; flex-direction: column; overflow: hidden;}
 #sidebar {width: 100% !important; margin-right: 0; margin: 10px 0;}
 #container {width: 100% !important; height: auto !important;}
 .s-category {height: auto !important;}
 .icon {display: flex; flex-direction: row; justify-content: space-between;}
 /*가로배열*/
 .profile, .tag-desc li a, .comment-edit, .article-prev, .article-next
 .comment-date {display: flex; flex-direction: row; align-items: center;}
 .comment-edit a {margin-right: 5px;}
 .menu {margin-top: 0;}
 #paging {display: none;}
 #m-paging {width: 100%; left: 0;
 display: flex; justify-content: space-between;}
 .p-prev a, .p-next a {border: none !important; margin-bottom: 0;
  width: auto !important; height: auto !important;}
  #footer {margin-bottom: 15px;}
  .h-btn1 i, .h-btn2 i, .h-text a {font-size: 20px;}
  .h-text img {width: 20px; height: 20px;}
  #music {left: 0; width: 80%;}
  .w-footer {height: 35px;}
  .search-inner input[type="text"] {width:calc(100% - 50px); border-radius: 0 !important;}
  .search-inner input[type="button"] {box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf !important;}
 } 



/* windows 95 scrollbar */
 ::-webkit-scrollbar {width: 16px; height: 16px; background: none;}
 ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button {
  width: 16px; height: 16px;  border: 1px solid;
  border-color: #ddd #000 #000 #ddd;}
 ::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;}
 ::-webkit-scrollbar-button { background-repeat: no-repeat; background-size: 16px;}
 ::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");}


/* copyright */
 #copyright a{ position: fixed;  left: 10px; bottom: 10px; display: flex;
 flex-direction: row; align-items: center;}
 .copyright-1{ position: relative; font-size: 11.5px; font-weight: bold; color: #9681bd !important;
  width: auto; z-index: 999;}
 .copyright-2{ opacity:0; margin-left: 3px; transition: all 1s; color: #9681bd !important;}
 .copyright-1:hover + .copyright-2{ opacity:1; }


/*youtube*/
 .youtube{position:relative; width:100%; padding-bottom:56.25%;}
 .youtube iframe{position:absolute; width:100%; height:100%;}
 .video-container {position: relative; width:100%; padding-bottom: 56.25%;
 padding-top: 0; height: 0; overflow: hidden;}
 .video-container iframe, .video-container object, .video-container embed {
 position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

 
/* 화면전환 */
 body{ animation: fadein 1500ms ease-out;
 -moz-animation: fadein 1500ms ease-out; /* Firefox */
 -webkit-animation: fadein 1500ms ease-out; /* Safari and  Chrome */
 -o-animation: fadein 1500ms 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;}
 }

/* - - - BGM 플레이어 관련 - - - */
.mm-bgm{
  position: fixed;
  bottom: 15px; /* 우측상단 원하면 bottom을 top 으로 변경 */
  right: 15px;
  z-index: 9999; /* 맨위로 */
  border: none;
}
/* - - - BGM 플레이어 끝 - - -*/