@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Nanum+Myeongjo:wght@400;700&display=swap');
@font-face {
  font-family: 'Arita-buri-SemiBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-buri-SemiBold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

html {font-size: 10px;}
*, *:before, *:after {padding: 0; margin: 0; box-sizing: border-box;}
header,footer,nav,section,article,aside {display: block;}
body {font-family: 'Noto Sans KR', 'Lato', sans-serif; font-size: 1.5rem; line-height: 1.6; color: #222; overflow-x: hidden;}
/* h1 {font-size: 3rem;}
h2 {font-size: 2.25rem;}
h3 {font-size: 1.8rem;}
h4 {font-size: 1.5rem;} */
ol,ul {list-style-type: none;}
p {margin: 1em 0;}
img {border: 0;  vertical-align: top;}
a {text-decoration: none; color: #222;}
/* a:hover {color: #4cb848;} */
button {border: 0; background-color: transparent;}



/* 공용클래스 */
.wrap {width: 96%; max-width:1800px; margin: auto;}
.wrap2 {width: 96%; max-width:870px; margin: auto;}
.clearfix:after {content: ''; display: block; clear: both;}
.blind {position: absolute; left: -9999em;}
.ltsp {letter-spacing: -1px;}
.center {text-align: center;}
.btn {border: 0; background-color: transparent;}
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

/* 글자 관련 */
.wh, .wh:hover, .wh a {color: #fff;}
.bk, .bk:hover, .bk a {color: #000 !important;}
.wgr {color: #99ca3b;}
.gr, .gr:hover, .gr a {color: #01652f;}
.nm {font-family: 'Nanum Myeongjo', 'Batang', serif;}
.arita {font-family: 'Arita-buri-SemiBold', 'Batang', serif;}

/* 스킵(바로가기) 메뉴 */
#skip a {
    position: absolute;
    left: 0;
    top: -100px;
    width: 100%;
    line-height: 48px;
    text-align: center;
    color: #fff;
    background-color: #fff;
    z-index: 9999;
    transition-property: top, background-color;
    transition-duration: 0.4s, 1s;
    transition-delay: 0.2s;
    transition-timing-function: ease-in-out;
  }
  #skip a:focus {
    top: 0;
    background-color: #4cb848;
  }

/* 헤더 영역 */
#cf-hd, #cf-hd * {transition: 0.4s linear;}
#cf-hd {position: fixed; left: 0; top: 0; width: 100%; z-index: 100; background-color: #fff;}
#cf-hd a {transition: none;}
#cf-hd.bg-change {background-color: #fff;}
#cf-hd.bg-change:before {/*회색라인*/ position: absolute; left: 0; top: 9rem;  content: ''; display: block; width: 100%; height: 0.1rem; background-color: #ccc;}
/* #cf-hd a:hover {color: #4cb848 !important;} */

.cf-logo {float: left; width: 16rem; margin-top: 2rem; margin-left: 12rem;}
.cf-logo img { width: 100%;}
.cf-logo a {display: block; width: 100%; height: 100%;}
.go-donation {float: left; font-size: 1.5rem;  margin: 0 4rem; text-align: center;}
.go-donation a {display: block; width: 12rem; height: 3.5rem; margin-top: 2.8rem; text-align: center; line-height: 3.5rem; font-size: 1.6rem; background-color: #066314; border-radius: 40px; color: #c2d82d; box-shadow: 0 3px 5px rgba(0,0,0,0.2);}
/* .go-donation a::before {content: ''; display: block; width: 100%; height: 100%; background-position: center top; background-size: cover; box-shadow: 0 3px 5px rgba(0,0,0,0.2);} */
.hd-menu {position: static; float: right; width: auto; background-color: transparent;}
.hd-menu > div {float: left; margin-top: 2.5rem;}
.hd-menu a {display: inline-block;}
.util-menu {font-size: 1.3rem;}
.util-menu a {margin: 0 0.5rem; padding: 0; border: 0; border-radius: 2rem; line-height: 3.8rem;}
.donation-rep {margin-right: 14rem; padding-left: 1.5rem; line-height: 3rem; font-size: 1.5rem; background-color: #e7e7e7; border-radius: 40px;} 
.donation-rep a {display: block; width: 11rem; height: 3.5rem; line-height: 3.5rem;  color: #054311; font-size: 1.3rem; font-weight: 500;}
.donation-rep a img {padding-top: 1.1rem; padding-left: 0.5rem;}

/* gnb 영역 */
#cf-gnb {float: left; width: auto; height: auto; padding-left: 8rem; background-color: transparent;; overflow: auto; z-index: 100;}
.wh-bg {position: absolute; left: 0; top: 15rem; background-color: #fff; width: 100%; height: 0; z-index: -1; box-shadow: 0 3px 10px rgba(0,0,0,0.05);}
.gr-bg {display: none; position: absolute; left: 0; top: 9rem; content: ''; width: 100%; height: 6rem; background-color: #e6efe7; box-shadow: inset 0 0 10px rgba(3,78,0,0.15);}
#cf-gnb a {display: block;}
#cf-gnb ol {}
#cf-gnb .depth1 {float: left; text-align: center;}
.depth1 a {padding: 0;}
.depth1 > a {position: relative; padding: 0 4rem; font-size: 1.8rem; font-weight: 500; line-height: 9rem; }
.depth1 > a:after {display: none;}
.depth1.on > a {color: #4cb848 !important;}
.depth1.on> a:after {/*연두색 라인*/ display: block; position: absolute; left: 0; bottom: -0.1rem; width: 100%; height: 0.3rem; background-color: #4cb848; transform: none; border: 0;}
.sub-wrap { position: absolute; left: 0; top: 9rem; width: 100%; height: 0; overflow: hidden; transition: 0.3s;}
.depth2-wrap {display: none; position: absolute; left: 50%; top: 0;}
.sub1 {width: 96rem; margin-left: -48rem;}
.sub2 {width: 91.3rem; margin-left: -46rem;}
.sub3 {width: 151rem; margin-left: -76rem;}
.sub4 {width: 17rem; margin-left: -8.5rem;}
.sub5 {width: 85rem; margin-left: -43rem;}
.sub6 {width: 56.4rem; margin-left: -28.2rem;}
.depth2 {display: inline-block; vertical-align: top;}
.depth2 > a {display: block; padding: 0 5rem; line-height: 6rem; font-size: 1.6rem; font-weight: 500;}
.depth3 {padding: 1rem 0;}
.depth3 li {font-size: 1.5rem; line-height: 3.5rem;}
.depth3 li:first-child {padding-top: 1rem;}

/* #cf-main {display: none;} */


/* 푸터 */
#cf-ft {background-color: #fff;}
#cf-ft .wrap {max-width: 1400px; margin: auto;}
.ft-nav-wrap {padding: 5rem 0 3rem; text-align: center;}
.ft-logo {margin-bottom: 4rem;}
.ft-nav-wrap ul {margin-bottom: 1rem;}
.ft-nav-wrap ul li {float: left;}
/* .ft-nav-wrap ul li:after, .ft-info > dd:after {float: right; margin: 0.2rem 1rem; content: ''; display: block;  width: 0.1rem; height: 1.1rem; background-color: #fff; opacity: 0.25;} */
/* .ft-nav-wrap ul li:last-child:after, .ft-info > dd:last-of-type:after, .ft-info > dd:nth-of-type(2):after {display: none;}  */
.ft-nav1 {float: left; margin-top: 1.4rem;}
.ft-nav1 li {padding: 0 3rem; border-right: 1px solid #ddd; font-size: 1.8rem; line-height: 1;}
.ft-nav1 li:last-child {border: 0;}
.ft-nav2 {float: right;}
.ft-nav2 li {margin: 0.5rem;}
.ft-info-wrap {padding: 5rem 0;  background-color: #f2f2f2;}
.ft-info-wrap span {font-weight: 700;}
.ft-info-wrap .txt-big1 {font-size: 3rem;}
.ft-info-wrap .txt-big2 {font-size: 6rem; color: #39943a;}
.ft-info {padding-top: 3rem; margin-top: 3rem;}
.ft-info dt, .ft-info dd {float: left; line-height: 1; margin: 0 0 1.2rem;}
.ft-info dt:after {content: ':'; padding: 0 0.5rem;}
.ft-info dd:after {content: ''; display: block; float: right; width: 1px; height: 1.3rem;  background-color: #ccc; margin: 0 1rem; margin-top: 0.2rem;}
.ft-info .no-line:after {display: none;}
.ft-info-addr {clear: both;}
.copyright {margin-top: 1rem;}
#cf-main #main-footer {padding: 0;}
#cf-main #main-footer .fp-tableCell {padding: 0;}
.copyright {font-size: 1.3rem; line-height: 5;}
.use-portfolio {width: 70rem; font-size: 1.3rem; color: #055f34; border-top: 1px solid #055f34; line-height: 4;}


@media screen and (max-width: 1439px) {
  .wrap {width: 1280px}
}