@charset "utf-8";
@import url(./contents.css);

.bod_head .input_wrap .tabWrap ul.list li { display:inline-block; }
.bod_head .input_wrap .tabWrap ul.list li + li { margin-top: .2em; }
.bod_head .input_wrap .tabWrap ul.list input[type="checkbox"] {position:absolute; top:0; left:0; z-index:-999; opacity:0;}
.bod_head .input_wrap .tabWrap ul.list label:before {display:none;}
.bod_head .input_wrap .tabWrap ul.list label {position:relative;display: inline-block;min-width:6.25em;padding: 0.5em 1em;background:#EEF2F9;border-radius:9em;text-align:center;font-weight:500; font-size: 0.9em; }
.bod_head .input_wrap .tabWrap ul.list input[type="checkbox"]:checked + label {padding: 0.5em 1em 0.5em 2.2em;background:#066BFD;color:#fff;text-decoration:none;}
.bod_head .input_wrap .tabWrap ul.list input[type="checkbox"]:checked + label:before {content:'';display:inline-block;width: 14px;height: 15px;position:absolute;top:50%;left: 1em;margin-top: -7.5px;background: url(../img/common/icon_tab_check.svg) no-repeat 0% 0%; border:0; background-size: 100% auto; }

@media all and (max-width:767px) {
	.bod_head .input_wrap .tabWrap ul.list label { min-width: 0; padding: 0.4em 1.4em;  }
	.bod_head .input_wrap .tabWrap ul.list li + li {margin-top:.3em;}
	.bod_head .input_wrap .tabWrap ul.list li label + label { margin-top: .3em; }
}
@media all and (max-width:480px) {
	.bod_head .input_wrap .tabWrap ul.list label { padding: 0.4em 1em; font-size: 0.9em;  }
}

.page_num {
    display: inline-block;
}
.page_num em {margin-left:.3em;}
.page_order {position: relative;right:0;top: auto; float: right ;display: inline-block;margin-top: -.3em;}
.page_order li {display:inline-block; position:relative;}
.page_order li + li:before {content:'';display:inline-block;position:absolute;top:50%;transform:translateY(-50%);left: 0; margin-left:-.1em; width:1px;height:12px;background:#ddd;}
.page_order li a {padding:.3em .5em; color:#3C3D48; font-size:1.5rem}
.page_order li a.on {font-weight:700;}

.bod_head .numcheck ul li  {display:inline-block; }
.bod_head .numcheck ul li + li {margin-left:.25em;}
.bod_head .numcheck ul li input[type="checkbox"]  {position:absolute; top:0; left:0; z-index:-999; opacity:0;}
.bod_head .numcheck ul li input[type="checkbox"] + label:before {display:none;}
.bod_head .numcheck ul li label {position:relative;display:block;height:4.5rem;padding: 0 1em;line-height:4.3rem;border-radius:0.7rem;font-size:0.9em;border:1px solid #D9DDE2;color:#A0A2B5; cursor: pointer; }
.bod_head .numcheck ul li input[type="checkbox"]:checked + label {border:1px solid #066BFD;color:#066BFD;}

@media all and (max-width:767px) {
	.bod_head .numcheck ul li + li {margin-left:.1em; margin-top: .3em;}
	.bod_head .numcheck ul li label { height: 3.8rem; line-height: 3.6rem; padding: 0 1.2em; }
}
@media all and (max-width:480px) {
	.bod_head .numcheck ul li label { height: 3.2rem; line-height: 3rem; padding: 0 0.7em; }
}

.bod_head .bod_search.full {border-radius:1.2rem; border:.1rem solid rgba(0,0,0,.2); padding:2.4rem;}
.bod_head .bod_search.full + * {margin-top:2.8rem;}
.bod_head .bod_search.full label {display:inline-block; vertical-align:middle; font-weight:600; color:#2d3947; font-size:1.7rem; width:8rem; text-align:left;}
.bod_head .bod_search.full input[type="text"] {width:40rem; max-width:calc(100% - 8rem - 11rem);}

.bod_head .bod_search.flex {display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.bod_head .bod_search.flex label {color:#2D3947; margin-right:1rem;}
.bod_head .bod_search .bod_category {display:flex; flex-wrap:nowrap; align-items:center; flex-wrap:wrap; gap:1rem;}
.bod_head .bod_search .bod_category .selected {display:none; position:absolute; top:0; left:0; text-indent:-999px; overflow:hidden; z-index:-999; opacity:0;}
.bod_head .bod_search .bod_category .on .selected {display:block;}
.bod_head .bod_search .bod_category a {display:flex; align-items:center; position:relative; border-radius:9em; background:#EEF2F9; color:#222; font-size:1.4rem; padding:1rem 2.6rem; line-height:1.3em; gap:.2rem;}
.bod_head .bod_search .bod_category a.on {background:#066BFD; color:#fff;}
.bod_head .bod_search .bod_category a.on:before {content:""; display:block; position:relative; width:1.4rem; height:1.4rem; background:url(../img/common/icon_tab_check.svg) no-repeat 50% 50%; background-size:contain;}

@media all and (max-width:1024px) {
	.bod_head .bod_search.flex {display:block;}
	.bod_head .bod_search.flex > * + * {margin-top:1.5rem;}
	.bod_head .bod_search .bod_category {justify-content:center;}
	.bod_head .bod_search .page_view {display:flex; align-items:center; justify-content:end;}	
}
@media all and (max-width:640px) {
	.bod_head .bod_search.full label {width:4rem;}
	.bod_head .bod_search.full input[type="text"] {max-width:calc(100% - 5rem - 11rem);}
	.bod_head .bod_search.full input[type="text"]::placeholder {color:#fff;}
}
@media all and (max-width:480px) {
	.bod_head .bod_search.full label {position:absolute; top:0; left:0; z-index:-999; opacity:0; width:0; height:0; overflow:hidden;}
	.bod_head .bod_search.full input[type="text"] {width:100%; max-width:100%;}
	
	.bod_head .bod_search .page_view select {width:calc(100% - 8rem);}
}

@keyframes blinkBg{0%{background-color:#F83C3F;} 50%{background-color:#f8d13c;} 100%{background-color:#F83C3F;}}
@-webkit-keyframes blinkBg{0%{background-color:#F83C3F;} 50%{background-color:#f8d13c;} 100%{background-color:#F83C3F;}}
.ico-new {display:inline-block; position:relative; vertical-align:middle; text-indent:-999px; width:.8rem; height:.8rem; background:#F83C3F; margin-right:.4rem; margin-top:-.2rem; border-radius:9em; overflow:hidden; animation:blinkBg 1s infinite; -webkit-animation:blinkBg 1s infinite;}
.ico-comment {display:inline-block; position:relative; vertical-align:middle; padding:.1rem .75rem; border-radius:1rem; color:#465EDC; border:1px solid #465EDC; font-size:.8em; margin-left:.4rem;margin-top:-.1rem;}

.commentArea {display:block; position:relative; padding-top:2.8rem;}
.commentArea .commentAll {display:block; position:absolute; left:0; top:-4rem; width:10rem; height:4rem; text-indent:-999px; overflow:hidden;}
.commentArea .commentAll em {display:block; position:absolute; top:0; left:0; text-indent:0; background:url(../img/common/icon_cmt.svg) no-repeat top 50% left 0; background-size:2.4rem auto; padding-left:2.8rem; font-size:1.6rem; color:#3D3E42; line-height:4rem;}

.commentArea .commentWrite,
.commentArea .commentCon > li {display:block; position:relative; border:1px solid #ddd; border-radius:1.6rem; padding:2.8rem;}
.commentArea .commentCon > li {padding:.8rem;}
.commentArea .commentCon > li + li {margin-top:2.8rem;}

.commentArea .file-upload-area .grid {background:#fff;}

.commentArea .info {display:flex; position:relative; flex-wrap:nowrap; align-items:center; margin-bottom:1.6rem;}
.commentArea .info .name {display:block; font-weight:600; font-size:1.8rem; margin-right:2rem; color:#000;}
.commentArea .info .date {display:block; font-size:1.4rem; color:#777;}
.commentArea .info .control {display:block; position:absolute; right:0; top:-1.2rem;}
.commentArea .info .control .bt {display:inline-block; position:relative; vertical-align:middle; height:4rem; border-radius:.8rem; border:1px solid #333; color:#333; font-size:1.4rem; padding:0 1.6rem; background:no-repeat top 50% right 1.6rem #fff; background-size:2rem auto;}
.commentArea .info .control .bt.del {padding-right:4rem; background-image:url(../img/common/icon_del.svg); border-color:#EF652B; color:#EF652B;}
.commentArea .info .control .bt.reply {padding-right:3.8rem; background-image:url(../img/common/icon_reply.svg); border-color:#465EDC; color:#465EDC;}

.commentArea .cmtWrite {display:block; position:relative;}
.commentArea .cmtWrite .input {display:flex; flex-wrap:nowrap; align-items:center; position:relative; border:1px solid #D9DDE2; border-radius:.8rem; background:#fff; margin-bottom:1.6rem;}
.commentArea .cmtWrite .input > * {flex-grow:1;}
.commentArea .cmtWrite .input .p-name {display:block; position:relative; width:9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#3470FD; font-size:1.4rem; padding-left:1.6rem;}
.commentArea .cmtWrite .input textarea {display:block; position:relative; width:calc(100% - 9rem); height:5rem; padding:0; border:none; background:transparent; min-height:0; padding:1.6rem 1.6rem 1.6rem 0; outline:0;}
.commentArea .cmtWrite .control {margin-top:1.6rem; text-align:right;}

.commentArea .cmt {display:block; position:relative; padding:2rem;}
.commentArea .cmt .desc {color:#3C3D48; font-size:1.4rem; line-height:1.3em;}
.commentArea .cmt .desc .anker {color:#3470FD; font-weight:600; margin-right:1.6rem;}

.commentArea .file-list {display:block; position:relative; margin-top:1.6rem; background:#fff; padding:1.6rem 1.6rem; border:1px solid #E9EEF5; border-radius:.8rem;}
.commentArea .file-list .download {padding-left:1.2rem;}
.commentArea .file-list .download:before,
.commentArea .file-list .btn_preview  {display:none !important;}
.commentArea .file-list .download:after {content:""; display:block; position:absolute; top:50%; left:0; width:.4rem; height:.4rem; border-radius:100%; background:#aaa; margin-top:-.2rem;}

.commentArea .commentWrite {margin-bottom:2.8rem;}

.commentArea .re-cmtList > li:nth-child(odd) .cmt {background:#F5F7FA; border-radius:.8rem;}
.commentArea .re-cmtList > li:nth-child(even) {margin:1.6rem 0;}
.commentArea .re-cmtList > li:nth-child(even) .cmt {padding:.4rem 2rem;}
/* .commentArea .re-cmtList > li:nth-child(odd) .file-list {background:#fff; padding:2rem 1.6rem; border-radius:.8rem;} */

.commentArea .re-cmtList > li:last-child {margin-bottom:0;}
.commentArea .re-cmtList > li:last-child .cmt {padding-bottom:2rem;}

.commentArea .re-cmtList .info .control {top:-.8rem;}
.commentArea .re-cmtWrite {display:none; position:relative; background:#F5F7FA; border-radius:.8rem; padding:2rem; margin:1.6rem 0 1.6rem;}

@media all and (max-width:640px) {
	.commentArea .info {padding-right:6rem;}
	.commentArea .info .name {font-size:1.4rem;}
	.commentArea .info .control,
	.commentArea .re-cmtList .info .control {top:0;}
	.commentArea .info .control .bt {width:2.5rem; height:2.5rem; text-indent:-999px; overflow:hidden; padding:0 !important; background-position:50% 50% !important; background-size:80% auto !important;}
}
@media all and (max-width:380px) {
	.commentArea .info {flex-wrap:wrap;}
	.commentArea .info .name,
	.commentArea .info .date {margin:0; width:100%;}
}