@charset "utf-8";

@font-face {
    font-family: 'Paperlogy-8ExtraBold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-2ExtraLight';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-5Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Chosunilbo_myungjo';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Chosunilbo_myungjo.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.back_img {
	width: 100%;
	height: 100%;
	position: fixed;
	left:0;
	top:0;
	z-index: -1;
	background-position: center;
	background-size: cover;
	background-clip: fixed;
}

#body hr.padding {height:0;padding:0;}


.tab_title {text-align: center;}
.tab_title li {display: inline-block; font-size: 15px; font-weight: 800; border-radius: 2em; padding: 2px 8px;}
.tab_title li.on {background-color: #070707; color: #fff; font-weight: 500;}

/*목록*/

.board-notice	{ max-width: 300px; padding: 10px; margin: 30px auto; text-align: center; box-sizing: border-box; }

#navi_category ul {text-align:center;padding:30px 0;}
#navi_category li {display:inline-block; padding:5px 0;}
#navi_category li:before {display:inline-block; content:"|";padding:0 15px;opacity:.6;}
#navi_category li:first-child:before {display:none;content:"";}
#navi_category #bo_cate_on {font-weight:bold;}

.board-skin-basic{
position:relative;
width:100%;
padding:60px 0;
margin:30px auto 0;
box-sizing:border-box;
}

.swiper-container  {overflow: visible !important;}
.swiper-wrapper {    gap: 25px;     flex-wrap: wrap;    justify-content: center;}
 
.swiper-container li a {
	display:flex;
	width: 350px; height: 240px;
	background-position: center !important; background-size: cover !important;
	box-shadow: 0px 0px 8px 0px rgba(9, 7, 19, 0.25);
	backdrop-filter: blur(5px);
	align-items: flex-end;
    justify-content: flex-start;
	padding:24px 17px;
	border-radius: 10px;
	box-sizing: border-box;

}

.swiper-container li a:hover {
	transform: scale(1.02) translateY(-10px);
}
.swiper-container li a .subject {
    display: flex;
    justify-content: center;
    align-items: center;
	color: #000;
	font-family: 'Paperlogy-5Medium';
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 20px */

}
.swiper-container li a .subject::before {
	content: "";
	display: inline-block;
	background: #8AAEE0;
	width: 4px;
	height: 20px;
	flex-shrink: 0;
	margin-right: 15px;
	
}

.swiper-container li .ui-profile {
	display: flex;
	justify-content: space-between;
    align-items: center;
	border-radius: 10px;
	background: #FFF;
	box-shadow: 0px 0px 8px 0px rgba(9, 7, 19, 0.25);
	padding:7px 17px;
	margin-top: 8px;
} 
.swiper-container li .ui-profile .c_name {
	color: #8AAEE0;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 12px */
}

.swiper-container li .ui-profile *  {
	color: #3C3B48;
	font-family: 'Pretendard';
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 12px */
	letter-spacing: 1.32px;
}

.swiper-container li a.ui-profile .name, .swiper-container li a.ui-profile .type {display:block;line-height:130%;word-break:break-all;}
.swiper-container li a.ui-profile .name {font-size:15px;} /*이름*/


.swiper-slide a{position:relative;display:block;width:100%;height:100%;	font-size: 20px; line-height:150%}  
.board-skin-basic .swiper-button-prev, .board-skin-basic .swiper-container-rtl .swiper-button-next,
.board-skin-basic .swiper-button-next, .board-skin-basic .swiper-container-rtl .swiper-button-prev {background-image:none;font-size:44px;line-height:44px;}
.board-skin-basic .swiper-button-prev, .board-skin-basic .swiper-container-rtl .swiper-button-next {left:10px;}
.board-skin-basic .swiper-button-next, .board-skin-basic .swiper-container-rtl .swiper-button-prev {right:10px;} 


/*글쓰기*/


.board-write	{  max-width:800px; padding: 0 10px; margin:30px auto; }
.board-write > dl {position:relative;}
.board-write > dl > dt { width:100px;position:absolute;line-height:32px;text-align:center; font-weight: 700; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:110px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}
.board-write .frm_input.small { width:50px;}
.board-write .frm_info{line-height:140%;}
.board-write .write-notice	{
	padding: 20px 10px 10px;
	font-size: 11px;
}

.board-write .files {position:relative;}
.board-write .files	{ margin-top: 20px;}  
.board-write .files .sub {position:relative;padding-left:65px; box-sizing:border-box;} 
.board-write .files span.sub_tit{position:absolute;left:0;display:block;width:65px;} 
.board-write .files .frm_info{padding-top:5px;}
.board-write .files .label-right {position:absolute;top:0;right:0;z-index:2;}


/*본문*/

.board-viewer	{
	width:100%;
	display: block;
	position: relative; 
	box-sizing:border-box;
	height:auto !important;  /*페이지 전체 스크롤 원할 경우 해당 라인 주석처리 해제*/
	margin-left: 22px;
}
.board-viewer:after{content:"";display:block;clear:both;}


.board-viewer .body_img { 
	position:relative;
	float:left; 
	height:100%;
} 
#links-box-open {display:none;}
.links-box {position:absolute;top:0;width:100%; text-align: center;}
.links-box .ui-links {overflow:hidden;padding:10px; transform: rotate(-1deg);}
.links-box .ui-links li {margin-bottom:2px; font-size:12px; letter-spacing: 1.5px;} 
#rel_link {position: fixed; bottom: 3%;  margin: 0 auto;left: 0;right: 0; padding:0; width:200px;}
#rel_link li {text-align:center; display: inline-block;}  
#rel_link li:first-child a::before {content: "";}  
#rel_link li:first-child a.txt-default::before {content: "";}  
#rel_link li a:before {content:"| "; color: #6d6d6d;}
#rel_link li a.txt-default:before {content: "| ";} 
#rel_link li a.txt-default {color:#6d6d6d}
#rel_link li a {color: black;}

#clo_link {float:right;}
#clo_link li {text-align:right;}  
#clo_link li a:after {content:" ◈";}
#clo_link li a.txt-default:after {content: " ◇";} 
 
.board-viewer .contents::-webkit-scrollbar,.board-viewer .body_img::-webkit-scrollbar {display:none;} /*스크롤바 숨김*/

.board-viewer.clear{height:auto !important;}
.board-viewer.clear .body_img, .board-viewer.clear .contents{
	float:none; 
	width:100% !important;
	clear:both;height:auto;
}
.board-viewer.clear .contents {
margin:0 auto 30px;	
}

.board-viewer.clear .body_img {text-align:center;}  
.board-viewer .body-img { height:100%; }
.board-viewer .body-img img{ 
	max-width:100%;
} 


.board-comment-view {position:relative;clear:both;overflow:hidden;}
p.add { margin: 10px 0; font-family: 'GmarketSansMedium';}
p.add.txt-left {float:left;} 
p.add.txt-right {float:right;}
p.add a {display:inline-block;}
#bo_vc_w {clear:both;} 
#bo_v_con {padding:20px 0;}  
#bo_v_bot	{ 
    overflow: hidden;
    position: fixed;
    z-index: 5;
	border-top: none !important;
	right:30px;
	top:30px;
	background: white;
	border-radius: 2em;
	padding:5px 20px !important;
 }
#bo_v_bot .material-symbols-outlined {
	font-weight: 100 !important;
	color:black;
	font-size: 20px;
	opacity: 1;
  }
  
.bo_v_nb	{ float: left; }
.bo_v_com	{ float: right; }

.co-content {text-align:right;}

.board-comment-list			{ position: relative;clear:both; } 
.board-comment-list .item	{
	position: relative; 
	margin-bottom:5px;
} 
.board-comment-list strong {display:block;margin:20px 0 5px;}
.board-comment-list .co-content {box-sizing:border-box;padding-right:50px;padding-bottom:5px;}
.board-comment-list .co-content .co-inner {text-align:left;}
.board-comment-list .co-info {position:absolute; width:50px; top:0;right:0;}
.board-comment-list .co-content .ui-btn {padding:0 8px; margin:0 2px;}
.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 80px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 10px;
} 

#wr_content{display:block;height:100px;}
 
@media all and (max-width: 640px) {   
	.board-category	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
	}
	.board-category select	{
		width: 100%;
	}

	.bo_fx	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 10px !important;
	}
	.bo_fx a	{
		display: block;
		width: 100%;
	}
.board-skin-basic .swiper-button-prev, .board-skin-basic .swiper-container-rtl .swiper-button-next {left:0;}
.board-skin-basic .swiper-button-next, .board-skin-basic .swiper-container-rtl .swiper-button-prev {right:0;}
.board-viewer .body_img ,.board-viewer .contents {width:100%;float:none;clear:both;}
.board-viewer .body_img {text-align:center;} 
.board-write .files .sub {padding-left:0;} 
.board-write .files span.sub_tit{position:relative;} 
.board-write .files .label-right {position:relative;}
#links-box-open {display:block;margin:10px auto;opacity:0.7;}
.links-box {position:fixed; bottom:2%; top:auto;overflow:hidden;}
.links-box .ui-links li {font-size:13px;}
}

.character_profile {display: inline-block; width: 1000px;}

.body_img_wrap {display: block;	text-align: center; position: fixed; left:0; right:0; margin:0 auto; text-align: center; top:-5vh;}

.board-viewer .body-img{ 
    position: relative; /* 부모 컨테이너 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 중앙 정렬 */
} 
.board-viewer .body-img img{ 
    max-width: 100%;
    height: auto;
} 


.body-img .pha,
.bottom_profile .pha {
	position: relative;
	transition: none !important;
	display: inline-block;
	color: #000;
	font-family: 'Chosunilbo_myungjo';
	font-size: 20px;
	font-style: normal;
	line-height: 100%;
	max-width: 280px;
	word-break: keep-all;
	text-shadow: 0px 0px 3px #FFF,  0px 0px 3px #FFF;
	z-index: 5;
}

.body-img .pha .big,
.bottom_profile .pha .big {font-size: 32px;font-family: 'Chosunilbo_myungjo';}






/* image modal */
.modal {
    display: none;
    z-index: 500;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
	overflow-y: auto;
	transition: none !important;
}
.modalBox {
    position: relative;
    text-align: center;
	top:15%;
	
}

.modalBox img {max-width: 60%;}

.contents {
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.80);
	box-shadow: 0px 0px 10px 0px rgba(9, 7, 19, 0.25);
	backdrop-filter: blur(5px);
	padding:0 42px;
	box-sizing: border-box;
	width: 520px;
	overflow: auto;
	height:0;
	opacity: 0;
	transition: all ease 0.8s;
}

.contents.on {height:520px;	padding:26px 42px; opacity: 1;margin-bottom: 45px;}

.contents .title_min {
	display: inline-block;
	border-radius: 2em;
	border: 1px solid #B1C9EF;
	padding: 5px 20px;
	color: #395886;
	text-align: center;
	font-family: 'Pretendard';
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 13px */
}

.contents .detail_wrap {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	justify-items: center;
	margin-top: 12px;
	margin-bottom: 42px;
}

.contents .detail_wrap .title_min {margin-right: 11px;}

.contents .detail_wrap li {
	display: flex;
	color: #000;
	font-family: 'Pretendard';
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 13px */
	align-items: center;
	width: 120px;
	margin-top: 11px;
}
.contents .section {	margin-bottom: 25px;}
.contents .section .title::before {
	content: url('/img/title.png');
	display: block;
	margin-right: 5px;
}
.contents .section .title {
	color: #395886;
	font-family: 'KoPubWorld Batang';
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 13px */
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.contents .section .inside {
	color: #000;
	font-family: 'Pretendard';
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%; /* 23.4px */
	padding-left: 10px;
	word-break: keep-all;
	text-align: left;
}

.grad {width:100%; position: fixed; bottom:0; left:0; height:50vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 90.5%); pointer-events: none;}

.board-viewer .bottom_profile {
	position: fixed;
	bottom:50px;
	text-align: center;
	display: flex;
    flex-direction: column;
    align-items: center;
}

.board-viewer .bottom_profile.left {left:281px;}
.board-viewer .bottom_profile.right {right:281px;}

.board-viewer .bottom_profile .en_name {
	text-align: center;
	filter:drop-shadow( 0px 0px 4px #FFF);
	font-family: "Cormorant SC", "Zen Antique Soft";
	font-size: 64px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 64px */
	max-width: 300px;
	word-break: keep-all;
	background: linear-gradient(180deg, #26579F 0%, #8AAEE0 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.board-viewer .bottom_profile .en_name.short {
	font-size: 96px;
}

.board-viewer .bottom_profile .kr_name {
	color: #395886;
	text-align: center;
	text-shadow: 0px 0px 4px #FFF;
	font-family: 'Chosunilbo_myungjo';
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 100%; /* 16px */
	letter-spacing: 3.2px;
	margin-top: 12px;
}

.board-viewer .bottom_profile .key  {
	margin-bottom: 8px;
	gap: 10px;
}

.board-viewer .bottom_profile .key li {
	display: inline-flex;
	padding: 5px 19px;
	justify-content: center;
	align-items: center;
	border-radius: 2em;
	border: 1px solid #B1C9EF;
	background: #FFF;
	box-shadow: 0px 0px 4px 0px #FFF;
	color: #8AAEE0;
	text-align: center;
	font-family: 'Pretendard';
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
	line-height: 100%; /* 13px */
	letter-spacing: 2.73px;
}

.board-viewer .bottom_profile .icon {margin-bottom: 24px;}


.character_au{
	position: fixed;
	bottom:30px;
	left:0;
	right:0;
	margin:0 auto;
	text-align: center;
	z-index: 2;
} 

.character_au ul {
	display: flex;
	align-items: center;
    justify-content: center;
	gap: 26px;
}

.character_au ul li {position: relative;}
.character_au li a {
	text-align: center;
	font-family: 'Pretendard';
	font-size: 16px;
	font-style: normal;
	line-height: 100%; /* 16px */
	letter-spacing: 2.4px;
	font-weight: 700;
	color: #395886;
	opacity: 1;
}

.character_au li::before {
	content: "";
	display: block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: #8AAEE0;
	position: absolute;
	left:-15px;
	top:7px;
}

.character_au li a.off {
	color: #000;
	opacity: 0.4;
	font-weight: 300;
}

.character_au li:first-child::before {display: none;}
.character_au .au_name {
	background: #EBE9E4;
	display: inline-block;
	padding: 5px 23px;
	color: #818181;
	text-align: center;
	font-family: 'Pretendard';
	font-size: 13px;
	font-style: normal;
	font-weight: 500;
	line-height: 100%; /* 13px */
	letter-spacing: 1.95px;
	border-radius: 2em;
	margin-top: 20px;
}


@media all and (max-width: 1000px) {  
	.board-viewer .body-img {top:10%}
	.body_img_wrap {position: relative;    top: 0vh;}

	#login_box {left:0 !important;}
	
	.character_profile {display: block; width: 90%;margin-left:0px;} 
	.board-viewer {margin-left: 0;}

	#rel_link {position: relative; top: 14%;  margin: 0 auto;left: 0;right: 0; padding:0}
	#bo_v_bot {
		margin-top:20px;
		z-index: 5;
	}
	.board-viewer	{
		width:100%;
		display: block;
		position: relative; 
		box-sizing:border-box;
		height:150% !important;  /*페이지 전체 스크롤 원할 경우 해당 라인 주석처리 해제*/
	}

	.board-viewer .body_img { 
		margin-left:0px;
	} 

	.board-viewer .body-img img{ 
		max-width:100% !important; /* 전신 세로 최대를 스크린 사이즈에 맞게 설정 */
	} 

	.board-viewer .bottom_profile {
		position: relative;
		bottom: 0px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50px;
	}
	.board-viewer .bottom_profile.left,
	.board-viewer .bottom_profile.right {left:0;right:0}

	.bottom_profile .pha {margin-bottom: 15px;}

	.grad {width:100%; position: fixed; bottom:0; left:0; height:60vh; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 90.5%); pointer-events: none;}

	.modalBox img {max-width: 100%;}
	.character_au {
		position:relative;
		margin-bottom: 30px;
		bottom:0
	}

	#bo_v_bot {
		padding: 20px 0;
		overflow: hidden;
		position: relative;
		top: 0;
		right: 0;
		z-index: 10;
		opacity: 1;
	}

	}