@charset "utf-8";

@font-face {
    font-family: 'edward';
    src: url('./font/edwardianscriptitc.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TTB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2410-2@1.0/TTBookendBatangR.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
.fix-layout {max-width: 1300px;}
.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }
.bo_fx {position:relative;padding:20px 0;}
.bo_fx .chk_all{ position:absolute;left:5px;top:20px;}

#navi_category { text-align: center; padding: 20px 0; }
#navi_category li {position: relative; display: inline-block; padding: 0 10px; font-family: 'TTB'; font-size: 18px;}
#navi_category li:after {content:'·'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
#navi_category li:last-child:after {content: '';}
#navi_category li #bo_cate_on {background: var(--point-color); color: #fff;}

.board-write	{  padding: 0 10px; }

.board-write h3	{
	font-size: 26px;
	text-align: center;
	padding: 30px 0 20px;
} 
.board-write .write-notice	{
	padding: 10px;
	font-size: 11px;
}
.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}

#bo_v_bot	{ padding: 20px 0; overflow: hidden; }
.bo_v_nb	{ float: left; }
.bo_v_com	{ float: right; }

.board-comment-list .co-info {
	display: block;
	text-align: right;
	font-size: 11px;
	opacity: .7;
}
.board-comment-list .co-info span	{ display: inline-block;}
.board-comment-list .co-info span a {color: #a4b6c2;}
.board-comment-list .co-info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 2px;
}

.board-comment-list + .board-comment-write	{
	margin-top: 20px;
}

.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
    font-size: 13px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 70px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
    border: none;
    border-radius: 10px;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 0;
}
.board-comment-form textarea { display: block; min-height: 100px; border-radius: 10px; background:#F6F6F6A6; padding-bottom:10px;}
.board-comment-form textarea::-webkit-scrollbar-thumb,
.board-comment-form textarea::-webkit-scrollbar-track {background-color: transparent; box-shadow:none;}
.board-comment-form .theme-box textarea {background:none}


/* list */

.material_list {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 5px; font-family: 'TTB'; letter-spacing: -0.05em;}
.material_list li {position: relative; text-align: center;}
.material_list li.no-data {width: 100%;}
.material_list li.short {width: 165px;}
.material_list li.long {width: 245px;}
.material_list li .mt_img {display: none; position: absolute; border: 2px solid var(--point-color); border-radius: 10px; background: #F3F1EF; width: 250px; overflow: hidden;position: absolute;top: 120%;left: 20%; z-index: 5; text-align: left;}
.material_list li a:hover .mt_img {display: block;}
.material_list li .mt_img .thumb {mask-image: linear-gradient(180deg, black 75%, transparent); margin-bottom: -30px; max-height: 600px; overflow: hidden;}
.material_list li .mt_info {position: relative; padding: 15px; font-size: 15px; line-height: 1.3;}
.material_list li .mt_info .mt_cate {font-size: 18px;}
.material_list li .mt_info .mt_con {overflow: hidden; display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical; height:40px;}
.material_list li .mt_name {position: relative;}
.material_list li .mt_name .hov {display: none;}
.material_list li .mt_name span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; padding: 0 20px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; font-size: 16px;}

.material_list li a:hover .mt_name span {color: #fff;}
.material_list li a:hover .mt_name .def {display: none;}
.material_list li a:hover .mt_name .hov {display: block;}

/* view */
.material_view {display: flex; align-items: center; gap: 0px; width: 100%; font-family: 'TTB'; letter-spacing: -0.05em;}
.material_view button {font-family: 'TTB';}
.material_view .mt_info {width: calc(40% - 10px); text-align: center; font-size: 15px;}
.material_view .mt_info .mt_img {display: flex; align-items: center; justify-content: center; margin-bottom: 15px; padding: 0 20px; min-height: 345px; background: url('./circle.png') center center no-repeat;}
.material_view .mt_info .mt_img a {display: block; width: 100%; height:100%;}
.material_view .mt_info .mt_img a img {max-height: 500px;}
.material_view .mt_info .mt_name {position: relative; margin:10px auto; max-width: 250px;}
.material_view .mt_info .mt_name.long {max-width:370px;}
.material_view .mt_info span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; padding: 0 25px; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; font-size: 18px;}
.material_view .mt_info .mt_con {line-height: 1.3;}
.material_view .mt_comment {padding-left: 30px; width: calc(60% - 10px); overflow-y: auto; max-height: calc(100vh - 300px);-ms-overflow-style: none;}
.material_view .mt_comment::-webkit-scrollbar {display: none;}
.material_view .mt_info,
.material_view .mt_comment {padding-top: 50px;}

.board-comment-list	{ position: relative; font-size: 15px;}
.board-comment-list .item	{position: relative; margin-top:30px; padding: 10px 30px;}
.board-comment-list .item:first-child,
.board-comment-list .item.reply {margin-top: 0;}
.board-comment-list .item .co-content {margin-top: 10px; padding: 0 20px;}
.board-comment-list .item .co-content a {display: block; margin-bottom: 10px; max-width: max-content;}
.board-comment-list .item .co-content > button {margin-bottom: 8px;}
.board-comment-list .item.reply .co-content {padding-left: 30px;}
.board-comment-list .item .co-name {color: #a4b6c2; padding-left: 20px;}
.board-comment-list .item.reply .co-name {position: relative; padding-top: 10px; padding-left: 30px; border-top: 1px solid var(--point-color);}
.board-comment-list .item.reply .co-name:before {content: '└'; position: absolute; left: 13px;}
.board-comment-list .item .co_count {position: absolute; top: -2px; right: 96%; font-family: 'edward';font-size: 72px;color: #f2f0ee; -webkit-text-stroke: 1px var(--point-color);}
.board-comment-list .item .co-inner.hide {display: none;}
.img_secret {position: relative; margin-bottom: 30px !important;}
.img_secret img {filter: blur(10px);}
.img_secret:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 117px; background: url('./lock_icon.png') center center/contain no-repeat;}

.file_wrap {display: flex;}
.file_upload {display: none;}
.file_url {display: none;}
.co_file {margin-top: 3px; margin-bottom: 0;}
.co_file label {word-break: break-all;}
.co_file input {border-radius: 10px;}

.board-comment-list .item .co_count {left: -20px;}
.board-comment-list .item .co-name {text-align: right;}


@media(max-width:900px) {
	.material_view {flex-wrap: wrap; padding: 0 20px; box-sizing: border-box;}
	.material_view .mt_info {width: 100%;}
	.material_view .mt_comment {width: 100%; max-height: none; overflow: visible; padding-left: 0;}

}

@media all and (max-width: 640px) {

	.board-comment-list .item	{ padding: 0; }
	.board-comment-list .co-name	{ position: relative; width: auto; padding: 5px 10px; }
	.board-comment-list .co-content	{ padding: 10px; word-break:break-all;}

	.material_list .mt_img {display: none !important;}
}

@media (max-width:520px) {
	.board-comment-form .ui-btn {padding: 0 10px;}
	#wr_2 {width: 100% !important; margin-top: 5px;}
}

#wr_content {width: 100% !important;}

@media (max-width:1000px) {
	.bo_fx {position: absolute; top: -60px; left: 15px;}
}