/* PC Header */
header {
    width: 100%;
    height: 120px;
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
}
header .layout-wide {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
h1.logo {
    width: 163px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
header .logo .logo-fixed {
    display: none;
}
.gnb ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--space-60);
}
.gnb ul > li > a {
    color: var(--color-white);
    font-size: var(--font-18);
    font-weight: var(--fw-bold);
}
.gnb ul > li.on > a,
.gnb ul > li > a:hover {
    color: var(--color-primary-light);
}
header.navbar-fixed-top {
    width: 100%;
    height: 70px;
    position: fixed !important;
    background-color: rgba(236, 246, 235, 0.80);
    backdrop-filter: blur(5px);
    z-index: 9996;
}
header.navbar-fixed-top .logo .logo-normal {
    display: none;
}
header.navbar-fixed-top .logo .logo-fixed {
    display: block;
    width: 130px;
}
header.navbar-fixed-top .gnb ul > li > a {
    color: var(--color-basic);
    font-size: var(--font-16);
}
header.navbar-fixed-top .gnb ul {
    column-gap: var(--space-40);
}
header.navbar-fixed-top .gnb ul > li.on > a,
header.navbar-fixed-top .gnb ul > li > a:hover {
    color: var(--color-primary);
}
    /*  Header 미디어쿼리 */
    @media all and (max-width: 1200px) {
        header,
        header.navbar-fixed-top {
            height: 80px;
        }
        h1.logo,
        header.navbar-fixed-top .logo {
            width: 120px;
        }
        /* .gnb li a {
            font-size: var(--font-16);
        } */
    }
    @media all and (max-width: 1000px) {
        header,
        header.navbar-fixed-top {
            height: 70px;
        }
        .gnb ul {
            column-gap: var(--space-30);
        }
    }
    @media all and (max-width: 640px) {
        h1.logo,
        header.navbar-fixed-top .logo {
            width: 100px;
        }
        header,
        header.navbar-fixed-top {
            height: auto;
            padding: 20px 0 10px 
        }
        header .header-btn.mobile a svg {
            width: 18px;
        }
        header .layout-wide {
            flex-direction: column;
            align-items: center;
        }
        .gnb {
            margin-top: 15px
        }
        .gnb ul {
            column-gap: var(--space-30);
        }
        .gnb ul > li > a {
            font-size: var(--font-16);
        }
    }  
    @media all and (max-width: 320px) {
        .gnb ul {
            column-gap: var(--space-20);
        }
        .gnb ul > li > a{
            font-size: var(--font-15);
        }
    }

/* footer */
footer {
    background-color: var(--color-basic);
    color: var(--color-white);
}
footer .footer-logo {
    flex: 2
}
footer .footer-logo a {
    display: block;
    width: clamp(100px, calc(160 / var(--inner) * 100vw), 160px);
}
footer .footer-logo img {
    width: 100%;
}
footer .footer-inner {
    flex: 4;
    font-size: var(--font-16);
}
footer .footer-info .footer-company {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    margin-bottom: var(--space-10);
}
footer .footer-info .footer-info-list {
    grid-template-columns: repeat(2, auto);
}
footer .footer-info .footer-info-list,
footer .footer-nav .sitemap {
    gap: var(--space-20) var(--space-60);
}
footer .footer-info-list .label {
    white-space: nowrap;
    font-weight: var(--fw-bold);
}
footer .footer-info .footer-info-list .value {
    color: #B4B4B4;
    margin-left: var(--space-5)
}
footer .footer-info .footer-info-list .value a:hover {
    color: var(--color-primary);
}
footer .footer-nav .sitemap {
    text-align: left;
    grid-template-columns: repeat(3, auto);
}
footer .footer-nav .sitemap li:last-child {
    color: #B4B4B4
} 
footer .footer-nav .sitemap li a {
    white-space: nowrap;
    transition: var(--transition);
}
footer .footer-nav .sitemap li a:hover,
footer .footer-nav .sitemap li.on a {
    color: var(--color-primary-light)
}
footer .copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: var(--space-20) 0;
    text-align: center;
}
footer .copyright {
    color: rgba(180, 180, 180, 0.7);
}
    @media all and (max-width: 1200px) {
        footer .footer-logo {
            flex: 1
        }
    }
    @media all and (max-width: 1000px) {
        footer .footer-wrap {
            row-gap: 40px;
        }
        footer .footer-logo,
        footer .footer-inner {
            flex: 100%;
        }
        footer .footer-inner  {
            column-gap: 30px
        }
        footer .footer-info {
            flex: 2
        }
        footer .footer-nav {
            flex: 1
        }
    }
    @media all and (max-width: 640px) {
        footer .footer-inner {
            flex-wrap: wrap;
        }
        footer .footer-info,
        footer .footer-nav {
            flex: 100%;
        }
        footer .footer-info {
            margin-bottom: 30px
        }
        footer .footer-info .footer-info-list {
            grid-template-columns: repeat(1, auto);
        }
    }