/* PC Header */
header {
    width: 100%;
    height: clamp(60px, calc(100 / var(--inner) * 100vw), 100px);
    position: absolute;
    top: 0;
    left:0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
}

/* PC Header */
header .layout-wide {
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header h1.logo {
    width: clamp(110px, calc(168 / var(--inner) * 100vw), 168px);
    transition: var(--transition);
}
header h1.logo a img {
    width: 100%;
}
header h1.logo.main-header-logo {
    display: none;
}
header h1.logo.header-logo {
    display: block;
}
header.main-header h1.logo.main-header-logo {
    display: block;
}
header.main-header h1.logo.header-logo {
    display: none;
}
header.main-header h1.logo .top-logo {
    display: block;
}
header.main-header h1.logo .fixed-logo {
    display: none;
}
header .gnb ul.navbar-nav {
    display: flex;
    gap: 0 var(--space-60);
}
header .gnb ul.navbar-nav > li.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .gnb ul.navbar-nav > li.nav-item > a.nav-link {
    position: relative;
    text-align: center;
    transition: var(--transition);
    font-size: var(--font-18);
    font-weight: var(--fw-semibold);
    font-family: var(--fm-en);
}
header.main-header .gnb ul.navbar-nav > li.nav-item > a.nav-link  {
    color: var(--color-white)
}
header .gnb ul.navbar-nav > li.nav-item.on > a.nav-link,
header .gnb ul.navbar-nav > li.nav-item a.nav-link:hover {
    color: var(--color-primary);
    font-weight: var(--fw-bold);
}
header .gnb ul.navbar-nav > li.nav-item > a.nav-link::before {
    content: "";
    position: absolute;
    width:100%;
    height:2px;
    bottom: -4px;
    left:0;
    right:0;
    margin:0 auto;
    background-color: var(--color-primary);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -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 .gnb ul.navbar-nav > li.nav-item > a.nav-link:hover::before,
header .gnb ul.navbar-nav > li.nav-item.on > a.nav-link::before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

/* Header fixed */
header.navbar-fixed-top {
    width: 100%;
    height: 70px;
    position: fixed !important;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.06);
    z-index: 9996;
}
header.navbar-fixed-top h1.logo {
    width: clamp(100px, calc(140 / var(--inner) * 100vw), 140px);
}
header.navbar-fixed-top h1.logo .top-logo {
    display: none;
}
header.navbar-fixed-top h1.logo .fixed-logo {
    display: block;
}
header.navbar-fixed-top .gnb ul.navbar-nav {
    gap: 0 var(--space-50);
}
header.navbar-fixed-top .gnb ul.navbar-nav > li > a.nav-link {
    font-size: var(--font-16);
    font-weight: var(--fw-medium);
}
header.main-header.navbar-fixed-top .gnb ul.navbar-nav > li.nav-item > a.nav-link {
    color: var(--color-basic);
}
header.navbar-fixed-top .gnb ul.navbar-nav > li.on > a.nav-link,
header.navbar-fixed-top .gnb ul.navbar-nav > li a.nav-link:hover,
header.navbar-fixed-top.navbar-fixed-top .gnb ul.navbar-nav > li.on > a.nav-link,
header.navbar-fixed-top.navbar-fixed-top .gnb ul.navbar-nav > li a.nav-link:hover {
    color: var(--color-primary);
}
header.navbar-fixed-top .gnb ul.navbar-nav > li > a.nav-link::before {
    background-color: var(--color-primary);
}
header.navbar-fixed-top .dropdown-menu {
    margin-top: 20px;
}
header.navbar-fixed-top .gnb ul.navbar-nav > li.nav-item > a.nav-link::before {
    bottom: -22px;
}
.pc-header {
    display: block;
    height: 100%;
}
.mobile-header {
    display: none;
    height: 100%;
}
    /*  Header 미디어쿼리 */
    @media all and (max-width: 1200px) {
        header {
            height: 80px;
        }
        header.navbar-fixed-top {
            height: 65px;
        }
    }
    @media all and (max-width: 1000px) {
        .pc-header {
            display: none;
        }
        .mobile-header {
            display: block;
        }
        header {
            height: 70px;
        }
        header.navbar-fixed-top {
            height: 60px;
        }
        header h1.logo {
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
        }
        /* Fuull Menu*/
        .fullmenu {
            overflow: hidden;
        }
        .fullmenu .aside-section {
            overflow: hidden;
            z-index: 999999;
            position: fixed;
            top: 0;
            bottom: 0;
            height: 100vh;
        }
        .fullmenu .aside-left {
            display: block;
            width: 30%;
            left: 0;
            background: center / cover url("/public/images/fullmenu.jpg") no-repeat;
            -webkit-transform: translateY(-110%);
            -moz-transform: translateY(-110%);
            -ms-transform: translateY(-110%);
            -o-transform: translateY(-110%);
            transform: translateY(-110%);
            transition: transform 0.4s ease-in-out;
        }
        .fullmenu .aside-right {
            width: 70%;
            right: 0;
            background-color: #00040F;
            -webkit-transform: translateX(110%);
            -moz-transform: translateX(110%);
            -ms-transform: translateX(110%);
            -o-transform: translateX(110%);
            transform: translateX(110%);
            transition: transform 0.4s ease-in-out;
            display: flex;
            align-items: center;
            padding: 0 3.5% 0 5.5%
        }
        .fullmenu input[type="checkbox"] {
            display: none;
        }
        .fullmenu label {
            cursor: pointer;
            z-index: 10000000;
            position: absolute;
            top: 50%;
            right: 5%;
            transform: translateY(-50%);
            display: inline-block;
            background-color: transparent;
        }
        .fullmenu .bar {
            display: block;
            border: 1px solid var(--color-basic);
            width: 25px;
            transition: transform 0.4s ease-in, width 0.4s ease-in;
        }
        .fullmenu .bar:hover {
            background-color: var(--color-primary);
        }
        .fullmenu .bar.top {
            margin-bottom: var(--space-5);
        }
        .fullmenu .bar.bottom {
            width: 17px;
        }
        .fullmenu input[type="checkbox"]:checked ~ label .bar {
            border-color: var(--color-white);
        }
        .fullmenu input[type="checkbox"]:checked ~ .fullmenu-wrap .aside-left {
            transform: translateY(0%);
        }
        .fullmenu input[type="checkbox"]:checked ~ .fullmenu-wrap .aside-right {
            transform: translateX(0%);
        }
        .fullmenu input[type="checkbox"]:checked ~ label .top {
            -webkit-transform: translateY(4px) rotateZ(45deg);
            -moz-transform: translateY(4px) rotateZ(45deg);
            -ms-transform: translateY(4px) rotateZ(45deg);
            -o-transform: translateY(4px) rotateZ(45deg);
            transform: translateY(4px) rotateZ(45deg);
        }
        .fullmenu input[type="checkbox"]:checked ~ label .bottom {
            width: 25px;
            -webkit-transform: translateY(-3px) rotateZ(-45deg);
            -moz-transform: translateY(-3px) rotateZ(-45deg);
            -ms-transform: translateY(-3px) rotateZ(-45deg);
            -o-transform: translateY(-3px) rotateZ(-45deg);
            transform: translateY(-3px) rotateZ(-45deg);
        }
        .fullmenu nav {
            height: 90%;
            overflow-y: auto;
        }
        .fullmenu nav ul.depth1 {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .fullmenu nav ul.depth1 > li {
            margin-bottom: var(--space-25);
        }
        .fullmenu nav ul.depth1 > li > a {
            position: relative;
            font-size: var(--font-22);
            font-weight: var(--fw-bold);
            color: var(--color-white);
            font-family: var(--fm-en);
        }
        .fullmenu nav ul.depth2 {
            display: flex;
            flex-direction: column;
            margin-top: var(--space-12);
        }
        .fullmenu nav ul.depth2 > li {
            margin-bottom: var(--space-12)
        }
        .fullmenu nav ul.depth2 > li > a {
            position: relative;
            font-size: var(--font-16);
            color: var(--color-white);
            opacity: 0.8;
        }
        .fullmenu nav ul.depth2 > li:not(:last-child) {
            margin-right: var(--space-10)
        }
        .fullmenu nav ul.depth2 > li > a::after {
            content: "";
            position: absolute;
            bottom: 0;
            background-color: var(--color-primary);
            left: 0;
            right: 0;
            height: 1px;
        }
        .fullmenu nav ul.depth2 > li > a::before {
            content: "";
            position: absolute;
            bottom: 0;
            background-color: #00040F;
            left: 0;
            height: 1px;
            z-index: 1;
            width: 100%;
            -webkit-transition: transform 0.4s ease-in-out;
            -o-transition: transform 0.4s ease-in-out;
            transition: transform 0.4s ease-in-out;
        }
        .fullmenu nav ul.depth2 > li > a:hover:before,
        .fullmenu nav ul.depth2 > li.on > a:before {
            -webkit-transform: translateX(100%);
            -moz-transform: translateX(100%);
            -ms-transform: translateX(100%);
            -o-transform: translateX(100%);
            transform: translateX(100%);
        }
        .fullmenu nav ul.depth2 > li > a:hover,
        .fullmenu nav ul.depth2 > li.on > a {
            color: var(--color-primary);
            font-weight: var(--fw-bold);
            opacity: 1;
        }
        header.main-header .fullmenu .bar {
            border: 1px solid var(--color-white);
        }
        header.main-header.navbar-fixed-top .fullmenu .bar {
            border: 1px solid var(--color-basic);
        }
    }
    @media all and (max-width: 640px) {
        header.navbar-fixed-top {
            height: 50px
        }
        header.navbar-fixed-top h1.logo {
            width: 90px;
        }
        .fullmenu nav ul.depth1 {
            justify-content: flex-start;
        }
    }



/* footer */
footer .footer-logo a {
    display: block;
    width: clamp(100px, calc(168 / var(--inner) * 100vw), 168px);
}
footer .footer-logo img {
    width: 100%;
}
footer .footer-left {
    border-right: var(--border-gray-e1);
}
footer .footer-cs {
    gap: var(--space-150);
}
footer .footer-cs .icon {
    width: clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
}
footer .footer-info ul {
    gap: var(--space-10) var(--space-30);
}
footer .footer-info li {
    position: relative;
}
footer .sitemap li {
    text-transform: capitalize;
}
footer .footer-right .inner {
    width: 80%;
    max-width: 540px;
    height: 100%;
}
footer .footer-right .fb-contact,
footer .footer-right .fb-btn a {
    padding: var(--space-22) var(--space-30)
}
footer .footer-right .fb-contact img {
    width: clamp(15px, calc(20 / var(--inner) * 100vw), 20px);
}
footer .footer-right .fb-contact:hover {
    color: var(--color-white);
    background-color: var(--color-basic);
}
footer .footer-right .fb-btn a {
    background-color: var(--color-gray-e1);
}
footer .footer-right .fb-btn a img {
    width: clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
}
footer .copyright {
    text-align: center;
    color: #9E9E9E;
    padding: var(--space-30) 0;
    border-top: var(--border-gray-e1);
}
footer a:hover {
    color: var(--color-primary);
}
    @media all and (max-width: 1000px) {
        footer .footer-right .inner-top p br {
            display: none;
        }
        footer .sitemap {
            flex-wrap: wrap;
            row-gap: var(--space-10);
        }
        footer .footer-cs {
            border-right: 0;
            gap: var(--space-50);
        }
        footer .footer-cs strong a {
            white-space: nowrap;
        }
    }
    @media all and (max-width: 640px) {
        footer .footer-wrap {
            grid-template-columns: repeat(1, 1fr);
        }
        footer .footer-left {
            border-right: 0;
            padding-right: 0
        }
        footer .footer-cs {
            border-right: 0;
            gap: var(--space-70);
        }
        footer .sitemap {
            flex-wrap: wrap;
            row-gap: var(--space-10);
        }
        footer .footer-right {
            margin-top: 30px;
        }
        footer .footer-right .inner {
            width: 100%
        }
    }