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

/*skin start*/
/* font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');


/*layout*/
 html {scroll-behavior: smooth;}
 body {font-family: 'Nanum Gothic', sans-serif;  font-size: 8pt; 
 background-image: url("./images/Aesthetic5.png"); background-repeat: repeat;}
 ol, ul, li {list-style: none; margin: 0; padding: 0;}
 a {text-decoration: none;}
 .whole {margin-top:80px; margin-bottom: 30px; display: flex;  flex-direction: row-reverse;
 justify-content: center; align-items: flex-start; overflow: hidden; }
 .whole-wrap {  border-radius: 5px; 
 width: 650px;  display: flex; flex-direction: column;}
 .information { margin-right:20px; border-radius: 5px;
 width: 200px; height: 300px; overflow: hidden; display: flex; flex-direction: column;}
 .toolbar { flex-basis: auto; height: 30px;  display: flex;}
 .container{ flex: 1; background: #FFF; z-index: 10; position: relative; }


/* toolbar */
 .toolbar-button {height: 30px; width: 50px; flex-basis: auto; display: inline-block; padding: 0 10px; line-height: 30px;}
 .toolbar-btn {width: 10px; height: 10px; display: inline-block; margin: 1px; border: 1px solid #FFF; border-radius: 50%; }
 .toolname { flex: 1; margin: 0; list-style-type: none; line-height: 35px;
 max-height: 35px; display: inline-block; padding: 0 12px;}
 .toolname .tab {color: #fff; float: left; margin: 10px -15px 0; padding: 0 40px 0 40px;
 height: 130px; width: 100px; position: relative; line-height: 25px;
 border-top-right-radius: 25px 170px; border-top-left-radius: 20px 90px;
 cursor: pointer;}
 .toolname .tab.name:before { border-color: transparent#9769c6 transparent transparent; z-index: 2;}
 .toolname .tab.name:after { border-color: transparent transparent transparent #9769c6; z-index: 2; }
 .toolname .tab.name .close:after {display: none;}
 .toolname .tab .fa{ font-size: 15px; }
 .web-site { height: 28px; z-index: 15; padding: 6px;  display: flex;}
 .web-site .web-button { flex-basis: auto; text-align: center; font-size: 17px;
   padding: 3px; display: inline-block; width: 20px; margin-right: 5px;}
 .web-site .category-button { flex-basis: auto; text-align: center; font-size: 17px;
   padding: 3px; display: inline-block; width: 20px; margin-left: 5px;}   
 .web-site .address { flex: 1; padding: 5px; }
 .web-button:hover, .category-button:hover {cursor: pointer; border-radius: 50%;}


/*category*/
 .categorylist{display: none; position: absolute; font-size: 9pt; background-color: #fff;
 padding: 10px 5px; text-align: left; width: 150px;}
 .cate {text-align: center; padding: 2px 0; font-weight: bold; margin:10px 0px;}
 .sub_category_list{display: none; padding-left:10px;}
 .categorylist > ul > li > a {display: none;}
 .category_list > li > a:before{content:"+";}
 .sub_category_list > li > a:before{content:"-";}
 .categorylist ul li ul li {margin: 5px;}
 

/*info*/ 
 .blogimg img {width: 130px; height: 130px; object-fit: cover;}
 .menu {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center;
 align-items: center; letter-spacing: 5px; padding: 10px;}
 .menu-list {padding: 3px 3px; font-size: 10pt;}
 .bloginfo { display: flex; flex: 1; background: #FFF; z-index: 10; text-align: center;
 position: relative; flex-direction: column; flex-wrap: nowrap; justify-content: center; } 
 

/* container */
 .container .wrap { padding: 10px 10px; }

/* list */ 
 .list-start:after{content: ''; display: block; clear: both;}
 .category-name {text-align: right; margin-bottom: 30px;}
 
 #list-basic .list-start {padding: 0; margin: 10px 25px; }
 #list-basic .thumbnail{display: none;}
 #list-basic .list-wrap{padding:10px 0;}
 #list-basic .list-td{ width: 70%; margin:auto; padding:5px 0; display: flex; flex-direction: row-reverse; justify-content: space-between;}
 #list-basic .list-summary {display: none;}
 #list-basic .list-title, .list-date {text-align: left;}

 #list-gallery .list-start{ padding: 5px 5px;}
 #list-gallery .list-wrap{ float: left; width: calc((100%-10px) / 3);  position: relative; overflow: hidden;}
 #list-gallery .list-wrap:nth-child(3n){margin-right:0;}
 #list-gallery .list-wrap .thumbnail img{width:100%; margin: 5px 5px; object-fit: cover;}
 #list-gallery .list-td{display: flex; position: relative; justify-content: space-evenly; }
 #list-gallery .list-title {width: 70%; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;}
 #list-gallery .list-summary {display: none;}


 #list-summary .list-start{margin-top:10px; }
 #list-summary .list-wrap{ margin: 10px auto; padding: 5px; position: relative;
 overflow: hidden; display: flex; align-items: flex-start; }
 #list-summary .list-wrap .thumbnail img{width:150px; height: 150px; object-fit: cover;
 margin-right: 10px;}
 #list-summary .list-td{display: flex; flex-direction: row; justify-content: flex-start;
 margin: auto 0; margin-bottom: 10px;}
 #list-summary .list-title {margin-left: 20px;}
 #list-summary .list-summary {overflow: hidden; vertical-align: middle;
 text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
 width: calc((100% - 10px)); text-align: left; line-height: 16px;}


/* article */
 .article-wrap {padding: 10px ;}
 .article-title {font-size: 10pt; font-weight: bold; text-align: center;}
 .article-date {text-align: right; margin-bottom: 20px;}
 .article-content {text-align: left; line-height: 18px;}
 .tagTrail {text-align: left;}
 .tagTrail a:before{content:'#';}


/* blockquote */
 blockquote[data-ke-style='style1']  {color: #000; font-size: 8pt; }
 blockquote[data-ke-style='style1'] span:before{content:'"'; font-size:40pt;  }
 blockquote[data-ke-style='style1'] span:after{content:'"'; font-size:40pt; }
 blockquote[data-ke-style='style2'] {padding:5px;  font-size:8pt; line-height:20px; color: #000;}
 blockquote[data-ke-style='style3'] {padding:5px;  font-size:8pt; line-height:20px; color: #000;}


/* article-tistory */
 .article-content [data-ke-type='moreLess'] .btn-toggle-moreless::before {content: " + " !important;}
 .btn-toggle-moreless {font-family: 'Nanum Gothic', sans-serif !important; font-size: 8pt !important; font-weight: bold !important; }
 .fileblock { width: 250px !important; margin-top: 10px !important; border-radius:10px !important; }
 .filename  {font-size: 8pt !important;}
 .container_postbtn .postbtn_like { border-radius: 10px !important;  float: right !important; }
 .container_postbtn {padding: 5px !important; }


/* comment */
 .comment-button {margin: 10px 10px; font-size: 10pt; text-align: right;}
 .comment {padding: 10px; display: none;}
 .reply-body li{border-bottom: none !important;}
 .comment-body li { padding: 5px 5px;}
 .comment-write {margin-top: 20px;}
 .comment-input {text-align: center; }
 .comment-input input[type=submit] { border: none; font-family: 'Nanum Gothic', sans-serif;
  margin-left: 10px; background:none; }
 .comment-textarea {margin:auto; text-align: center;}
 .comment-textarea textarea { width: 90%; height: 50px; margin: auto;
 font-family: 'Nanum Gothic', sans-serif; resize: none; outline: none;
 border-radius: 10px; background: #fff; }


/* guestbook */
 .guest-body, .sguest {padding: 10px;  text-align: center; }
 .guest-body li {padding: 10px; margin:10px 0px; text-align: left; }
 .guest-body ul {margin:10px 0px; border-radius: 10px;}

 .sguest input[type=password] {margin-left: 10px; outline: none;}  
 .sguest input[type=text] {outline: none;} 
 
/* stag */
 .stag ul {padding: 10px; display: flex;  flex-wrap: wrap; flex-direction: row;}
 .stag li {margin: 5px 5px;}
 .stagdesc a:before{content:'#';} 


/* protected */
 .protected {padding: 10px 10px; margin: 50px auto;}
 .protected-title, .protected-date, .protected-article {text-align: center; margin:10px auto;}
 .protected-password {margin: 20px auto;}
 .protected-password input[type=button] { border: none; font-family: 'Nanum Gothic', sans-serif;
  margin-left: 10px; background:none; }


/* notice */
 .notice {padding: 5px 5px; margin: 15px auto;}
 .notice-title{text-align: center;}
 .notice-date {text-align: right;}
 .notice-desc {text-align: left;}


/* search */
 .search {position: relative; border-radius: 5px;}
 .search input {outline:none; background: #fff; border: none; font-family: 'Nanum Gothic', sans-serif;}


/* paging */
 .paging { display: flex; margin-bottom: 10px; padding: 5px 5px; font-size: 20pt; justify-content: space-evenly;}


/* cover */
 .c-container .c-wrap::after{display: block;  clear: both;  content: '';}

 .c-container .inner:not(:last-child){margin:10px 0px; }
 .c-notice .c-img img {object-fit: cover; width: 100%;}
 .c-title {text-align: left; font-size: 10pt; font-weight: bold; margin-bottom: 20px;}
 .c-desc {text-align: left; margin: 20px 0;}

 .c-gallery .c-wrap {padding: 5px 5px;}
 .c-gallery .c-gwrap{float: left; width: calc((100%-10px) / 3); position: relative; overflow: hidden;}
 .c-gallery .c-gwrap:nth-child(3n){margin-right:0; }
 .c-gallery .c-thumbnail img{width:98%; object-fit: cover;}
 .c-gallery .c-itemtitle{display: none; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:#ffffff55;}
 
 .c-list .c-listtitle {padding: 5px 5px; border-bottom: solid 1px #a2a2a2;}


/* copyright */
 .copyright{position: fixed; right: 5px; bottom: 5px;}


/*youtube*/
 .youtube{position:relative; width:100%; padding-bottom:56.25%;}
 .youtube iframe{position:absolute; width:100%; height:100%;}

@media (max-width:800px){
	.whole{display: flex;
    width: 100%; flex-direction: column-reverse;}
   .information {width: 70%; margin:auto;}

   .whole-wrap {width: 90%; margin:5%;}	 
   .copyright {display: none;}
}