@charset 'utf-8';
@import url('../../../resource/fonts/font.notosans.css');
@import url('../../../resource/fonts/font.scoredream.css');
@import url('../../../resource/fonts/font.nanumgothic.css');
@import url('base.css');
@import url('layout.css?ts=21031705');
@import url('common.css?ts=21031705');

#content.history div.list ul.list li { padding-right: 3.5em; }
#content.history div.list ul.list li div.control { top:0.5em; }
#content.history div.list div.items span.past { font-size:0.8em; color:#666; display:block; float:left; width:150px; }
#content.history div.list div.items span.content { display:block; float:left; width:calc(100% - 150px); }
#content.history div.list div.items span.content span.category { font-size:0.9em; color:#666; display: inline-block;}
#content.history div.list div.items span.content span.category::before { content:'['; }
#content.history div.list div.items span.content span.category::after { content:']'; }
@media (max-width: 1024px) {
    #content.history div.list ul.list li { padding-right: 0; }
    #content.history div.list div.items span.past { display:block; width:calc(100% - 3.5em); float:none; }
    #content.history div.list div.items span.content { display: block; width:auto; float:none; }
}


#content.language div.gallery ul.list li div.item { border:1px solid #DDD; border-radius: 5px; padding:1em 0; margin-bottom:0.5em; color:#999; transition: 0.3s; }
#content.language div.gallery ul.list li.active div.item { border-color:#0e47a1; color:#333; transition: 0.3s; }
#content.language div.gallery ul.list li div.item dl { line-height:2em; }
#content.language div.gallery ul.list li div.item dl::after { content:''; display: block; clear: both; }
#content.language div.gallery ul.list li div.item dt { float:left; width:50%; clear:both; text-align:right; color:#999; font-size:0.9em; }
#content.language div.gallery ul.list li div.item dt::after { content:' : '; padding-right:0.3em; }
#content.language div.gallery ul.list li div.item dd { float:left; width:50%; }
#content.language div.gallery ul.list li div.control { float:left; position:relative; }
#content.language div.gallery ul.list li div.status { float:right; position:relative; right:auto; top:auto; text-align: right; }
#content.language div.gallery ul.list li div.status label { z-index: 1; background-color: #FFF; position:relative; }
#content.language div.gallery ul.list li div.status label::after { content:''; position:absolute; right:0; top:50%; display:block; width:2em; height:0.5em; background-color: #DDD; border-radius: 0.5em; transform:translateY(-50%); z-index:1; }
#content.language div.gallery ul.list li div.status label::before { content:''; position:absolute; right:0; top:0; display: block; width:1em; height:1em; background-color: #999; border-radius: 1em; z-index:2; transition: 0.3s; }
#content.language div.gallery ul.list li.active div.status label::before { right:1em; background-color: #0e47a1; transition: 0.3s; }
#content.language div.gallery ul.list li div.status label span { display: none; }
#content.language div.gallery ul.list li div.status input { width:0; height:0; position: relative; z-index: -1; }



#content.product div.gallery ul.list li a.item span.subject { height:2em; }
#content.product div.gallery ul.list li a.item span.category { display: block; line-height:1.25em; text-align: center;  overflow:hidden; box-sizing: border-box; color:#999; font-size:0.9em; }

#content.product.group div.structure div.tree { width:25%; }
#content.product.group div.structure div.content { width:calc(75% - 1em); }
#content.product.group div.structure div.content dt { display: flex; align-items: center; justify-content: flex-end; }
#content.product.group div.structure div.content dt button { border:1px solid #DDD; background: #FFF; margin-left:0.25em; padding:0.25em 0.5em; border-radius: 0.25em; display: flex; align-items: center; font-size:0.8em; }
#content.product.group div.structure div.content dt button::before { content:''; display: block; width:1em; height:1em; margin-right:0.25em; background:url('../images/ico.plus.svg') no-repeat center; }
#content.product.group div.structure div.content ul.listValue li { padding:0.25em 0 0.25em 1.5em; background: url('../images/ico.sort.svg') no-repeat left center / 1em; }
#content.product.group div.structure div.content ul.listValue li button { width:1em; height:1em; margin-left:0.5em; border:0; background: url('../images/ico.cross.svg') no-repeat center; }
#content.product.group div.structure div.content ul.listValue li button span { display: none; }
#content.product.group div.structure div.content ul.listValue li.ghost { height:3em; border:3px dashed #DDD; background: none; }



div.sector.board div.list ul.list li { padding-left:30px; }
div.sector.board div.list ul.list li input.check { position: absolute; left:0; top:0; margin:0.5em; }
div.sector.board div.list ul.list li a.item { display: block; padding:0 8em 0 0; height:7.5em; position: relative; }
div.sector.board div.list ul.list li a.item span.item { display:block; }
div.sector.board div.list ul.list li a.item span.item span { display:block; }
div.sector.board div.list ul.list li a.item span.subject { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.sector.board div.list ul.list li a.item:hover span.subject { text-decoration: underline; }
div.sector.board div.list ul.list li a.item span.item span.desc { font-size:0.9em; color:#999; padding-top:0.5em; line-height:1.5em; height:5em; overflow: hidden; }
div.sector.board div.list ul.list li a.item span.info { display:block; position:absolute; right:0; top:1em; width:8em; }
div.sector.board div.list ul.list li a.item span.info span { display: block; text-align:center; font-size:0.9em; line-height:2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.sector.board div.list ul.list li a.item span.img { display:none; position:absolute; left:0; }
div.sector.board div.list ul.list li.hasThumb a.item { padding-left:11em; }
div.sector.board div.list ul.list li.hasThumb a.item span.img { display:block; }
#content div.sector.board div.list div.footer { background: none; }
div.sector.board div.list div.batch button { border:1px solid #DDD; background-color: #FFF; font-size:0.8em; line-height:2em; padding:0 1em; border-radius: 3px; }
div.sector.board div.list div.batch button.checkAll::before { content:''; display:inline-block; width:1em; height:2em; margin-right:0.3em; background:url('../images/ico.check.svg') no-repeat center / 90% 90%; vertical-align: middle; }
div.sector.board div.list div.batch button.removeAll::before { content:''; display:inline-block; width:1em; height:2em; margin-right:0.3em; background:url('../images/ico.cross.svg') no-repeat center / 90% 90%; vertical-align: middle; }

div#content.board div.detail a.file { display:inline-block; margin-right:1em; font-size:0.9em; padding-left:1.25em; background:url('../images/ico.clip.svg') no-repeat left center / auto 1em; }
div#content.board div.detail a.file:hover { text-decoration: underline; }
div#content.board div.detail dl.detail { border-bottom:1px solid #DDD; margin-bottom:1em; }
div#content.board div.contents div.content div.img { margin:0.5em 1em; text-align: center; }
div#content.board div.contents div.content div.video { margin:0.5em 1em; }
div#content.board div.contents div.content div.video iframe { width:100%; height:450px; }

div#content.board iframe#boardCmt { width:100%; }

div#content.board div#prodList div.item { padding:0.25em; margin:0.15em 0; display: flex; flex-wrap: wrap; align-items: center; border:1px solid #ECECEC; background: #fdfdfd; border-radius: 3px; }
div#content.board div#prodList div.item:hover { background: #F7F7F7; border-color:#DDD;}
div#content.board div#prodList div.item select { margin-right:0.5em; height:auto; padding:0.25em 2em 0.25em 0.5em;}
div#content.board div#prodList div.item button.removeProd { display: flex; background: none; }
div#content.board div#prodList div.item button.removeProd::before { content:''; display: block; width:1em; height:1em; margin-right:0.5em; background: url('../images/ico.cross.svg') no-repeat center; }
div#content.board div#prodList div.item button.removeProd span { display: none;}
div#content.board.detail div#prodList { display: flex; flex-wrap:wrap; }
div#content.board.detail div#prodList span.item { display: block; border:1px solid #DDD; background: #F7F7F7; padding:0.25em 0.75em; border-radius: 3px; margin:0.15em;  }

div#cmtWrite { display:none; border-bottom:1px solid #DDD; padding-bottom:1em; }
div#cmtWrite.active { display:block; }
div#cmtWrite div.cmtControl { text-align:center; }
div#cmtWrite button.submit { border:1px solid #DDD; background-color: #0e47a1; color:#FFF; font-size:1em; font-weight:500; line-height:2.5em; min-width:8em; }

div#comment div.item { position:relative; border-bottom:1px solid #DDD; padding:0.5em; }
div#comment div.item.depth1 { padding-left:30px; }
div#comment div.item.depth2 { padding-left:60px; }
div#comment div.item.depth3 { padding-left:90px; }
div#comment div.item.depth4 { padding-left:120px; }
div#comment div.item.depth5 { padding-left:150px; }
div#comment div.item.depth6 { padding-left:180px; }
div#comment div.item span.info { display: flex; align-items: center; margin-right:3em; font-size:0.9em; color:#999; margin-bottom:0.5em; }
div#comment div.item.reply span.info::before { content:''; display: block; width:1.2em; height:1.2em; margin-right:5px;  background:url('../images/ico.reply_FF0000.svg') no-repeat center / 90%; transform:rotate(180deg); }
div#comment div.item span.info span { display: block; margin-right:1em; }
div#comment div.item span.info span.name { color:#333; }
div#comment div.item span.control { display:block; position:absolute; right:0; top:0.5em; }
div#comment div.item span.control::after { content:''; display: block; clear: both; }
div#comment div.item span.control button { background:none; width:1.25em; height:1.25em; display:block; margin-left:0.5em; float:left; }
div#comment div.item span.control button span { display:none; }
div#comment div.item span.control button.itemRep { background:url('../images/ico.reply.svg') no-repeat center / 90%; transform:rotate(180deg); }
div#comment div.item span.control button.itemMod { background:url('../images/ico.modify.svg') no-repeat center / 90%; }
div#comment div.item span.control button.itemDel { background:url('../images/ico.cross.svg') no-repeat center / 80%; }

.board .flip { font-size:0.9em; line-height:1.5em; height:1.5em; display:block; margin-bottom:0.5em; overflow: hidden; }
.board .flip::after { content:''; display: block; clear:both; }
.board .flip span { display:block; float:left; margin-right:1em; }
.board .flip span.status { border-radius: 3px; font-size:0.8em; padding:0 0.5em 0 2em; color:#FFF; background:#999 url('../images/ico.hidden_FFFFFF.svg') no-repeat 0.5em center / 1em; }
.board .flip span.secret { border-radius: 3px; font-size:0.8em; padding:0 0.5em 0 2em; color:#FFF; background:#817db7 url('../images/ico.lock_FFFFFF.svg') no-repeat 0.5em center / 1em; }
.board .flip span.notice { border-radius: 3px; font-size:0.8em; padding:0 0.5em 0 2em; color:#FFF; background: #7bb18a url('../images/ico.notice_FFFFFF.svg') no-repeat 0.5em center / auto 1em; }
.board .flip span.language { border-radius: 3px; font-size:0.8em; padding:0 0.5em 0 2em; color:#FFF; background: #cea53e url('../images/ico.language_FFFFFF.svg') no-repeat 0.5em center / auto 1em; }
.board .flip span.category { padding-left:1.75em; background:url('../images/ico.part.svg') no-repeat 0.5em center / 1em; }


@media (max-width: 640px) {
    div.sector.board div.list ul.list li a.item { padding-right:0; height:auto; }
    div.sector.board div.list ul.list li a.item span.info { position:relative; float:none; width:auto; top:auto; right:auto; }
    div.sector.board div.list ul.list li a.item span.info::after { content:''; display: block; clear:both; }
    div.sector.board div.list ul.list li a.item span.info span { float:left; margin-right:1em; font-size:0.8em; }
}

@media (max-width: 480px) {
    div.sector.board div.list ul.list li.hasThumb a.item { padding-left:6em; }
    div.sector.board div.list ul.list li.hasThumb a.item span.img { width:5em; }
}

@media (max-width: 380px) {
    div.sector.board div.list ul.list li.hasThumb a.item { padding-left:0; }
    div.sector.board div.list ul.list li.hasThumb a.item span.img { display:none; }
}


/* 제품연결 팝업 */
#sync div.find { }
#sync div.find div.header { font-weight:600; border-bottom:1px solid #DDD; padding-bottom:0.5em;}
#sync div.find dl { display: flex; align-items: center; }
#sync div.find dt { display: none; }
#sync div.find dd { width:auto; padding:0.5em 0; margin:0 1em 0 0; }
#sync div.find input[name="keyword"] { width:150px; }
#sync div.find button.search { display: block; width:100%; background: none; opacity: 0.5; }
#sync div.find button.search span { display: flex; align-items: center; justify-content: center; padding:0.5em; background: #0e47a1; color:#FFF; border-radius: 0.5em; }
#sync div.find button.search span::before { content:''; display: block; width:1em; height:1em; margin-right:0.5em; background:url('../images/ico.search_FFFFFF.svg') no-repeat center; }
#sync div.list ul.list { margin:0.5em 0; }
#sync div.list ul.list li { border-bottom:1px solid #DDD; padding:0.5em 0; }
#sync div.list ul.list li:last-child { border:0; }
#sync div.list ul.list a { display: flex; align-items: center; justify-content: space-between; position:relative; padding-left:3.5em; }
#sync div.list ul.list a > span { display: flex; height:3em; align-items: center; }
#sync div.list ul.list a > span:not(:last-child) { margin-right:0.5em; }
#sync div.list ul.list a span.img { border:1px solid #DDD; position: absolute; display: flex; width:3em; height:3em; left:0; align-items: center; justify-content: center; }
#sync div.list ul.list a span.img img { max-width:100%; max-height:100%; }
#sync div.list ul.list a span.subject { display: flex; align-items: center; }
#sync div.list ul.list a span.subject span.model { display: block; margin-left:0.5em; font-size:0.8em; color:#666; }
#sync div.list ul.list a span.subject span.model::before { content:'['; }
#sync div.list ul.list a span.subject span.model::after { content:']'; }
#sync div.list ul.list a span.category { font-size:0.9em; }
#sync div.list ul.list a span.status { display: none; }
#sync div.list ul.list a.checked::after { content:''; display: block; position:absolute; width:100%; height:100%; left:0; top:0; background: #FFF; opacity: 0.5; z-index:1; }
#sync div.list ul.list a.checked span.img::after { content:''; display: block; width:100%; height:100%; position:absolute; background: url('../images/ico.check.svg') no-repeat center / cover; z-index:2;  }

div.sectors div.sector div.contents div#products.items div.item:not(.empty) { display: flex; align-items: center; justify-content: space-between; position:relative; padding:0.5em 1.5em 0.5em 3.5em; border-bottom:1px solid #DDD; margin:0.5em 0; }
div.sectors div.sector div.contents div#products.items div.item:not(.empty) > span { display: flex; height:3em; align-items: center; }
div.sectors div.sector div.contents div#products.items div.item:not(.empty) > span:not(:last-child) { margin-right:0.5em; }
div.sectors div.sector div.contents div#products.items div.item:last-child { border:0; }
div.sectors div.sector div.contents div#products.items div.item span.img { border:1px solid #DDD; position: absolute; display: flex; width:3em; height:3em; left:0; align-items: center; justify-content: center; }
div.sectors div.sector div.contents div#products.items div.item span.img img { max-width:100%; max-height:100%; }
div.sectors div.sector div.contents div#products.items div.item span.subject { display: flex; align-items: center; }
div.sectors div.sector div.contents div#products.items div.item span.subject span.model { display: block; margin-left:0.5em; font-size:0.8em; color:#666; }
div.sectors div.sector div.contents div#products.items div.item span.subject span.model::before { content:'['; }
div.sectors div.sector div.contents div#products.items div.item span.subject span.model::after { content:']'; }
div.sectors div.sector div.contents div#products.items div.item span.category { font-size:0.9em; }
div.sectors div.sector div.contents div#products.items div.item span.status { display: none; }
div.sectors div.sector div.contents div#products.items div.item button.itemDel { display: block; position:absolute; right:0; width:1em; height:1em; background: url('../images/ico.cross.svg') no-repeat center;  }
div.sectors div.sector div.contents div#products.items div.item button.itemDel span { display:none; }
div.sectors div.sector div.contents div#products.items div.item.checked::after { content:''; display: block; position:absolute; width:100%; height:100%; left:0; top:0; background: #FFF; opacity: 0.5; z-index:1; }
div.sectors div.sector div.contents div#products.items div.item.checked span.img::after { content:''; display: block; width:100%; height:100%; position:absolute; background: url('../images/ico.check.svg') no-repeat center / cover; z-index:2;  }


/* 도면 */
div.sectors div.sector.plan div.head { padding-left:2rem; text-align: center; font-size:0.9em; font-weight:600; border-bottom:1px solid #BBB; }
div.sectors div.sector.plan ul { display: flex; align-items: center; position: relative; margin-right:4rem; }
div.sectors div.sector.plan ul li { text-align: center; padding:0.5em; font-size:0.9em; }
div.sectors div.sector.plan ul li.input { width:calc((100% - (3rem * 3)) / 5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
div.sectors div.sector.plan ul li.file { width:3rem; display: flex; align-items: center; justify-content: center;  }
div.sectors div.sector.plan div.item ul li.file::before { content:''; width:2rem; height:2rem; display: block; border:1px solid #DDD; background: no-repeat center / 60%; opacity: 0.2; }
div.sectors div.sector.plan div.item ul li.file.uploaded::before { opacity: 1; }
div.sectors div.sector.plan div.item ul li.file.planCad::before { background-image: url('../images/ico.plan_cad.svg'); }
div.sectors div.sector.plan div.item ul li.file.plan3D::before { background-image: url('../images/ico.plan_3d.svg'); }
div.sectors div.sector.plan div.item ul li.file.planPdf::before { background-image: url('../images/ico.plan_pdf.svg'); }
div.sectors div.sector.plan input { width:95%; }

div#planForm.dialog form.planForm label.upfile { display: flex; align-items: center; cursor: pointer; }
div#planForm.dialog form.planForm label.upfile::before { content:''; width:3em; height:3em; display: block; border:1px solid #DDD; margin-right:0.5em; background: no-repeat center / 50%; opacity: 0.2; }
div#planForm.dialog form.planForm label.upfile.uploaded::before { opacity: 1; }
div#planForm.dialog form.planForm label.upfile.planCad::before { background-image: url('../images/ico.plan_cad.svg'); }
div#planForm.dialog form.planForm label.upfile.plan3D::before { background-image: url('../images/ico.plan_3d.svg'); }
div#planForm.dialog form.planForm label.upfile.planPdf::before { background-image: url('../images/ico.plan_pdf.svg'); }
div#planForm.dialog form.planForm label.upfile span { font-size:0.9em; }
div#planForm.dialog form.upload { display: block; overflow: hidden; width:0; height: 0; }