@charset "utf-8";

/*------------------------------ 기존에 있던 코드 시작-----------------------------*/
/*------------------------------ 기존에 있던 코드 시작-----------------------------*/
/*------------------------------ 기존에 있던 코드 시작-----------------------------*/
[data-skin="btn"] { display: inline-block;  min-width: 80px;  height: 34px;  line-height: calc(34px - 4px);  padding: 0 15px;  margin: 0.1em 0;  text-align: center;  text-decoration: none;  vertical-align: middle;  border: 1px solid #BDBDBD; color: #fff; background-color: #BDBDBD; -webkit-border-radius: 17px; border-radius: 17px; text-align: center;}
[data-skin="btn"][data-icon="print"]>span:before { background-image: url(/img/boardEx/layout/icon-print.svg);}
[data-skin="btn"][data-icon]>span:before { content: "";  display: inline-block;  width: 16px;  height: 16px;  margin-right: 5px;  vertical-align: middle; background-repeat: no-repeat; background-position: center center; background-size: contain;}
[data-skin="btn"][data-color="2"] { color: #4F4F4F !important; border-color: #4F4F4F !important; background-color: transparent !important;}
[data-skin="btn"]>span { display: inline-block; line-height: 30px; font-size: 15px;}
#boards a { text-decoration: none;color: #4f4f4f;}
#boards .btnbx {    overflow: hidden;    margin-top: 1em;}

/*게시판 박스*/
#boards [data-skin="box"]{padding:1.2em 1.6em; background-color:#F6F6F6; box-sizing:border-box;}
#boards [data-skin="box"] .titles{display: inline-block;}/*0413수정*/
#boards [data-skin="box"] p{display:inline-block; font-weight:500; vertical-align:middle; margin-right:1em;}
#boards [data-skin="box"] a[data-skin="btn"]{border:0; vertical-align:middle;}
#boards [data-skin="box"] p+a[data-skin="btn"]{margin-left:1em;}
#boards [data-skin="box"] a[target]{text-decoration:none; color:#404040;}
#boards [data-skin="box"] a[target]:hover,
#boards [data-skin="box"] a[target]:focus{text-decoration:underline;}
#boards [data-skin="box"] em{text-decoration:underline; text-underline-position:under; font-style:normal;}
#boards [data-skin="box"][data-type="2"]{background-color:#fff; border:1px solid #E0E0E0; border-radius:0.3em;}
#boards [data-skin="box"]+[data-skin="box"]{margin-top:1em;}
/*#boards [data-skin="box"] a[showPrint] {text-align:right;}*/

/**/
[data-skin="btn"][data-color="6"] {color: #fff !important;    border-color: #828282 !important;    background-color: #828282 !important;}

/*/////////////////////////////////////////////////////////////////////////////////////////////
	Board photo :: 포토리스트
/////////////////////////////////////////////////////////////////////////////////////////////*/
#boards [data-board="photo"] ul li a
{transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}

#boards [data-board="photo"] ul li{display:inline-block; vertical-align:top;}
#boards [data-board="photo"] ul li a{display:block; position:relative; width:100%; border:1px solid #E0E0E0; box-shadow:0 4px 4px rgba(0,0,0,0.07);}
#boards [data-board="photo"] ul li a:hover,
#boards [data-board="photo"] ul li a:focus{box-shadow:0 2px 15px rgba(0, 0, 0, 0.2);}
#boards [data-board="photo"] ul li a .layers{display:block; width:100%; height:100%;}
#boards [data-board="photo"] ul li a .imgs{overflow: hidden; position:absolute; top:0; left:0; display:block; width:100%; background-color:#eee;}
#boards [data-board="photo"] ul li a .imgs img{display:block; width:100%;}
#boards [data-board="photo"] ul li a .txts{display:block; width:100%; box-sizing:border-box;}
/*
#boards [data-board="photo"] ul li a .txts{position:absolute; bottom:0; left:0; display:block; width:100%; box-sizing:border-box;}
 */
#boards [data-board="photo"] ul li a .txts span{font-size:0.9em;}
#boards [data-board="photo"] ul li a .txts strong{
	overflow:hidden; display:block; height:2.8em; line-height:1.4em; margin-top:0.1em;
	display:-webkit-box; text-overflow:ellipsis; word-wrap:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
#boards [data-board="view"] .b_title{overflow: hidden; margin:1.1em 0;}
#boards [data-board="view"] .b_title>strong{float:left; font-size:1.1em;}
#boards [data-board="view"] .b_title .etcs{float:right;}
#boards [data-board="view"] .b_title .etcs .date{margin-right:0.8em; font-size:0.95em;}
#boards [data-board="view"] .b_title .etcs .date strong{display:inline-block; margin-right:0.8em;}

#boards [data-board="view"] .view_bx{border-top:1px solid #000; border-bottom:1px solid #E0E0E0; font-size:0.95em;}
/*항목*/
#boards [data-board="view"] .view_bx .cate{padding:0 2em; border-bottom:1px solid #E0E0E0;}
#boards [data-board="view"] .view_bx .cate ul li{display:inline-block; height:3.158em; line-height:3.158em; margin-right:6%;}
#boards [data-board="view"] .view_bx .cate ul li strong{display:inline-block; margin-right:1em;}
/*글내용*/
#boards [data-board="view"] .view_bx .txts{padding:1.5em 1.5em 2em;/*white-space: pre-wrap;*/}
#boards [data-board="view"] .view_bx .txts .movies{max-width:80%; margin:0 auto; text-align:center;}
#boards [data-board="view"] .view_bx .txts iframe{width:100%; height:30em;}
#boards [data-board="view"] .view_bx .txts img{display:block; max-width:100%; margin:0 auto;}
/*답변*/
#boards [data-board="view"] .view_bx .answers{padding:1.5em 1.5em 2em; border-top:1px solid #E0E0E0;}
#boards [data-board="view"] .view_bx .answers .an_txt{white-space: pre-wrap;}
#boards [data-board="view"] .view_bx .answers .an_txt br{display:none;}
#boards [data-board="view"] .view_bx .answers .tbx{position:relative; margin-bottom:1em;}
#boards [data-board="view"] .view_bx .answers .tbx .infos{position:absolute; top:0; right:0;}
#boards [data-board="view"] .view_bx .answers .tbx .tt{display:block;}
/*첨부파일*/
#boards [data-board="view"] .view_bx .filebx{padding:1.2em 1.6em; background-color:#F6F6F6; box-sizing:border-box;}
#boards [data-board="view"] .view_bx .filebx ul li a:hover,
#boards [data-board="view"] .view_bx .filebx ul li a:focus{text-decoration:underline;}
#boards [data-board="view"] .view_bx .filebx ul li strong{font-weight:400;}
/*자막*/
#boards [data-board="view"] .view_bx .gbx{padding:1.2em 1.6em; background-color:#F6F6F6; box-sizing:border-box;}
#boards [data-board="view"] .view_bx .gbx .tt{display:block;}
#boards [data-board="view"] .view_bx .gbx > h5{margin:1.8em 0; font-weight:700; color:#2E5FCE;font-size:16px;}
/*이전글,다음글*/
#boards [data-board="view"] .view_bx .controls{border-top:1px solid #E0E0E0; box-sizing:border-box;padding:15px 0;}
#boards [data-board="view"] .view_bx .controls:after{content:"";display:block;clear:both;}
#boards [data-board="view"] .view_bx .controls [class*="btn_"]{position:relative; display:inline-block; box-sizing:border-box;}
#boards [data-board="view"] .view_bx .controls [class*="btn_"]:hover,
#boards [data-board="view"] .view_bx .controls [class*="btn_"]:focus{text-decoration:underline;}
#boards [data-board="view"] .view_bx .controls [class*="btn_"]:after{content:"";position:absolute;width:1em;height:1em;background:url(/img/boardEx/content/board_control_icon_arrow.svg) no-repeat 0 0;}
#boards [data-board="view"] .view_bx .controls .btn_prev{float:left; padding-left:1.3em;}
#boards [data-board="view"] .view_bx .controls .btn_next{float:right; padding-right:1.3em;}
#boards [data-board="view"] .view_bx .controls .btn_prev:after{left:0;top: 19%;}
#boards [data-board="view"] .view_bx .controls .btn_next:after{top: 13.5%;right:0;transform:rotate(180deg);-webkit-transform:rotate(180deg);}
@media (max-width: 600px){
	#boards [data-board="view"] .view_bx .controls [class*="btn_"] { overflow: hidden; width: 4.5em; height: 24px;}
}





/*------------------------------ 기존에 있던 코드 끝-----------------------------*/
/*------------------------------ 기존에 있던 코드 끝-----------------------------*/
/*------------------------------ 기존에 있던 코드 끝-----------------------------*/






/*------------------------------ 추가 코드 시작 -----------------------------*/
/* 우수사례 디지털 컨텐츠 : 23.01.11 */
#boards .great_tab{margin:1em 0 1.5em;}
#boards .great_tab .title{display:none;}
#boards .great_tab:not(.select) ul li{display:inline-block; margin-top:0.5em; margin-right:1em;}
#boards .great_tab:not(.select) ul li a{
	display:block; height:2.106em; line-height:2.106em; padding:0 1em; background-color:#F6F6F6; border-radius:2em; font-size:0.95em; box-sizing:border-box;
	transition:all 0.2s ease; -webkit-transition:all 0.2s ease;
}
#boards .great_tab:not(.select) ul li a:hover,
#boards .great_tab:not(.select) ul li a:focus,
#boards .great_tab:not(.select) ul li.on a{background-color:#468FC7; color:#fff;}

/*모바일*/
#boards .great_tab.select{margin:1.5em 0 2em; background-color:#F6F6F6; border-radius:1.5em;}
#boards .great_tab.select .title{display:block; padding:0 1.5em; background-color:#fff; border:1px solid #4F4F4F; border-radius:5em; box-sizing:border-box;}
#boards .great_tab.select .title a{display:block; height:45px; line-height:45px; background:url(/img/boardEx/content/board_icon_sel.svg) no-repeat right center; font-weight:400;}
#boards .great_tab.select ul{display:none;}
#boards .great_tab.select ul li{width:100%; box-sizing:border-box;}
#boards .great_tab.select ul li:not(:last-child){border-bottom:1px dashed #d4d4d4;}
#boards .great_tab.select ul li a{display:block; height:2.75em; line-height:2.75em; padding:0 1.5em; border-radius:0; box-sizing:border-box;}

/*Board 우수사례 디지털 컨텐츠 */
#boards [data-board="photo"][data-type="4"] ul li{width:calc((100% - 2em - 0.8em) / 3);}
#boards [data-board="photo"][data-type="4"] ul li:not(:nth-child(3n+3)){margin-right:1em;}
#boards [data-board="photo"][data-type="4"] ul li:nth-child(n+4){margin-top:1.5em;}
#boards [data-board="photo"][data-type="4"] ul li a .imgs{height:calc(100% - 10.125em);}
#boards [data-board="photo"][data-type="4"] ul li a .txts{height:10.125em; padding:1.1em 7% 0;}
#boards [data-board="photo"][data-type="4"] ul li a .txts [data-rank]{display:inline-block;margin-bottom:0.5em;padding:0 0.5em;border-radius:2em;color:#fff;font-size:0.8em;box-sizing:border-box;}
#boards [data-board="photo"][data-type="4"] ul li a .txts [data-rank="A"]{background-color:#7E5FE2;}
#boards [data-board="photo"][data-type="4"] ul li a .txts [data-rank="B"]{background-color:#56BC76;text-shadow: 0px 2px 2px #0b6d2a;}/*220525수정*/
#boards [data-board="photo"][data-type="4"] ul li a .txts [data-rank="C"]{background-color:#FF9500;}
#boards [data-board="photo"][data-type="4"] ul li a .txts .names{display:block; margin-top:1.1em;}
/*1등작*/
#boards [data-board="photo"][data-type="4"] ul li.bests a .imgs:after{content:""; position:absolute; top:0; right:4%; width:2.4em; height:2.8em; background:url(/img/boardEx/content/photo_icon_ranktop.png) no-repeat 0 0; background-size:100%;}

#boards [data-board="view"][data-type="4"] .view_bx .tt{display:block; margin-bottom: 1em;}
#boards [data-board="view"][data-type="4"] .ConStory { height: 300px; overflow-y: scroll;}
 
@media screen and (max-width:840px) {
	#boards [data-board="photo"][data-type="4"]{font-size:15px;}
}
@media screen and (max-width:640px) {
	#boards [data-board="photo"][data-type="4"] ul li{width:calc((100% - 1em - 0.4em) / 2);}
	#boards [data-board="photo"][data-type="4"] ul li:nth-child(n+3){margin-top:1.5em;}
	#boards [data-board="photo"][data-type="4"] ul li:not(:nth-child(3n+3)){margin-right:auto;}
	#boards [data-board="photo"][data-type="4"] ul li:not(:nth-child(even)){margin-right:1em;}        
}
@media screen and (max-width:480px) {
	#boards [data-board="photo"][data-type="4"] ul li{width:calc((100% - 0.6em - 0.3em) / 2);}
	#boards [data-board="photo"][data-type="4"] ul li:not(:nth-child(even)){margin-right:0.6em;}
	#boards [data-board="photo"][data-type="4"] ul li:nth-child(n+3){margin-top:1em;}
	#boards [data-board="photo"][data-type="4"] ul li a .imgs{height:calc(100% - 9.5em);}
	#boards [data-board="photo"][data-type="4"] ul li a .txts{height:9.5em;}
}