@charset "utf-8";
#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 #e9e9e9 solid;}
.listArea > ul.listLine > li {width: 100%; padding: 20px 0; border-top: 1px #e9e9e9 solid; list-style: none;}
.listArea > ul.listLine > li.tHead {background-color: #f0f0f0;}
.listArea > ul.listLine > li.tHead > * {font-weight: bold; color: #333;}
.listArea > ul.listLine > li > * {color: #666;}
.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: 10%; 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 > a {font-size: 16px; 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; vertical-align: middle; padding: 0 1px 1px; line-height: 1.5em; margin-left: 5px;}
.listArea > ul.listLine > li > ul.listUnit > li.info {width: 25%; text-align: center;}
.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;}
/* .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: 90%; 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: 90%; padding-left: 10%; 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;}
}
@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: none;}
.listArea > ul.listLine > li > ul.listUnit > li.title {width: 100%; 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: 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 > form > ul.writeLine {width: 100%; padding: 10px 0; margin: 0; border-top: 1px #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: 35%; 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: 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;}
}
@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;}
}
/* 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: 20px 0; border-top: 1px #e9e9e9 solid; }
.readArea > .titleArea > h3 {font-size: 26px; font-weight: normal; color: #333; line-height: 1.2em;}
.readArea > .titleArea > h4.subTitle {font-size: 18px; font-weight: normal; color: #555; line-height: 1.5em; padding-top: 20px;}
/* .readArea > ul.infoArea {padding: 30px 20px;} */
.readArea > ul.infoArea {padding: 30px 0;}
.readArea > ul.infoArea > li {list-style: none; font-size: 12px; color: #777; 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: 50px 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 */