@charset "utf-8";

@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 100; 
    src: url(/css/fonts/NotoSansKR-Thin.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Thin.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Thin.otf) format('opentype'); 
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 300; 
    src: url(/css/fonts/NotoSansKR-Light.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Light.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Light.otf) format('opentype'); 
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(/css/fonts/NotoSansKR-Regular.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Regular.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Regular.otf) format('opentype'); 
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 500; 
    src: url(/css/fonts/NotoSansKR-Medium.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Medium.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Medium.otf) format('opentype'); 
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 700; 
    src: url(/css/fonts/NotoSansKR-Bold.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Bold.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Bold.otf) format('opentype'); 
} 
@font-face { 
    font-family: 'Noto Sans KR'; 
    font-style: normal; 
    font-weight: 900; 
    src: url(/css/fonts/NotoSansKR-Black.woff2) format('woff2'),
 
         url(/css/fonts/NotoSansKR-Black.woff) format('woff'),
 
         url(/css/fonts/NotoSansKR-Black.otf) format('opentype'); 
}

*{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
h3.h3{display:block; line-height:37px; padding:0; font-size:18px; color:#000; font-weight:bold;}

/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	Basic
/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
body{line-height:1.6; font-size:16px; font-weight:400; font-family:'Noto Sans KR','Malgun Gothic','맑은 고딕','NotoSans','돋움',Dotum,Helvetica,Verdana,Arial,sans-serif;}
*,
*:after{box-sizing: border-box;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, button{margin:0; padding:0;}
body, h1, h2, h3, h4, h5, h6, th, td, input, select, textarea{margin:0; padding:0; color:#404040;}
ul, ol, dl, dt, dd{margin:0; padding:0; list-style:none;}
img{border:none; vertical-align: bottom;}
hr{display:none;}
fieldset{border:none;}
legend{display:none;}
p{margin:0;}
body[data-layout="sub"] #container .content-title {position: relative; padding-bottom: 18px;margin: 20px 0 20px 0; border-bottom: 1px solid #C4C4C4;}
body[data-layout="sub"] #container .content-title>.caption { position: absolute; right: 0; bottom: 18px;}


/*------------------------------ 기존에 있던 코드 시작-----------------------------*/
[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: auto;}

/*게시판 박스*/
#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; height: 90%; width: 95%; margin: 8px auto;}
#boards [data-board="photo"] ul li a .txts{display:block; width:100%; box-sizing:border-box;}
#boards [data-board="photo"] ul li a .txts span{font-size: 0.9em; padding-bottom: 7px; letter-spacing: -1px;}
#boards [data-board="photo"] ul li a .txts strong{
	overflow:hidden; display:block; height:1.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:0px 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:2.558em; line-height:2.558em; 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 [class*="btn_"]:after{content:"";position:absolute;width:5em;height:1.8em;}
#boards [data-board="view"] .view_bx .controls .btn_prev{float:left; padding-left:5.4em;}
#boards [data-board="view"] .view_bx .controls .btn_next{float:right; padding-right:5.4em;}
#boards [data-board="view"] .view_bx .controls .btn_prev:after{left:0;top: 19%;   background:url(/img/locGovLink/btn_prev.png) no-repeat 0 0;top:-4px;}
#boards [data-board="view"] .view_bx .controls .btn_next:after{top: 13.5%;right:0;background:url(/img/locGovLink/btn_next.png) no-repeat 0 0;top:-4px;}
@media (max-width: 600px){
	#boards [data-board="view"] .view_bx .controls [class*="btn_"] { overflow: hidden; width: 4.5em; height: 24px;}
}
/*------------------------------ 기존에 있던 코드 끝-----------------------------*/
   
  


/*------------------------------ 추가 코드 시작 -----------------------------*/  

.small_btn1 {font-size: 11px; text-align: center; width: 65px; height: 24px; line-height: 24px; float: left; background: #b6b6b6; color: #fff; border-radius: 15px; padding-right: 5px;}

#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% - 6.125em);}
#boards [data-board="photo"][data-type="4"] ul li a .txts{height:6.125em; padding: 1.1em 6% 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: 0.7em}
/*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;}
}