#header {z-index: 9999}

.pc_header {background: transparent; transition: 0.4s}
.pc_header::before {content: ''; display: block; position: absolute; width: 100%; background: #fff; height: 30rem; top: 100%; display: none}
.pc_header .inner {max-width: 152rem;}
.pc_header .logo {width: 12rem}
.pc_header .logo img {opacity: 1}
.pc_header .logo img.on {opacity: 0}
.pc_header .gnb {margin-left: 14%;}
.pc_header .gnbLst {width: 18.6rem;}
.pc_header .gnbLst > a {color: #fff; display: block; padding: 4rem 0; transition: 0.3s}
.pc_header .lnb {height: 30rem; padding-top: 2rem; display: none;}
.pc_header .lnbLst {}
.pc_header .lnbLst a {color: #535353; display: block; padding: 1.2rem 0 1.2rem 3.2rem}
.pc_header .menuBtn {margin-left: auto;}

.pc_header .gnbLst:hover::after {content: ''; display: block; position: absolute; width: 100%; height: 0.5rem; background: #53A74A; top: 0; left: 0;}
.pc_header .gnbLst:hover .lnb {background: #F2F4F5;}
.pc_header .lnbLst a:hover {background: #53A74A; color: #fff}

.pc_header.hover {background: #fff;}
.pc_header.hover::after {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #D5D5D5; bottom: 0;}
.pc_header.hover::before {display: block;}
.pc_header.hover .logo img {opacity: 0}
.pc_header.hover .logo img.on {opacity: 1}
.pc_header.hover .gnbLst > a {color: #000;}
.pc_header.hover .lnb {display: block;}
.pc_header.hover .menuBtn {filter: brightness(0);}

.pc_header.active {background: #fff}
.pc_header.active::after {content: ''; display: block; position: absolute; width: 100%; height: 1px; background: #D5D5D5; bottom: 0;}
.pc_header.active .logo img {opacity: 0}
.pc_header.active .logo img.on {opacity: 1}
.pc_header.active .gnbLst > a {color: #000; padding: 3rem; transition: 0.3s}
.pc_header.active .menuBtn {filter: brightness(0);}

@media all and (max-width: 920px){
    .mo_header {}
    .mo_header .moHead {padding: 2rem 2rem 2rem 3.5rem;}
    .mo_header .moHead .logo {max-width: 18.75%;}
    .mo_header .moHead .logo img {opacity: 1;}
    .mo_header .moHead .logo img.on {opacity: 0;}
    .mo_header .moHead .menuBtn {width: 8%}
    .mo_header .moMenu {display: none;}
    .mo_header .moMenu .inner {}
    .mo_header .moMenu .menuTab {width: 32.5%; border-right: 0.4rem solid #F2F2F2;}
    .mo_header .moMenu .menuTab li {flex-grow: 1; color: #A9A9A9;}
    .mo_header .moMenu .menuTab li::before {content: ''; display: block; position: absolute; width: 100%; bottom: 0; height: 0.4rem; background: #F2F2F2;}
    .mo_header .moMenu .menuTab li.on {color: #76A35E; font-weight: bold}
    .mo_header .moMenu .menuTab li.on::before {background: #76A35E; height: 0.6rem;}
    .mo_header .moMenu .menuLst {display: none; width: 67.5%}
    .mo_header .moMenu .menuLst.on {display: block}
    .mo_header .moMenu .menuLst .lstInner {padding: 0 4rem;}
    .mo_header .moMenu .menuLst .lstInner ul {}
    .mo_header .moMenu .menuLst .lstInner li {border-bottom: 2px solid #E4E4E4;}
    .mo_header .moMenu .menuLst .lstInner li a {display: block; padding: 3rem 0;}

    .mo_header.active .moHead {background: #68A555;}
    .mo_header.active .moHead .logo img {opacity: 0;}
    .mo_header.active .moHead .logo img.on {opacity: 1;}
    .mo_header.on .moHead {background: #68A555;}
    .mo_header.on .moHead .logo img {opacity: 0;}
    .mo_header.on .moHead .logo img.on {opacity: 1;}


}


#footer {background: #3E3E3E}
#footer .inner {padding: 7.4rem 0; max-width: 134.2rem; gap: 10.8rem;}
#footer .ftLogo {width: 10.4rem;}
#footer .ftRight {color: #B4B4B4; flex-grow: 1;}
#footer .ftRight .ftInfoBox {gap: 5rem;}
#footer .ftRight .ftInfo {gap: 3rem;}
#footer .ftRight .ftInfo .infoTit {flex-grow: 1;}
#footer .ftRight .ftInfo .info {}
#footer .ftRight .ftInfo .info li {}
#footer .ftRight .ftInfo .info li + li {margin-top: 1rem;}
#footer .ftRight .ftInfo .info li b {margin-right: 1.4rem;}
#footer .ftRight .copy {padding-top: 3rem; margin-top: 3rem; border-top: 1px solid #646464;}

@media all and (max-width: 920px){
    #footer .inner {flex-direction: column; max-width: 80%; margin: 0 auto; padding: 5.5rem 0 6.4rem; gap: 4.7rem;}
    #footer .ftLogo {width: 12rem;}
    #footer .ftRight {width: 100%}
    #footer .ftRight .ftInfoBox {flex-direction: column;}
    #footer .ftRight .ftInfo .infoTit {flex-grow: 0; min-width: 9rem;}
    #footer .ftRight .ftInfo .info {}
}

















    .