@charset "UTF-8";

/*skin start*/

/* font */
@font-face {
    font-family: 'DOSGothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* CSS Document */
 * {padding: 0; margin: 0; box-sizing: border-box; font-family: 'DOSGothic';
 outline: none; font-size: 11.5px; line-height: 15px; 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;
 margin-left: 3px;}

 /* 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; display: flex; overflow: hidden;
 margin: 70px auto 10px; border-radius: 10px; padding: 10px;}
 .inner-item { position: relative; width: 100%; height: 100%; border-radius: 10px; padding: 10px;
 display: flex; align-items: center; justify-content: center;
 border: dashed 2px #fff;}
 .inner-w {position: relative; display: flex; width: 100%; height: 100%; border: none; border-radius: 10px; 
 padding: 10px;}

 #sidebar {position: relative; display: flex; flex-direction: column; width: 242px;
 overflow: hidden; align-items: center;} 
 #center {position: absolute; top: 100px; left: 232px; z-index: 98;}
 #content {display: flex; width: calc(100% - 322px); flex-direction: column; overflow: hidden;}
 #menu {width: 80px;}


/* mobile */
 #mobile,  .mobile-title {display: none;}


/* sidebar */
 .s-counter {display: flex; flex-direction: row; justify-content: center;
 margin-bottom: 5px;}
 .c-today span {color: #ff0000; margin: 0 5px;}
 .c-total {margin: 0 5px;}

 .s-sidebar { height: 100%; overflow: hidden; padding: 10px;
 border-radius: 10px; display: flex; flex-direction: column;
 justify-content: space-between;
 background: #fff;}

 .s-img {position: relative; overflow: hidden;}
 .s-img img {width: 200px; height: 200px; border-radius: 5px; object-fit: cover;}
 .s-img: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;} }
/* image modal */
 .modal {display: none; width: 100%; height: 100vh;
 position: fixed; top: 0; left: 0; z-index: 99;
 background: #ffffff7d;}
 .modalBox { position: relative;
 text-align: center; margin: 150px auto;}
 .modalBox img {width: 400px; height: 400px; object-fit: cover;}

 .s-text {flex: 0.6; text-align: left;}
 .s-link {display: flex;}
 .s-link li:first-child {margin-right: 5px;}
 .s-profile {text-align: left;}
 .s-blogger {font-weight: bold;}
 .s-email {color: #dad8fe;}

 .search {margin-bottom: 10px;}
 .search input {border: none; font-family: 'DOSGothic';
 background: none; width: 80%;}
 
 .s-dropdown { position: relative; width: 100%; height: 20px; border-radius: 3px;}
 .select { width: inherit; height: inherit; background: transparent;
 border: 0 none; outline: 0 none; padding: 0 5px; position: relative;
 z-index: 3;  appearance:none;}
 .select option {color: #fff;}
 .s-arrow { position: absolute;  top: 0;  right: 0; 
 z-index: 1;  width: 30px; height: inherit; display: flex;
 justify-content: center; align-items: center;}
 .s-arrow i { transition: 0.4s;}
 .s-dropdown .select:focus + .s-arrow i { transform: rotate(180deg);}

 .ring {width: 30px; height: 8px; border-radius: 5px; margin-bottom: 20px;}
 .ring2 {width: 30px; height: 8px; border-radius: 5px; margin-bottom: 20px;
 margin-top: 300px;}


/* container */
 .c-header {display: flex; justify-content: space-between; margin-bottom: 5px;
 align-items: center;}
 .c-item1 {font-size: 12px; font-weight: bold;}
 .container {height: 100%; overflow-y: auto; background: #fff;
 border-radius: 10px; padding: 10px;}


/* menu */
 .menu-item {margin-top: 50px;}
 .menu-item li a {display: flex; color: #fff;
 height: 32px; padding: 5px; border-radius: 0 5px 5px 0;
 margin-bottom: 10px; align-items: center;}


/* category */
 .c-category {position: absolute; width: 222px; height: calc(100% - 40px);
 left: 20px; top: 30px; border-radius: 10px; padding: 10px;
 z-index: 3; background: #fff; overflow-y: scroll;}
 .cate {margin: 10px 0;}

 .cate-text {font-weight: bold; padding: 5px 0; margin-bottom: 5px;}
 .category_list {position: relative;}
 .link_item {display: block; margin: 5px 0 0 15px;}
 .sub_category_list {display: none;}
 .sub_category_list > li {margin: 5px 0 0 30px;}
 .link_tit::before {content:"\f65e"; font-family:"Font Awesome 5 Free"; font-weight:700;}
 .link_item::before {content:"\f07b"; font-family:"Font Awesome 5 Free"; font-weight:700;}
 .link_item::after {content:"\f0d8"; font-family:"Font Awesome 5 Free"; font-weight:700;
 position: absolute; right: 10px;}
 .sub_category_list > li:before{content:"\f07c"; font-family:"Font Awesome 5 Free"; font-weight:700;}


/* paging */
 .paging {display: flex; justify-content: space-between;
 padding: 5px; margin: 5px 0;}
 .p-prev a, .p-next a {display: block; font-weight: bold;}
 .p-prev a, .p-next a {text-align: center;}
 .p-number {display: flex;}
 .p-number a {padding: 0 3px;}
 .p-number .selected {font-weight: bold;} 


/* comment btn */
 .related-btn {text-align: left;}

/* hover */
 .link_item:hover, .paging a:hover, .s-img:hover,
 .comment-btn:hover, .related-btn:hover, .comment-send:hover,
 .comment-input input[type="checkbox"]+label:hover::before {cursor: pointer;}
 .s-link li a:hover i  { transition: 0.3s; transform: rotate(-90deg);}
 .c-category a:hover::after  { transition: 0.3s; transform: rotate(-180deg);}

/* list */ 
 .empty {text-align: center; margin: 10px 0;}
 .list-inner:after{content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .list-wrap a {background: transparent;}

 .category-name {display: flex; width: 100%; margin: 5px 0;
 justify-content: center;}
 .category-name span { font-size: 13px; font-weight: bold;}
 .cate-count, .cate-conform {font-size: 13px; display: flex; align-items: center;}
 .cate-conform i, .cate-conform {font-size: 13px; margin-right: 5px;}

 .list-inner {height: 100%; overflow-y: auto;}
/* list-basic */
 #list-basic .list-wrap a {display: block;}
 #list-basic .list-wrap{position: relative; display: block; margin: 5px; padding-bottom: 5px;}
 #list-basic .list-header {display: flex; flex-direction: row; justify-content: space-between;
 align-items: center; padding: 5px; margin: 5px; font-weight: bold; }
 #list-basic .list-item1 {width: 10px; margin-left: 5px;}
 #list-basic .list-item2 {width: 70%; text-align: center;}
 #list-basic .list-item3 {width: 30%; text-align: center;}
 #list-basic .list-td{display: flex; flex-direction: row; align-items: center; }
 #list-basic .list-title { width: 80%; height: 100%; font-weight: bold;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-left: 10px;}
 #list-basic .list-lock .list-title:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 20px;}
 #list-basic .list-title:before {content:"\f09c"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 20px;}
 #list-basic .list-date {width: 20%; margin-left: 20px;}
 #list-basic .thumbnail, #list-basic .summary, #list-basic .thumb-item{display: none;}
/* list-gallery */
 #list-gallery .list-inner {display: flex; flex-wrap: wrap;}
 #list-gallery .list-wrap{float: left; width: calc((100% - 4px) / 2); margin: 1px;
 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;
 opacity: 1;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;}
 #list-gallery .list-wrap .thumbnail:hover img{opacity: .5;}
 #list-gallery .thumb-item1 {text-align: center; padding: 5px; font-weight: bold;}
 #list-gallery .thumb-item2 {display: flex; justify-content: space-between; padding: 5px;}
 #list-gallery .list-lock .thumb-item1::before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 #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: 0;}
 #list-gallery .list-lock .thumbnail:hover::before{ opacity: 1;}
 #list-gallery .list-td, #list-gallery .summary, #list-gallery .list-header, #list-gallery .thumbnail-info {display: none;}
/* list-gallery2 */
 #list-gallery2 .list-inner {display: flex; flex-wrap: wrap;}
 #list-gallery2 .list-wrap{float: left; width: calc((100% - 6px) / 3); margin: 1px;
 position: relative; box-sizing: border-box;}
 #list-gallery2 .list-wrap a{display: block; box-sizing: border-box;}
 #list-gallery2 .list-wrap .thumbnail {width: 100%; overflow: hidden; position: relative;}
 #list-gallery2 .list-wrap .thumbnail img{width:100%; object-fit: cover;
 opacity: 1;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;}
 #list-gallery2 .list-wrap .thumbnail:hover img{opacity: .5;}
 #list-gallery2 .thumbnail-info {overflow: hidden; margin: 5px;  
 text-align: center; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 text-overflow: ellipsis;}
 #list-gallery2 .list-lock .thumbnail-info::before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 #list-gallery2 .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: 0; margin-top: -10px;}
 #list-gallery2 .list-lock .thumbnail:hover::before{ opacity: 1;}
 #list-gallery2 .list-td, #list-gallery2 .summary,  #list-gallery2 .list-header, #list-gallery2 .thumb-item {display: none;}
/* list-summary */
 #list-summary .list-inner {display: flex; flex-wrap: wrap; justify-content: center;}
 #list-summary .list-wrap{float: left; width: calc((100% - 30px) / 1); margin: 5px;
 position: relative; box-sizing: border-box;}
 #list-summary .list-wrap a{display: block; box-sizing: border-box;}
 #list-summary .list-wrap .thumbnail {width: 100%; overflow: hidden; position: relative; margin-top: 5px;}
 #list-summary .list-wrap .thumbnail img{width:100%; object-fit: cover;
 opacity: 1;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;}
 #list-summary .list-wrap .thumbnail:hover img{opacity: .5;}
 #list-summary .thumb-item1 {height: 25px; line-height: 25px; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 display: -webkit-box; overflow: hidden; text-overflow: ellipsis; text-align: center; font-weight: bold;}
 #list-summary .thumb-item2 {display: flex; justify-content: space-between; padding: 5px;}
 #list-summary .summary-desc {margin-top: 5px; overflow: hidden; text-align: left; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
 text-overflow: ellipsis;}
 #list-summary .list-lock .thumb-item1: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: 0; margin-top: -10px;}
 #list-summary .list-lock .thumbnail:hover::before{ opacity: 1;}
 #list-summary .list-td, #list-summary .list-header, #list-summary .thumbnail-info, #list-summary .summary-td {display: none;}

/* article */
 .article-td { display: flex; flex-direction: column; margin: 5px 0;}
 .article-title {width: 100%; display: flex; align-items: center; justify-content: center;}
 .article-title span {font-size: 13px; font-weight: bold;}
 .article-cate { font-size: 13px; margin-left: 10px;}
 .article-cate a {display: block; }
 .article-date  {text-align: center; margin-bottom: 5px;}
 .article-tag {margin: 15px 0;}
 .article-tag a {display: inline;}
 .article-tag a::before {content: '#';}
/* 본문 공감버튼 */
 .container_postbtn {padding: 10px 0 !important;}


/* 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: 'DOSGothic'; font-size: 10.5px !important; font-weight: bold;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless {line-height: 22px !important; border-radius: 0;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless:before{content:"+"; margin-right: 5px; font-weight:400;}
 div[data-ke-type='moreLess'].open .btn-toggle-moreless:before{content:"-";  margin-right: 5px; font-weight:400;  border-bottom: 0;}
 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;}

/* article paging */
 .article-paging {display: flex; justify-content: space-between; font-size: 11px; font-weight: bold;
 margin: 10px 0;} 
 .article-btn {display: flex; flex-direction: row; justify-content: space-between;}
 .related-button {margin-bottom: 15px;}
 .comment-button, .related-button {display: flex; align-items: center; justify-content: center;}
 .comment-button i, .related-button i {line-height: normal !Important;} 
 #article-related { display: none; margin: 10 0px; 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; margin-bottom: 5px;}
 #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%; margin-top: 5px; font-weight: bold;}
 #article-related .thumb_related img {width: 100%; object-fit: cover;}


/* comment */
 #comment { margin: 10px 5px 5px 0; display: none;}
 #comment .comment-body {background: #f3f5f7;}
 #comment-list {margin: 5px 0;}
 .tistoryProfileLayerTrigger {display:none !important;}
 .textarea-smile {padding: 5px; display: flex; align-items: center;}
 .reply-text {padding: 10px;}
 .reply-line {width: 20px; height: 1px; margin-right: 15px;}
 .comment-type {margin:0; padding:5px; border-bottom: solid 1px #fff;}
 .reply-type{margin: 10px 15px;}
 .reply-type:last-child {margin-bottom: 5px;}
 .comment-write {background: #fff;}
 .comment-textarea {display: flex; flex-direction: column;}
 .comment-textarea textarea {width: 100%; height: 60px; font-family: 'DOSGothic';
 padding: 5px; background: none; border: none;}
 .comment-textarea textarea:focus {transition-duration: 0.3s;}
 .comment-input { display: flex; justify-content: flex-end;}
 .comment-date span, .comment-edit a {color: #aeaeae;}
 .comment-secret,  .comment-send {padding: 5px; text-align: center;}
 .comment-input input[type=submit] { background: transparent;}
 .comment-input input[type="checkbox"] {display: none;} 
 .comment-input input[type="checkbox"]+label:before{content: '공개'; font-family: 'DOSGothic'; font-size: 11px;}
 .comment-input input[type="checkbox"]:checked+label:before{content: '비밀글'; font-family: 'DOSGothic'; font-size: 11px;}
 .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%;}
 .comment-info {display: flex; flex-direction: row; flex-wrap: wrap;}
 .comment-left {display: flex; flex-wrap: wrap;}
 .comment-right {display: flex; flex-direction: column;}
 .comment-img {display: none;}
 .comment-img img {width: 32px; height: 32px; border-radius: 50%; object-fit: cover;}
 .comment-name {display: flex; flex-direction: row;}
 #reply .comment-name i {color: #aeaeae;}
 .comment-name a {color: #62acdd;}
 .comment-name span {font-weight: bold;}
 .comment-desc {margin: 0 5px;}
 .comment-date {display: block; margin-left: 5px;}
 .comment-edit {margin-left: 5px;}
/* guestbook */
 #guestbook .comment-desc {display: flex; align-items: center;}
 #guestbook .comment-desc img {width: 180px;}
 #guestbook .comment-info {background: #f3f5f7; padding: 5px; 
 border-top: solid 1px #aeaeae; border-bottom: dashed 1px #aeaeae;}
 #guestbook .comment-date, #reply-list .comment-date {display: flex; align-items: center;}
 #guestbook #reply-list .comment-info {border-top: none; border-bottom: none; background: none;}
 #guestbook .reply-type {margin: 10px 0; padding: 5px;}
 #guestbook .reply-type {background: #f3f5f7;}
 #guestbook .comment-name i {color: #aeaeae;}

/* notice */
 #notice {padding: 5px 0; margin: 5px 0;}
 .notice-td {display: flex; flex-direction: row-reverse; justify-content: space-between;
 margin-bottom: 5px;}
 .notice-title {text-align: center;}
 .notice-title span {font-weight: bold; text-align: center;}
 .notice-date {text-align: right;}
 .notice-date span {color: #62acdd; font-weight: bold;}
/* 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;}
/*calendar*/
 #notice .cate-item {margin: 10px 0; padding: 5px;}
 #notice .cate-text {margin-bottom: 0;}
 #notice .calendar { position: relative; width: 100%; overflow: hidden; 
 margin-top: 10px;}
 .ui-datepicker {display: block;}
 .ui-datepicker a { text-decoration: none;}
 .ui-datepicker table {width: 100%;}
 .ui-datepicker-header {border:none;}
 .ui-datepicker-title {display: flex; justify-content: center; padding: 3px;}
 .ui-datepicker-prev, .ui-datepicker-next {
 width: 12px; height: 12px; text-indent: 9999px; border-radius: 100%;
 cursor: pointer; overflow: hidden; margin-top: -12px;}
 .ui-datepicker-prev { float: left; margin-left: 12px;}
 .ui-datepicker-prev:after { transform: rotate(45deg);}
 .ui-datepicker-next { float: right; margin-right: 12px;}
 .ui-datepicker-next:after { transform: rotate(-135deg);}
 .ui-datepicker-prev:after, .ui-datepicker-next:after { content: ""; position: absolute; display: block;
 width: 5px; height: 5px; top: 8px; border-radius: 50%;}
 .ui-datepicker-calendar thead tr th span {display: block; font-weight: bold;}
 .ui-state-default {display: flex; text-align: center; margin: 0 6px;
 justify-content: center;}
 .ui-datepicker-calendar .ui-state-active { display: flex; align-items: center; position: relative;}
 .ui-state-default:hover {display: block; color: #fff;}
 .ui-datepicker-calendar .ui-state-highlight {font-weight: bold; border-radius: 50%;}
 .ui-datepicker-other-month .ui-state-default {color: #aeaeae;}



/* protected */ 
 #protected { display: flex; margin: 0 auto; height: 90%; 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 {display: none;}
 .protected-td {text-align: center; display: none;}
 .protected-title span {font-size: 13px; font-weight: bold;}
 .protected-desc {font-weight: bold; margin-bottom: 5px; text-align: center}

 .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;}
 .protected-password input[type="button"] {height: 30px; border:none; font-family: 'Pretendard-Regular';
 background: none;  border-radius: 3px; padding: 3px;}
 .protected-password input[type="password"]::placeholder {color: #fff;}


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

 #tag .cate-item {margin-bottom: 100px;}
 #tag .cate-item li, #tag .cate-item2 li {padding: 5px; border-bottom: dashed 1px #dad8fe;
 margin-bottom: 5px;}
 #tag .cate-item2 i {color: #ffe607;}
 #tag .cate-item2 i, #tag .cate-item i {margin-right: 5px;}


/* cover */
 .cover-inner {margin-right: 0;}
 .cover-inner .inner:not(:last-child){margin: 10px 0;}
 .c-title {text-align: left; padding: 5px;}
 .c-title span { font-size: 13px; font-weight: bold;} 
 .c-desc {text-align: left; padding: 5px;}
 
 .c-notice .c-img {position: relative; width: 100%; text-align: center; margin: 5px 0;}
 .c-notice .c-img img {max-width: 100%;}

 .c-gallery.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-gallery .c-title {margin-bottom: 10px;}
 .c-gallery .c-gwrap { float: left; width: calc((100% - 0px) / 3); position: relative;}
 .c-gallery .c-thumbnail {width: 100%; overflow: hidden; position: relative;}
 .c-gallery .c-thumbnail img {width:100%; object-fit: cover;
 opacity: 1;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;}
 .c-gallery .c-thumbnail:hover img {opacity: .5;}
 .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-cyworld1.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-cyworld1 .c-gwrap {width:100%; position: relative; padding: 5px;}
 .c-cyworld1 .c-thumbnail {width: 100%; overflow: hidden; position: relative;}
 .c-cyworld1 .c-thumbnail img {width:100%; object-fit: cover;
 opacity: 1;  -webkit-transition: .3s ease-in-out;  transition: .3s ease-in-out;}
 .c-cyworld1 .c-thumbnail:hover img {opacity: .5;}
 .c-cyworld1 .c-listtitle {text-align: center; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 overflow: hidden; display: none;}
 .c-cyworld1 .thumbnail-text {display: none;}

 .c-cyworld2 .c-listitem {display: flex; margin: 5px 0;}
 .c-cyworld2 .c-listtitle {margin-left: 10px;}
 .c-cyworld2 .c-listtitle span {color: #62acdd; font-weight: bold;}

 .c-list .clist-wrap a {display: block; margin: 5px;} 
 .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;}


/* swiper */
 .c-swiper .c-title {margin-bottom: 10px;}
 .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;
 margin: 0 auto; display: flex; flex-direction: column;}
 .inner-w, .inner-item {display: flex; flex-direction: column; width: 100%; height: auto!important ;} 
 #content {width: 100% !important; height: auto !important;}
 #sidebar {width: 100% !important; margin-bottom: 10px;}
 .s-sidebar {width: 100% !important;}
 .s-img img {width: 100%; height: auto !important;}
 .s-text, .s-profile {margin: 10px 0;}
 #mobile {display: block; margin-bottom: 10px;}
 .mobile-title {display: block; font-size: 12px; font-weight: bold; text-align: center;}
 .mobile-menu {background: #fff; padding: 10px; border-radius: 10px;}
 .mobile-menu2 {display: flex; justify-content: center; margin-bottom: 10px;}
 .mobile-menu2 li {margin: 0 10px;}
 #list-summary .list-wrap {width: 100% !important;}
 #list-basic .list-date {margin-left: 0;}
 #list-basic .list-item3 {width: 20%;}
 #list-gallery .thumb-item1 {font-weight: bold;  height: 25px; line-height: 1.4em;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: center;}
 .c-header, .c-today, .c-total, .c-category, #menu, #center {display: none;}
 .container {padding: 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;}
 .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;}
 } 


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


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

 
/* 화면전환 */
 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;}
 }