@charset "UTF-8";

.inner { position: relative; /* width:100%; max-width:128rem */ width:128rem; margin:0 auto; }

/* header */
#header { position: relative; border-bottom: 1px solid var(--gray30);}
#header .inner { display: flex; justify-content: space-between; padding:1.6rem 0}
#header .util { display: flex; line-height: 1;}
#header .util a { position: relative; display: inline-flex; align-items: center; gap:.8rem; padding:.4rem 1.2rem; border-radius: .4rem; font-size: 1.7rem; font-weight: 700;  }
#header .util a:before { content:''; display: block; width:2.4rem; height:2.4rem; background:url(../images/head_ico_navi_login.svg) no-repeat; background-size: contain;}
#header .util a:hover { transition: .4s ease-in-out; background:var(--secondary5)}
#header h1 a { display: flex; height: 3.2rem; align-items: center; gap:.8rem; font-size: 2.6rem;}
#header span { color: var(--primary); }

/*footer*/
#footer{width:100%; min-width:139rem;background: var(--white); padding: 22px 0; text-align: center; border-top: 1px solid var(--gray40);}
#footer .copyright{font-size: 1.4rem; color: var(--gray70);}

/*conatiner*/
#container .inner { display: flex; gap:8rem; padding:4rem 0}
#container .inner:after { content:''; display: block; position: absolute; top:0; left:29.5rem; width:1px; height: 100%; background:var(--gray30);}

/*lnb*/
#lnb { width: 25.5rem; flex-shrink: 0; }
#lnb .dep1>li { margin-bottom: .4rem; }
#lnb .dep1>li>a { display: flex; align-items: center; justify-content: space-between; height: 5.6rem; border: 1px solid var(--gray30);padding: 0 1.2rem; font-weight: 500; font-size: 1.8rem; letter-spacing: -.5px; border-radius: .8rem;}
#lnb .dep1>li.active>a { background:var(--primary); border-color: var(--primary); color: var(--white);}
#lnb .dep1>li>a:hover { border-color: var(--primary); transition: .4s ease-in-out;}
#lnb .dep1>li.plus>a:after { content: ''; display: block; background: url(../images/icon_board.png) no-repeat -52px -34px; width: 1.1rem; height: .7rem;}
#lnb .dep1>li.active.plus>a:after { background-position: -39px -34px;}
#lnb .dep2 { display: none; padding:1.6rem 1.2rem; border: 1px solid var(--primary); border-radius:.8rem}
#lnb .dep2 a { display: flex; align-items: center; gap:.8rem; height: 4rem; padding:0 1.2rem; letter-spacing: -.5px; border-radius: .4rem;}
#lnb .dep2 li a:before { content:''; display: inline-block; width:.3rem; height: .3rem; border-radius: 100%; background:var(--gray90);}
#lnb .dep2 .active a,
#lnb .dep2 a:hover { transition: .4s ease-in-out; background: var(--secondary5);}
#lnb .active .dep2 { display: block;}

/*contents*/
#contents { width: 100%; min-height: calc(100vh - 6.5rem - 6.6rem - 8rem);}
.sub_visual { display: flex; overflow: hidden; height: 12rem; margin-bottom: 1.2rem; padding:0 6.4rem; align-items: center; border-bottom-right-radius: 1.2rem; background-color: var(--secondary90); background-repeat: no-repeat;}
.sub_visual.bg1 { background-image: url(../images/sub_visual01.jpg);}
.sub_visual.bg2 { background-image: url(../images/sub_visual02.jpg);}
.sub_visual.bg3 { background-image: url(../images/sub_visual03.jpg);}
.sub_visual.bg4 { background-image: url(../images/sub_visual04.jpg);}
h2.page_title { color:var(--white); font-size: 3.6rem; font-weight: 900; text-shadow: 2px 2px 2px rgba(0,0,0,.3);}
h3.h2Title { margin-top:4rem; margin-bottom: 1.2rem; padding-left:2rem; font-size: 2rem; font-weight: 700; line-height: 1; background:url(../images/h2_dot.png) no-repeat 0 50%}
h4.h3Title { margin-top:3rem; margin-bottom: 1.2rem; font-size: 1.8rem; font-weight: 700; color:var(--primary60); line-height: 1;}
pre.textarea { margin-top:0rem; font-family: 'Pretendard', '맑은 고딕', 'Malgun Gothic', sans-serif; font-size: 1.6rem; word-break: break-all; white-space: pre-wrap;}

/* serach */
.searchBox{ position:relative; margin-bottom: 3rem; padding:2rem; border-radius: 0 1.2rem 0 1.2rem; background:var(--secondary5)}
.searchBox > ul { display: flex; flex-direction: column; gap:.8rem} 
.searchBox > ul > li { display: flex; gap:.8rem}
.searchBox > ul > li select { width:14rem; flex-shrink: 0;}
.searchBox > ul > li input[type="text"] { width:100%}
.searchBox .btn_wrap { flex-shrink: 0; margin-left:1.2rem;}

.inputData { border: 1px solid var(--gray30); border-radius: .4rem; height: 3.4rem; padding:0 1rem; vertical-align: top; background: var(--white); transition: 0.4s ease-in-out;}
.inputData:focus { border-color:var(--primary); outline: none !important;}
textarea.inputData { padding:.8rem 1rem; line-height: 1.5;}
select { padding-right:2.4rem !important; appearance:none; -webkit-appearance: none; -moz-appearance: none; background: #fff url(../images/bg_select.png) no-repeat right .8rem top 50% !important;}
select::-ms-expand { display:none}
.input_group { display: inline-flex; align-items: center; height: 3.4rem; gap:.8rem}
.input_group + .input_group { margin-left:4rem}
.input_group .button { flex-shrink: 0;}

/* table - list */
.tableScroll { overflow-x:auto}
.t_caption { margin-bottom: .8rem;}
.necessary { margin-right:.4rem; color:var(--point)}
.gridDetail{ width: 100%; position: relative; }
.gridDetail:before{ content: ''; display: block; width: 100%; height: 1px; background:var(--gray90); position: absolute; top: 0; left: 0} 
.gridDetail td, 
.gridDetail th{ border-bottom: 1px solid var(--gray30); border-right:1px solid var(--gray30); text-align: center; }
.gridDetail th:last-child, 
.gridDetail td:last-child{ border-right: 0}
.gridDetail th { padding:1rem 2rem; font-weight: 400; background:var(--secondary5)}
.gridDetail td { padding: 1rem; }
.gridDetail td > a { text-decoration: underline;}

/* table - view */
.outGrid{ position: relative;}
.outGrid:after{ content: ''; display: block; clear: both}
.outGrid .gridDetail th { padding:.8rem 1rem}
.outGrid .gridDetail td { text-align:left; padding:.8rem 1rem}
.outGrid .gridDetail .input_group { display: inline-flex; gap:1rem; margin-right:2rem; align-items: center;} 
.file_wrap li { display: flex; gap:1.2rem}
.file_wrap li + li { margin-top:.4rem}
.file_wrap li .btn_wrap { flex-shrink: 0;}
.file_wrap li a:hover { text-decoration: underline;}
.file_wrap li a:before { content:''; display: inline-block; width:.9rem; height: 1.6rem; margin-right:.8rem; margin-bottom: -.2rem; background:url(../images/icon_board.png) no-repeat -84px 0}

.fileUpload{ position: relative; width: 100%}
.fileUpload label{ position:relative; cursor:pointer; display:inline-block; vertical-align:middle; overflow:hidden; width:100%; height:3.4rem; line-height:3.2rem;}
.fileUpload label .button { position: absolute; right: 0; top: 0; padding:0 1.2rem; border-radius: 0 .4rem .4rem 0;}
.fileUpload label input{ display: block; position:absolute; width:calc(100% - 7rem); height:100%; overflow:hidden; border: 0; background: transparent; left: 0; top: 0; opacity: 0}
.fileUpload input[type=text]{ position: absolute; left: 0; top: 0; display: block; width: calc(100% - 7rem); height:3.4rem; line-height:3.2rem; border:1px solid var(--gray30); border-radius: .4rem; }

/* 페이징 */
.paging{ text-align: center; margin: 2rem 0;}
.paging a, .paging span{ display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box}
.paging>a{ transition: all .2s; -webkit-transition: all .2s;}
.paging>a:before{ content: ''; display: block; background: url(../images/icon_board.png) no-repeat; height: 1.2rem; }
.paging>a.prev{ margin-right: 2rem}
.paging>a.next{ margin-left: 2rem}
.paging a, .paging span a { border-radius: .8rem; width: 3.2rem; height: 3.2rem; text-decoration: none}
.paging span.on a, .paging a:hover{ background: var(--secondary5); }
.paging a.on{ background: var(--secondary5); }
.paging .first, .paging .prev, .paging .next, .paging .last{ font-size: 0; line-height: 0; vertical-align: top; }
.paging>a.first:before{ background-position: 0 -20px; width: 1.3rem;}
.paging>a.prev:before{ background-position: -15px -20px; width: .8rem;}
.paging>a.next:before{ background-position: -26px -20px; width: .8rem;}
.paging>a.last:before{ background-position: -37px -20px; width: 1.3rem;}

/* 글쓰기 */
.board_info { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem;}
.board_info .h3Title { margin: 0;}
.board_write { display: flex; flex-direction: column; gap:.4rem; padding:.8rem; border-top:1px solid var(--gray90); border-bottom: 1px solid var(--gray30);}
.board_write dl { display: flex; gap:2rem}
.board_write dt { display: flex; flex-shrink: 0; align-items: center; width:12.5rem; height: 3.4rem; padding:0 1.2rem; border:1px solid var(--gray30); background: var(--secondary5);}
.board_write dd { width:calc(100% - 14.5rem); color:var(--gray70)}
.board_write .cont { padding:.5rem 0}
.board_write .cont_list { display: flex; gap:0 3rem; flex-wrap: wrap;}
.board_write .cont_list li { line-height: 3.4rem;}
.board_write .cont_list li strong { color:var(--primary)}
.board_write .img_list { display: flex; gap:1.2rem}
.board_write .img_list li { width:calc(25% - .9rem); border:1px solid var(--gray30)}
.board_write .file_list { display: flex; gap:0 3rem; flex-wrap: wrap;}
.board_write .file_list li { line-height: 3.4rem;}
.board_write .file_list li:before { content:''; display: inline-block; width:.9rem; height: 1.6rem; margin-right:.8rem; margin-bottom: -.2rem; background:url(../images/icon_board.png) no-repeat -84px 0}
.board_write .file_list li a:hover { text-decoration: underline;}
ul.board_write { padding:0; gap:0}
ul.board_write li { display: flex; flex-wrap: wrap; gap:.4rem 4rem; padding:.8rem}
ul.board_write li + li {  border-top:1px dashed var(--gray40)}
ul.board_write li dl { width:calc(50% - 2rem)}
ul.board_write.oam_list span { margin-right:1.2rem; color:var(--gray70);}
ul.board_write.oam_list span:before { content:''; display: inline-block; width:.4rem; height:.4rem; margin-right:.8rem; margin-bottom: .4rem; border-radius: 100%; vertical-align: middle; background:var(--primary);}
ul.board_write.oam_list strong { color:var(--gray90); font-weight: 400;}

.board_title { display: flex; flex-wrap: wrap; gap:.8rem 6rem; margin-bottom: 3rem; padding:1.6rem 2rem; border-radius: 1.2rem; border:1px solid var(--primary20); background:var(--primary5)}
.board_title li { display: flex; gap:.8rem; font-weight: 700;}
.board_title li span { flex-shrink: 0; color:var(--gray70)}
.board_title li span:before { content:''; display: inline-block; width:.4rem; height:.4rem; margin-right:.8rem; margin-bottom: .4rem; border-radius: 100%; vertical-align: middle; background:var(--primary);}


/* 참고DB */
.referdb_wrap { display: flex; flex-wrap: wrap; gap:2rem; margin-top:6rem}
.referdb_wrap li { overflow: hidden; display: flex; align-items: center; width:calc(50% - 1rem); border:1px solid var(--gray30); border-radius: 1.2rem; background: var(--gray5);}
.referdb_wrap li i { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width:8rem; height: 8rem; margin:0 2.5rem; border-radius: 100%; background: var(--primary10);}
.referdb_wrap li i:after { content:''; display: block; width:4rem; height: 3.9rem; background:url(../images/icon_referdb.png) no-repeat}
.referdb_wrap li i.icon1:after { background-position: 0 0; }
.referdb_wrap li i.icon2:after { background-position: -43px 0; }
.referdb_wrap li i.icon3:after { background-position: -86px 0; }
.referdb_wrap li i.icon4:after { background-position: -129px 0; }
.referdb_wrap .refer_cont { width:100%; height: 100%; padding:3.6rem 4rem; background: var(--white);}
.referdb_wrap .refer_cont h3 { width: 100%; margin-bottom: 1.2rem; padding-bottom: 1.2rem; font-size: 2rem; border-bottom:1px dotted var(--gray50)}
.referdb_wrap .refer_cont span { display: block; color:var(--gray70)}
.referdb_wrap .refer_cont .button { margin-top:2.4rem; border-radius: 0; gap:.8rem}
.referdb_wrap .refer_cont .button:after { content:''; display: inline-block; width:1.3rem; height: 1.3rem; background: url(../images/icon_board.png) no-repeat -65px -34px; }


/* 분양안내 */
.no_cont { padding-top:10rem; text-align: center;}
.no_cont p { margin-top:6rem; font-size: 2rem;}
.no_cont p strong { display: block; margin-bottom: 1.2rem; font-size: 3rem;}


/* BUTTON */
.btnArea{ margin-top: 4rem; text-align: center}
.btnArea.between { display: flex; justify-content: space-between;}
.button,
.button * { position:relative; margin:0; line-height:3.2rem; font-size: 1.5rem; padding:0 2rem; display:inline-flex; align-items: center; justify-content: center; text-decoration:none !important; border:1px solid var(--gray90); border-radius:.4rem; white-space:nowrap; color:var(--white); vertical-align:top; overflow:visible; cursor: pointer; background:var(--secondary90);  }
.button.large { min-width: 12rem; line-height:4.3rem; border-radius: 0;}
.button.colorWhite { color:var(--gray90); background: var(--white); }
.button.colorGray { color:var(--gray90); background: var(--gray10); }
.button.colorGreen { border-color:var(--primary60); background:var(--primary60); }
.button.colorLine { border-color:var(--primary60); color:var(--primary60); background: var(--white);}
.button.icon:before{ content: ''; display: inline-flex; vertical-align: middle; margin-right:.4rem; background: url(../images/icon_board.png) no-repeat;}
.button.icon.delete:before{ background-position: -3.5rem -.1rem; width: 1.3rem; height: 1.7rem;}
.button.icon.search:before{ background-position: 0 -.1rem; width:1.6rem; height:1.6rem;}
.button.icon.plus:before{ background-position: -5.2rem -2rem; width: 1.1rem; height: 1.1rem;}
.button.icon.minus:before{ background-position: -6.5rem -2.4rem; width: 1.1rem; height: .3rem;}
.button.icon.reset:before{ background-position: -1.8rem -.1rem; width: 1.2rem; height: 1.2rem;}
.button.txtN{ font-size: 0; width: 4rem; padding:0; text-align: center;}
.button.txtN.icon:before { margin-bottom:0; margin-right:0}


/* list style */
.green_dot_list { margin-bottom: 3rem; padding-left:1.6rem;}
.green_dot_list li { position: relative; padding-left:1.3rem}
.green_dot_list li:before { content:''; display: block; position: absolute; top:.9rem; left:0; width:.5rem; height: .5rem; border-radius: 100%; background:var(--primary60);}
.green_dot_list li + li { margin-top:.8rem}

.dot_list { margin-bottom: 1.2rem; }
.dot_list li { position: relative; padding-left:1.3rem; color:var(--gray70)}
.dot_list li:before { content:''; display: block; position: absolute; top:1rem; left:0; width:.3rem; height: .3rem; border-radius: 100%; background:var(--gray50);}


/* main */
.main_visual { overflow: hidden; padding:6rem 4rem; border-bottom-right-radius: 4rem; background:url(../images/main_visual.jpg) no-repeat 0 0}
.main_visual .page_title { display: inline-block; padding:2.4rem 4rem; font-size: 4rem; font-weight: 900; line-height: 1; background: rgba(0,0,0,.5);}
.main_visual{ padding: 2.5rem 0;}
.main_visual .page_title{ display: block; padding: 2.4rem 4rem; height: 20rem; background: rgba(0, 0, 0, .3); line-height: 3.8; text-align: center;}
.main_visual .page_title br{ display: none;}
.main_cont { margin-top:6rem}
.main_cont p { margin-bottom: 3.2rem; font-size: 1.7rem;}

/* 250115_Main Font Size 변경 */
.main_visual .page_title { padding:1.5rem 4rem; font-size: 5rem; font-weight: 500;}

/* 250117_li Hover 추가 */
.liHover li:hover { background-color: #fffceb; cursor: pointer;}
.liHover li:hover.noData { cursor: default;}

/* 레이어팝업 */
.layerPop{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.5); z-index: 20; display: none}
.layerPop>div { width: 69rem; min-height: 39rem; background:#fff;  position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); overflow-y: auto; border:1px solid var(--secondary50)}
.layerPop h1{ background: #357753; color: var(--white); font-size: 2rem; padding:1.5rem 2rem; font-weight:400; line-height: 1;}
.layerPop .popCont{ padding: 2rem}
.layerPop>div>.popup_close{ display: block; position: absolute; right: .2rem; top: .2rem; background: transparent; font-size: 0; width: 4.6rem; height: 4.6rem; cursor: pointer}
.layerPop>div>.popup_close:before{ content: ''; display: inline-block; width:2rem; height:2rem; background:url('../images/icon_board_cms.png') no-repeat -7.7rem -2rem}
.layerPop .btnArea .button { padding:0 4rem;}

/* 250117_li Hover 추가 */
.gridHover tr:hover>td { background-color: #fffceb; cursor: pointer;}
.gridHover tr:hover>td.noData { cursor: default;}

.tab{display: flex; width: 100%; border-bottom: 1px solid var(--gray40);margin-bottom: 2rem;}
.tab li{position: relative;}
.tab li .btn_tab{width: 14rem; padding: 1rem;background: var(--secondary5); border: 1px solid var(--gray30);border-right: none;border-bottom: none;transition: 0.4s ease-in-out;}
.tab li:last-child .btn_tab{border-right: 1px solid var(--gray30);}
.tab .active .btn_tab{background: var(--primary60); color: var(--white);border-top: 1px solid var(--primary60);}
.tab .active .btn_tab:before {content: '';display: inline-block;background: url(../images/icon_board.png) no-repeat -13px -49px;width: 1.2rem;height: .9rem;vertical-align: middle; margin-right: .5rem;padding-bottom: 1.2rem;}
.tab_conts{display: none;}
.tab_conts.active {display: block;}

/* 250221_농약안전정보시스템 */
.referdb_wrap li i.icon5:after { background-position:-172px 0}

/* 250312_도움말 팝업 */
.popup_mask {position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; display: none; opacity: 0.8; background-color:gray; z-index: 2;}
.popupDiv {top: 0px; position: fixed; background: white; display: none; padding: 52px 20px 20px; box-sizing:border-box;}
.popupDiv .closeBtn {position: absolute; top: 0; left: 0; width: 100%; background: #333; color: #fff; padding: 0 20px; line-height: 32px; text-decoration: none; font-weight: bold; text-align: left; box-sizing:border-box;}
.popupDiv .popupCont {position:relative; width:600px; height:430px; overflow:hidden; margin-bottom:20px; text-align:center;}

/* 250312_버튼 아이콘 추가(다운로드 아이콘, 링크 아이콘) */
.button.icon.down:before{ background-position: -5rem .1rem; width: 1.3rem; height: 1.7rem;}
.button.icon.blank:before{ background-position: -6.5rem -3.4rem; width: 1.3rem; height: 1.3rem;}

/* 개발자250314 */
.board_write dt { width:13.5rem !important;}