#header {z-index: 999; transition: 0.2s;}
#header .header-inner {max-width: 128rem}

#header .logo {max-width: 30rem}
#header .logo .img img {opacity: 1}
#header .logo .img img.active {opacity: 0}

#header .gnb {}
#header .gnb-list {width: 18.5rem}
#header .gnb-list > a {padding: 2.8rem 0}

#header .lnb {background: rgba(255,255,255,0.9); top: 100%; padding: 1rem 0; display: none}
#header .lnb li {}
#header .lnb li a {display: block; padding: 1rem 0;}
#header .lnb li:hover a {color: #3F8BD6}

#header:hover {background: rgba(255,255,255,0.9);}
#header:hover .logo .img img {opacity: 0}
#header:hover .logo .img img.active {opacity: 1}
#header:hover .gnb-list {color: #212121}
#header:hover .menu-icon img {filter: brightness(0);}

#header.drop {background: rgba(255,255,255,0.9)}
#header.drop .logo .img img {opacity: 0}
#header.drop .logo .img img.active {opacity: 1}
#header.drop .gnb-list {color: #212121}
#header.drop .menu-icon img {filter: brightness(0);}

@media all and (max-width: 800px){
    #header .header-inner {border-bottom: 1px solid rgba(112,112,112,0.3); padding: 3.5rem 0; justify-content: center;}

    #header .logo {width: 29.5rem;}

    #header .menu-icon {right: 4rem}
    #header .menu-icon img {max-width: 3.5rem}

    #header .mo-menu {display: none}
    #header .menu-bg {background: rgba(0,0,0,0.7);}
    #header .menu-cont {width: 95%; background: #fff; right: -100%; transition: 0.5s}
    #header .menu-cont.active {right: 0;}
    #header .menu-head {padding: 3.5rem 0; border-bottom: 1px solid #CCCCCC}
    #header .menu-head .menu-logo {width: 29.5rem;}
    #header .menu-head .cancel {max-width: 2.7rem}
    #header .menu-gnb {}
    #header .menu-gnb-list {border-bottom: 1px solid #CCCCCC}
    #header .gnb-inner {padding: 2.9rem 0}
    #header .gnb-inner .title {}
    #header .gnb-inner .gnb-icon {width: 3rem; height: 0.3rem; background: #3F8BD6; transition: 0.3s}
    #header .gnb-inner .gnb-icon::before {content: ''; display: block; position: absolute; width: 0.4rem; height: 3rem; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #3F8BD6; opacity: 0; transition: 0.3s;}
    #header .menu-lnb {padding: 4rem 0; display: none}
    #header .menu-lnb li + li {margin-top: 4rem}
    #header .menu-lnb li a {display: block;}
    #header .menu-footer {}
    #header .menu-footer .inner {padding-top: 5rem}
    #header .menu-footer .link {opacity: 0.7; margin-bottom: 8rem; line-height: 2.8rem}
    #header .menu-footer .link li + li {padding-top: 3rem}
    #header .menu-footer .link li a {}
    #header .menu-footer .info {opacity: 0.7;}
    #header .menu-footer .info > div + div {padding-top: 2.4rem}
    #header .menu-footer .info > div span {width: 20%}

    #header .gnb-inner.active .gnb-icon {transform: rotate(90deg);}
    #header .gnb-inner.active .gnb-icon::before {opacity: 1;}

}

#footer {}
#footer .footer-inner {padding: 4.2rem 0}
#footer .ft-cont {gap: 2rem}
#footer .ft-logo {max-width: 14rem; opacity: 0.3}
#footer .ft-area {}
#footer .ft-link {opacity: 0.7; padding-bottom: 1rem}
#footer .ft-link li + li {padding-left: 1rem; margin-left: 1rem; border-left: 2px solid #989898}
#footer .ft-info {padding-bottom: 0.8rem}
#footer .ft-info-option {opacity: 0.5;}
#footer .ft-info-option + .ft-info-option {padding-left: 1rem; margin-left: 1rem; border-left: 2px solid #989898}
#footer .ft-info-option span {margin-right: 1rem}
#footer .ft-info-option i {opacity: 0.7; font-style: normal;}
#footer .ft-copy {opacity: 0.3}

@media all and (max-width: 800px){
    #footer .footer-inner {padding: 5rem 0}
    #footer .ft-cont {flex-direction: column; align-items: center; gap: 5rem}
    #footer .ft-logo {max-width: 41.6rem}
    #footer .ft-link {flex-direction: column; font-size: 2.4rem; text-align: center; padding-bottom: 5rem}
    #footer .ft-link li + li {border-left: 0; padding-left: 0; margin-left: 0; margin-top: 1.5rem}
    #footer .ft-info {flex-wrap: wrap; font-size: 2.4rem}
    #footer .ft-info-option {width: 100%; text-align: center;}
    #footer .ft-info-option + .ft-info-option {width: 33.3%; width: 33.3%; padding-left: 0; margin-left: 0; border: 0; padding-top: 3.3rem}
    #footer .ft-info-option span {display: block; padding-bottom: 0.6rem;}
    #footer .ft-copy {font-size: 2.4rem; text-align: center; margin-top: 7rem}
}


#up-btn {top: 88%; right: 4rem; width: 6rem; height: 6rem; border-radius: 5px; overflow: hidden; z-index: 999}
#up-btn a {height: 100%}








    .