@charset "UTF-8";

#header{position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; z-index: 99999;}
#header.on{border-bottom: 1px solid var(--gray-05, #E4E4E4);}
#header .inner{max-width: 1440px; width: 100%; padding: 20px 208px; display: flex; align-items: center;}
#header .inner .logo{width: 117px;}
#header .inner .logo  a{display: inline-block; height: 100%;}
#header .inner .logo  a > svg{width: 100%; height: 100%;}
.gnb-wrap{display: flex; flex: 1; max-height: 100%; justify-content: space-between;}
.gnb{margin-left: auto; display: flex; align-items: center;}
.gnb .gnb-menu > a{padding: 10px 16px; font-size: 18px; line-height: 24px; font-weight: 700; transition: color .3s; color: var(--primary);}
.gnb .gnb-menu > a:hover{color: var(--hover, #707070);}
.gnb-btn-wrap{display: none;}
#header.fp-section.fp-table, #header .fp-tableCell {height:auto !important; width: 100%;} 
/* footer */
#footer{width: 100%; display: flex; align-items: center; border-top: 1px solid #E4E4E4; background-color: #fff;}
#footer > div{max-width: 1440px; width: 100%; margin: 0 auto;}
#footer.fp-section.fp-table, #footer .fp-tableCell {height:auto !important; width: 100%;} 
#footer .inner{height: 100%; padding: 80px 120px; display: flex; flex-direction: column; gap: 60px;}
#footer .inner .footer-top{display: flex; display: -webkit-flex; gap: 20px; flex-direction: column; align-items: flex-start;}
#footer .inner .footer-top .link-app{display: flex; display: -webkit-flex; gap: 16px; flex-wrap: wrap; }
#footer .inner .footer-top .link-app .link > a{display: flex; display: -webkit-flex; gap: 8px; align-items: center; line-height: 1; font-size: 16px; font-weight: 500; color: #232323;}
#footer .inner .address{display: flex; display: -webkit-flex; flex-direction: column; gap: 20px;}
#footer .inner .btn-wrap{display: flex; gap: 16px;}
#footer .inner .btn-wrap > a{color: #232323; font-size: 16px; font-weight: 700; line-height: normal;}
#footer .inner .address > p{display: flex; flex-direction: column; font-size: 16px; color: #000; line-height: 28px; white-space: pre-line; letter-spacing: - 0.5px;}
#footer .inner .address > p .company{font-weight: 700;}
/* footer */
@media screen and (max-width:1024px) {
    #header .inner{padding: 20px 104px;}
    #footer .inner{padding: 80px 20px;}
} 
@media screen and (max-width: 768px) {
    #header .inner{padding: 20px; flex-direction: column; align-items: flex-start;}
    #header .inner .logo{height: 26px;}
    .gnb-btn-wrap{display: flex; align-items: center; gap: 12px; position: absolute; right: 20px; top: 22px;}
    #header .m-gnb-btn, #header .lang-btn{display: flex; align-items: center; width: 24px; height: 24px; padding: 6px 3px; flex-shrink: 0;}
    #header .m-gnb-btn .open{display: flex; width: 100%; height: 100%;}
    #header .m-gnb-btn .x-mark{display: none;}
    #header .m-gnb-btn.on .open{display: none;}
    #header .m-gnb-btn.on .x-mark{display: flex; width: 18px; height: 18px;}
    #header .gnb-wrap{width: 100%;}
    #header .gnb{flex-direction: column; align-items: flex-start; margin-left: 0; width: 100%; height: 0; overflow-y: hidden; transition: all .5s;}
    #header .gnb.on{height: 180px; margin-top: 20px;}
    .gnb .gnb-menu{width: 100%;}
    .gnb .gnb-menu > a{padding: 18px 20px; display: flex; width: 100%;}
    #footer > div .inner{padding: 63px 0px;}
}
@media screen and (max-width: 480px) {
    /* #header .inner{padding: 20px; flex-direction: column; align-items: flex-start;}
    .gnb-btn-wrap{display: flex; align-items: center; gap: 12px; position: absolute; right: 20px; top: 22px;}
    #header .m-gnb-btn, #header .lang-btn{display: flex; align-items: center; width: 24px; height: 24px; padding: 6px 3px; flex-shrink: 0;}
    #header .m-gnb-btn .open{display: flex; width: 100%; height: 100%;}
    #header .m-gnb-btn .x-mark{display: none;}
    #header .m-gnb-btn.on .open{display: none;}
    #header .m-gnb-btn.on .x-mark{display: flex; width: 18px; height: 18px;}
    #header .gnb-wrap{width: 100%;}
    #header .gnb{flex-direction: column; align-items: flex-start; margin-left: 0; width: 100%; height: 0; overflow-y: hidden; transition: all .5s;}
    #header .gnb.on{height: 120px;}
    .gnb .gnb-menu{width: 100%;}
    .gnb .gnb-menu > a{padding: 18px 20px; display: flex; width: 100%;}
    #header .gnb.on{height: 120px; margin-top: 20px;} */
    /* footer */
    #footer > div .inner .address > p{word-break: break-all;}
    /* footer */
}