@charset "utf-8";
@import url(/pub/board/ckEditor/build/nabyCommonCK.css);
#nabyWrap {position: relative; width: 100%; padding: 0; margin: 0;}

/* List Start */
/* .listArea {width: 98%; padding: 20px 1%; margin: 0 auto;} */
.listArea {width: 100%; box-sizing: border-box; padding: 0; margin: 20px auto;}
.listArea > ul.listLine {width: 100%; padding: 0; margin: 0; border-bottom: 1px #eee solid;}
.listArea > ul.listLine > li {width: 100%; padding: 20px 0; border-top: 1px #eee solid; list-style: none;}
.listArea > ul.listLine > li.tHead {background-color: #f9f9f9;}
.listArea > ul.listLine > li.tHead > * {font-weight: 300; color: #777;}
.listArea > ul.listLine > li > * {color: #999;}
.listArea > ul.listLine > li.fixed {background-color: #f9f9f9;}
.listArea > ul.listLine > li > ul.listUnit {width: 100%;}
.listArea > ul.listLine > li > ul.listUnit > li {float: left; line-height: 1.5em; list-style: none;}
.listArea > ul.listLine > li > ul.listUnit > li.num {width: 7%; text-align: center;}

/* .listArea > ul.listLine > li > ul.listUnit > li.title {width: 65%; text-align: left; color: #333;} */
.listArea > ul.listLine > li > ul.listUnit > li.title {width: 75%; text-align: left; color: #333;}
.listArea > ul.listLine > li > ul.listUnit > li.title > a {font-size: 24px; font-weight: 700; color: #222;}
.listArea > ul.listLine > li > ul.listUnit > li.title > span.subTitle {font-size: 14px; color: #777;}
.listArea > ul.listLine > li > ul.listUnit > li.title > span.replyCount {font-size: 12px; color: #666; margin-left: 5px;}
.listArea > ul.listLine > li > ul.listUnit > li.title > img.iconListType {width: 18px; height: 18px; line-height: 1.5em; margin-left: 5px;} /* vertical-align: middle; padding: 0 1px 1px; */

/*.listArea > ul.listLine > li > ul.listUnit > li.info {width: 25%; text-align: center;} */
.listArea > ul.listLine > li > ul.listUnit > li.info {width: 18%; text-align: center;}
.listArea > ul.listLine > li.tHead > ul.listUnit > li.info > span {float: left; display: block; font-size: 14px;}
.listArea > ul.listLine > li.tHead > ul.listUnit > li.info > span {float: left; display: block; font-size: 14px;}
.listArea > ul.listLine > li > ul.listUnit > li.info > span {float: left; display: block; font-size: 12px;}
/*
.listArea > ul.listLine > li > ul.listUnit > li.info > span.writer {width: 38%; text-align: center;}
.listArea > ul.listLine > li > ul.listUnit > li.info > span.regDate {width: 32%; text-align: center;}
.listArea > ul.listLine > li > ul.listUnit > li.info > span.view {width: 30%; text-align: center;}
*/
.listArea > ul.listLine > li > ul.listUnit > li.info > span.regDate {width: 100%; text-align: right; box-sizing: border-box; padding-right: 20px;}


/* .countNsearch {width: 98%; height: 30px; padding: 20px 1% 10px; margin: 0 auto;} */
.countNsearch {width: 100%; height: 30px; box-sizing: border-box; padding: 0; margin: 20px auto 10px;}
.countNsearch > p {float: left; display: block; line-height: 30px; font-size: 14px; font-weight: bold; color: #333;}
.countNsearch > p > span {line-height: 30px; font-size: 12px; font-weight: normal; color: #999;}
.countNsearch > .searchArea {position: relative; float: right; display: block; line-height: 30px; font-size: 12px; font-weight: bold; color: #333;}
.countNsearch > .searchArea > form > span {padding-right: 30px;}
.countNsearch > .searchArea > form > label {display: none;}
.countNsearch > .searchArea > form > input {width: 160px;}
.countNsearch > .searchArea > form > .errMsg  {position: absolute; top: 30px; right: 0px; display: none; width: 280px; height: 30px; line-height: 30px; font-size: 12px; font-weight: normal; color: #F16A54;}

@media screen and (min-width: 1280px) {
	.listArea,
	.countNsearch {max-width: 1280px;}
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
}

@media screen and (min-width: 640px) and (max-width: 959px) {
	.listArea > ul.listLine > li > ul.listUnit > li.title {width: 93%; text-align: left; color: #333;}
	.listArea > ul.listLine > li.tHead > ul.listUnit > li.info {display: none;}
	.listArea > ul.listLine > li > ul.listUnit > li.info {width: 93%; padding-left: 7%; padding-top: 10px; padding-right: 0;}
	.listArea > ul.listLine > li > ul.listUnit > li.info > span {float: left; display: block; font-size: 12px; padding-right: 20px;}
	/* .listArea > ul.listLine > li > ul.listUnit > li.info > span.writer {width: auto; text-align: left;} */
	.listArea > ul.listLine > li > ul.listUnit > li.info > span.regDate {width: auto; text-align: left;}
	/* .listArea > ul.listLine > li > ul.listUnit > li.info > span.view {width: auto; text-align: left;} */
}

@media screen and (min-width: 0) and (max-width: 639px) {
	/* .listArea {width: 98%; min-width: 260px; padding: 20px 1%; margin: 0 auto;} */
	.listArea {width: 100%; min-width: 260px; box-sizing: border-box; padding: 0; margin: 20px auto;}
	.listArea > ul.listLine > li.tHead {display: none;}
	.listArea > ul.listLine > li > ul.listUnit > li.num {display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 10px; font-weight: 700; border-radius: 50%;; background-color:  #f5f5f5;}
	.listArea > ul.listLine > li > ul.listUnit > li.title {width: 100%; font-size: 18px; text-align: left; color: #333;}
    .listArea > ul.listLine > li > ul.listUnit > li.title > a {width: 100%; font-size: 18px; text-align: left; color: #222;}
	.listArea > ul.listLine > li.tHead > ul.listUnit > li.info {display: none;}
	.listArea > ul.listLine > li > ul.listUnit > li.info {width: 100%; padding-top: 10px;}
	.listArea > ul.listLine > li > ul.listUnit > li.info > span {float: left; display: block; font-size: 12px; padding-right: 20px;}
	/* .listArea > ul.listLine > li > ul.listUnit > li.info > span.writer {width: auto; text-align: left;} */
	.listArea > ul.listLine > li > ul.listUnit > li.info > span.regDate {width: auto; text-align: left;}
	/* .listArea > ul.listLine > li > ul.listUnit > li.info > span.view {width: auto; text-align: left;} */

	/* .countNsearch {width: 98%; min-width: 260px; height: 70px; padding: 20px 1% 10px; margin: 0 auto;} */
	.countNsearch {width: 100%; min-width: 260px; height: 70px; box-sizing: border-box; padding: 0; margin: 20px auto 10px;}
	.countNsearch > p {width: 100%; line-height: 30px; font-size: 14px; font-weight: bold; color: #333; padding-bottom: 10px;}
	.countNsearch > p > span {line-height: 30px; font-size: 12px; font-weight: normal; color: #999;}
	.countNsearch > .searchArea {position: relative; width: 100%; line-height: 30px; font-size: 12px; font-weight: bold; color: #333;}
	.countNsearch > .searchArea > form > label {display: none;}
	.countNsearch > .searchArea > form > input {width: 120px !important;}
	.countNsearch > .searchArea > form > .errMsg  {position: absolute; top: 30px; left: 0px; display: none; width: 280px; height: 30px; line-height: 30px; font-size: 12px; font-weight: normal; color: #F16A54;}

}
/* List End */


/* Write & Edit 공통 Start */
/* .writeArea {width: 98%; min-width: 260px; padding: 20px 1%; margin: 0 auto;} */
.writeArea {width: 100%; min-width: 260px; box-sizing: border-box; padding: 0; margin: 20px auto;}
.writeArea > .titleArea {padding: 10px 0; border-bottom: 1px #eee dashed; }
.writeArea > .titleArea > h3 {font-size: 26px; font-weight: 700; color: #222; line-height: 1.2em; text-align: left;}

.writeArea > form > ul.writeLine {width: 100%; padding: 10px 0; margin: 0; border-top: 0px #e9e9e9 solid; border-bottom: 1px #e9e9e9 solid;}
.writeArea > form > ul.writeLine > li {float: left; width: 100%; padding: 5px 0; margin: 0 auto; list-style: none; text-align: center;}
.writeArea > form > ul.writeLine > li > label {display: block; padding-left: 10px; font-weight: bold; color: #333; line-height: 26px; text-align: left; font-size: 13px;}
/*
.writeArea > form > ul.writeLine > li input,
.writeArea > form > ul.writeLine > li select,
.writeArea > form > ul.writeLine > li textarea {width: 98%; margin-left: 1%; padding-right: 0; margin: 0 auto;}
*/
.writeArea > form > ul.writeLine > li input,
.writeArea > form > ul.writeLine > li select,
.writeArea > form > ul.writeLine > li textarea {width: 100%; box-sizing: border-box; margin: 0 auto;}
.writeArea > form > ul.writeLine > li #title {line-height: 40px; height: 40px;}
.writeArea > form > ul.writeLine > li #subTitle {line-height: 1.5em; height: 50px; padding-top: 10px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit {width: 100%; margin: 0 auto;}
/*
.writeArea > form > ul.writeLine > li > ul.infoUnit > li {float: left;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 18%; padding-right: 2%;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 38%; padding-right: 2%;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 28%; padding-right: 2%;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: 10%; padding-right: 0%;}
*/
.writeArea > form > ul.writeLine > li > ul.infoUnit > li {float: left;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 20%; box-sizing: border-box; padding-right: 20px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 22%; box-sizing: border-box; padding-right: 20px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 20%; box-sizing: border-box; padding-right: 20px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.fixed {width: 15%; box-sizing: border-box; padding-right: 20px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: 10%; box-sizing: border-box; padding-right: 20px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.regDate {width: 13%; box-sizing: border-box; padding-right:0;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li > label {display: block; width: auto; padding-left: 6px; font-weight: bold; color: #333; line-height: 26px; text-align: left; font-size: 13px;}
/*
.writeArea > form > ul.writeLine > li.iframeEditors {width: 98%; padding: 20px 1% 5px 1%; text-align: center; margin: 0 auto;}
.writeArea > form > ul.writeLine > li > ul.upFile {width: 99.6%; padding-left: 0.4%; padding-bottom: 10px; text-align: left;}
*/
.writeArea > form > ul.writeLine > li.iframeEditors {width: 100%; box-sizing: border-box; padding: 20px 0 5px; text-align: center; margin: 0 auto;}
.writeArea > form > ul.writeLine > li > ul.upFile {width: 100%; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; text-align: left;}
.writeArea > form > ul.writeLine > li > ul.upFile > li {float: left; width: 100%; padding-bottom: 10px;}
.writeArea > form > ul.writeLine > li > ul.upFile > li > label {float: left; width: 80px;}
.writeArea > form > ul.writeLine > li > ul.upFile > li > div {float: left; width: auto; line-height: 30px; margin-left: 20px; margin-right: 10px;}
/*
.writeArea > form > ul.writeLine > li > ul.additionalFile {width: 99.6%; padding-left: 0.4%; padding-bottom: 10px; text-align: left;}
*/
.writeArea > form > ul.writeLine > li > ul.additionalFile {width: 100%; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; text-align: left;}
.writeArea > form > ul.writeLine > li > ul.additionalFile > li {float: left; padding-left: 10px; list-style: disc inside;}
.writeArea > form > ul.writeLine > li > ul.additionalFile > li > a {font-size: 12px; color: #444; line-height: 1.5em;}
.writeArea > form > ul.writeLine > li > ul.additionalFile > li > a > img {vertical-align: middle;}

@media screen and (min-width: 1280px) {
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
}

@media screen and (min-width: 640px) and (max-width: 959px) {
	/*
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 49%; padding: 0 1% 0 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 49%; padding: 0 0 0 1%;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 49%; padding: 0 1% 0 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: 10%; padding: 0 0 0 1%;}
	*/
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 50%; box-sizing: border-box; padding: 0 10px 0 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 50%; box-sizing: border-box; padding: 0 0 0 10px;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 50%; box-sizing: border-box; padding: 0 10px 0 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.fixed {width: 20%; box-sizing: border-box; padding: 0 0 0 10px;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: 15%; box-sizing: border-box; padding: 0 0 0 20px;}
    .writeArea > form > ul.writeLine > li > ul.infoUnit > li.regDate {width: 15%; box-sizing: border-box; padding: 0 0 0 20px;}
}
@media screen and (min-width: 0) and (max-width: 639px) {
	/*
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 99%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 99%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 99%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: auto; padding: 0;}
	*/
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.name {width: 100%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 100%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 100%; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.fixed {width: auto; padding: 0;}
	.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: auto; padding: 0; margin-left: 20px;}
    .writeArea > form > ul.writeLine > li > ul.infoUnit > li.regDate {width: 100px; padding: 0; margin-left: 20px;}
}
/* Write End */


/* Read 공통 Start */
/*
.readArea {width: 100%; min-width: 260px; padding: 20px; margin: 0 auto;}
.readArea > .titleArea {padding: 20px; border-top: 1px #e9e9e9 solid; }
*/
.readArea {width: 100%; min-width: 260px; box-sizing: border-box; padding: 20px 0; margin: 0 auto;}
.readArea > .titleArea {padding: 10px 0; border-bottom: 1px #eee dashed; }
.readArea > .titleArea > h3 {font-size: 32px; font-weight: 700; color: #222; line-height: 1.2em; text-align: left;}
.readArea > .titleArea > h4.subTitle {margin: 0; font-size: 18px; font-weight: 400; color: #666; line-height: 1.5em; padding-top: 10px; text-align: left;}
.readArea > .titleArea > h3.subTitle:before,
.readArea > .titleArea > h4.subTitle:before,
.readArea > .titleArea > h5.subTitle:before {display: none;}

/* .readArea > ul.infoArea {padding: 30px 20px;} */
.readArea > ul.infoArea {padding: 10px 0;}
.readArea > ul.infoArea > li {list-style: none; font-size: 11px; color: #999; line-height: 20px;}

/* .readArea > .contentArea {padding: 0px 20px 0px; border-bottom: 1px #e9e9e9 solid;} */
.readArea > .contentArea {padding: 0px 0px 0px; border-bottom: 1px #e9e9e9 solid;}
.readArea > .contentArea > .smartEditorArea {margin: 0px 0; padding: 20px 0;}
.readArea > .contentArea > ul.imgFile {margin: 0px 0; padding: 50px 0; border-top: 1px #e9e9e9 dashed;}
.readArea > .contentArea > .youtubeArea {margin: 0px 0; padding: 50px 0; border-top: 1px #e9e9e9 dashed;}
.readArea > .contentArea > dl.additional {margin: 0px 0; padding: 50px 0 50px; border-top: 1px #e9e9e9 dashed;}
.readArea > .contentArea > dl.additional > dt {font-size: 14px; font-weight: bold; color: #e74a2e; padding-top: 20px;}
.readArea > .contentArea > dl.additional > dt:first-child {padding-top: 0;}
.readArea > .contentArea > dl.additional > dd > a {font-size: 12px; font-weight: normal; color: #444;}
.readArea > .contentArea > dl.additional > dd {font-size: 12px; color: #777;}
.readArea > .contentArea > dl.additional > dd {list-style: disc inside; text-indent: 10px;}

.readArea > .contentArea > .youtubeArea > .youtubeUCC {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.readArea > .contentArea > .youtubeArea > .youtubeUCC iframe,
.readArea > .contentArea > .youtubeArea > .youtubeUCC object,
.readArea > .contentArea > .youtubeArea > .youtubeUCC embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.readArea > .contentArea > .replyArea {padding: 50px 0; border-top: 1px #e9e9e9 dashed;}

@media screen and (min-width: 1280px) {
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
}

@media screen and (min-width: 640px) and (max-width: 959px) {
}

@media screen and (min-width: 0) and (max-width: 639px) {
}
/* Read End */



/* unset */
#unset dl, #unset dt, #unset dd, #unset ul, #unset ul li, #unset li, #unset ol, #unset ol li, #unset p {
	list-style: initial;
	line-height: initial;
	/* font-size: initial; */
	margin: unset;
	padding: revert;
}
#unset ol, #unset ol li {
	list-style:  decimal;
}

/*.wirteArea #unset *,
.readArea #unset * {font-size: initial;}
*/
.wirteArea #unset table,
.wirteArea #unset table tbody th,
.wirteArea #unset table tbody td {border: revert; background-color: inherit;}
#unset table tbody td {background-color: inherit;}
.readArea #unset table {border-collapse: collapse;  border: 1px solid #bfbfbf;}
.readArea #unset table tbody th,
.readArea #unset table tbody td { border: 1px solid  #bfbfbf; padding: .4em;}