@charset "utf-8";

/* button setting */
.bottomBtn {display:inline-block;width:100%;margin-top:2rem;text-align:right;}
.bottomBtn > * {margin-left:5px;font-size: 1.4rem;text-align:center;line-height:1;width:auto;height: 3.5rem; padding:0 1.5rem; display:inline-flex;justify-content:center;align-items:center;/* border-radius:3rem; */}
.bottomBtn .btn-st01 {border:1px solid #080808;background:#080808;color:#fff;}
.bottomBtn .btn-st02 {border:1px solid #080808;background:#fff;color:#080808;}
.bottomBtn .btn-st03 {border:1px solid #aaa;background:#fff;color:#666;}



/* 검색영역 */
.selArea {max-width:51rem; margin-left:auto; width:100%; display:flex;}
.selArea form {display:flex;}
.selArea .dv-select {width:40%; margin-right:1rem; /*border:1px solid #ddd;*/ background:#fff;}
.selArea span.input {display:inline-block;position:relative;width:70%; border:1px solid #ddd; background:#fff;}
.selArea span.input input[type=text] {width:100%; height:4.5rem; border:none; font-size:1.5rem; padding:0 1rem;}
.selArea span.input input[type=text]::-webkit-input-placeholder {color:rgba(0,0,0,0.5);}
.selArea span.input input[type=text]::-webkit-input-placeholder {color:rgba(0,0,0,0.5);}
.selArea span.input input[type=text]::-moz-placeholder {color:rgba(0,0,0,0.5); } /* firefox 19+ */
.selArea span.input input[type=text]:-ms-input-placeholder {color:rgba(0,0,0,0.5);} /* ie */
.selArea span.input input[type=text]:-moz-placeholder {color:rgba(0,0,0,0.5);}
.selArea span.search {display:inline-block;position:relative;width:10rem;margin:0 5px 0 0;}
.selArea .sch_btn {display:inline-block; width:9rem; line-height:5rem; height:5rem; background:#080808; font-size:1.5rem; color:#fff; font-weight:500; text-align:center; border:none; -webkit-appearance: none; cursor:pointer;}

@media screen and (max-width:768px) {
    .selArea {max-width:100%; margin-left:inherit; justify-content:center;}
}


/* pager */
.pager {width:100%;  margin:8rem auto 0; text-align:center; display: inline-block;}
.pager-body {display:inline-block;}
.pager-body a {width:1.2rem; height:1.2rem; color:#bbb; font-size:1.4rem; font-weight:400; float:left; margin:0 1.5rem; position:relative; display:flex; align-items:center; justify-content:center; border-radius:50%;}
.pager-body a img {position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;}
.pager-body a.on {color:#080808;}
.pager-body a.on:after {display:block; content:''; width:1.2rem; height:2px; background:#080808; position:absolute; bottom:-1rem; left:50%; transform:translateX(-50%);}

@media screen and (max-width:960px) {
    .pager {margin:5rem auto 0;}
}

@media screen and (max-width:768px) {
    .pager {margin:3rem auto 0;}

    .pager-body a {margin:0 1rem;}
    .pager-body a img {height:1.1rem;}
}


/* view page*/
.preViewTitle {border-top:1px solid #000; margin-top:8rem;}
.preViewTitle dl {display:flex; align-items:center; height:6.8rem; border-bottom:1px solid #ddd;}
.preViewTitle dl dt {flex-shrink:0; color:#000; width:12.5rem; text-align:center; position:relative; margin-right:2rem;}
.preViewTitle dl dt::after {display:inline-block; content:''; width:1px; height:1.2rem; background:#ddd; position:absolute; top:50%; right:0; transform:translateY(-50%);} 
.preViewTitle dl dd {width:calc(100% - 14.5rem); color:#929292;}
.preViewTitle dl dd a {color:#929292; transition:all .2s ease;}
.preViewTitle dl dd a:hover {color:#080808;}
.preViewTitle + .btnbox {margin-top:6rem;}

.fileArea {display:block;width:100%;margin:0;padding:2rem 2.5rem;border-bottom:1px solid #ddd;}
.fileArea > dl {display:flex; align-items:center;}
.fileArea > dl > dt {flex-shrink:0; padding:0 2rem 0 3rem;font-size:1.5rem;background:url(/img/sub/ico-file.png) no-repeat left center/contain;}
.fileArea > dl > dd {display:flex;}
.fileArea > dl > dd > a {display:inline-block;margin:0 5px;color:#888;}
.fileArea > dl > dd > a:first-child {flex-shrink:0;}
.fileArea > dl > dd > a:hover {text-decoration:underline;}


@media screen and (max-width:500px) {

    .selArea span.input input[type=text] {font-size:1.5rem;}
    .selArea div.dv-select > select {font-size:1.5rem;}
}




/* 상세보기 리플 영역 */
.replyboardView {display:inline-block;width:100%;margin:4rem 0 2rem 0;}

.replyboardView .write-area {display:flex; margin:2.5rem 3rem;}
.replyboardView .write-area textarea {width:100%; background:#fff; border:1px solid #ddd; height:12rem; padding:1.5rem; font-size:1.6rem;}
.replyboardView .write-area .submit-btn {flex-shrink:0; background:#5c6aa4; width:13rem; text-align:center; border:none; color:#fff; font-size:1.6rem; margin-left:2rem;}
.replyboardView .write-area .submit-btn:before {display:block; content:''; background:url(/img/sub/ico-pen-wht.png) no-repeat; width:2.3rem; height:2.3rem; margin:auto; margin-bottom:1rem;}

.replyboardView .replyArea {width:100%;overflow:hidden;}
.replyboardView .replyArea ul.replyList {width:100%; margin-top:2rem; border-top:2px solid #222;}
.replyboardView .replyArea ul.replyList > li {width:100%; margin:0; border-bottom:1px solid #ddd;}
.replyboardView .replyArea ul.replyList > li > dl {width:100%; position:relative; padding: 2rem 0;}
.replyboardView .replyArea ul.replyList > li > dl > dt.ppInfo {display:block;width:100%;padding:0;text-align:left;margin-bottom:1rem;}
.replyboardView .replyArea ul.replyList > li > dl > dt.ppInfo > span {display:inline-block;line-height:1.6;font-size:1.4rem;color:#666;}
.replyboardView .replyArea ul.replyList > li > dl > dt.ppInfo > span:after {content:"|";margin:0 0.8rem;line-height:0;font-size:10px;color:#bbb; vertical-align:middle;}
.replyboardView .replyArea ul.replyList > li > dl > dt.ppInfo > span:last-child:after {content:"";margin:0;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont {display:block;width:100%;color:#666; margin:2rem 0;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .btnTxt {background:none; border:1px solid #aaa; border-radius:3px; padding:0.3rem 1.2rem;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > dl {display:block;width:auto;margin:5px;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > dl > dt {display:inline-block;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > dl > dt:after {content:":";padding:0 5px 0 10px;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > dl > dd {display:inline-block;margin:0 5px;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .mentCont {width:100%;padding:15px;font-size:12px;box-sizing:border-box;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .mentCont.reply {border:1px solid #ddd;background:#fafafa;}

.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea {display:block;position:absolute;top:2rem;right:0;text-align:right;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span {position:relative; padding:0 0.5rem; line-height:1;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span:after {display:inline-block; content:''; width:1px; height:1rem; background:#ddd; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span:last-child:after {display:none}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span input {border:none; background:none; cursor:pointer; color:#666; font-size:1.4rem;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span .ico {position:absolute; top:50%; right:1rem; transform:translateY(-50%);}


.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w {margin:2rem 0;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w .reply-btn {display:inline-block; font-size:1.5rem; cursor:pointer; border:1px solid #aaa; border-radius:3px; padding:0.3rem 1.2rem;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w .reply-btn .ico {display:inline-block; margin-left:0.5rem; }
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w .reply-btn .ico img {transition:all .3s ease;}
.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w input {cursor:pointer;}

.replyboardView .replyArea ul.replyList > li > dl > dd.reCont .reply-btn-w .reply-btn.active .ico img {transform:rotate(180deg);}

.replyboardView .replyArea ul.replyList > li.grybox {background:#f7f7f7; padding:2rem 3rem;}
.replyboardView .replyArea ul.replyList > li.grybox > dd.reCont > .btnArea {right:2rem;}
.replyboardView .replyArea ul.replyList > li.grybox > dl {padding:0;}
.replyboardView .replyArea ul.replyList > li.grybox > dl > dd.reCont > .btnArea {top:0;}
.replyboardView .replyArea ul.replyList > li.grybox > .writeReply + dl {border-top:1px solid #ddd; padding:2rem 0;}
.replyboardView .replyArea ul.replyList > li.grybox > .writeReply + dl > dd.reCont > .btnArea {top:2rem;}

.replyboardView .replyArea ul.replyList > li.re-rebox {display:none;}

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

    .replyboardView .replyArea ul.replyList > li.re-rebox {padding:2rem;}
	.replyboardView .replyArea ul.replyList > li > dl > dd.reCont > .btnArea > span .ico  {width:1.5rem;}

	.replyboardView .write-area {margin:1.5rem 0;}
	.replyboardView .write-area .submit-btn {padding:0 2rem; width:auto; font-size:1.5rem; margin-left:1.5rem;}	

    .preViewTitle dl {height:6rem;}
    .preViewTitle dl dt {width:10rem;}
    .preViewTitle dl dd {width:calc(100% - 12rem);}
}

@media screen and (max-width:500px) {
	
	.replyboardView .replyArea ul.replyList > li.re-rebox {padding:1.5rem;}
}