@charset "UTF-8";
/* CSS Document */

[data-tistory-react-app='Namecard'] {
display: none !important;
}

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

 body { scroll-behavior: smooth; font-family: 'Pretendard-Regular';
 font-size: 10px; padding: 0; margin: 0; box-sizing: border-box; line-height: 15px; }
 a { text-decoration: none; }
 ul, li, ol {list-style: none; padding:0; margin: 0;}
 input:focus, textarea:focus {outline: none;}
 button {padding: 0; border:0; background: transparent;}
 img {vertical-align: bottom;}
 textarea {resize: none;}

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


/* layout */
 #whole {margin-top: 100px; width: 800px; height: 540px; position: relative; display: flex;}
 #sidebar {width: 260px;  margin-right: 2px; position: relative;
 overflow: hidden; height: 100%;}
 #container {width: 540px; overflow-y: auto;display: flex;
 flex-direction: column; justify-content: space-between;}
 

/* sidebar */
 .sidebar-bg {width: 260px; height: 100%; overflow: hidden; position: absolute;}
 .sidebar-bg img {width: 260px; height: 100%; object-fit: cover; }

 .sidebar-inner {display: flex; flex-direction: column; position: relative; justify-content: space-between;
 height: 100%;}
 .sidebar-icon {display: flex; flex-direction: row; justify-content: space-between; 
 padding: 3px; }

 .sidebar-text {display: flex; flex-direction: column; align-items: center; margin-top: 35px;}
 .blog-title {font-size: 10px; font-weight: bold;}
 .blog-time {font-size: 40px; font-weight: bold;}
 #blog-time {margin: 10px;}

 .sidebar-footer {display: flex; flex-direction: column; align-items: center; margin-bottom: 15px;}
 .footer-music {width: 240px; height: 100px; border-radius: 10px;}
 .music-info {display: flex; margin: 10px;}
 .music-img img {width: 40px; height: 40px; object-fit: cover; border-radius: 3px;}
 .music-text { text-align: left; margin-left: 10px;}
 .music-text span {font-weight: bold; width: 0;}
 .music-time {display: flex; align-items: center; margin: 10px;}
 .music-fill {width: 150px; height: 3px;}
 .fill-bar {width: 100px; height: 3px; position: absolute;}
 .time1 {margin-right: 5px;}
 .time2 {margin-left: 5px;}
 .music-bar {display: flex; justify-content: center;}
 .music-bar i {margin: 0 15px;}
   
 .footer-icon {display: flex; width: 90%; justify-content:space-between; margin-top: 30px;}
 .footer-icon1, .footer-icon2 {width: 30px; height: 30px; 
 border-radius: 50%; font-size: 16px; display: flex; align-items: center; justify-content: center;}
 .footer-icon i {margin-top: -2px;}
 
 .hover-content { position: absolute; left: 0; width: 100%; }
 .hover-content { height: 0; bottom: 0;
 -moz-transition: height 0.7s ease;
 -ms-transition: height 0.7s ease;
 -o-transition: height 0.7s ease;
 -webkit-transition: height 0.7s ease;
 transition: all 0.7s ease;}
 .footer-icon1:hover .hover-content {height: 100%; display: block;}

 .hover-name {font-size: 11px; font-weight: bold; margin-bottom: 10px;}
 .hover-text, .hover-text2 {display: flex; flex-direction: row; align-items: center; justify-content: center;   text-align: center;}
 .hover-link {position: relative; margin: 0 30px;
 border-radius: 10px; padding: 10px; margin-top: 80px;}
 .hover-menu {position: relative; margin: 0 30px;
 border-radius: 10px; padding: 10px; margin-top: 20px;}

 .hover-text li a, .hover-text2 li a {display: flex; flex-direction: row;  align-items: center; justify-content: center;   text-align: center;
 margin:5px;  width: 40px; height: 40px; border-radius: 5px; }
 .hover-icon {font-size: 25px; margin-top: 10px;}
 
 .pop-bg1{display:none; position:fixed; _position:absolute; top:0; left:0; width:100%;  height:100%; z-index:100;}
 .pop-bg1 .pop-Background1 {position:absolute; top:0; left:0; width:100%; height:100%; }
 .pop-bg1 .popuplayer1 {display:block;}
 .popuplayer1 {width:300px; height:300px; display:none; position:absolute; top:40%; left:50%; z-index:10;
 border-radius: 5px; }

 .category-title {font-size: 15px; font-weight: bold; margin: 20px 0;}
 .category-list {display: flex; justify-content: center;}
 .category-list > ul > li > a {display: none;}
 .category-list > ul > li > ul > li  {margin: 5px; padding: 5px; width: 200px; text-align: left;
 border-radius: 5px; }
 .category-list > ul > li > ul > li::before { content:'\f07b'; font-family:"Font Awesome 5 Free";
 font-weight:700;}
 .sub_category_list {display: none; border: none !important; margin-left: 10px;}
 .sub_category_list li a::before {content:'\f07c'; font-family:"Font Awesome 5 Free";
 font-weight:700;}


/* hover cursor*/
 .footer-icon1, .footer-icon2, .article-s_ad {cursor: pointer;}
 .hover-text li:hover a, .hover-text2 li:hover a { transition: all 0.9s ease;}
 .footer-icon1:hover, .footer-icon2:hover { transition: all 0.9s ease;}
 .category-list > ul > li > ul > li:hover { transition: all 0.3s ease;}
 #paging a:hover, .rd-paging a:hover, .rd-wrap a:hover { transition: all 0.3s ease;}
 #list-basic .list-wrap:hover { transition: all 0.3s ease;}
 #list-summary .list-wrap:hover,  .c-list .c-listtd:hover  {transition: all 0.3s ease;}
 

/* search */
 .search { bottom:0px; margin: 10px; height: 20px; border-radius: 5px; padding: 5px;
 text-align: left; display: flex; flex-direction: row; align-items: center;}
 .search input[type="text"] {border:none; background: none; font-family: 'Pretendard-Regular';}
 .search input:-internal-autofill-selected {background: #FFF;}


/* paging */
 #paging { margin-bottom: 5px; display: flex; align-items: center;
    justify-content: space-around;}
 #paging a {font-size: 15px;}


/* list */  
 .list-inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 
 .list-wrap {background: #FFF;} 
 .list-inner {background: #FFF; padding: 10px; margin: 10px; border-radius: 8px;}
 .category-name {text-align: left; margin: 10px; font-size: 15px; font-weight: bold;}

 #list-basic .list-wrap{ padding: 10px;}
 #list-basic .thumbnail{display: none;}
 #list-basic .list-td{ display: flex; flex-direction: column; text-align: left; }
 #list-basic .list-title {font-weight: bold;}
 #list-basic .list-date {color: #aeaeae;}
 #list-basic .summary {display: none;}

 #list-gallery .list-wrap{ float: left; width: calc((100% - 30px) / 3); margin: 5px;
 box-sizing: border-box;}
 #list-gallery .list-wrap .thumbnail {width: 100%; overflow: hidden; border-radius: 3px;}
 #list-gallery .list-wrap .thumbnail img{width:100%; object-fit: cover;
 filter: grayscale(0); transition: .3s ease-in-out;}
 #list-gallery .list-wrap .thumbnail:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); object-fit: cover;}
 #list-gallery .list-td{display: flex; flex-direction: column; justify-content: center;
    margin-top: 5px; align-items: center; overflow: hidden;}
 #list-gallery .list-title {overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; text-align: center; width: 100%;}
 #list-gallery .list-title span {font-weight: 700;}
 #list-gallery .list-date {color: #aeaeae;}
 #list-gallery .summary {display: none;} 


 #list-summary .list-wrap{ float: left; width: calc((100% - 25px) / 2); margin: 5px;
 height: 160px; overflow: hidden;}
 #list-summary .list-wrap .thumbnail {display: none; width: 100%; overflow: hidden;}
 #list-summary .list-wrap .thumbnail img{width:100%; object-fit: cover;
 filter: grayscale(0); transition: .3s ease-in-out;}
  #list-summary .list-wrap .thumbnail:hover img 
 {-webkit-filter: grayscale(100%); filter: grayscale(100%); object-fit: cover;}
 #list-summary .list-td{ text-align: left; display: flex; flex-direction: column;
 justify-content: space-between; padding: 5px; margin-bottom: 5px; overflow: hidden;}
 #list-summary .list-title { font-size: 12px; overflow: hidden;   text-overflow: ellipsis; display: -webkit-box; 
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-summary .list-title span {font-weight: bold;}
 #list-summary .list-date {text-align: left; color: #aeaeae;} 
 #list-summary .summary {display: block; text-align: left; padding: 5px;} 
 #list-summary .summary-desc {overflow: hidden;
 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;}


/* article */
 #article {padding: 10px; word-wrap: break-word;}
 .article-wrap {background: #FFF; padding: 5px; border-radius: 5px;}
 .article-td {text-align: left;  width: 100%; overflow: hidden;}
 .article-title { font-size: 15px; font-weight: 700; text-align: center;}
 .article-date {text-align: center; margin-bottom: 10px; color: #aeaeae;}
 .article-cate {text-align: left; margin-bottom: 20px; font-size: 12px; display: flex;
 justify-content: space-between; align-items: center;}
 .article-category span {font-weight: bold;} 
 .article-s_ad {text-align: center; border-radius: 50%; height: 15px; width: 15px;
 border: solid 1px #aeaeae; padding: 2px;}
 .article-desc {padding-top: 10px; text-align: left;}
 .article-category, .article-category a, .article-s_ad {color: #aeaeae;}
 .article-s_ad-inner {display: none; position: relative; width: 100px;
 right: 100px; top: 9px; padding: 5px; border-radius: 5px;}

 #article-rd { padding: 5px; margin-bottom: 5px; border-radius: 3px;}
 #article-rd .rd-inner {font-size: 11px; font-weight: bold; text-align: right; margin-bottom: 5px;}
 #article-rd .rd-wrap { float: left; width: calc((100% - 40px) / 4); margin: 5px;}
 #article-rd .rd-wrap:last-child {margin-right: 0;}
 #article-rd:after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 #article-rd .title-rd {overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; text-align: center;}
 #article-rd .thumb_related img {width: 100%; object-fit: cover;}
 .rd-paging {display: flex; margin: 10px 0; padding-bottom: 5px; font-weight: 700; flex-direction: row; justify-content: space-between;
 font-size: 12px;}
 .rd-paging i {font-size: 12px;}


/* blockquote */
 blockquote[data-ke-style='style1']  {font-size: 10.5px; margin: 5px;}
 blockquote[data-ke-style='style1'] span:before{content:'"'; font-size:15px;}
 blockquote[data-ke-style='style1'] span:after{content:'"'; font-size:15px;}
 blockquote[data-ke-style='style1'] span {font-family: 'Pretendard-Regular' !important;}
 blockquote[data-ke-style='style2'] { padding:5px;  font-size: 12px; line-height:20px; margin:0; margin-bottom: 10px;}
 blockquote[data-ke-style='style3'] { padding: 5px; font-size: 8pt; line-height: 20px;  margin: 0; max-height: 120px;  overflow-y: auto;}
 blockquote p  {font-size: 13px !important;}
 .btn-toggle-moreless{padding: 5px; font-family: 'Pretendard-Regular' !important; font-size: 12px !important; font-weight: 700;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless:before{content:"+";  margin-right: 5px; font-weight:700;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless:before{content:"-"; margin-right: 5px; font-weight:700;}
 div[data-ke-type='moreLess'].open .moreless-content{margin:5px 0; padding:5px;}


/* comment */
 .comment {display: none;}
 .comment-button {text-align: left; margin-bottom: 10px; margin-left: 10px;}
 .comment-button i {font-size: 20px;} 
 #comment-list {padding: 5px;}
 #reply-list {padding: 5px; padding-top: 0;}
 .reply-body ul {margin-left: 15px; margin-bottom: 5px;}
 .comment-right, .reply-right {display: flex; justify-content: space-between;}
 .comment {text-align: left;}
 .comment-textarea {display: flex; justify-content: center;  text-align: left;}
 .comment-textarea textarea {width: 95%; height: 50px; font-family: 'Pretendard-Regular'}

 #guestbook .comment-body > ol > li:last-child {border-bottom: 0;}
 .comment-input {text-align: left; display: flex; justify-content: center;}
 .comment-input input[type=submit] { background: none;}
 .comment-input label { display: flex; flex-direction: row; justify-content: flex-end; align-items: center;
  width: 90%;}

 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{font-size: 10.5px; font-family: 'Pretendard-Regular' ; content: "public"; padding: 5px;}
 .comment-input input[type="checkbox"]:checked+label:before{font-size: 10.5px; font-family: 'Pretendard-Regular' ;
 content: "secret"; padding: 5px; font-weight: bold;}
 .comment-input input[type="submit"] {font-family: 'Pretendard-Regular' ; border:none; padding: 5px;}
 .comment-input {margin-bottom: 10px;}

 #guestbook {padding: 10px; margin: 10px; background: #FFF; border-radius: 5px;}
 .guestbook-inner {font-size: 12px; font-weight: bold; margin-bottom: 10px;}
 #guestbook .comment {display: block;}
 .sguest-input {margin-bottom: 10px; margin-top: 10px; display: flex; justify-content: center;}
 .sguest-input input[type="password"] {margin-left: 5px;}
 .tistoryProfileLayerTrigger {display:none !important;}
 .comment-date span {font-weight: 700;}
 #list-basic .list-wrap, .comment-body > ol > li {padding: 3px;}


/* notice */
 #notice .revenue_unit_wrap {display: none;}
 #notice .container_postbtn {display: none;}
 #notice {margin-bottom: 10px;}
 .notice-wrap {padding: 10px; margin: 10px; background: #FFF; border-radius: 5px;}
 .notice-td {margin-bottom: 10px; padding-bottom: 10px;}
 .notice-title {text-align: center; font-size: 13px; font-weight: 700;}
 .notice-date {text-align: center; color: #aeaeae;}
 .notcie-desc {text-align: left;}


/* tag */
 .tag {text-align: left; padding: 10px; background: #FFF; margin: 10px; border-radius: 5px;}
 .tag-title {font-size: 13px; font-weight: 700; margin-bottom: 20px;}
 .tag-desc ul {display: flex;  flex-wrap: wrap; flex-direction: row;}
 .tag-desc li {padding: 5px;}
 .tag-desc li:hover {transition: all 0.3s ease;}
 .tag-desc a:hover {transition: all 0.3s ease;}
 .tag-desc a:before{content:'#';} 

 
/* protected */ 
 .protected {display: flex; height: 100%; align-items: center; justify-content: center;
 background: #FFF; margin: 10px; border-radius: 5px;}
 .protected-desc {font-size: 12px; font-weight: 700; margin-bottom: 10px;}
 .protected-desc span {font-size: 10.5px; font-weight: none;}
 .protected-password input[type="password"] {font-family: 'IBM Plex Sans KR', sans-serif;}
 .protected-password input[type="button"] {font-family: 'IBM Plex Sans KR', sans-serif; background: #FFF;}



 /* cover */
 #cover {padding: 10px; position: relative;}

 .cover-inner .inner:not(:last-child){margin:5px 0px; }
 .c-title {text-align: center; font-size: 12px; font-weight: 700;  margin-bottom: 10px;}
 .c-title span { padding: 5px; border-radius: 7px;} 
 .c-notice.inner, .c-gallery.inner, .c-list.inner, .c-swiper.inner {padding: 10px;} 
 .cover-inner {padding: 10px; margin: 10px; border-radius: 5px; background: #FFF;}
 .cover-inner .c-wrap::after{display: block;  clear: both;  content: '';} 
 .c-img img {width: 100%; object-fit: cover;}

 .c-desc {text-align: left;}
 .c-wrap:last-child {border-bottom: none;}

 .c-gallery .c-gwrap { float: left; width: calc((100% - 25px) / 3); margin: 5px;}
 .c-gallery .c-gwrap:nth-child(3n){margin-right:0;}
 .c-gallery .c-thumbnail {overflow: hidden;  border-radius: 3px;}
 .c-gallery .c-thumbnail img{width:100%; object-fit: cover;
 filter: grayscale(0); transition: .3s ease-in-out;}
 .c-gallery .c-thumbnail:hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%); object-fit: cover;}
 .c-gallery .c-itemtitle{display: none; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center;}
 .c-gallery .c-listtitle {display: none;}

 .c-list .c-listtd { display: flex; justify-content: center; flex-direction: column;
    box-sizing: border-box; height: 50px; overflow: hidden;}
 .c-list .clist-wrap a { float: left; width: calc((100% - 30px) / 2); margin: 5px;
 box-sizing: border-box;} 
 .c-list .c-listtitle, .c-list .c-date {padding: 5px;}
 .c-list .c-listtitle {font-weight: bold;}
 .c-list .c-date {color: #aeaeae;}
 .c-list::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}

/* swiper */
 .swiper { width: 100%; height: 300px; 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{ display: flex; width: 90% !important; height: auto !important; padding: 10px;
    flex-direction: column; overflow: hidden;  margin: 0; align-items: center;}
 #sidebar { width: 90%; height: auto !important; position: relative; margin: 0; display: flex; flex-direction: column;}
 .sidebar-bg { width: 100%; height: auto !important; overflow: hidden;  position: relative;}
 .sidebar-bg img {width: 100%; object-fit: cover;}
 .sidebar-inner {display: flex; flex-direction: column; position: absolute; justify-content: space-between;
  width: 100%;}
 #container { margin-top: 30px;  width: 90%; position: relative; margin-left: 0; height: auto; 
 margin-bottom: 30px; overflow-y: auto; }
 .c-list .c-listtitle {overflow: hidden;
    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 .c-gallery .c-gwrap { float: left; width: calc((100% - 25px) / 2); margin: 5px;}
 .c-gallery .c-gwrap:nth-child(3n) {margin-right: 5px;}
}


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


/* copyright */
 #copyright{position: fixed; left: 10px; bottom: 10px;}
 .copyrightbtn, .copyrightbtn a{font-size: 10px; font-weight: bold; color:#aeaeae !important;}
 .show-hover{ display: none;}
 .copyrightbtn:hover .show-hover{ display: block;}
 .copyrightbtn:hover .hidden-hover{ display: none;}
 

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