@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);


* { 
	box-sizing:border-box;
	margin:0;
	padding:0;
	line-height:1.3;
	word-break:keep-all;
}
html, body {
	width: 100%; 
	min-height: 100%;
	font-family:Noto Sans KR, sans-serif;
	letter-spacing:-.3px;
	scrollbar-width:none;
	overscroll-behavior: none;
}
html.onFixed { 
	width: 100%; 
	height: 100%;
	overflow: hidden;
}
a { 
	text-decoration:none; 	
}
li { 
	list-style:none; 
}
label, button, a, select, textarea, input { 
	font-family:Noto Sans KR, sans-serif;
	letter-spacing:-.3px;
}
input, button, select, textarea { 
	background:transparent;
	border:none;
}
label, button, a { 
	cursor:pointer;
}
input { 
	min-width: 0; 
}
textarea { 
	resize:none; 
}
table { 
	width: 100%;
	table-layout:fixed;
	border-spacing:0;
	border-collapse:collapse;
}
table *:not(th) { 
	word-break:break-all; 
}

/* 공통 시작
------------------------------------------------------ */
.wrapper { 
	min-height: 100vh;
	padding:36px 16px;
	background:url(/images/story/storyBg01.png) no-repeat top right 0;
	background-size:100% auto;
}
.inner { 
	max-width: 1200px; 
	margin:0 auto;
}
.storyTopBox { 
	margin:0 0 53px;
}
.storyTopBox .logo a { 
	display:block; 
	font-size: 0;
}
.storyTopBox .logo img { 
	max-width: 100%; 
}
.storyNoticeBox01 { 
	margin:13px 0;
	padding:20px;
	background: #F8F4F1;
	border:1px solid #EFE9E2;
	border-radius: 15px;
}
.storyNoticeBox01 .scrollBox { 
	max-height: 150px;
	overflow-y:auto;
	scrollbar-width:thin;
}
.storyNoticeBox01 .tit01 { 
	position:relative;
	margin:0 0 10px;
	padding:0 0 0 29px;
	font-weight: 500;
	font-size: 14px;
	color: #424242;
}
.storyNoticeBox01 .tit01:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 18px;
	height: 18px;
	top: 0;
	left: 0;
	background:url(/images/story/brdWriteNotice01.svg) no-repeat;
	background-size:cover;
}
.storyNoticeBox01 .noticeTxt01 { 
	font-size: 14px;
	color: #424242;
	word-break:break-all;
}
.storyConBox { 
	padding:40px;
	background: #FFF;
	border:1px solid #F0F0F0;
	border-radius: 15px;
	box-shadow:-3.6px -3.6px 6px 0 rgba(255,255,255,.12);
}
.td_120 { 
	width: 120px; 
}
.comPageBox { 
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	margin:74px 0 0;
}
.comPageBox .btn {
	display:flex;
	align-items:center; 
	justify-content:center; 
	width: 40px;
	height: 40px;
	border:1px solid transparent;
	border-radius: 10px;
	font-size: 14px;
	text-align: center;
	color: #424242;
}
.comPageBox .btn.on { 
	background: #3E2723;
	font-weight: 500;
	color: #FFF;
}
.comPageBox .btn.stArrow { 
	border-color:#E0E0E0;
	font-size: 0;
}
.comPageBox .btn.stArrow + .btn.stArrow,
.comPageBox .btn.stArrow + .btn.stNum,
.comPageBox .btn.stNum + .btn.stArrow { 
	margin-left:12px;
}
.mbWriteLnk {
	display:none;
}
@keyframes floating01 { 
	0% { 
		transform:translateY(0);
	}
	100% { 
		transform:translateY(-10px);
	}
}
@media all and (max-width:999px){
	.storyNoticeBox01 { 
		margin:16px 0 10px;
		padding:16px;
	}
	.storyNoticeBox01 .tit01 { 
		margin:0 0 8px;
		padding:0 0 0 24px;
		font-size: 13px;
	}
	.storyNoticeBox01 .tit01:before { 
		width: 16px;
		height: 16px;
	}
	.storyNoticeBox01 li {
		font-size: 13px;
	}
	.comPageBox { 
		margin:32px 0 0;
	}
	.comPageBox .btn {
		width: 32px; 
		height: 32px;
		border-radius: 5px;
		font-size: 13px;
	}
	.comPageBox .btn.stArrow img { 
		width: 16px; 
	}
	.comPageBox .btn.stArrow + .btn.stArrow,
	.comPageBox .btn.stArrow + .btn.stNum,
	.comPageBox .btn.stNum + .btn.stArrow { 
		margin-left:6px;
	}
	.mbWriteLnk {
		position:fixed;
		display:flex;
		align-items:center; 
		justify-content:center;
		width: 60px;
		height: 60px;
		bottom: -100px;
		right: 16px;
		background: #3E2723;
		border-radius: 50%;
		box-shadow:2px 4px 10px 0 rgba(0,0,0,.15);
		text-align: center;
		transition:bottom .3s ease;
	}
	.mbWriteLnk span { 
		display:block;
	}
	.mbWriteLnk .lnkIco { 
		padding:0 0 0 1px;
		font-size: 0;
	}
	.mbWriteLnk .lnkIco img { 
		max-width: 100%;
	}
	.mbWriteLnk .lnkTxt { 
		font-size: 12px; 
		letter-spacing: 0;
		color: #FFF;
	}
	.mbWriteLnk.on { 
		bottom: 120px;
		animation:floating01 .5s infinite alternate;
	}
}
/* 공통 끝
------------------------------------------------------ */

.brdTopBox01 { 
	display:flex;
	align-items:center; 
	justify-content:space-between; 
	flex-wrap:wrap;
	gap:16px;
	margin:0 0 24px;
	padding:0 0 24px;
	border-bottom:1px solid #EDEDED;
}
.brdTopBox01 .tit01 { 
	display:flex;
	align-items:center;
	gap:12px;
	min-height: 48px;
}
.brdTopBox01 .tit01 .lnk { 
	position:relative; 
	display:block;
	width: 32px;
	height: 32px;
	background: #3E2723;
	border-radius: 50%;
}
.brdTopBox01 .tit01 .lnk:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 10px;
	height: 10px;
	top: 50%;
	left: 50%;
	margin:-5px 0 0 -3px;
	transform:rotate(-45deg);
	border-top:2px solid #FFF;
	border-left:2px solid #FFF;
}
.brdTopBox01 .tit01 .titTxt { 
	font-weight: 700; 
	font-size: 18px;
	color: #424242;
}
.brdTopBox01 .writeLnk { 
	display:block;
	padding:14px 31px 13px;
	background: #3E2723;
	border-radius: 10px;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0;
	color: #FFF;
}
.brdSchBox01 { 
	display:flex;
	justify-content:flex-end;
	gap:16px;
	margin:0 0 24px;
}
.brdSchBox01 .ipt { 
	display:block;
	padding:10px 15px;
	border:1px solid #DBDBDB;
	border-radius: 10px;
	font-size: 14px;
	letter-spacing: 0;
	color: #424242;
}
.brdSchBox01 .ipt::placeholder { 
	color: #797979; 
}
.brdSchBox01 select.ipt { 
	flex-shrink:0;
	width: 120px;
	padding-right:35px;
	appearance: none;
	background-image: url(/images/story/comSel01.svg);
	background-repeat:no-repeat;
	background-position:right 15px center;
}
.brdSchBox01 input.ipt { 
	width: 294px; 
	max-width: 100%;
}
.brdSchBox01 .btn { 
	flex-shrink:0;
	display:block;
	padding:11px 27px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0;
}
.brdSchBox01 .btn.st01 { 
	background: #3E2723;
	color: #FFF;
}
.brdLstBox01 table { 
	text-align: center; 
}
.brdLstBox01 thead { 
	background: #F4F0EB;
	border-top:1px solid #DDD;
	border-bottom:1px solid #DDD;
}
.brdLstBox01 thead th {
	padding:13px 8px 14px;
	font-weight: 500; 
	font-size: 15px;
	color: #212121;
}
.brdLstBox01 tbody tr {
	border-top:1px solid #EDEDED;
}
.brdLstBox01 tbody tr.stNotice { 
	background: #FFF7ED; 
}
.brdLstBox01 tbody tr:first-child { 
	border-top:none;
}
.brdLstBox01 tbody td { 
	padding:15px 15px 13px;
	font-size: 14px; 
	color: #424242;
}
.brdLstBox01 tbody td .lnk01 { 
	display:block;
	font-size: 1em;
	color: #424242;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow: hidden;
}
.brdLstBox01 tbody td.brdTit { 
	text-align: left; 
}
.brdLstBox01 tbody tr.stNotice td,
.brdLstBox01 tbody tr.stNotice td .lnk01 { 
	font-weight: 500; 
}
.brdWriteBox01 .iptTit01 { 
	display:block;
	margin:0 0 13px;
	font-weight: 500;
	font-size: 14px;
	color: #424242;
}
.brdWriteBox01 * + .iptTit01 { 
	margin-top:22px;
}
.brdWriteBox01 .ipt { 
	display:block;
	padding:13px 15px 12px;
	border:1px solid #DBDBDB;
	border-radius: 10px;
	font-size: 14px;
	letter-spacing: 0;
	color: #424242;
}
.brdWriteBox01 .ipt::placeholder { 
	color: #999; 
}
.brdWriteBox01 .ipt.fullWid { 
	width: 100%; 
}
.brdWriteBox01 .noticeBox { 
	margin:24px 0 13px;
	padding:20px;
	background: #F8F4F1;
	border:1px solid #EFE9E2;
	border-radius: 15px;
}
.brdWriteBox01 .noticeBox .scrollBox { 
	max-height: 150px;
	overflow-y:auto;
	scrollbar-width:thin;
}
.brdWriteBox01 .noticeBox .tit01 { 
	position:relative;
	margin:0 0 10px;
	padding:0 0 0 29px;
	font-weight: 500;
	font-size: 14px;
	color: #424242;
}
.brdWriteBox01 .noticeBox .tit01:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 18px;
	height: 18px;
	top: 0;
	left: 0;
	background:url(/images/story/brdWriteNotice01.svg) no-repeat;
	background-size:cover;
}
.brdWriteBox01 .noticeBox .lst01 li { 
	margin:0 0 8px;
	font-size: 14px;
	color: #424242;
}
.brdWriteBox01 .noticeBox .lst01 li:last-child { 
	margin:0;
}
.brdWriteBox01 .chkBox01 { 
	position:relative;
}
.brdWriteBox01 .chkBox01 .chkIpt { 
	position:absolute; 
	width: 0;
	height: 0;
	top: 0;
	left: 0;
	overflow: hidden;
}
.brdWriteBox01 .chkBox01 .chkLbl { 
	position:relative; 
	display:block;
	padding:0 0 0 28px;
	font-size: 14px;
	color: #424242;
}
.brdWriteBox01 .chkBox01 .chkLbl:before { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 15px;
	height: 15px;
	top: 1px;
	left: 0;
	background: #F8F4F1 url(/images/story/comChk01.svg) no-repeat center left 3px;
	border-radius: 3px;
}
.brdWriteBox01 .chkBox01 .chkIpt:checked + .chkLbl:before { 
	background-color: #3E2723; 
}
.brdViewBox01 .topBox {
	margin:0 0 24px;
	padding:0 0 20px;
	border-bottom:1px solid #EDEDED;
}
.brdViewBox01 .topBox .tit01 { 
	margin:0 0 8px;
	font-weight: 700;
	font-size: 18px;
	color: #424242;
	word-break:break-all;
}
.brdViewBox01 .topBox .lst01 { 
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}
.brdViewBox01 .topBox .lst01 li { 
	position:relative; 
	padding:0 15px 0 0;
	font-size: 14px;
	color: #797979;
}
.brdViewBox01 .topBox .lst01 li:after { 
	content:"";
	position:absolute;
	box-sizing:border-box;
	display:block;
	width: 1px;
	height: 12px;
	top: 50%;
	right: 0;
	margin:-5px 0 0;
	background: #CDCDCD;
}
.brdViewBox01 .topBox .lst01 li:last-child { 
	padding:0;
}
.brdViewBox01 .topBox .lst01 li:last-child:after { 
	display:none; 
}
.brdViewBox01 .conBox { 
	margin:0 0 24px;
}
.brdViewBox01 .conBox .txt01 { 
	font-size: 15px;
	line-height: 1.4;
	color: #424242;
	word-break:break-all;
}
.brdViewBox01 .replyBox { 
	padding:20px;
	background: #F8F4F0;
	border:1px solid #EFE9E2;
	border-radius: 15px;
}
.brdViewBox01 .replyBox .rpTopBox { 
	display:flex;
	align-items:center; 
	justify-content:space-between; 
	gap:8px;
	margin:0 0 12px;
}
.brdViewBox01 .replyBox .rpTopBox .tit01 { 
	display:flex;
	align-items:center; 
	gap:12px;
}
.brdViewBox01 .replyBox .rpTopBox .tit01 span { 
	display:block;
}
.brdViewBox01 .replyBox .rpTopBox .tit01 .titIco { 
	font-size: 0; 
}
.brdViewBox01 .replyBox .rpTopBox .tit01 .titIco img { 
	max-width: 100%; 
}
.brdViewBox01 .replyBox .rpTopBox .tit01 .titTxt { 
	font-weight: 500; 
	font-size: 14px;
	color: #424242;
}
.brdViewBox01 .replyBox .rpTopBox .date { 
	font-size: 14px;
	color: #8D8985; 
}
.brdViewBox01 .replyBox .rpTxt01 { 
	font-size: 15px;
	line-height: 1.4;
	color: #424242;
	word-break:break-all;
}
.brdBtmBox01 { 
	display:flex;
	justify-content:center;
	gap:12px;
	margin:70px 0 0;
}
.brdBtmBox01 .btn { 
	display:block; 
	min-width: 163px;
	padding:12px 12px 11px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
}
.brdBtmBox01 .btn.st01 { 
	background: #EDEDED;
	color: #797979;
}
.brdBtmBox01 .btn.st02 { 
	background: #3E2723;
	color: #FFF;
}
@media all and (max-width:999px){
	.storyTopBox { 
		margin:0 0 24px;
	}
	.storyTopBox .logo a { 
		width: 40px; 
	}
	.storyConBox { 
		padding:16px;
	}
	.brdTopBox01 { 
		padding:0 0 16px;
		margin:0 0 16px;
	}
	.brdTopBox01 .tit01 { 
		gap:8px; 
		min-height: 37px;
	}
	.brdTopBox01 .tit01 .lnk { 
		width: 28px;
		height: 28px;
	}
	.brdTopBox01 .tit01 .lnk:before { 
		width: 8px; 
		height: 8px;
		margin:-4px 0 0 -2px;
	}
	.brdTopBox01 .tit01 .titTxt { 
		font-size: 15px; 
	}
	.brdTopBox01 .writeLnk { 
		padding:10px 16px 9px;
		font-size: 14px;
	}
	.brdSchBox01 { 
		gap:8px;
		margin:0 0 16px;
	}
	.brdSchBox01 .ipt,
	.brdSchBox01 .btn { 
		padding:8px 12px;
		border-radius: 5px;
		font-size: 13px;
	}
	.brdSchBox01 select.ipt { 
		padding-right:25px;
		background-size:14px auto;
		background-position: right 8px center;
	}
	.brdSchBox01 input.ipt { 
		width: 180px; 
	}
	.brdLstBox01 thead { 
		display:none;
	}
	.brdLstBox01 tbody { 
		border-top:1px solid #DDD;
	}
	.brdLstBox01 tbody tr { 
		display:flex;
		flex-wrap:wrap; 
	}
	.brdLstBox01 tbody td { 
		order:2;
		position:relative;
		padding:8px 8px 7px;
		font-size: 13px;
	}
	.brdLstBox01 tbody td:after { 
		content:"";
		position:absolute;
		box-sizing:border-box;
		display:block;
		width: 1px;
		height: 8px;
		top: 50%;
		right: 0;
		margin:-4px 0 0;
		background: #C9C9C9;
	}
	.brdLstBox01 tbody td.brdTit { 
		order:1;
		width: 100%;
		padding-bottom:0;
	}
	.brdLstBox01 tbody td:last-child:after,	
	.brdLstBox01 tbody td.brdTit:after { 
		display:none; 
	}
	.brdWriteBox01 .iptTit01 { 
		margin:0 0 6px;
		font-size: 13px;
	}
	.brdWriteBox01 * + .iptTit01 { 
		margin-top:12px;
	}
	.brdWriteBox01 .ipt { 
		padding:8px 8px 7px;
		border-radius: 5px;
		font-size: 13px;
	}
	.brdWriteBox01 .noticeBox { 
		margin:16px 0 10px;
		padding:16px;
	}
	.brdWriteBox01 .noticeBox .tit01 { 
		margin:0 0 8px;
		padding:0 0 0 24px;
		font-size: 13px;
	}
	.brdWriteBox01 .noticeBox .tit01:before { 
		width: 16px;
		height: 16px;
	}
	.brdWriteBox01 .noticeBox .lst01 li { 
		margin:0 0 5px;
		font-size: 13px;
	}
	.brdWriteBox01 .chkBox01 .chkLbl { 
		padding:0 0 0 24px;
		font-size: 13px;
	}
	.brdViewBox01 .topBox {
		margin:0 0 20px;
		padding:0 0 16px;
	}
	.brdViewBox01 .topBox .tit01 { 
		margin:0 0 6px;
		font-size: 15px;
	}
	.brdViewBox01 .topBox .lst01 {
		gap:8px;
	}
	.brdViewBox01 .topBox .lst01 li {
		padding:0 9px 0 0;
		font-size: 13px;
	}
	.brdViewBox01 .topBox .lst01 li:after {
		height: 8px;
		margin:-3px 0 0;
	}
	.brdViewBox01 .conBox { 
		margin:0 0 20px;
	}
	.brdViewBox01 .conBox .txt01 { 
		font-size: 13px;
	}
	.brdViewBox01 .replyBox { 
		padding:16px;
		border-radius: 8px;
	}
	.brdViewBox01 .replyBox .rpTopBox {
		margin:0 0 8px;
	}
	.brdViewBox01 .replyBox .rpTopBox .tit01 {
		gap:8px;
	}
	.brdViewBox01 .replyBox .rpTopBox .tit01 .titIco { 
		width: 16px;
	}
	.brdViewBox01 .replyBox .rpTopBox .tit01 .titTxt,
	.brdViewBox01 .replyBox .rpTopBox .date,
	.brdViewBox01 .replyBox .rpTxt01 { 
		font-size: 13px;
	}
	.brdBtmBox01 { 
		gap:8px;
		margin:32px 0 0;
	}
	.brdBtmBox01 .btn { 
		min-width: 140px;
		padding:10px 10px 9px;
		font-size: 15px;
	}
}
@media all and (max-width:599px){
	.brdSchBox01 { 
		flex-wrap:wrap;
		gap:4px;
	}
	.brdSchBox01 select.ipt,
	.brdSchBox01 input.ipt,
	.brdSchBox01 .btn { 
		width: 100%; 
	}
	.brdBtmBox01 .btn { 
		width: calc((100% - 8px)/2);
		min-width: 0;
	}
}