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

 @font-face {
     font-family: 'DungGeunMo';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/DungGeunMo.woff') format('woff');
     font-weight: normal;
     font-style: normal;}

/* CSS Document */
 * {padding: 0; margin: 0; box-sizing: border-box; font-family: 'DungGeunMo','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;}


/* background 배경이미지설정방법 */
/* 배경 이미지 쓸 경우 > 스킨편집하기 > 전체배경 ★투명★ 설정 필수!!
 1) url (이미주소)를 넣어주세요.
 2) 주소 끝 괄호와  ) ; 사이에 !important 를 넣어주세요
 -예) url(이미지주소) !important; */
 body {
 background-image: url();
 background-size: cover !important;
 background-attachment: fixed !important;
 margin: 0;}


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

 /* 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 */
/* 폰트사이즈 변경 font-size: 숫자px / 글자간격 조절 line-height 숫자px 조절해주시면 됩니다.*/
 #whole {font-size: 12.5px; line-height: 15px; position: relative;
 width: 100%; height: 100vh;  display: flex; overflow: hidden;}
 #sidebar {width: 150px; height:600px; padding: 10px 5px;
 display: flex; }
 #container {transition: box-shadow .2s ease-in-out;
 width: 600px; position: absolute;
 z-index: 99; top: 10vh; left: 20vw;}
 #container .wrap {padding: 3px;}
 #whole-2 {width: calc(100% - 150px);}


/* 본문 배경 */
 #blog-document .wrap, #blog-internet .wrap, #blog-folder .wrap, #blog-memo .wrap,
 #blog-paint .wrap, #blog-info .wrap, .article-wrap { background: #fff; } 


/* window */
 #blog-info {width: 300px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 10vh; right: 10vw;}
 #blog-info .wrap {width: calc(100% - 10px); height: auto; position: relative;
 overflow: hidden; padding: 5px;}
 #blog-info .wrap img {width: 100%; margin-bottom: 3px;}
 #blog-paint {display: none; width: 500px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 28vh; left: 3vw; }
 #blog-paint .wrap {width: calc(100% - 10px); height: auto; position: relative;
 overflow: hidden; margin:5px; padding: 3px;}
 #blog-paint .wrap img {width: 100%;}
 #blog-internet {display: none; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 30vh; left: 3vw; }
 #blog-internet .wrap {width: 420px; height: auto; position: relative;
 overflow: hidden; padding:3px;}
 #blog-internet  .wrap iframe {width: 100%;}
 #blog-internet .window-adtext {width: calc(100% - 10px); margin:5px;}
 #blog-internet .window-ad1 img, #blog-internet .window-icon img,
 .window-icon img {margin-right: 3px;}
 #blog-internet .you-img img {width: 100px; padding: 3px;}
 #blog-internet .you-ad {padding: 3px;}
 #blog-internet .you-text {padding: 3px; text-align: center;}
 #blog-memo  {display: none; width: 400px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 15vh; left: 8vw; }
 #blog-memo .wrap {width: calc(100% - 10px); height: auto; position: relative;
 overflow: hidden; padding: 5px;}
 #blog-memo .wrap textarea {width: 100%; border:none; background: transparent;
 text-align: left;}
 #blog-memo .memo-text,  #blog-document .memo-text,
 #blog-folder .memo-text, #cover-notice .memo-text, .c-list.inner .memo-text,
 .c-summary.inner .memo-text, .c-playlist.inner .memo-text {padding: 2px 3px; margin-top: 1px;}
 #blog-document {display: none;  width: 570px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 20vh; left: 15vw; }
 #blog-document .wrap {width: calc(100% - 10px); height: 300px; position: relative;
 overflow: hidden; padding: 2px; display: flex;}
 #blog-document .window-ad2 {width: 15px; height: 17px;}
 .docu-bg {background: url(./images/background.jpg) no-repeat white;
 visibility: visible; position: absolute; width:30%; height: 100%;}
 .docu-img img, .docu-bgimg img{width: 32px; height: 32px;}
 .docu-bgimg {margin: 15px 15px 0 15px;}
 .docu-bgtext {margin: 15px 15px 0 15px; font-size: 18px;}
 .docu-list {position:relative; left: 200px; margin-top: 3px; display: flex;}
 .docu-1 {display: flex; align-items: center; flex-direction: column;}
 .docu-text {width: 100%; padding: 2px; text-align: center;}
 .docu-list li a {display: block; padding: 2px; width: 80px;}
 #blog-folder{display: none; width: 450px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 25vh; left: 5vw; }
 #blog-folder .docu-bg {position: absolute; width:50%; height: 100%;}
 #blog-folder .wrap {width: calc(100% - 10px); height: 300px; position: relative;
 overflow: hidden; padding: 2px; display: flex;}


/* folder - img */
 #folder-img1 {display: none; width: 530px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 15vh; right: 50vw;}
 #folder-img2 {display: none; width: 500px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; top: 30vh; right: 33vw;}
 #folder-img1 .wrap, #folder-img2 .wrap {width: calc(100% - 10px); height: auto; position: relative;
 overflow: hidden; padding: 5px;}
 #folder-img1 .wrap img, #folder-img2 .wrap img {width: 100%; margin-bottom: 3px;}


/* postit */
 #folder-postit {display: none; width: 150px; height: 150px; transition: box-shadow .2s ease-in-out; position: absolute;
 z-index: 99; right: 3px; bottom: 38px; background: #ffffce;}
 .postit-bar {display: flex; align-items: center; justify-content: space-between; padding: 3px;}
 .postit-wrap {padding: 3px; text-align: left;}


/* window (wrap) */
 .wrap {width:calc(100% - 10px); max-height: 565px;  overflow-y: auto;
 margin: 5px;}
 .con-wrap, .cover-bar2 {margin: 3px;}
 .window-title, .cover-bar {display: flex; justify-content: space-between; align-items: center;
 margin:3px; width: calc(100% - 6px); padding: 3px; color: #fff;
 font-size: 14px;}
 .window-icon {display: flex; align-items: flex-end;}
 .window-icon img {width: 17px;}
 .paging {height: 20px; margin:3px; display: flex; padding: 3px; }
 .p-prev, .p-next {margin-right: 3px; font-size: 11px;}
 .p-center {margin-right: 3px; height: 100%; display: flex; align-items: center;}
 .p-center a {margin: 0 3px;}

 .win-wrap2, .win-wrap3,  .win-wrap4, .win-wrap5 {display: none; position: absolute; margin-top: 2px; 
 z-index: 99; min-width: 100px;}
 .con-menu li a {display: block; padding: 3px; margin: 1px;}

 .con-cate > ul > li > a {display: none;}
 .con-cate .link_item {min-width: 100px; padding: 3px; margin: 1px;}
 .con-cate .category_list > li > a:after, .con-cate .sub_category_list > li > :after {right: 5px;}
 .con-cate .category_list > li > a:before,
 .con-cate .sub_category_list > li > a:before {display: none;}

 .search {display: none; position: absolute; top:150px; left: 50%; width: 230px; 
 transform: translate(-50%, -50%); padding: 3px; z-index: 999;}
 .searchbtn {cursor: pointer;}
 .search-head {padding: 3px; margin: 1px; color: #fff; display: flex; justify-content: space-between;}
 .search-icon button, .w-icon button{display: block; min-height: 15px; min-width: 15px; padding: 0;
 border: none; border-radius: 0; box-sizing: border-box;}
 .search-icon button[aria-label=Close], .w-icon button[aria-label=Close] {background-image: url(./images/svg3.svg);
 background-position: top 3px left 3px; background-repeat: no-repeat;
 margin-left: 2px;}
 .search-inner { display: flex; padding: 10px; flex-direction: row; align-items: center; justify-content: center;}
 .search-inner input[type="text"] { font-family: 'DungGeunMo','Pretendard-Regular'; border:none; background-color: #FFF;
 box-sizing: border-box; padding: 3px 4px; }
 .search-inner input[type="button"] {margin-left: 5px; border: none; box-sizing: border-box; padding: 0 10px; height: 22px; font-family: 'DungGeunMo','Pretendard-Regular'; }
 .search-inner input[type="button"]:active { display: block; box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; outline: 1px dotted #000; outline-offset: -4px;}

 .window-btn {display: flex;}
 .window-btn button {display: block; min-height: 15px;
 min-width: 15px; padding: 0; border: none; border-radius: 0;
 box-sizing: border-box;}
 .window-btn button[aria-label=Minimize] {background-image: url(./images/svg1.svg);
 background-position: bottom 3px left 4px; background-repeat: no-repeat;
 margin-right: 2px;}
 .window-btn button[aria-label=Maximize] {background-image: url(./images/svg2.svg);
 background-position: top 2px left 3px;background-repeat: no-repeat;
 margin-right: 2px;}
 .window-btn button[aria-label=Close] {background-image: url(./images/svg3.svg);
 background-position: top 3px left 3px; background-repeat: no-repeat;}

 .window-mwrap {display: flex;}
 .win-1 {position: relative;}
 .win-text1, .win-text2,.win-text3, .win-text4, .win-text5 {padding: 2px 3px; margin-top: 1px;}

 .window-adress {display: flex; flex-direction: row;  align-items: center;
 width: 100%; height: 30px;}
 .window-adress .start-line1, .window-menu .start-line1 {margin-left: 3px;}
 .window-menu {display: flex; flex-direction: row;  align-items: center; 
 width: 100%; height: 22px; font-size: 13px;}

 .window-adtext {height: calc(100% - 6px); width: calc(100% - 10px); justify-content: space-between;
 align-items: center; flex-direction: row; margin-left: 3px; display: flex;
 padding: 3px; background: #fff;}
 .window-ad1 {margin-left: 3px; height: 100%; display: flex; align-items: center;}
 .window-ad2 {width: 17px; height: 17px; display: flex; align-items: center; justify-content: center;}
 .window-ad1 img {margin-right: 2px;}

 .folder-img1 {width: 100px;} 


/* sidebar (icon) */
 .side-box1, .side-box2 {width: 100px;}
 .side-icon a, .computer, .paint, .internet, .memoimg,
 .blog-document, .blog-folder, .blog-link {display: flex; color: #fff; padding: 3px;
 flex-direction: column; align-items: center;} 
 .side-icon {margin-top: 15px;}
 #sidebar > div:first-child {margin-top: 0;}
 .icon-text {margin-top: 5px; max-width: 90px; word-break:keep-all; text-align: center;
 padding: 1px;}
 .icon-img {max-width: 90px; text-align: center;}
 .icon-img img {width: 32px; height: 32px;}
 .docu-img img, .docu-bgimg img {width: 32px; height: 32px;}
 .window-ad1 img {width: 16px; height: 16px;}


/* hover (cursor) */
 .start-button:hover, .window-title, .cover-bar,
 .folder-img1:hover, .folder-img2:hover, .folder-img3:hover,
 .computer:hover, .internet:hover, .side-icon li:hover,
 #cover-notice .win-1:hover, .c-list.inner .win-1:hover, .c-summary.inner .win-1:hover,
 .comment-send:hover {cursor: default;}
 .win-1:hover, .comment-btn:hover, .related-btn:hover {cursor: pointer;}
 .start-icon1 li a:hover { box-shadow: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080 !important;
 border:none;}
 .side-icon:hover .icon-img, .side-icon:hover .icon-img, .computer:hover .icon-img, .internet:hover .icon-img,
 .paint:hover .icon-img, .memoimg:hover .icon-img {filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) 
 saturate(400%) contrast(.9)}


/* start bar */
 .start-bar {position: fixed; display: flex; flex-direction: row; justify-content: space-between;
 bottom: 0; height: 35px; width: 100%; z-index: 4; }
 .start-box1 {display: flex;  flex-direction: row; align-items: center;}
 .start-box2  {display: flex;  flex-direction: row; align-items: center; margin: 3px;}
 .start-button { height: calc(100% - 6px); width: 65px; font-size: 13px;
 display: flex; justify-content: center; align-items: center; margin: 3px;}
 .start-logo {position: relative; margin-right: 3px;}
 .start-logo img {width: 18px; height: 18px;}
 .start-click { border:none !important;}
 
 .start-line1 {margin: 3px 0; height: calc(100% - 6px);}
 .start-line2 {margin: 3px 0; height: calc(100% - 6px);}

 .start-icon1, .start-icon2 {display: flex; align-items: center; margin-left: 3px;}
 .start-icon1 li a, .start-icon2 li a  {display: block; padding: 3px;}
 .start-icon1 img,  .start-icon2 img {width: 20px; height: 20px;}
 #start-time {font-size: 13px; padding: 3px;}


/* start-wrap */
 .start-wrap {display: none; margin: auto; height: auto; min-width: 170px;
 position: fixed; z-index: 999;  bottom: 35px;}
 .start-inner {display: flex; height: 100%; padding: 3px;}
 .start-left {width: 25px; display: flex; align-items: center;
 font-size: 16px; writing-mode: vertical-rl; text-orientation: sideways; letter-spacing: 2px;
 transform: translate(0) rotate(180deg); padding-top: 5px; color: #fff;}
 .start-right {width: calc(100% - 25px);}


/* category */
 .cate > ul > li > a {display: none;}
 .link_item, .link_sub_item {display: flex; align-items: center;}
 .category_list, .category_list > li {position: relative;}
 .sub_category_list {display: none; position: absolute; left: 100%; top: 0; width: max-content;}
 .link_item {position: relative; margin: 1px; padding: 3px 10px 3px 3px ;}
 .link_sub_item {padding: 3px 30px 3px 3px; margin: 3px;}
 .category_list > li > a:before{content: ""; display: inline-block; height: 30px; width: 30px; 
 background: url(./images/folder1.png)no-repeat 0px 0px ;
  background-size:30px 30px; margin: 0 5px 0 5px;}
 .sub_category_list > li > a:before{content: ""; display: inline-block; height: 30px; width: 30px;
 background: url(./images/folder2.png)no-repeat 0px 0px ;
 background-size:30px 30px; margin: 0 5px 0 5px;}
 .category_list > li > a:after{content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight:700;
 position: absolute; right: 3px;}
 .sub_category_list > li > :after{content:"\f0da"; font-family:"Font Awesome 5 Free"; font-weight:700;
  position: absolute; right: 10px;}


/* menu */
 .cate-line {width: 100%; height: 1px; background: #808080;
 border-bottom: 1px solid #fff;}
 .menu-icon a {display: flex; align-items: center; margin: 1px;
 padding: 3px 10px 3px 3px ;}
 .menu-img {position: relative;}
 .menu-img img {width: 30px; height: 30px; margin: 0 5px 0 5px;}


/* tooltip */
/* START TOOLTIP STYLES */
 [tooltip] { position: relative;}
 [tooltip]::before,[tooltip]::after { line-height: 1; user-select: none; pointer-events: none;
  position: absolute; display: none; opacity: 0;}
 [tooltip]::before {  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */}
[tooltip]::after {content: attr(tooltip); /* magic! */
 text-align: center; min-width: 3em;
 max-width: 21em; white-space: nowrap; overflow: hidden;
 text-overflow: ellipsis; padding: 2px;
 border:solid 1px #000;
 background: #fff;
 z-index: 1000; /* absurdity 2 */}
 [tooltip]:hover::before,[tooltip]:hover::after { display: block;}
 [tooltip='']::before,[tooltip='']::after { display: none !important;}
 /* FLOW: UP */
 [tooltip]:not([flow])::after, [tooltip][flow^="up"]::after { bottom: 100%;}
 [tooltip][flow^="up"]::before, [tooltip][flow^="up"]::after {
 left: 50%; transform: translate(-50%, -.5em);}
 /* KEYFRAMES */
 @keyframes tooltips-vert {
  to { opacity: .9; transform: translate(-50%, 0); }
 }
 @keyframes tooltips-horz { to { opacity: .9;
 transform: translate(0, -50%);}
 }
/* FX All The Things */ 
 [tooltip][flow^="up"]:hover::before,[tooltip][flow^="up"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;}


/* list */ 
 .empty {text-align: center; width: 100%;
 background: #fff; padding: 10px;}
 .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; flex-direction: column;
 justify-content: center; padding: 3px; margin: -1px;
 border: 2px groove transparent; border-image: url(https://tistory1.daumcdn.net/tistory/5483202/skin/images/border.svg) 2;
 box-sizing: border-box;}
 .cate-info1 {display: flex; flex-direction: row; align-items: center;}
 .cate-info1 i {margin-right: 5px;}
 .cate-count {margin-left: 5px; font-weight: bold;}

 .list-inner {height: 100%; overflow-y: auto;}
 #list-basic, #list-gallery, #list-summary {min-height: 100%;}
/* list-basic */
 #list-basic .cate-link2 {display: none;}
 #list-basic .list-wrap {display: block;}
 #list-basic .list-panel { display: flex;
 align-items: center; flex-direction: row; justify-content: space-between;
 border: 2px groove transparent; border-image: url(https://tistory1.daumcdn.net/tistory/5483202/skin/images/border.svg) 2;
 box-sizing: border-box;}
 #list-basic .list-panel1 {width: 60%; text-align: left;  padding: 3px;}
 #list-basic .list-panel2 {width: 20%; text-align: left;  padding: 3px;}
 #list-basic .list-panel3 {width: 20%; text-align: left;  padding: 3px;}
 #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: 60%; line-height: 20px; text-align: left;
 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; height: 26px;
 -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding: 3px;}
 #list-basic .list-date {width: 20%; text-align: left; padding: 3px;}
 #list-basic .list-cate {width: 20%; text-align: left; padding: 3px;}
 #list-basic .list-lock .list-title::after {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-left: 3px;}
 #list-basic .list-wrap a {display: block; width: 100%;}
 #list-basic .thumbnail, #list-basic .summary {display: none;}
 #list-basic .list-wrap a:hover .list-title::before {display: inline-block;}
 #list-basic .list-wrap:last-child > a {border-bottom: none;}
/* 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: flex; flex-wrap: wrap; padding: 0;}
 #list-gallery .list-wrap{float: left; width: calc((100% - 0px) / 4); margin: 0; 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%; -webkit-transform: scale(1);  background: #fff;
 transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
 #list-gallery .thumbnail-info {padding: 10px; overflow: hidden; text-overflow: ellipsis; display: none;
 -webkit-line-clamp: 2; text-align: center; -webkit-box-orient: vertical;  width: 100%; height: 100%;
 position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s; 
 align-items: center;  justify-content: center; flex-direction: row; 
 font-weight: bold; font-size: 14px;}
 #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{filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) 
 saturate(400%) contrast(.9)}
 #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 {text-align: center; margin-top: 3px;}
 #list-gallery .list-title {width: 100%; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
 #list-gallery  .list-lock .list-title::after {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-left: 3px;}
 #list-gallery .list-date {width: 100%; text-align: center; }
 #list-gallery .summary, #list-gallery .list-panel, #list-gallery .list-cate {display: none;}
/* list-summary */ 
 #list-summary .category-name {padding: 5px;}
 #list-summary .list-inner {display: flex; flex-wrap: wrap;}
 #list-summary .list-wrap{float: left; width: calc((100% - 0px) / 2); position: relative; 
 box-sizing: border-box; margin:0;}
 #list-summary .list-wrap:last-child > a {border-bottom: none;}
 #list-summary .list-wrap a{display: flex;}
 #list-summary .list-wrap .thumbnail {width: 100px; overflow: hidden; position: relative;}
 #list-summary .list-wrap .thumbnail img{width: 100%;-webkit-transform: scale(1); 
 background: #fff;
 transform: scale(1);	-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
 #list-summary .list-wrap a:hover img{filter: grayscale(100%) brightness(30%) sepia(100%) hue-rotate(-180deg) 
 saturate(400%) contrast(.9)}
 #list-summary .summary {padding: 5px; width: calc(100% - 100px); display: flex; flex-direction: column;
 justify-content: space-between;}
 #list-summary .summary-desc {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
 text-overflow: ellipsis;}
 #list-summary .summary-title {overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
 text-overflow: ellipsis; font-weight: bold; font-size: 14px;}
 #list-summary .summary-date {text-align: right;}
 #list-summary .list-lock .summary-title:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;}
 #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, #list-summary .thumbnail-info, #list-summary .list-panel {display: none;}
/* list-playlist */
 #list-playlist .list-inner {padding: 0; background: none; border-radius: 0;}
 #list-playlist .list-wrap{ float: left; width: 100%; margin-bottom: 5px; overflow: hidden;}
 #list-playlist .list-wrap a{display: block; box-sizing: border-box; padding: 3px;}
 #list-playlist .summary-title {font-weight: bold; text-align: center;}
 #list-playlist .summary {display: block;} 
 #list-playlist .summary-desc {margin:0;}
 #list-playlist .list-info,  #list-playlist .list-cate,  #list-playlist .thumbnail,
 #list-playlist .summary-date, #list-playlist .list-td, #list-playlist .list-panel {display: none;}
 #list-playlist .list-lock .summary-desc:before {content:"\f023"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 2px;}



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


/* articel-desc */
 .article-desc a {font-weight: bold;}
 .article-desc a:before {content:"\f0c1"; font-family:"Font Awesome 5 Free"; font-weight:700;
 margin-right: 5px;}
 .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; font-weight: bold;
 padding: 1px; align-items: center;}
 .comment-btn, .related-btn {padding: 3px; text-transform: uppercase;}
 
 #article-related { display: none; margin: 3px 0; padding: 5px; }
 #article-related:after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 #article-related .rd-inner {font-weight: bold; text-align: center; margin-bottom: 5px;}
 #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%; object-fit: cover; background: #fff;}


/* 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: 'DungGeunMo','Pretendard-Regular'; font-size: 10.5px !important; font-weight: bold;}
 div[data-ke-type='moreLess'] .btn-toggle-moreless {border-radius: 5px;}
 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;}
 figure.fileblock {margin-top: 10px !important; margin-bottom: 10px !important;
 width: 380px !important; border-radius: 5px;}
 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::after {content:"\f019" !important; font-family:"Font Awesome 5 Free" !important; font-weight:700 !important;
 background-image: none !important; width: 40px !important;
 height: 40px !important; right: 0 !important; top: 25px !important; font-size: 25px;}

 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: 3px 0; }
 .comment-write {margin: 1px;}
 .comment-textarea {display: flex; flex-direction: column;}
 .comment-textarea textarea {width: 100%; height: 70px; font-family: 'DungGeunMo','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: 'DungGeunMo','Pretendard-Regular';}
 .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: '공개';}
 .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; border-radius: 0 !important; width: 50%;}

 .comment-type {margin:5px 0; padding: 0; overflow: hidden;}
 #comment-list,#reply-list {padding: 3px;} 
 .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: 'DungGeunMo','Pretendard-Regular';}
 .comment-input input[type="checkbox"]:checked+label:before{ content: '비밀글'; font-family: 'DungGeunMo','Pretendard-Regular';}
 .sguest-input  {display: flex; font-family: 'DungGeunMo','Pretendard-Regular';}
 .sguest-input input[type="text"], .sguest-input input[type="password"] {border:none; background: none;
 padding: 5px; width: 50%;}
 #reply {margin-top: 3px;}
 
 #guestbook {padding: 3px;}
 #guestbook .comment-type {margin: 10px 0;}
 #guestbook .comment-type:last-child {margin-bottom: 0;}
 #guestbook .comment-textarea textarea {height: 50px;}
 #guestbook .reply-body {margin-top: 3px;}


/* notice */
 #notice {margin:0;}
 .notice-td {text-align: center; padding: 3px; 
 border: 2px groove transparent; border-image: url(https://tistory1.daumcdn.net/tistory/5483202/skin/images/border.svg) 2;
 box-sizing: border-box;}
 .notice-title {text-align: center;}
 .notice-title span {font-weight: bold; font-size: 13px; text-align: center; padding: 5px;
 margin: 5px;}
 .notice-date {text-align: right; margin-bottom: 5px;}
 .notice-desc {padding: 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;}
 #notice .summary-dot {border-radius: 50%; width: 4px; height: 4px;}


/* protected */ 
 #protected { display: flex; margin: 0 auto; height: 100%; 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 {text-align: center; font-weight: bold; margin-bottom: 3px;}
 .protected-td {text-align: center; margin-bottom: 5px;}
 .protected-title span {font-size: 13px; font-weight: bold;}
 .protected-desc {font-size: 13px; font-weight: bold; margin-bottom: 10px; text-align: center}
 .protected-desc span {font-size: 13px; font-weight: bold;}
 .protected-wrap {display: flex; flex-direction: column; background: #fff;}
 .protected-password input[type="password"] {height: 30px; border: none; font-family: 'DungGeunMo','Pretendard-Regular'; 
 background: none;  padding: 3px;}
 .protected-password input[type="button"] {height: 30px; border:none; font-family: 'DungGeunMo','Pretendard-Regular';
 background: none;  padding: 3px;}


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


/* cover */
 #cover::-webkit-scrollbar{ display:none;}
 #cover {position: absolute; left: 30%;  -ms-overflow-style: none;
 height:calc(100% - 35px); overflow-y: auto; }
 #cover-notice, .c-gallery.inner, .c-list.inner, .c-swiper.inner,
 .c-summary.inner, .c-playlist.inner  {padding: 2px; width: 500px;}
 #cover-notice .c-wrap, .c-list.inner .c-wrap, .c-summary.inner .c-inner
 {width: calc(100% - 6px); margin: 3px;
 background: #fff; text-align: left; padding: 5px;}
 .c-playlist .c-wrap  {width: calc(100% - 6px); margin: 3px;
 background: #fff; text-align: left; padding: 3px;}
 #cover > div {margin: 15px 0;}
 #cover > div:last-of-type {margin-bottom: 30px;}

 .cover-inner {margin-right: 0; background: #fff; margin: 5px;}
 .cover-inner .inner{margin: 10px 0; overflow: hidden;}
 .cover-inner .inner:first-child {margin-top: 0;}
 .cover-inner .inner:last-child {margin-bottom: 0;}
 .c-title {text-align: center; padding: 10px;}
 .c-title span { font-size: 12px; font-weight: bold;} 

 .c-notice .c-wrap {padding: 10px 0;}
 .c-notice .c-img {position: relative; width: 100%; text-align: center;}
 .c-notice .c-wrap a {display: block; padding: 10px;}
 .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; padding: 0; }
 .c-gallery .c-inner {padding: 3px; display: flex; flex-wrap: wrap;
 margin:3px; background: #fff;}
 .c-gallery.inner::after {content: ''; display: block; clear: both; margin: 0; padding: 0;}
 .c-gallery .c-gwrap { float: left; width: calc((100% - 6px) / 3); margin: 0 3px 3px 0; position: relative;}
 .c-gallery .c-gwrap:nth-child(3n) {margin-right: 0;}
 .c-gallery .c-thumbnail {width: 100%; overflow: hidden; position: relative; }
 .c-gallery .c-thumbnail img {width:100%; object-fit: cover;  -webkit-transform: scale(1);
 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.3); transform: scale(1.3);}
 .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 .c-wrap {padding: 10px 0;}
 .c-list .c-wrap a {display: block; float: left; width: 100%; padding: 3px;} 
 .c-list .c-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-listtext img {width: 16px; height: 16px;}
 .c-list .c-listtext {overflow: hidden; text-overflow: ellipsis;
 display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
 .c-list .c-date  {justify-content: flex-end; align-items: center;}
 .c-list .c-listtitle {width: calc(100% - 65px); overflow: hidden; text-align:left; display: -webkit-box;
 -webkit-line-clamp: 1; -webkit-box-orient: vertical;text-overflow: ellipsis;}
 .c-list .c-proimg img {width: 32px; height: 32px; object-fit: cover; }
 .c-list .c-listtitle span {font-weight: bold;}
 .c-list .c-summary { display: none; text-align: center;
 overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
 
 .c-summary .c-inner {padding: 10px 0; 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; margin: 1px 0;}
 .c-summary .c-gwrap:first-child {margin-top: 0;}
 .c-summary .c-gwrap:last-child {margin-bottom: 0;}
 .c-summary .c-gwrap a {display: flex;}
 .c-summary .c-gwrap:last-child > a {border-bottom: none;}
 .c-summary .c-thumbnail {width: 130px; overflow: hidden; position: relative;}
 .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;}

 .c-playlist .c-listtd {padding: 3px; text-align: center;}

/* swiper */
 .swiper {width:100%; margin: 0 !important; }
 .swiper.mySwiper  {margin:3px !Important; width: calc(100% - 6px);
 padding: 3px;}
 .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: #ffffffb6 !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 {width: 100%; height: auto !important; display: flex; flex-direction: column; 
 overflow-y: auto;}
 #whole-2 {width: 100% !important;}
 #sidebar {position: relative; width: 98% !important; height: auto !important;
 margin:10px 0; padding: 0;}
 .side-box1 {display: flex; justify-content: space-between; width: 100%;
 flex-direction: row; align-items: center;}
 #blog-info {position: relative; width: 95% !important; height: auto !important;
 top: unset; right: unset; margin: 0 auto; padding: 1px;}
 #container {position: unset; width: 95% !important; height: auto !important;
 top: unset; left: unset; margin: 10px auto 60px auto; padding: 1px;}
 #container .wrap {height: auto !important; max-height: unset;}
 #cover {margin: 0 auto; width: 95% !important; position: relative; left: unset;}
 #cover-notice, .c-gallery.inner, .c-list.inner, .c-swiper.inner, .c-summary.inner, .c-playlist.inner {width: 100% !important; margin-top: 10px;}
 #cover > div:last-of-type {margin-bottom: 50px;}
 /*내문서*/
 #blog-document {width: 98% !important; top: 10%; 
 height: auto; left: 5px;}
 #blog-document .wrap {height: 300px; overflow-y: auto;}
 #blog-document .docu-bg {width: unset; position: relative;}
 #blog-document .docu-list {left: unset; display: flex; flex-direction: row; 
 flex-wrap: wrap; align-content: flex-start;} 
 #blog-document .docu-bgtext img {margin-bottom: 20px;}
 #blog-document .docu-list li {width: 80px; height: auto;}
/*인터넷*/
 #blog-internet {width: 98% !important; top: 12%; 
 height: auto; left: 5px;}
 #blog-internet .wrap {width: 98% !important;}
/*폴더*/
 #blog-folder{width: 98% !important; top: 14%; height: auto;
 left: 5px;} 
 #blog-folder .docu-bg {width: unset; position: relative;}
 #blog-folder .docu-list {left: unset; display: flex; flex-direction: row; 
 flex-wrap: wrap; align-content: flex-start;} 
 #blog-folder .docu-bgtext img {margin-bottom: 20px;}
 #blog-folder .docu-list li {width: 80px; height: auto;}
/*메모장*/
 #blog-memo {width: 98% !important; top: 16%; height: auto;
 left: 5px;} 
 #blog-memo .wrap {height: 150px;}
/*그림판*/
#blog-paint {width: 98% !important; top: 18%; height: auto;
 left: 5px;} 
/*시작화면*/
 .start-bar, .start-wrap {z-index: 999;}
/*카테고리*/
 #list-gallery .list-wrap{width: calc((100% - 6px) / 3);} 
 #list-gallery .list-wrap:nth-child(4n) {margin-right: unset;}
 #list-gallery .list-wrap:nth-child(3n) {margin-right: 0;}
 #list-summary .list-wrap {width: calc((100% - 0px) / 1);}
 /*가로배열*/ 
 .m-paging {display: flex;}
 .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;}
 } 


/* windows 95 scrollbar */
 ::-webkit-scrollbar {width: 16px; height: 16px; background: none;}
 ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button {
  width: 16px; height: 16px;  border: 1px solid;
  border-color: #ddd #000 #000 #ddd;}
 ::-webkit-scrollbar-track {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAyIDIiIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyI+CjxtZXRhZGF0YT5NYWRlIHdpdGggUGl4ZWxzIHRvIFN2ZyBodHRwczovL2NvZGVwZW4uaW8vc2hzaGF3L3Blbi9YYnh2Tmo8L21ldGFkYXRhPgo8cGF0aCBzdHJva2U9IiNjMGMwYzAiIGQ9Ik0wIDBoMU0xIDFoMSIgLz4KPC9zdmc+");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 2px;}
 ::-webkit-scrollbar-button { background-repeat: no-repeat; background-size: 16px;}
 ::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTcgNWgxTTYgNmgzTTUgN2g1TTQgOGg3IiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTQgNWg3TTUgNmg1TTYgN2gzTTcgOGgxIiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTggM2gxTTcgNGgyTTYgNWgzTTUgNmg0TTYgN2gzTTcgOGgyTTggOWgxIiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTAuNSAxNiAxNiIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj4KPG1ldGFkYXRhPk1hZGUgd2l0aCBQaXhlbHMgdG8gU3ZnIGh0dHBzOi8vY29kZXBlbi5pby9zaHNoYXcvcGVuL1hieHZOajwvbWV0YWRhdGE+CjxwYXRoIHN0cm9rZT0iIzAwMDAwMCIgZD0iTTYgM2gxTTYgNGgyTTYgNWgzTTYgNmg0TTYgN2gzTTYgOGgyTTYgOWgxIiAvPgo8L3N2Zz4=");}
 ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-button,  ::-webkit-scrollbar-corner
 {background:#c0c0c0;}	



/* copyright 삭제는 옵션 구매 후 해주세요! */
 #copyright a{ position: fixed;  right: 3px; bottom: 40px; display: flex;
 flex-direction: row-reverse; 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%;}

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