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


/*배경화면*/
 body::before {position: fixed; margin: 0px;
 background-repeat: no-repeat; background-attachment: fixed;
 background-position: center;
 top: 0; left: 0; right: 0; bottom: 0;
 background-size: cover;
 filter: blur(5px); transform: scale(1.02);
 z-index: -1; content: "";}


/* 새글표시 - display: none; 삭제*/
 .newpost {display: none; vertical-align: middle; width: 12px !important; height: 12px !important;}


/* loading 로딩화면 사용 방법
  아래 #loading, #loading > img { } 안에 display: none; 을 display: flex;로 변경
  후 스킨편집 화면에서 로딩창 이미지 설정해주시면 됩니다.
 */
 #loading
 { width: 100%; height: 100%; top: 0; left: 0; background: #ffffff;
 position: fixed; display: none; z-index: 999; opacity: 0.9;}
 #loading > img { display: none; width: 70px; height: 70px; margin: auto;}


/* layout */
/* 폰트사이즈 변경 font-size: 숫자px / 글자간격 조절 line-height 숫자px 조절해주시면 됩니다.*/
 #whole {font-size: 11.5px; line-height: 15px;
 width: 1300px; height: 720px; position: relative;
 border-radius: 15px; overflow: hidden;
 margin: 100px auto 20px auto; display: flex;
 background: #ffffffd4;}

 #container {width: calc(100% - 550px); height: 100%; overflow-y: auto;}
 #side1 {width: 250px; background: #fff;}
 #side2 {width: 300px;}


/* side1 */
 .side-link {display: flex; padding: 5px; justify-content: end;
 font-size: 13px;}
 .side-link li:first-child {margin-right: 5px;}
 .side-link li a {color: #fff;}

 .side-name {display: flex; flex-direction: row;
 justify-content: center; align-items: flex-start; height: 120px;}
 .side-img {position: relative; width: 85px;
 display: flex;}
 .side-img img {width: 85px; height: 85px; border-radius: 50%;}
 .side-info a:hover img {opacity: .5;} 
 .side-blogger {font-weight: bold; margin-top: 5px;
 color: #fff; text-align: center;}
 .side-blogger a {color: #fff;}
 .setting a {color: #fff; margin-left: 5px; font-size: 15px;}
 .bgm-img img, .side2-img img {cursor: zoom-in;}

/* image modal */
 .modal { display: none; z-index: 500; width: 100%; height: 100%; 
 position: fixed; top: 0; left: 0;}
 .modalBox { max-width: 400px; position: relative;
 text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%);}
 .modalBox img {width: 100%; border-radius: 5px;
 cursor: zoom-out;}
/* image modal end */


/* tooltip & wave */
 .tooltip {color: #fff;
 outline: none; cursor: help; text-decoration: none;
 position: relative; font-weight: bold;}
 .tooltip span {margin-left: -999em;
  position: absolute; color: #fff;}
 .tooltip:hover span { border-radius: 5px 5px;
  -moz-border-radius: 5px; -webkit-border-radius: 5px;
  position: absolute; left: 1em;
  top: 2em;  z-index: 99;  margin-left: 0;
  width: 70px; text-align: center;}
 .classic { padding: 5px; }

 .wave {position: relative;
 color: #fff; text-align: center;
 font-weight: bold; font-size: 24px; margin-bottom: 30px;}
 .wave::before {content: ""; position: absolute; left: 0; 
 bottom: -20px; right: 0; background-repeat: repeat; 
 height: 20px; background-size: 40px 40px; transform: rotate(180deg);}
 .wave::after { content: ""; position: absolute; left: 0;
 bottom: -30px; right: 0; background-repeat: repeat; height: 30px;
 background-size: 80px 40px; transform: rotate(180deg);}


/* menu */
 .side-menu {position: relative;}
 .menu-text {padding: 10px 0 0 45px; font-weight: bold; display: flex; align-items: center;
 font-size: 15px; letter-spacing: 1.5px; margin-bottom: 5px;}
 .menu-text svg,  .menu li a svg {margin-right: 2px;}
 .menu-list {width: 100%;}
 .menu li a { padding: 5px 0 5px 45px; display: flex; align-items: center; font-size: 13px;
 letter-spacing: 1.5px; margin: 0 1px; border-radius: 5px; }
 
/* hover */
 .menu li a:hover, .category a:hover {color: #fff; letter-spacing: 3px; transition: all 0.3s ease;} 
 #list-basic .list-wrap a:hover {color: #fff; transition: all 0.3s ease;} 
 #list-basic .list-wrap a:hover .list-title,
 .c-list .clist-wrap a:hover .c-listtext, .tag-desc li a:hover {letter-spacing: 2px; transition: all 0.3s ease;}
 .comment-btn:hover, .related-btn:hover {cursor: pointer;}
 .comment-send:hover {cursor: default;}

/* category */
 .category {height: 150px; overflow-y: auto;}
 .category > ul > li > a {display: none;}
 .category a {padding: 5px 0 5px 45px; display: flex; align-items: center; font-size: 13px;
 letter-spacing: 1.5px; margin: 0 1px; border-radius: 5px;}
 
 .sub_category_list {display: none;}

 .category_list > li > a:before{content:"\f07b"; font-family:"Font Awesome 5 Free"; font-weight:700;
  margin-right: 2px; }
 .sub_category_list > li > a:before{content:"-";}


/* bgm */
 .side-bgm {width: calc(100% - 20px); margin: 9px 10px 10px 10px;
 height: 184px; border-radius: 10px;}
 .bgm-img {position: relative; width: 100%; overflow: hidden; border-radius: 10px 10px 0 0;}
 .bgm-img img {width: 100%; height: 130px; object-fit: cover;}

 .bgm-1 {margin-top: 5px;}
 .bgm-2 {margin-top: 2px; margin-bottom: 5px; width: 100%;}
 .bgm-title {font-weight: bold; margin-bottom: 5px;}
 .bgm-title, .name {width: 100%; text-align: center;  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

 .audio-player .controls .volume-container .volume-button .volume {scale: 0.5 !important;}
 .audio-player {user-select: none;
 width: 100%; color: white;
 overflow: hidden; display: grid;
 grid-template-rows: 6px auto; border-radius: 0 0 10px 10px;}
 
 .audio-player .timeline {background: white;
 width: 100%; position: relative; cursor: pointer;
 box-shadow: 0 2px 10px 0 #0008;}
 .audio-player .timeline .progress {
 width: 0%; height: 100%;}
 .audio-player .controls {display: flex; justify-content: space-between;
 align-items: center; padding: 0 20px; flex-direction: column;}
 .bgm-1 {
 display: flex; justify-content: center; align-items: center;}
 .audio-player .controls .toggle-play.play {
 cursor: pointer; position: relative;
 left: 0; height: 0; width: 0; border: 6px solid #0000;
 border-left: 11px solid white;}
 .audio-player .controls .toggle-play.pause {
 height: 15px; width: 17px; cursor: pointer;
 position: relative; margin-top: 5px;}
 .audio-player .controls .toggle-play.pause:before {
 position: absolute; top: 0;
 left: 0px; background: white; content: "";
 height: 11px; width: 3px;}
 .audio-player .controls .toggle-play.pause:after {
 position: absolute; top: 0;
 right: 8px; background: white; content: "";
 height: 11px; width: 3px;}
 .audio-player .controls .time { display: flex;}
 .audio-player .controls .time > * {
 padding: 2px;}
 .audio-player .controls .volume-container {
 cursor: pointer; position: relative; z-index: 2;}
 .audio-player .controls .volume-container .volume-button {
 display: flex; align-items: center; height: 13px;}
 .audio-player .controls .volume-container .volume-slider {
 position: absolute; left: -3px; top: 15px; z-index: -1;
 width: 0; height: 15px; background: white;
 box-shadow: 0 0 20px #000a; transition: 0.25s;}
 .audio-player .controls .volume-container .volume-slider .volume-percentage {
 height: 100%; width: 35%;}
 .audio-player .controls .volume-container:hover .volume-slider {
 left: -50px; width: 120px;}
 [class*=icono-] {color: #fff !Important;}
 

/* search , paging */
 .search {width: calc(100% - 40px); display: flex; align-items: center; 
 justify-content: space-between; margin: 10px 20px; 
 padding: 5px 10px; border-radius: 15px; background: #fff;}
 .search i {margin-right: 5px;}
 .search input {border: none; font-family: 'Pretendard-Regular';
 background: none;}

 #paging {display: flex; margin:10px; 
 align-items: center; justify-content: space-between;}
 .p-prev a, .p-next a {display: flex; align-items: center;
 justify-content: center; width: 20px; height: 20px; border-radius: 5px; 
 background: #fff;}
 .p-prev a {margin-right: 10px;}
 .blog-desc {width: 100%; text-align: center; font-weight: bold;}
 .p-prev a:hover, .p-next a:hover{cursor: pointer; color: #fff;}


/* side 2 */ 
 .side-rctps {background: #fff;
 border-radius: 10px; margin: 10px; overflow: hidden;
 height: 265px; overflow-y: auto;}
 .side-rctps a:first-of-type {margin-top: 0 !important;}
 .side2-title {display: flex; justify-content: space-between;
 padding: 5px 10px;}
 .side2-title span {font-size: 15px; font-weight: bold;}
 .view {font-size: 11.5px;}
 
 .rctps-link {display: block; padding: 5px;}
 .rctps-wrap {display: flex;}
 .rctps-thumbnail {position: relative; width: 50px; overflow: hidden;
 border-radius: 50%;}
 .rctps-thumbnail img {width: 50px; height: 50px;}

 .rctps-td {display: flex; flex-direction: column; justify-content: center;
 margin: 0 10px; width: calc(100% - 70px);}
 .rctps-title {font-weight: bold; font-size: 13px; margin-bottom: 5px;
 width: 100%; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

 .rctps-link:hover .rctps-title, .rctps-link:hover .rctps-date {color: #fff;
 transition: all 0.3s ease;}

 .side2-img {width: calc(100% - 20px); margin:10px; height: 80px;
 background-position: center; overflow: hidden;
 background-repeat: no-repeat; background-size: cover;
 border-radius: 10px;}
 .side2-img img {width: 100%; height: 100%; object-fit: cover;}


/* 배너 플러그인 */
 .module.module_plugin {display: flex; justify-content: center;
 flex-direction: column; align-items: center;  text-align: center;
 font-weight: bold;
 padding: 10px;}
 .module.module_plugin a {display: flex; flex-direction: column; margin-bottom: 5px;}
 .module.module_plugin img {max-width: 100%;} 


/* list */ 
 .empty {text-align: center; margin: 10px; width: 100%;
 padding: 10px; border-radius: 5px; color: #fff;}
 .list-inner:after{content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .list-wrap a {background: transparent;}
 
 .cate-link2 {display: block; margin: 0 auto;}
 .category-name { display: flex; align-items: center; padding: 5px;
 justify-content: center;}
 .cate-info1 {display: flex; flex-direction: row; align-items: center;
 padding: 5px; border-radius: 5px;}
 .cate-info1 i {margin-right: 5px;}
 .cate-count {margin-left: 5px; font-weight: bold;}

 .list-inner {height: 100%; overflow-y: auto;}
/* list-basic */
 #list-basic .list-wrap{ display: block;}
 #list-basic .list-table {display: flex; justify-content: space-between;}
 #list-basic .table-title {width: calc(100% - 90px); text-align: center; padding: 10px;}
 #list-basic .table-date {width: 90px; text-align: center; padding: 10px;}
 #list-basic .list-td{ width: 100%; display: flex; flex-direction: row; justify-content: space-between;
 align-items: center;}
 #list-basic .list-title {width: calc(100% - 40px); line-height: 20px; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-basic .list-lock .list-title::after {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-left: 3px;}
 #list-basic .list-date {width: 40px; text-align: center; }
 #list-basic .list-wrap a {display: block; padding: 10px; margin: 10px;
 width: calc(100% - 20px); background: #fff; border-radius: 10px;}
 #list-basic .thumbnail, #list-basic .summary {display: none;}
 #list-basic .list-wrap a:hover .list-title::before {display: inline-block;}
/* 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: grid;padding: 10px 20px;grid-template-columns: repeat(4,auto);gap: 20px 8px;}
 #list-gallery .list-wrap{ position: relative; box-sizing: border-box; }
 #list-gallery .list-wrap:nth-child(3n) {margin-right: 0;}
 #list-gallery .list-wrap a{display: block; box-sizing: border-box;}
 #list-gallery .list-wrap .thumbnail {width: 100%; overflow: hidden; position: relative; height:150px;
 border-radius: 10px;}
 #list-gallery .list-wrap .thumbnail img{width:100%; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;
 background: #fff;}
 #list-gallery .thumbnail-info {padding: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 2; text-align: center; -webkit-box-orient: vertical;  width: 100%; height: 100%;
 position: absolute; top: 0; left: 0; border-radius: 5px; opacity: 0; transition: 0.3s; 
 display: flex; align-items: center;  justify-content: center;
 font-weight: bold; flex-direction: column;}
 #list-gallery .list-wrap .thumbnail:hover .thumbnail-info, 
 #list-gallery .list-wrap .thumbnail:focus .thumbnail-info{ opacity: 1; transition: all 0.3s ease;}
 #list-gallery .list-wrap a:hover img{	-webkit-transform: scale(1.1); transform: scale(1.1);}
 #list-gallery .list-wrap .thumbnail:after { z-index: 99; width: 0; height: 6px; position: absolute;
  left: 0; top: 0; content: ""; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
 #list-gallery .list-wrap a:hover .thumbnail:before {opacity: 0;}
 #list-gallery .list-wrap a:hover .thumbnail:after { width: 100%;}
 #list-gallery .list-lock .thumbnail-info:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 #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 {display: flex; flex-direction: column;
 margin: 5px 0;}
 #list-gallery .list-title {font-size: 13px; font-weight: bold;
 margin-bottom: 5px; width: 100%; line-height: 20px; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-gallery .summary, #list-gallery .list-table {display: none;}
/* list-gallery */
 #list-summary .list-inner {display: flex; flex-wrap: wrap; padding: 5px 5px 0 5px;}
 #list-summary .list-wrap{float: left; width: calc((100% - 20px) / 3); margin: 0 10px 10px 0; position: relative;
 box-sizing: border-box; padding: 10px; border-radius: 10px; background: #ffffff70;}
 #list-summary .list-wrap:nth-child(3n) {margin-right: 0;}
 #list-summary .list-wrap a{display: block; box-sizing: border-box;}
 #list-summary .list-wrap .thumbnail {width: 100%; overflow: hidden; position: relative; 
 border-radius: 10px;}
 #list-summary .list-wrap .thumbnail img{width:100%; -webkit-transform: scale(1);
 height: 150px; transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;
 background: #fff;}
 #list-summary .thumbnail-info {padding: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 2; text-align: center; -webkit-box-orient: vertical;  width: 100%; height: 100%;
 position: absolute; top: 0; left: 0; border-radius: 5px; opacity: 0; transition: 0.3s; 
 display: flex; align-items: center;  justify-content: center;
 font-weight: bold; flex-direction: column;}
 #list-summary .list-wrap .thumbnail:hover .thumbnail-info, 
 #list-summary .list-wrap .thumbnail:focus .thumbnail-info{ opacity: 1; transition: all 0.3s ease;}
 #list-summary .list-wrap a:hover img{	-webkit-transform: scale(1.1); transform: scale(1.1);}
 #list-summary .list-wrap .thumbnail:after { z-index: 99; width: 0; height: 6px; position: absolute;
  left: 0; top: 0; content: ""; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
 #list-summary .list-wrap a:hover .thumbnail:before {opacity: 0;}
 #list-summary .list-wrap a:hover .thumbnail:after { width: 100%;}
 #list-summary .list-lock .thumbnail-info:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 #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 {display: flex; flex-direction: column;
 margin: 5px 0;}
 #list-summary .list-title {font-size: 13px; font-weight: bold;
 margin-bottom: 5px; width: 100%; line-height: 20px; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-summary .summary-desc  {width: 100%; line-height: 20px; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 5; -webkit-box-orient: vertical;}
 #list-summary .list-table, #list-summary .summary-td {display: none;}

/* article */
 #article {padding-left: 5px; min-height: 100%;}
 #article .article-td {display: flex; flex-direction: column; padding: 5px;}
 .article-desc {padding: 5px;}
 .article-title {text-align: center;}
 .article-title span {font-weight: bold; font-size: 12px;}
 .article-cate {text-align: center; margin-top: 5px;}
 .article-date {text-align: center; margin-top: 5px;}
 .article-tag {padding: 5px; display: none;}
 .article-tag a::before {content: '#'; margin-right: 3px;}


/* articel-desc */
 .article-desc a {font-weight: bold;}
 .article-desc .fileblock a:before {display: none;}


/* container_postbtn */
 .container_postbtn {padding: 10px 0 !important;}


/* article paging , article-related */
 .article-paging {display: none; justify-content: space-between;  font-weight: bold; margin: 5px 0;} 
 .article-btn {display: flex; flex-direction: row; justify-content: space-between;
 padding: 5px; font-weight: bold;}
 .comment-btn, .related-btn {text-transform: uppercase;
 margin:5px;}
 
 #article-related { display: none; padding: 10px; margin:0 5px 5px 5px; background: #ffffff70;
 border-radius: 10px;}
 #article-related:after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 #article-related .rd-inner {font-weight: bold; text-align: right;}
 #article-related .rd-wrap { float: left; width: calc((100% - 15px) / 4); margin: 0 5px 5px 0; position: relative;}
 #article-related .rd-wrap:last-child {margin-right: 0;}
 #article-related .rd-title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 text-align: center;  width: 100%; height: 100%;  margin-top: 5px;
 font-size: 12px; font-weight: bold;}
 #article-related .thumb_related img {width: 100%; height: 150px; object-fit: cover; border-radius: 5px;}


/* 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;
 border-radius: 5px;}
 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;
 user-select: none;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless {border-radius: 5px; line-height: 23px;
 background: #ffffff70;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless{border-radius: 5px 5px 0 0;}
 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;
 border-radius: 0 5px 5px 5px; background: #ffffff70;}
 figure.fileblock {margin-top: 10px !important; margin-bottom: 10px !important;
 width: 380px !important; border-radius: 5px; border: none !important;}
 figure.imageblock.alignCenter {margin: 10px auto !Important;}
 #article #tt-body-page figure.imageblock img, figure.imageblock img {margin: 5px 0 !important;}
 figure.imagegridblock, #tt-body-page figure.imagegridblock {margin: 10px 0 !important;}
 figure.imagegridblock .image-container {justify-content:  center !important; margin: 5px 0 !important;}
 figure.fileblock a {background: #ffffff70; border-radius: 10px;}
 hr[data-ke-style], #tt-body-page hr[data-ke-style] {background: #eee !important;
 height: 1px !important; border-radius: 0px !important;
 border-bottom: 1px dashed currentColor !important; width: 100% !important; margin: 20px 0 !important;}
 figure figcaption::before {content:"\f062"; font-family:"Font Awesome 5 Free"; font-weight:700; margin-right: 5px;}
 figure figcaption {padding: 5px; font-size: 11.5px !important; border-radius: 5px;}

 ul[data-ke-list-type='disc'], ul[data-ke-list-type='circle'], ol[data-ke-list-type='decimal'] {margin-left: 20px;}
 ol[data-ke-list-type='decimal'] li::marker {font-weight: bold;}

 
/* comment */
 .comment-text {margin: 5px 0; text-align: center;}
 .comment-text span {font-weight: bold;}
 .tt_box_namecard {display: none !important;}
 .tistoryProfileLayerTrigger {display:none !important;} 
 #comment {display: none; padding: 5px; }
 .comment-write {margin: 5px 0;} 
 .comment-textarea {display: flex; flex-direction: column; border-radius: 10px;
 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; font-family: 'Pretendard-Regular';}
 .comment-secret, .comment-send {padding: 5px; user-select: none;}
 .comment-input input[type=submit] { background: transparent;}
 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{ content: '공개';}
 .comment-input input[type="checkbox"]:checked+label:before{ content: '비밀글';}
 .sguest-input  {display: flex;}
 .sguest-input input[type="text"], .sguest-input input[type="password"] {border:none; background: none;
 padding: 5px; width: 50%;}

 .comment-type {margin: 10px 0; border-radius: 10px; overflow: hidden;}
 #comment-list,#reply-list {padding: 5px;} 
 .reply-type:first-child {border-top: none;}
 #comment-list {background: #ffffff70;}


 .comment-info {display: flex; flex-direction: row; justify-content: flex-start;
 margin-bottom: 5px; align-items: center;}
 .comment-left {display: flex; align-items: center;}
 .comment-img {margin-right: 5px; position: relative; overflow: hidden; width: 30px; height: 30px; border-radius: 50%;}
 .comment-img img {width: 30px; height: 30px; object-fit: cover;
 -webkit-transform: scale(1);	transform: scale(1);
 -webkit-transition: .5s ease-in-out;transition: .5s ease-in-out;} 
 .comment-img:hover img {-webkit-transform: scale(1.3);transform: scale(1.3); object-fit: cover;}
 .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;}

 .comment-secret, .comment-send {padding: 5px;}
 .comment-input input[type=submit] { background: transparent;}
 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{ content: '공개'; font-family: 'Pretendard-Regular';}
 .comment-input input[type="checkbox"]:checked+label:before{ content: '비밀글'; font-family: 'Pretendard-Regular';}
 .sguest-input  {display: flex; font-family: 'Pretendard-Regular';}
 .sguest-input input[type="text"], .sguest-input input[type="password"] {border:none; background: none;
 padding: 5px; border-radius: 0 !important; width: 50%;}
 
 #guestbook {padding: 10px;}
 #guestbook .comment-type {border-radius: 5px; margin: 15px 0;}
 #guestbook .comment-type:last-child {margin-bottom: 0;}
 #guestbook .comment-write {margin: 15px 0;}
 #guestbook .comment-textarea textarea {height: 50px;}


/* notice */
 #notice {margin:20px; width: calc(100% - 40px); padding: 10px;
 border-radius: 10px; background: #ffffff70;}
 .notice-td {text-align: center; padding: 5px;}
 .notice-title {text-align: center;}
 .notice-title span {font-weight: bold; font-size: 13px; text-align: center; padding: 5px;}
 .notice-date {text-align: right;}
 .notice-desc {padding: 5px; border-radius: 5px;}
/* 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;}

.contents_style {font-size:13px;}

/* page */
 #page {padding: 10px;}
 #page hr[data-ke-style], #tt-body-page hr[data-ke-style] {width: 100% !important;}
 .page-title {font-weight: bold; text-align: center;}

/* protected */ 
 #protected { display: flex; margin: 0 auto; height: 100%; flex-direction: column;
 align-items: center; justify-content: center; padding: 20px;
 border-radius: 5px; background: #fff;}
 .protected-info {display: flex; width: 100%; flex-direction: column; justify-content: space-between;}
 .protected-cate {text-align: center; font-weight: bold;}
 .protected-td {text-align: center; display: none;}
 .protected-title span {font-size: 13px; font-weight: bold;}
 .protected-desc {font-weight: bold; margin: 5px 0; 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: 30px; border: none; font-family: 'Pretendard-Regular'; 
 background: none; border-radius: 3px; padding: 3px; width: calc(100% - 30px);}
 .protected-password input[type="button"] {height: 30px; border:none; font-family: 'Pretendard-Regular';
 background: none;  border-radius: 3px; padding: 3px; font-weight: bold;}


/* tag */
 #tag {text-align: left; padding: 5px; border-radius: 5px;}
 .tag-desc ul {display: flex; flex-direction: column;}
 .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{overflow: hidden;}
 .c-title {text-align: center; padding: 5px; color: #fff;}
 .c-title span { font-size: 13px; font-weight: bold;} 

 .c-notice .c-wrap {padding: 5px;}
 .c-notice .c-img {position: relative; width: 100%; text-align: center;}
 .c-notice .c-wrap a {display: block; border-radius: 5px;}
 .c-notice .c-img img {max-width: 100%;}
 .c-notice a:hover img {opacity: 1;-webkit-animation: flash 1.5s;
	animation: flash 1.5s;}
 @-webkit-keyframes flash {
	0% {opacity: .4;}
	100% {opacity: 1;}
 }
 @keyframes flash {
	0% {opacity: .4;}
	100% {opacity: 1;}
 }

 .c-gallery .c-wrap a {font-weight: bold; display: block; border-radius: 5px;}
 .c-gallery .c-inner {padding: 5px; display: flex; flex-wrap: wrap;}
 .c-gallery.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-gallery .c-gwrap { float: left; width: calc((100% - 10px) / 3); margin: 0 5px 5px 0; position: relative;}
 .c-gallery .c-gwrap:nth-child(3n) {margin-right: 0;}
 .c-gallery .c-thumbnail {width: 100%; overflow: hidden; position: relative; border-radius: 15px;}
 .c-gallery .c-thumbnail img {width:100%; object-fit: cover;  -webkit-transform: scale(1);
 border-radius: 15px; background: #fff;
 transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
 .c-gallery .c-thumbnail:hover img {-webkit-transform: scale(1.1); transform: scale(1.1);}
 .c-gallery .c-listtitle {text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 overflow: hidden; margin-top: 5px;}
 .c-gallery .thumbnail-text {display: none;}

 .c-list .clist-wrap a {display: block; width: calc(100% - 10px); padding: 5px;
 margin: 5px;} 
 .c-list .clist-wrap::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-list .c-listtd {display: flex; flex-direction: row; justify-content: space-between;
 align-items: center;}
 .c-list .c-listtext {font-weight: bold; font-size: 13px;}
 .c-list .c-date  {width: 70px; justify-content: flex-end; align-items: center;
 text-align: right;}
 .c-list .c-listtitle {overflow: hidden; text-align:left; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;text-overflow: ellipsis; width: 100%;}
 .c-list .c-proimg img {width: 32px; height: 32px; object-fit: cover; border-radius: 50%;}
 .c-list .c-summary { display: none; text-align: center;
 overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
 .cover-inner .inner{background: #ffffff70; margin: 5px; border-radius: 10px;
 width: calc(100% - 10px);}

 .c-summary .c-inner {display: flex; flex-wrap: wrap;}
 .c-summary.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-summary .c-gwrap { float: left; width: 100%; position: relative;}
 .c-summary .c-gwrap:last-child {border-bottom: none;}
 .c-summary .c-gwrap a {display: flex; padding: 5px; border-radius: 5px;}
 .c-summary .c-gwrap:last-child > a {border-bottom: none;}
 .c-summary .c-thumbnail {width: 130px; overflow: hidden; position: relative; border-radius: 10px;}
 .c-summary .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;
 background: #fff;}
 .c-summary .c-gwrap a:hover img {-webkit-transform: scale(1.3); transform: scale(1.3);}
 .c-summary .thumbnail-info {width: calc(100% - 140px); padding: 5px; margin-left: 10px;
 border-radius: 5px;}
 .c-summary .thumbnail-title {text-align: left; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 overflow: hidden; font-weight: bold;}
 .c-summary .thumbnail-date {text-align: right;}
 .c-summary .thumbnail-summary {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
 text-overflow: ellipsis; margin-top: 10px;}
 
 .cover-inner .inner:last-child {border-bottom: none;}

/* playlist */
/* list-playlist */
#list-playlist .thumbnail, #list-playlist .memo, #list-playlist .info, .list-td{
  display: none;
} 
 
#list-playlist .list-inner {
  background: none;
}

#list-playlist.list-container{
  background:none;
  border: none;
}
 
#list-playlist .list-wrap{
  margin: 10px;
  width: calc(100% - 20px);
  overflow: hidden;
  border: solid 1px var(--border-color);
  border-radius: var(--radius-);
}

#list-playlist .summary-td {
  padding: 5px;
}

#list-playlist .list-item {
  width: 100%; 
  display: block;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.list-playlist .cover-title {
  text-align: center;
  padding: 5px;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
}


.list-playlist .summary{
  width: 100%;
  text-align: center;
  overflow: hidden;
}

#list-playlist .summary
{
  width: 100%;
  text-align: center;
}

.list-playlist .summary-info,
#list-playlist .summary-info{
  padding: 5px;
  width: 100%;
  text-align: left;
}

.list-playlist .summary-title,
#list-playlist .summary-title{
  font-weight: bold;
  width: calc(100% - 70px);
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;  
}

.list-playlist .summary-date,
#list-playlist .summary-date{
  text-align: right;
  width: 100%;
}

#list-playlist .summary-date{
  text-align: right;
  margin-top: 5px;
}

#list-playlist .list-item:hover {
  color: var(--point2-color);
}



/* swiper */
 .c-swiper.inner {padding: 0;}
 .swiper {width:calc(100% - 10px) !important; margin: 0 !important; }
 .swiper.mySwiper  {margin: 10px !important; width: calc(100% - 20px)!important;
 border-radius: 15px;}
 .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: 320px;}
 .swiper-pagination-bullet {background: #ffffff70 !important; opacity: 100 !important;}
 .swiper-pagination-bullet-active {background: #aeaeae !important; opacity: 100 !important;}
/* swiper btn*/
 .swiper-button-prev:after {font-family:"Font Awesome 5 Free" !important; content:"\f0d9" !important;; font-weight:700; 
 font-size: 20px !important;}
 .swiper-button-next:after {font-family:"Font Awesome 5 Free" !important; content:"\f0da" !important;; font-weight:700; 
 font-size: 20px !important;}
 .swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite
 {bottom: 0 !important; top: unset !important;}
  
 
/* 반응형 */ 
 @media (max-width:800px){
 #whole {display: flex; flex-direction: column;  margin: 10px auto 35px;
 width: calc(100% - 20px) !important; height: auto !important; overflow: auto !important;}
 #side-title {writing-mode: unset; text-orientation: unset; transform: unset;
 text-align: center;}
 #container {border-left: none !important; border-right: none !important;}
 #side1, #container, #side2 {width: 100% !Important; height: auto !important;}
 #side1 {border-right: none;}
 .wave {display: none;}
 #list-gallery .list-wrap:nth-child(2n), #list-summary .list-wrap:nth-child(2n) {margin-right: 0;}
 #list-gallery .list-wrap:nth-child(3n), #list-summary .list-wrap:nth-child(3n) {margin-right: auto !important;}
 #list-gallery .list-wrap, #list-summary .list-wrap {width: calc((100% - 10px) / 2); margin: 0 10px 10px 0;}
 /*가로배열*/  
 .search, .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;}
 .bottom-2 {margin-right: 0; margin-bottom: 10px;}
 .menu {margin-top: 0;}
 #paging {width: 96% !important; margin-bottom: 10px;
 display: flex; justify-content: space-between;}
 .side-name{padding-bottom: 10px; height: auto !important;}
 .category, .side-bgm {height: auto !important;}
 .side-rctps, .side2-img {margin: 5px; width: calc(100% - 10px);}
 .c-list .c-date {width: 80px;}
 .modalBox {padding: 20px;}
 } 


/* scallbar */
 ::-webkit-scrollbar { display: none; width: 5px; }
 ::-webkit-scrollbar-track { background-color: #FFF; }
 ::-webkit-scrollbar-thumb { border-radius: 0;}
 ::-webkit-scrollbar-button { display: none; }


/* 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; 
  width: auto; z-index: 999;}
 .copyright-2{ opacity:0; margin-left: 3px; transition: all 1s;}
 .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%;}