@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

* {padding:0; margin:0; list-style: none; box-sizing:border-box; word-break:break-all; cursor:default;}
html{overflow-x: hidden;}
body,  table, th, td{font-family: 'Noto Sans KR', sans-serif; font-size:11px; color:#444; line-height:16px; text-decoration:none; text-align:justify;}
input, textarea, ::placeholder{font-family: 'Noto Sans KR', sans-serif; font-size:11px; color:#444; line-height:16px; background:none; border:0; border-radius: 0; outline: none; -webkit-appearance: none;}
a, a:link, a:visited, a:active{color: #444; line-height:16px; text-decoration: none;}
img{vertical-align:bottom;}
::-webkit-scrollbar {width:2px;}
::-webkit-scrollbar-thumb {width:2px;}
::selection{background:#ffffff00; color:#fff;}
::-webkit-selection{background:#ffffff00; color:#fff;}
::-moz-selection{background:#ffffff00; color:#fff;}
.clear{clear: both;}
.youtube{position:relative; width:100%; padding-bottom:56.25%;}
.youtube iframe{position:absolute; width:100%; height:100%;}
.colorscripter-code-table{background:#eeeeee !important; letter-spacing:0;}





/*========== layout set ==========*/
#wrap{margin:100px auto 100px; width:900px;}
#header, #nav{margin-bottom:20px;}



/*========== header ==========*/
.left_side{float: left; width:350px;}
.category, .profile{float:left; width:calc(96% / 2);}
.profile{margin-right:4%;}
.profile img{width:100%; margin-bottom:10px;}
.profile .name{margin-bottom:3px; font-weight:bold;}
.category .cate_tt{font-weight:bold;  margin-bottom:5px;}
.category .cate_tt:before{content:'\f0ca'; font-family: "Font Awesome 5 Free"; margin-right:3px; font-size:10px;}
.tt_category .link_tit{display:none;}
.category_list .sub_category_list{margin:3px 0;}
.category_list > li{padding:2px 0;}
.category_list > li:before{content:'\f15b'; font-family: "Font Awesome 5 Free"; font-size: 10px; margin-right:2px;}
.category_list .sub_category_list{padding-left: 6px;}
.category_list .sub_category_list > li:before{content:'└';}
.close{display: none;}



/*========== nav ==========*/
#nav{padding:15px 5px; font-weight:bold;}
.left_menu a, .left_menu span{margin-right:5px;}
.left_menu .mobile{display: inline-block;}
.left_menu .mobile span{display: none;}
.right_menu a{margin-left:5px;}
.search input{text-align:right; width:50px; font-weight:bold;}



/*========== list ==========*/
.list_w:after{display: block; clear: both; content: '';}

#list_n {margin:15px 0;}
#list_n .list_c .thumb_i{display: none;}
#list_n .list_c {padding:20px 0;}
#list_n .list_t .title{float: left; font-weight:bold;}
#list_n .list_t .title:hover{letter-spacing:1px; transition:0.5s;}
#list_n .list_t .date{float: right;}

#list_g .list_c{float:left;	position:relative; width:calc(92% / 3); margin:0 4% 6% 0; overflow: hidden;}
#list_g .list_c:nth-child(3n){margin-right:0;}
#list_g .list_c .thumb_i{width: 100%; height: auto; overflow: hidden;}
#list_g .list_c .thumb_i img{display: block; position: relative; width: 100%; height: auto;}
#list_g .list_c .thumb_i img:hover{opacity:80%; transition:0.7s;}
#list_g .list_c .tooltip{position:absolute; width:100%; height:100%; top:0; left:0;}
#list_g .list_c .list_t{margin-top:10px; }
#list_g .list_c .list_t .title{font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
#list_g .list_c .list_t .date{font-size:10px;}

#list_a .thumb_i, #list_a .list_t{display: none;}
#list_a .list_c{margin-bottom:20px;}
#list_a .list_s .title{display: inline-block; margin-bottom:5px; padding:3px 8px; font-weight:bold;}

#list_b .list_c{margin-bottom:25px;}
#list_b .list_c .thumb_i{width:25%; float: left; margin-right:2%;}
#list_b .list_c .thumb_i img{width:100%;}
#list_b .list_c .list_t{padding:5px 0;}
#list_b .list_c .list_t .title{display: inline-block; font-weight:bold;}
#list_b .list_c .list_t .date{float: right;}
#list_b .list_c .list_t .sum{margin-top:10px;}

#list_n .list_c .list_t .sum{display: none;}
#list_g .list_c .list_t .sum{display: none;}
#list_n .list_s, #list_g .list_s, #list_b .list_s{display: none;}



/*========== article ==========*/
.entry{margin-bottom:20px;}
.entry .title_wrap{display: inline-block; margin-bottom:15px; padding:3px 8px; font-weight:bold;}
.entry .article{margin-bottom:25px;}
.entry .article iframe{width:100%;}
.detail .tag .text, .detail .action_trail{font-weight:bold; margin-right:2px;}

/*moreless*/
div[data-ke-type='moreLess'] .btn-toggle-moreless, .btn_more{margin: 0 !important; color: #444 !important; font-size: 11px !important; line-height: 16px !important; font-family: 'Noto Sans KR' !important; font-weight:bold;}
.btn_less, .btn_less .txt_fold{padding:0; margin:3px 0; font-size:11px; color:#444; font-family: 'Noto Sans KR' !important; font-weight:bold;}
div[data-ke-type='moreLess'] .btn-toggle-moreless::before, .btn_less::before, .btn_more::before {content: "+"; display: inline-block; padding-right: 5px; font-size: 11px; line-height: 16px; vertical-align: initial;}
div[data-ke-type='moreLess'].open .moreless-content, .moreless_content{padding: 0; margin-top:5px;}

/*quote*/
blockquote[data-ke-style='style2'], blockquote[data-ke-style='style3'], blockquote[data-ke-style='normal'], blockquote[data-ke-style='box']{font-size:11px; background:none; padding:10px; margin:5px 0; color:#000; line-height:16px; border:none;}

/*code block*/
pre[data-ke-type="codeblock"]{margin:5px 0; padding:5px; background:#eee; letter-spacing:0;}

/*download*/
figure.fileblock{display: inline-block; margin:5px 0; width:auto; height: auto; border-radius:none;}
figure.fileblock .image, figure.fileblock a::after, figure.fileblock .size{display: none;}
figure.fileblock a{display: inline-block; height:auto;}
figure.fileblock .desc{position: inherit; left:0; right:0;}
figure.fileblock .filename{color:#444; font-size:11px; height:auto; margin:0;}
figure.fileblock .name{max-width:none; height:auto; padding:10px;}
figure.fileblock .name:before{content:'DOWNLOAD'; font-weight:bold; margin-right:5px;}
figure.imageblock.alignCenter {margin-bottom:0;}
figure.imagegridblock{margin:0;}
figure.imagegridblock .image-container span{width:auto !important;}



/*========== protect ==========*/
.protect{text-align:center;}
.article_p{display: inline-block; width:150px;	margin: 120px auto 150px;}
.article_p .pwinput{display: block; width:100%; margin-bottom:15px; line-height:35px; padding:0 10px; text-align:center; font-weight:bold; background:none; }
.article_p .bottom .ment, .article_p .bottom .submit{float: left; display:inline-block; padding:3px 6px; font-weight:bold;}
.article_p .bottom .ment{width:73%; margin-right:4%;}
.article_p .bottom .submit{width:23%;}



/*========== tag ==========*/
.taglog a{float: left; display: inline-block; width:calc(92% / 8); margin:0.5%; padding:8px 3px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}



/*========== notice ==========*/
.notice{margin-bottom:20px;}
.notice .title_wrap{display: inline-block; margin-bottom:10px; padding:3px 8px; font-weight:bold;}



/*========== comment, guest ==========*/
.comment_o{display: none; margin-top:20px;}
.comment_list{margin-top:20px;}
.comment .name a{margin-right:5px; font-weight:bold;}
.comment .rp_wrap{margin-bottom:25px; padding:10px 0;}
.comment .rrp{margin-top:10px; margin-left:20px; padding:10px; padding-right:0; }
.comment .redel{float: right;}
.comment .redel a{color:#888; }
.comment .rptext{margin-top:5px;}

.comment .Write{margin-bottom:20px;}
.comment textarea {	width:100%; height:70px; margin:auto; margin-bottom:15px; padding:5px; background:rgba(255,255,255,0); resize:none;}
.comment .input{float: left;}
.comment .input input{width: 60px; padding:3px 8px; margin-right:5px;  text-align:center;}
.comment .cksd{margin-right:10px;}
.comment .check{display:inline-block;	margin-right:5px;}
.comment .check input[type="checkbox"]{display: none;}
.comment .check input[type="checkbox"]+label:before{display: inline-block;	content: '\f204'; font-family:"Font Awesome 5 Free"; font-weight:bold; color:#444;}
.comment .check input[type="checkbox"]:checked+label:before{content: '\f205';font-family:"Font Awesome 5 Free"; font-weight:bold; }
.comment .submit{display: inline-block;}
.comment .submit input[type="submit"]{font-family: "Font Awesome 5 Free"; color:#444; background:rgba(255,255,255,0);}



/*========== cover ==========*/
.cover_wrap .title_wrap{display: inline-block; margin-bottom:10px; padding:3px 8px; font-weight:bold;}

.cover_notice .item_wrap{margin-bottom:20px;}
.cover_notice .n-img{width:100%; margin-bottom:5px;}
.cover_notice .n-img img{width:100%;}

.cover_gallery{margin-bottom:10px; }
.cover_gallery .in::after{display: block;  clear: both;  content: '';}
.cover_gallery .thumb{float: left;  position: relative;	width:calc(96% / 3); margin:0 2% 2% 0;}
.cover_gallery .thumb:nth-child(3n){margin-right:0;}
.cover_gallery .thumb_i{width: 100%; height: auto; overflow: hidden;}
.cover_gallery .thumb_i img{display: block; position: relative; width: 100%; height: auto;}
.cover_gallery .list_t{position: absolute; top:0; left:0; width:100%; height:100%; background:#ffffff99; opacity:0;}
.cover_gallery .list_t .title{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; text-align:center; font-weight:bold;}
.cover_gallery .thumb:hover .list_t{opacity:1; transition:0.7s;}

.cover_list .list_t{padding-bottom:25px;}
.cover_list .list_t .title{margin-bottom:5px; font-weight:bold;}



/*========== copyright ==========*/
.yunicorn{position:fixed; left: 13px; bottom: 10px; font-family:'Verdana' !important; font-size: 10px;}
/*========== copyright ==========*/



@media (max-width:767px){
	#wrap{width:90%; margin:5%;}
	#header{position:fixed; background:#fff; z-index:999999; top:0; left:-220px; width:200px; height:100%; padding:20px 15px; margin:0; box-shadow:0px 0px 4px #bbb; transition:0.7s;}
	#header.slide{left:0%; transition:0.7s;}
	.left_side{float:none; width:auto;}
	.profile, .category{float: none; width:100%; padding:15px 0;}
	.profile img{margin:0;}
	.profile .name, .profile .text{display: none;}
	.close{display: block; width:100%; font-weight:bold; padding:15px 0;}
	.left_menu .mobile span{display: inline;}
	.comment .input input{width: 55px;}
	.taglog a{width:calc(90% / 5); margin:1%;}
	#list_n .list_c .list_t .title{width:80%; overflow: hidden; white-space:nowrap; text-overflow:ellipsis;}
	#list_g .list_c, .cover_gallery .thumb{width:calc(95% / 2); margin:0 5% 5% 0;}
	#list_g .list_c:nth-child(2n), .cover_gallery .thumb:nth-child(2n){margin-right:0;}
	#list_g .list_c:nth-child(3n), .cover_gallery .thumb:nth-child(3n){margin-right:5%;}
	#list_g .list_c:nth-child(6n), .cover_gallery .thumb:nth-child(6n){margin-right:0;}
	#list_b .list_c .thumb_i{width:40%;}
	#list_b .list_c .list_t{padding-top:10px;}
	#list_b .list_c .list_t .date{display: none;}
	#list_b .list_c .list_t .sum{margin-top:5px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
}