header {
    width:100%;
    height:80px;
    background-color:#fff;
    border-bottom:1px solid #ededed;
    z-index:1004;
}

header .container {
    height:80px;
    display:flex;
    align-items:center;
}

header h1 a {
    display:block;
    width:102px;
    height:35px;
    background:url('/img/logo.svg') 50% 50% no-repeat;
    background-size:cover;
}

header li.lang {
    right:20px;
    top:50%;
    transform:translateY(-50%);
    z-index:1002;
}

header li.lang::before {
    content:'';
    display:block;
    width:49px;
    height:29px;
    background:url('/img/lang.svg') 50% 50% no-repeat;
    background-size:48px;
}

#gnb {
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto;
    height:100%;
    gap:24px;
}

#gnb li:not(.lang) > a {
    display:block;
    width:138px;
    height:80px;
    line-height:80px;
    text-align:center;
    font-size:20px;
    font-weight:500;
    color:#222;
}

#gnb li:not(.lang) > a:hover,
#gnb li:not(.lang) > a:active,
#gnb li:not(.lang) > a:focus,
#gnb li:not(.lang) > a.now {
    border-bottom:3px solid #7CBE2A;
}

header #gnb .lnblist {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:138px;
    z-index:1001;
    top:115px;
    min-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:all 0.4s ease;
}

header #gnb li.lang .lnblist {
    left:-52px;
    top:90px;
}

header:hover #gnb .lnblist,
header:active #gnb .lnblist,
header:focus #gnb .lnblist {
    min-height:200px;
    opacity:1;
    visibility:visible;
}

header #gnb .lnblist a {
    display:block;
    font-size:20px;
    color:#898989;
    padding:15px 0;
}

header #gnb .lnblist a:hover,
header #gnb .lnblist a:active,
header #gnb .lnblist a:focus {
    color:#7CBE2A;
}

header .lnbwall {
    top:80px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:0;
    background-color:rgba(255,255,255,0.95);
    z-index:1000;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:all 0.6s ease;
    box-shadow:0 4px 4px 0 rgba(0,4,10,0.1);
}

header:hover .lnbwall,
header:active .lnbwall,
header:focus .lnbwall {
    height:248px;
    opacity:1;
    visibility:visible;
    transition:all 0.2s ease;
}

header .lnbtxt {
    text-align:center;
    z-index:1001;
    top:130px;
    left:-40px;
    min-height:0;
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:all 0.4s ease;
}

header .lnbtxt p {
    font-size:20px;
    margin-bottom:20px;
}

header .lnbtxt span {
    font-size:15px;
    font-weight:300;
    color:#898989;
}

header:hover .lnbtxt,
header:active .lnbtxt,
header:focus .lnbtxt {
    min-height:200px;
    visibility:visible;
    opacity:1;
}

footer {
    padding:80px 0;
    background-color:#f8f8f8;
}

footer .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

footer .container .left {
    display:flex;
    align-items:center;
    gap:20px;
}

footer .container .logo {
    width:182px;
    height:91px;
    background:url('/img/logo_footer.svg') 50% 50% no-repeat;
    background-size:cover;
}

footer .container .company {
    font-size:17px;
    font-weight:300;
    line-height:160%;
    color:#333;
}

footer .container .txt {
    font-size:17px;
    line-height:160%;
    margin-bottom:16px;
    text-align:right;
    color:#333;
}

footer .container .nice-select {
    width:100%;
    border:1px solid #333;
    font-size:15px;
    font-weight:300;
    color:#333;
    background-color:transparent;
}

footer .container .nice-select .list {
    width:100%;
    margin-top:0;
    margin-bottom:4px;
    top:calc(-100% - 46px);
}

.floatmenu {
    position:absolute;
    right:130px;
    bottom:110px;
}

.floatmenu a {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}

.floatmenu a div {
    width:78px;
    height:78px;
    border-radius:50%;
}

.floatmenu a .round0 {
    background:#87C246 url('/img/float_qna.svg') 48% 50% no-repeat;
    background-size:38px;
}

.floatmenu a span {
    color:#87C246;
    font-size:15px;
}

.floatmenu a .round1 {
    background:#000 url('/img/float_arrow.svg') 50% 50% no-repeat;
    background-size:20px;
    margin-top:26px;
}

#burger {
    display:none;
}

@media all and (max-width:1729px) {
    .floatmenu {
        right:40px;
        bottom:45%;
    }
}

@media all and (max-width:1570px) {
    header .lnbtxt {
        left:20px;
    }

    .floatmenu a div {
        width:46px;
        height:46px;
    }

    .floatmenu a .round0 {
        background-size:22px;
    }

    .floatmenu a .round1 {
        background-size:12px;
        margin-top:10px;
    }

    .floatmenu a span {
        font-size:13px;
    }
}

@media all and (max-width:1175px) {
    header .lnbtxt {
        display:none;
    }
}

@media all and (max-width:1024px) {
    header, header .container {
        height:65px;
    }

    header.pos_re {
        position:fixed;
        top:0;
    }

    header li.lang {
        right:0;
    }

    body.active header {
        border-bottom:0;
    }

    h1 {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%, -50%);
    }

    #burger {
        position:absolute;
        display:block;
        cursor:pointer;
        width:28px;
        height:28px;
        right:20px;
    }

    #burger span {
        display:block;
        width:28px;
        height:3px;
        border-radius:2px;
        background-color:#7CBE2A;
        transition:all 0.2s ease;
        margin-bottom:8px;
        position:absolute;
        right:0;
    }

    #burger span:first-child {
        top:0;
    }

    #burger span:nth-child(2) {
        width:22px;
        height:3px;
        border-radius:2px;
        background-color:#7CBE2A;
        opacity:1;
        top:11px;
    }

    #burger span:nth-child(3) {
        margin-bottom:0;
        top:23px;
    }

    #burger.on span:first-child {
        transform:translateY(-50%) rotate(40deg);
        width:32px;
        top:50%;
    }

    #burger.on span:nth-child(3) {
        transform:translateY(-50%) rotate(-40deg);
        width:32px;
        top:50%;
    }

    #burger.on span:nth-child(2) {
        opacity:0;
    }

    header li.lang::before {
        display:none;
    }

    #gnb {
        flex-direction:column;
        position:absolute;
        top:65px;
        width:100%;
        height:calc(100vh - 65px);
        justify-content:flex-start;
        left:auto;
        right:-100%;
        align-items:start;
        overflow:auto;
        padding-top:60px;
        transition:all 0.2s ease;
    }

    #gnb::-webkit-scrollbar {
        width:1px;
        background-color:transparent;
    }
    
    #gnb::-webkit-scrollbar-thumb {
        height:17%;
        background-color:transparent;
    }
    
    #gnb::-webkit-scrollbar-track {
        background-color:transparent;
    }

    header #gnb .lnblist,
    header:hover #gnb .lnblist,
    header:active #gnb .lnblist,
    header:focus #gnb .lnblist {
        min-height:auto;
        top:0;
        opacity:1;
        visibility:visible;
        position:relative;
        z-index:1010;
    }

    header #gnb .lnblist {
        width:100%;
        align-items:start;
        text-align:left;
        padding-left:10px;
    }

    header .lnbwall {
        position:fixed;
        top:65px;
        left:auto;
        right:-100%;
        transform:translateX(0);
        height:calc(100vh - 65px);
        overflow:visible;
        opacity:1;
        visibility:visible;
        transition:all 0.6s ease;
    }

    header:hover .lnbwall,
    header:active .lnbwall,
    header:focus .lnbwall {
        height:calc(100vh - 65px);
    }

    #gnb li:not(.lang) > a:hover,
    #gnb li:not(.lang) > a:active,
    #gnb li:not(.lang) > a:focus,
    #gnb li:not(.lang) > a.now {
        border-bottom:0;
    }

    #gnb li:not(.lang) > a.now {
        color:#7CBE2A;
    }

    #gnb li:not(.lang) {
        z-index:1011;
        padding-left:56px;
        padding-bottom:20px;
        width:100%;
    }

    header #gnb.active li.lang.pos_ab {
        position:fixed;
        transform:none;
        width:100%;
        top:65px;
        background-color:#fff;
        z-index:1012;
    }

    header #gnb li.lang .lnblist {
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        width:100%;
        text-align:center;
    }

    header #gnb .lnblist a {
        display:inline-block;
        padding:15px 0 1px;
        font-size:16px;
    }

    header #gnb .lnblist a.on span {
        border-bottom:1px solid #6C6C6C;
        padding:0 12px;
    }

    #gnb li:not(.lang) > a {
        display:inline;
        line-height:110%;
    }

    #gnb.active {
        right:0;
        transition:all 0.2s ease;
    }

    header .lnbwall.active {
        right:0;
        transition:all 0.2s ease;
    }

    footer {
        padding:40px 0;
    }

    footer .container .logo {
        width:114px;
        height:56px;
    }

    footer .container .company,
    footer .container .txt {
        font-size:15px;
    }

    footer .container .nice-select {
        width:170px;
        height:30px;
        line-height:30px;
        font-size:15px;
    }

    footer .container .nice-select .list {
        top:calc(-100% - 56px);
    }

    footer .container .right {
        display:flex;
        flex-direction:column;
        align-items:end;
    }

    footer .container {
        flex-wrap:wrap;
        gap:20px;
    }

    footer .container .txt {
        text-align:left;
    }

}

@media all and (max-width:723px) {
    footer .container .right {
        align-items:start;
    }
}

@media all and (max-width:560px) {
    #gnb li:not(.lang) {
        padding-left:24px;
    }

    footer .container .left {
        flex-direction:column;
        width:100%;
        align-items:start;
        gap:30px;
    }

    footer .container .logo {
        margin:0 auto;
    }

    footer .container .company, footer .container .txt {
        font-size:12px;
    }

    .floatmenu {
        bottom:60px;
    }
}