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

/* List Start */
.listArea {width: 100%; box-sizing: border-box; padding: 0; margin: 20px auto;}
.listArea > .listLine {width: 100%; padding: 0; margin: 0; border-bottom: 1px #e9e9e9 solid; text-align: center;}
.listArea > .listLine > * {color: #666;}

/* for Administrator */
.listArea > .listLine > div.listUnit {float: left; display: block; width: 25%; box-sizing: border-box; padding: 0 10px;}
.listArea > .listLine > div.listUnit > form > ul {width: 100%; box-sizing: border-box; padding-bottom: 20px; margin: 0 0 20px; box-shadow: 0 0 3px 1px #ddd; border-radius: 10px; overflow: hidden; background-color: #fff;}
.listArea > .listLine > div.listUnit > form > ul:hover {box-shadow: 0 0 5px 0px #aaa;}
.listArea > .listLine > div.listUnit > form > ul > li {width: 100%; list-style: none; line-height: 18px;}
.listArea > .listLine > div.listUnit > form > ul > li.pic {position: relative; width: 100%; height: 190px; overflow: hidden;}
.listArea > .listLine > div.listUnit > form > ul > li.pic > a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 190px;}
.listArea > .listLine > div.listUnit > form > ul > li.num {width: 100%; box-sizing: border-box; padding: 0 20px; font-size: 11px; font-weight: bold; color: #999; padding-top: 10px;}
.listArea > .listLine > div.listUnit > form > ul > li.seqNum {width: 100%; height: 40px; box-sizing: border-box; padding: 0 20px; font-size: 11px; font-weight: bold; color: #999; padding-top: 10px;}

.listArea > .listLine > div.listUnit > form > ul > li.title {width: 100%; min-height: 50px; box-sizing: border-box; padding: 10px 20px 0; text-align: left; color: #333; font-size: 18px; font-weight: 700;}
.listArea > .listLine > div.listUnit > form > ul > li.title > a {font-size: 18px; color: #222;}
.listArea > .listLine > div.listUnit > form > ul > li.title > span.subTitle {font-size: 14px; color: #777;}
.listArea > .listLine > div.listUnit > form > ul > li.title > span.replyCount {font-size: 12px; color: #666; margin-left: 5px;}
.listArea > .listLine > div.listUnit > form > ul > li.title > img.iconListType {width: 18px; height: 18px; vertical-align: middle; padding: 0 1px 1px; line-height: 1.5em; margin-left: 5px;}
.listArea > .listLine > div.listUnit > form > ul > li.subTitle {width: 100%; height: auto; box-sizing: border-box; padding: 0 20px; text-align: left; color: #666; line-height: 20px; font-size: 14px;}
.listArea > .listLine > div.listUnit > form > ul > li.extraField {width: 100%; box-sizing: border-box; padding: 0 20px 20px; text-align: left; font-size: 12px; font-weight: normal; color: #666;}
.listArea > .listLine > div.listUnit > form > ul > li.info {width: 100%; padding: 0 20px 0; text-align: left; font-size: 10px; font-weight: bold; color: #999; line-height: 16px;}

/* for User */


.listArea > .listLine > div.listUnit {display: block; width: 25%; box-sizing: border-box; padding: 0 10px;}

.listArea > .listLine > div.listUnit > ul {width: 100%; box-sizing: border-box; padding: 0; margin: 0 0 20px; box-shadow: 0 0 0 1px rgba(0,0,0,0.05); border-radius: 20px; overflow: hidden; background-color: #f9f9f9; transition: all 0.3s;}
.listArea > .listLine > div.listUnit > ul:hover {box-shadow: 1px 1px 8px 1px rgba(0,0,0,0.07);}
.listArea > .listLine > div.listUnit > ul > li.imgArea {position: relative; display: block; width: 100%; padding-top: 90%; background-position: center center; background-size: cover; background-repeat: no-repeat;}
.listArea > .listLine > div.listUnit > ul > li.imgArea a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 3; background-color: rgba(0,0,0,0.0);}
.listArea > .listLine > div.listUnit > ul > li.infoArea {position: relative; display: block; width: 100%; height: 180px; box-sizing: border-box; padding: 20px; background-color: #fff; background-position: center center; background-size: cover;}
.listArea > .listLine > div.listUnit > ul > li.infoArea a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 3;}
.listArea > .listLine > div.listUnit > ul > li.infoArea > dl {display: block; width: 100%;}
.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dt {margin-bottom: 20px; display: block; width: 100%; height: 30px; line-height: 30px; font-size: 22px; font-weight: 500; color: #222; text-align: left; letter-spacing: -0.03em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dd {display: block; width: 100%; height: auto; line-height: 20px; font-size: 15px; font-weight: 300; color: #999; text-align: left;  letter-spacing: -0.02em;}

#masonnyArea > .grid {opacity: 0;}

.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 > .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) {
	.listArea > .listLine > div.listUnit > ul > li.infoArea {height: 180px; padding: 20px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dt {height: 20px; line-height: 20px; font-size: 16px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dd {font-size: 12px;}
}

@media screen and (min-width: 640px) and (max-width: 959px) {
	.listArea > .listLine > div.listUnit > ul > li.infoArea {height: 160px; padding: 20px 10px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dt {height: 20px; line-height: 20px; font-size: 15px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dd {font-size: 11px;}
}

@media screen and (min-width: 0) and (max-width: 639px) {
	.listArea {width: 100%; min-width: 260px; box-sizing: border-box; padding: 0; margin: 20px auto;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea {height: 140px; padding: 20px 10px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dt {height: 20px; line-height: 20px; font-size: 14px;}
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dd {font-size: 11px;}

	.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;}
}
@media screen and (min-width: 0) and (max-width: 500px) {
	.listArea > .listLine > div.listUnit > ul > li.infoArea > dl > dd > span {display: none;}
}
/* List End */


/* Write & Edit 공통 Start */
.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: left;}
.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: 100%; box-sizing: border-box; margin: 0 auto;}
.writeArea > form > ul.writeLine > li select.productType {float: left; width: 20%; margin-right: 10px; padding-right: 0; text-align: left;}
.writeArea > form > ul.writeLine > li #title,
.writeArea > form > ul.writeLine > li #subTitle {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: 20%; box-sizing: border-box; padding-right: 10px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.email {width: 22%; box-sizing: border-box; padding-right: 10px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.passwd {width: 20%; box-sizing: border-box; padding-right: 10px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.fixed {width: 15%; box-sizing: border-box; padding-right: 10px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.secret {width: 10%; box-sizing: border-box; padding-right: 10px;}
.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 > ul.infoUnit > li > label {display: block; width: auto; padding-left: 6px; font-weight: 500; color: #333; line-height: 26px; text-align: left; font-size: 13px;}
.writeArea > form > ul.writeLine > li > ul.infoUnit > li.extraField {width: 20%; box-sizing: border-box; padding-right: 10px;}

.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: 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;}

.writeArea > form > ul.writeLine > li > ol.upFileGuide {width: 100%; box-sizing: border-box; padding-left: 10px; padding-bottom: 10px; text-align: left;}
.writeArea > form > ul.writeLine > li > ol.upFileGuide > li {float: left; list-style: decimal inside; width: 100%; line-height: 20px; font-size: 12px; font-weight: 300; color: coral;}
@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: 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: 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; box-sizing: border-box; padding: 20px 0; margin: 0 auto;}
.readArea > .titleArea {padding: 10px 0; border-bottom: 1px #e9e9e9 solid; }
.readArea > .titleArea > h3 {font-size: 28px !important; font-weight: 700; color: #222; line-height: 1.6em; 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.extraArea {padding: 10px 0;}
.readArea > ul.extraArea > li {list-style: none; font-size: 12px; color: #666; line-height: 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 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 > ul.imgFile > li {float: left; display: block; width: 33.33%; min-height: 100px; box-sizing: border-box; padding: 10px; transition: all 0.3s;}
.readArea > .contentArea > ul.imgFile > li > a {display: block; width: 100%; height: 100%;}
.readArea > .contentArea > ul.imgFile > li > a > img {vertical-align: top;} /*float: left;*/


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

@media screen and (max-width: 980px) {
	.readArea > .contentArea > ul.imgFile > li {width: 50%;}
}

@media screen and (min-width: 0) and (max-width: 639px) {
	.readArea > .contentArea > ul.imgFile > li {padding: 5px;}
}


.readArea > .contentArea > p.imgComment {line-height: 30px; font-size: 12px; font-weight: bold; color: #999; text-align: center;}
.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%;}



/* read + product */
/* 2019.05.07 이전 원본 css
.readArea > .productArea {width: 100%; padding: 40px; box-sizing: border-box; background-color: #f7f7f7;}
.readArea > .productArea > .imgArea {float: left; width: 40%; min-height: 300px;}
.readArea > .productArea > .infoArea {float: left; width: 60%; padding-left: 40px; box-sizing: border-box;}
	.infoArea > .titleArea {padding-bottom: 20px; border-bottom: 1px #333 solid; }
	.infoArea > .titleArea > h3 {font-size: 26px; font-weight: normal; color: #333; line-height: 30px; height: 30px; padding: 0 0 10px 0;}
	.infoArea > .titleArea > h4.subTitle {font-size: 18px; font-weight: normal; color: #333; line-height: 30px; height: 30px; padding: 0;}
	.infoArea > .basicInfo {padding: 30px 0 20px; border-bottom: 1px #ddd solid;}
	.infoArea > .basicInfo > dl {width: 100%; padding-bottom: 10px;}
	.infoArea > .basicInfo > dl > dt {float: left; width: 16%; height: 30px; line-height: 30px; font-size: 12px; font-weight: normal; color: #888;}
	.infoArea > .basicInfo > dl > dd {float: left; width: 84%; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; color: #555;}
	.infoArea > .basicInfo > dl > dt.half {float: left; width: 16%; height: 30px; line-height: 30px; font-size: 12px; font-weight: normal; color: #888;}
	.infoArea > .basicInfo > dl > dd.half {float: left; width: 34%; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; color: #555;}
	.infoArea > .basicInfo > dl > dd.price {float: left; width: 84%; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; color: #333; text-decoration: line-through;}
	.infoArea > .basicInfo > dl > dd.priceDC {float: left; width: 84%; height: 40px; line-height: 40px; font-size: 18px; font-weight: bold; color: #FF5050;}
*/
.readArea > .productArea {width: 100%; padding: 40px; box-sizing: border-box; background-color: #f7f7f7;}
.readArea > .productArea > .imgArea {width: 100%; min-height: 300px;}
.readArea > .productArea > .imgArea .fotorama__wrap {margin: 0 auto;}

@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) {
	.readArea > .productArea {width: 100%; padding: 20px;}
}
/* Read End */


/*.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;}