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

/*skin start*/
/* font */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


 body {font-family: 'Pretendard', sans-serif;
 font-size: 11px; 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;}

/* 티스토리 폰트 사이즈 - 본문2 */ 
#tt-body-page p[data-ke-size='size16'], 
p[data-ke-size='size16'] { font-size: 1.1em; } 


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


/* layout */
 #whole {display: flex; justify-content: center; margin-top: 100px; position: relative;}
 #content { display: flex; flex-direction: column; position: relative;}
 #sidebar { border-radius: 10px; margin-left: 10px;  overflow: hidden;
 background: #FFF;}


/* content */
 .category  { width: 100%; 
 display: flex; flex-direction: row; align-items: center; justify-content: center;
 border-bottom: none !important; border-radius: 10px 10px 0px 0px;
 background: #FFF;}
 .container { width:100%; height: calc(100% - 10%); overflow-y: auto;
 background: #FFF;}
 .footer { width: 100%;  height: 5%; display: flex; align-items: center; justify-content: space-around;
 border-top: none !important; border-radius: 0px 0px 10px 10px;
 background: #FFF;}


/* category */
 .menu, .cate {display: flex; flex-direction: row; padding: 10px;}
 .menu {padding-right: 0;}
 .cate {padding-left: 0;}
 .menu li {display: block; margin-right: 20px;}
 .menu li a {display: inline-block; position: relative; text-decoration: none !important;} 
 .cate > ul > li > a {display: none;}
 .category_list {display: flex;}
 .category_list > li {margin-right: 20px; min-width: 30px;  text-align: center;}
 .category_list > li:last-child {margin-right: 0;} 
 .category_list > li:hover {cursor: pointer;}
 .category_list > li a {display: inline-block; position: relative; text-decoration: none !important;}

 .sub_category_list {display: none; position: absolute; padding: 10px;
 margin-top: 10px; min-width: 45px; text-align: center; margin-left: -18px;
 background: #FFF; z-index: 99; }

 .m-guestbook {display: none !important;}

/* sidebar */
 .blog-img, .blog-text {width: 100%;}
 .blog-text {text-align: center; margin: 10px 0px;}
 .blog-text span {font-weight: bold; margin: 5px 0px}
 .blog-img img {width: 100%; object-fit: cover;}

 .s-menu1::after, .s-menu2::after  {content: ''; display: block; clear: both; margin: 0;}
 
 .s-menu1, .s-menu2 {padding: 5px 0px 10px 0px;}

 .s-menu1 li, .s-menu2 li {float: right;
    position: relative;
    left: -25%; width: calc((100% - 16px) / 2); margin: 3px;}
 .s-menupost, .s-menupost2 {text-align: center; margin-bottom: 5px; font-weight: bold;}
 .s-menu1info, .s-menu2info { overflow: hidden;}
 .s-menu1title, .s-menu2title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; 
 -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: center;}
 .s-menu1cate, .s-menu2cate {text-align: center; }
 .s-menu1 a, s-menu2 a {display:block;}

 .s-menu3 {margin: 0;}
 .s-menu3 img{width: 100%; object-fit: cover;}

/* footer */
 .search input {border: none; font-family: 'Pretendard', sans-serif;}
 .paging .selected {padding: 5px 10px;}
 .paging a {display: inline-block; padding: 5px;} 
 

/* hover */
 .menu li a:after {background: none repeat scroll 0px 0px transparent;
 content: ""; display: block; height: 2px; margin: auto;
 transition: width 0.5s ease 0s, background-color 0.5s ease 0s; width: 0px;}
 .menu li a:hover:after {width: 100%;}
 .category_list > li a:after {background: none repeat scroll 0px 0px transparent;
 content: ""; display: block; height: 2px; margin: auto;
 transition: width 0.5s ease 0s, background-color 0.5s ease 0s; width: 0px;}
 .category_list > li a:hover:after { width: 100%;}


/* list */ 
 .list-inner:after{content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .list-wrap {background: transparent;}
 
 .category-name {text-align: center; margin: 10px; font-size: 12px;}
 .category-name span {font-weight: bold;}

 #list-basic .list-wrap{float: left; width: calc((100% - 25px) / 2); margin: 5px;}
 #list-basic .thumbnail{display: none;}
 #list-basic .list-td{ display: flex; flex-direction: column; justify-content: space-between;
 text-align: center;}
 #list-basic .summary {display: none;}
 #list-basic .list-title {padding: 5px;}
 #list-basic .list-date {padding: 5px;}
 #list-basic .list-wrap a {display: block;}

 #list-gallery .list-wrap{ float: left; width: calc((100% - 30px) / 3); margin: 5px;
 padding: 10px; 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: .3s ease-in-out;
  transition: .3s ease-in-out;}
 #list-gallery .list-wrap .thumbnail:hover img 
 { -webkit-transform: scale(1.2); transform: scale(1.2); object-fit: cover;}
 #list-gallery .thumbnail-title {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;  color: rgb(255, 255, 255); opacity: 0; transition: 0.3s; display: flex; align-items: center;  justify-content: center;}
 #list-gallery .list-wrap .thumbnail:hover .thumbnail-title, 
 #list-gallery .list-wrap .thumbnail:focus .thumbnail-title{ opacity: 1; transition: all 0.3s ease;}
 #list-gallery .list-td{display: none; flex-direction: column; justify-content: center;
 align-items: center; width: 100%; height: 100%; position: absolute; top: 0;}
 #list-gallery .list-title {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 2; text-align: center; -webkit-box-orient: vertical; }
 #list-gallery .list-title span {font-weight: 700;}
 #list-gallery .summary {display: none;} 
 
 #list-summary .thumbnail-title {display: none;}
 #list-summary .list-wrap{float: left; width: calc((100% - 30px) / 2); margin: 5px;
 padding: 10px; position: relative; box-sizing: border-box; overflow: hidden;
 display: flex; flex-direction: row;}
 #list-summary .list-wrap a{width: 100%;} 
 #list-summary .list-wrap .thumbnail {width: 150px; overflow: hidden;}
 #list-summary .list-wrap .thumbnail img{width:100%; object-fit: cover;
 -webkit-transform: scale(1);  transform: scale(1); -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;}
 #list-summary .list-wrap .thumbnail:hover img 
 {-webkit-transform: scale(1.2); transform: scale(1.2); object-fit: cover;}
 #list-summary .list-td{font-size: 13px; display: flex; flex-direction: column; justify-content: space-between;
 margin-bottom: 10px; margin-left: 10px; margin-top: 10px;}
 #list-summary .list-title { 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-arrow {display: none;}
 #list-summary .list-date {text-align: left; display: none;} 
 #list-summary .summary {display: block; margin-left: 10px; text-align: left; margin-bottom: 10px;} 
 #list-summary .summary-desc {overflow: hidden;
 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical;}


/* article */
 .article-td { margin: 10px; width: calc(100% - 20px);}
 .article-title {font-size: 15px; font-weight: bold; text-align: center; margin: 10px 0px;}
 .article-date  { font-size: 12px; display: inline-block; width: 50%; text-align: right;}
 .article-cate { font-size: 12px; display: inline-block; }
 .article-desc, .article-tag {padding: 0px 30px; }
 .article-tag a {display: inline;}
 

 blockquote[data-ke-style='style1']  {font-size: 10.5px; margin: 5px; padding: 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', sans-serif !important;}
 blockquote[data-ke-style='style2'] { padding:5px; margin:5px;  font-size: 12px; line-height:20px; font-weight: bold;}
 blockquote[data-ke-style='style3'] { padding: 5px; font-size: 8pt; line-height: 20px;  margin: 5px; max-height: 120px;  overflow-y: auto;}
 blockquote p  {font-size: 13px !important;}

 .btn-toggle-moreless{margin: 5px; padding: 5px; font-family: 'Pretendard', sans-serif !important; font-size: 10.5px !important; font-weight: 700;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless:before{content:"\f07b"; font-family:"Font Awesome 5 Free"; margin-right: 5px; font-weight:700;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless:before{content:"\f07c"; font-family:"Font Awesome 5 Free"; margin-right: 5px; font-weight:700;  border-bottom: 0;}
 div[data-ke-type='moreLess'].open .moreless-content{margin:0 5px; padding:5px; overflow: hidden;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless {line-height: 22px !important;}


/* article paging */
 .article-paging {display: flex; justify-content: space-between; font-size: 13px; font-weight: bold;
 padding: 0px 30px; margin-bottom: 10px;}
 
 .article-btn {display: flex; font-size: 17px; justify-content: space-between; padding: 0px 10px;
 margin: 10px 0px;}
 .related-button {margin-left: 10px;}
 .related-button:hover, .comment-button:hover {cursor: pointer;}
 
 #article-rd { display: none; 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 .rd-title {overflow: hidden;  text-overflow: ellipsis; white-space: nowrap; text-align: center;}
 #article-rd .thumb_related img {width: 100%; object-fit: cover;}


/* notice */
 #notice:first-child:nth-last-child(1) {border-bottom: none;}
 .notice-wrap {padding: 10px;}
 .notice-title {font-size: 15px; font-weight: bold; text-align: center; margin: 10px 0px;}
 .notice-date  { font-size: 12px; text-align: right;}


/* 공지사항 공감버튼 삭제 */
 #notice .container_postbtn {display: none;}


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


/* tag */
 .tag {text-align: left; padding: 10px;}
 .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 a:before{content:'#';} 


/* comment */
 .comment {display: none; margin: 10px;}
 #comment-list, #reply-list {padding: 5px;}
 .reply-body ul {margin-left: 10px;}
 .comment-right, .reply-right {display: flex; justify-content: space-between;}
 .comment {text-align: left;}
 .comment-textarea {display: flex; justify-content: center;}
 .comment-textarea textarea {width: 100%; height: 50px; font-family: 'Pretendard', sans-serif;}

 .comment-body > ol > li:first-child {border-top: 0;}

 .comment-input {text-align: left; display: flex; justify-content: center;  padding: 0px 10px;}
 .comment-input input[type=submit] { background: transparent;}
 .comment-textarea {padding: 10px; text-align: left;}
 .comment-input label { display: flex; flex-direction: row; justify-content: space-between;
    align-items: center; width: 100%;}

 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{ font-size: 13px; font-family: FontAwesome; content: "\f3c1"; font-weight:700;}
 .comment-input input[type="checkbox"]:checked+label:before{ font-size: 13px; font-family: FontAwesome;
 content: "\f023"; font-weight:700; }
 .comment-input input[type="submit"] { font-family: FontAwesome; border:none; font-size: 13px;}
 .comment-input {margin-bottom: 10px;}

 #guestbook {padding: 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;}
 #guestbook .comment-body > ol > li:last-child {border-bottom: none !important;}



 /* cover */
 .cover-inner {margin-right: 3px;}

 .cover-inner .inner:not(:last-child){margin:20px; }
 .c-title {text-align: center; margin-bottom: 5px; padding: 3px; font-weight: bold;}
 .c-title span { padding: 5px; border-radius: 7px;} 
 .c-notice.inner, .c-gallery.inner, .c-list.inner, .c-playlist.inner, .c-swiper.inner {padding: 3px;} 

 .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% - 0px) / 3); position: relative;
 box-sizing: border-box;}
 .c-gallery .c-gwrap:nth-child(3n){margin-right:0;}
 .c-gallery .c-thumbnail {width: 100%; overflow: hidden;}
 .c-gallery .c-thumbnail img{width:100%; object-fit: cover;
 -webkit-transform: scale(1);  transform: scale(1); -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;}
 .c-gallery .c-thumbnail:hover img { -webkit-transform: scale(1.2); transform: scale(1.2); 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-gallery.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 
 .c-gallery .c-thumbnail-title {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;  color: #FFF; opacity: 0; transition: 0.3s; display: flex; align-items: center;  justify-content: center;}
 .c-gallery .c-gwrap .c-thumbnail:hover .c-thumbnail-title, 
 .c-gallery .c-gwrap .c-thumbnail:focus .c-thumbnail-title{ opacity: 1; transition: all 0.3s ease;}

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


/* 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{ display: flex; width: 90%; height: auto !important; margin: 20px auto; flex-direction: column-reverse; overflow: hidden;
 align-items: center;}
 #sidebar { width: 90% !important; height: auto !important; position: relative;  margin: 0; padding: 0; margin-bottom: 10px;}
 #content {width: 90% !important; height: auto !important; margin-top: 10px; position: relative;
    margin: 0; margin-bottom: 30px; overflow: hidden; }
 .container {width: auto !important; height: auto !important;}   
 #img-text {display: block; color: #FFF; font-size: 15px;}
 .s-container, .c-container {width: 100% !important; height: auto !important;}
 .category {display: flex; flex-direction: column; width: auto; padding: 10px;}
 .footer {width: auto !important;}
 #list-summary .list-wrap {width: calc((100% - 10px) / 1); overflow: hidden;}
 .c-list .c-listtitle  {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; text-align: center; -webkit-box-orient: vertical;}
 .c-guestbook {display: none !important;}
 .m-guestbook {display: block !important;}
 .menu, .cate { width: 90%; padding: 0; justify-content: center;}
 .category_list > li {min-width: auto;}
 #list-basic .list-title  {overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; text-align: center; -webkit-box-orient: vertical;}
 .s-menu1, .s-menu2, .s-menu3 {display: none;}
 .blog-info {border-bottom: none !important;}
 .search, .search input {width: 40%;}
 .sguest-input input[type="text"], .sguest-input input[type="password"] {width: 40%;}
 } 


 ::-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;}
}
/* 공감버튼 */
 .container_postbtn {display: none;}

/* BGM */
.bgm-box {
position: fixed; right: 10px; bottom: 10px;
}

.bgm-btn {
    color: #aeaeae;
    text-align: right;
    font-family: 'Gamja Flower';
}

@keyframes fade-in-out {
    from {
        opacity: 1.0;
    }

    to {
        opacity: 0.5;
    }
}

.paused {
    -webkit-animation-play-state: paused !important;
    -moz-animation-play-state: paused !important;
    -o-animation-play-state: paused !important; 
    animation-play-state: paused !important;
}