@charset "UTF-8";

/* color */
:root {
  --hgd-title:#95C135;
  --hgd-subTitle:#2EAA64;
  --hgd-alarm:#de4f41;
}


/* 공통 */
ul,ol,li,summary { list-style: none; margin: 0; padding: 0; } 
button { cursor: pointer; } 
a { cursor: pointer; }
.hide { overflow: hidden; display: block; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); } 

/* margin-padding */
.mgt10 { margin-top: 10px;}
.mgt15 { margin-top: 15px;}
.mgt25 { margin-top: 25px;}
.mgt20 { margin-top: 20px;}
.mgt30 { margin-top: 30px;}
.mgt35 { margin-top: 30px;}
.mgt50 { margin-top: 50px;}
.mgt70 { margin-top: 70px;}

.mgb20 { margin-bottom: 20px; }
.mgb35 { margin-bottom: 35px; }

.mgr7 { margin-right: 7px;}
.mgr10 { margin-right: 10px;}
.mgr30 { margin-right: 30px;}

.pdt30 { padding-top: 30px;}

/* flexbox */
.align { display: flex; }
.align.both { justify-content: space-between; }
.align.center { justify-content: center; }
.align.vm { align-items: center; }

/* board */
.board_searchWrap { display: flex; justify-content: flex-end;}
.board_search form { display: flex; justify-content: flex-end; padding: 0 0 30px;/*  width: 40%; */}
/* .board_search > * { border: 1px solid #dbdbdb; box-sizing: border-box; } */
.board_search select { width: 10rem; appearance:none; background: url(../images/common/bu_select.png) no-repeat right 28px center;  text-indent: 28px;}
.board_search select::-ms-expand { display: none;}
.board_search button { width: 100px; border-left: none; background: #191919 url(../images/common/icon_search.svg) no-repeat center; background-size: 30px;}
.board_search input { flex:1; /* border-left:none; */ border-right: none;}

.board_list { }
.board_list { border-top:3px solid #333333; border-bottom: 1px solid #dbdbdb;}
.board_list li ~ li { border-top:1px solid #dbdbdb;}
.board_list a { display: block; position: relative; padding: 30px 20px; line-height: 1; color:#191919;}
.board_list a::after {  content: "";  position: absolute; right: 32px;top: 50%; transform: translateY(-50%) rotate(45deg); width: 16px; height: 16px; border-top: 2px solid #010101; border-right:2px solid #010101;}
.board_list a:hover,
.board_list a:focus { background: #f7f7fa;}
.board_list p { padding: 0; font-size:16px; line-height: 1.6;}
.board_list .board_title { color: var(--hgd-title);}
.board_list .board_desc { padding-bottom: 5px;}
.board_list em { font-size: 0.9375rem;}
.board_list div > span { font-size: 0.9375rem;}

.board_header { padding: 30px 0 40px; border-top:3px solid #333333; border-bottom: 1px solid #dbdbdb; text-align: center;}
.board_title{ font-size: 1.25rem !important; font-weight: 700;}
.board_subTitle{ font-size: 1.125rem; color: var(--hgd-title); margin-top: 10px;}
.board_info { display: flex; justify-content: center; padding: 15px 0 0; color: #505050; }
.board_info > div { display: flex; align-items: center; font-size: 0.9375rem;}
.board_info > div:not(:first-child)::before { content: ''; margin: 0 10px; height: 12px; border-right: 1px solid #bcbec0;}
.board_content { padding: 45px 30px; line-height: 1.6; border-bottom: 1px solid #dbdbdb; }
.board_files { display: flex; padding: 22px 30px; background-color: #f7f7fa; border-bottom: 1px solid #dbdbdb;}
.board_files span { display: flex; align-items: center; font-size: 1rem; color: #505050;}
.board_files span::after { content: '';  height: 14px;  margin: 0 20px 0 26px; border-right: 1px solid #bcbec0;}
.files { padding: 0 0 0 30px; line-height: 30px; color: #505050; background: url(../images/common/icon_files.svg) no-repeat left;}

@media (max-width: 1023px) { 

  .board_title,
  .board_desc { width: 85%;}

}



/* pagination */
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 50px;}
.pagination button { border: 1px solid #dbdbdb; border-radius: 2px; background: #fff; color: var(--hgd-title); width: 30px; height: 30px; background-size: 30px; background-repeat: no-repeat; background-position: center;}
.pagination button.pagination_prev { background-image: url(../images/common/icon_prev.svg); }
.pagination button.pagination_prev:hover { background-image: url(../images/common/icon_prevOn.svg); }
.pagination button.pagination_next { background-image: url(../images/common/icon_next.svg); }
.pagination button.pagination_next:hover { background-image: url(../images/common/icon_nextOn.svg); }
.pagination ol { display: flex;}
.pagination ol li { display: flex; width: 26px; margin: 0 7px; align-items: center; justify-content: center; text-align: center; }
.pagination a { display: block; font-size: 1.125rem; color: #191919; padding: 2px 5px; border-bottom: 2px solid transparent; border-radius: 2px; transition: all .3s;}
.pagination a:hover { color: var(--primary-color); border-bottom: 2px solid var(--primary-color);}

/* faq */
.faq_list { border-top:3px solid #333333; border-bottom: 1px solid #dbdbdb;}
.faq_list li { cursor: pointer; }
.faq_list > li + li { border-top:1px solid #d4d4d4; }
.faq_list summary { position: relative; padding:20px; font-size: 1.25rem; color:#191919; transition: all .3s;}
.faq_list summary::before { content: 'Q'; padding-right: 15px; color: var(--hgd-title); font-size: 25px; font-weight: 700;}
.faq_list summary::after {     position: absolute; right: 10px; top: 50%; transform: translateY(-50%); content: ''; width: 30px; height: 30px; background: url(../images/common/icon_arrow.svg) no-repeat center / contain; transition: .4s;}
.faq_list details[open] summary { color:var(--hgd-title);}
.faq_list details[open] summary::after { transform: rotate(180deg) translateY(50%);}
.faq_list details[open]::before{ height: 100%;}
.faq_list details { position: relative;}
/* .faq_list details::before { content:''; position: absolute; left:0; top:0; height: 0; z-index: 10; border-right:10px solid var(--hgd-title); transition: height .5s; } */
.faq_list details > div {border-top: 1px dotted #dbdbdb; background: #f7f7fa; padding:30px; line-height: 1.6;}


/* 메일링 */
.mailing_wrap { padding: 50px; border-radius: 0 0 60px 0; background: var(--grayf7) url(../images/sub/ndff_logo05.png) no-repeat bottom right; background-size: 200px;}
.mailing_wrap h2 { text-align: center; }
.mailing_wrap h2 > span { font-family: 'Pretendard'; font-size: 1rem; font-weight: 400; color: #505050; margin-top: 20px;}
.mailing_wrap .mailing_conts { }

.table_mailing { width: 100%; font-size: 1rem; border-top: 2px solid #333333; text-align: center;}
.table_mailing thead th { padding: 15px 20px; color:#191919; background-color: #ffffff;}
.table_mailing tbody { border-top:1px solid #555555; border-bottom: 1px solid #555555; color:#505050;}
.table_mailing tbody tr ~ tr { border-top:1px solid #dbdbdb; }
.table_mailing tbody td { padding: 15px 19px; border-left: 1px solid #dbdbdb; line-height: 21.75px;background-color: #ffffff; }
.table_mailing tbody th { font-weight:normal;}
.table_mailing tbody th:first-child,
.table_mailing tbody td:first-child { border-left: none;}
.table_mailing th span { color: var(--hgd-alarm);}
.agree { position: relative; margin: 28px 0 0; padding: 20px 30px; /* height: 60px; line-height: 60px; */ border:1px solid #dbdbdb; background-color: #ffffff; }
.agree label span { color:var(--hgd-alarm);}
.agree a.view { position: absolute; right:30px; top:15px; width: 93px; height: 30px; border:1px solid #ddd; text-align: center; line-height: 30px; border-radius: 3px;}


/* Search */
.search_wrap { display: flex; align-items: center;}
/* .search_wrap * { margin: 0 5px;} */


/* input */
input[type="checkbox"] { position: absolute; left: -3000%;}
input[type="checkbox"] + label { font-size: 1rem; color:#191919; }
input[type="checkbox"] + label:before { content: ""; display: inline-block; width:20px; height:20px; border:1px solid #dbdbdb; margin: -2px 10px 0 0; background: #ffffff; vertical-align: middle; box-sizing: border-box; transition: all 0.3s;}
input[type="checkbox"]:checked + label:before { border: 7px solid #1fc9d3;}

/* Button */
.btn_search { display: inline-block; width: 170px; height: 43px; background: #191919; line-height: 43px; color:#fff; text-align: center; border-radius: 2px;}
.btn_basic { display: inline-block; padding: 0 20px; min-width: 50px; height: 43px; background: #ffffff; line-height: 43px; font-size: 1rem; color:#ffffff; text-align: center; border: 1px solid #767676; border-radius: 2px; background-color: #191919; box-sizing: border-box; transition: all 0.3s ease;}
.btn_basic:hover { color:#191919; background-color: #ffffff;}
.btnColor_gray { background-color: #767676;}

/* material symbol */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}