/* PC Header */
header {
    z-index: 9999;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
header.main-header.header-bottom {
    position: fixed;
    bottom:0;
    top: auto;
}
header.sub-header {
    position: relative;
    bottom:auto;
}
h1.logo {
    width: 340px;
    height: 100%;
    left: 5%;
    position: absolute;
    margin: auto;
    display: flex;
    align-items: center;
    z-index: 9;
    -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;
}
h1.logo img {
    width: 100%;
}

.headRight {
    position: absolute;
    right:5%;
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 9;
}
.headRight .inner {   
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.headRight .eng {
    display: flex;
    align-items: center;
    font-weight: var(--fw-bold);
    font-size: var(--font-15)
}
.headRight .eng img {
    margin:1px var(--space-5) 0 0;
}
.headRight ul.headSns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    margin-left: 36px
}
.headRight ul.headSns li:not(:first-child) {
    margin-left: var(--space-20)
}
.headRight ul.headSns li img {
    margin-top: -4px;
}
.headRight ul.headSns::before {
    content:"";
    display: block;
    position: absolute;
    width: 1px;
    height: 15px;
    background-color: #231815;
    opacity: 0.16;
    left: -18px;
    top: 8px
}
/* 1차 메뉴 */
nav.navbar {
    height: 100%;
    display: flex;
    cursor: pointer;
}
nav ul.navbarNav {
    display: flex;
    justify-content: center;
    align-items: center; 
}
nav ul.navbarNav > li {
    margin: 0 var(--space-35);
    position: relative;
}
nav ul.navbarNav > li > a {
    font-size: var(--font-20);
    position: relative;
    display: flex;
    align-items: center;
    font-weight: var(--fw-bold);
}
nav ul.navbarNav > li.on > a,
nav ul.navbarNav > li > a:hover {
    font-weight: var(--fw-bold);
    color: var(--color-primary);
}  
nav ul.navbarNav > li > a span {
    position: relative;
}
nav ul.navbarNav > li > a span:after {
    content: "";
    position: absolute;
    bottom: -36px;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 1;
}
.main-header nav ul.navbarNav > li > a span:after {
    bottom: -10px
}
.main-header.navbar-fixed-top nav ul.navbarNav > li > a span:after,
.sub-header.navbar-fixed-top nav ul.navbarNav > li > a span:after {
    bottom: -26px;
}
nav ul.navbarNav > li.on > a span:after,
nav ul.navbarNav > li > a:hover span:after {
    transform: scaleX(1);
    background-color: var(--color-primary);
}
/* 전체 메뉴 */
.navDepth {
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: var(--color-white);
    position: absolute; 
    left:0;
    right:0;
    top: 100px;
    border-top: var(--border);
    box-shadow: 0 5px 5px 0px rgb(0 0 0 / 5%);
}
.main-header.navbar-fixed-top .navDepth,
.sub-header.navbar-fixed-top .navDepth {
    top: 80px
}
.navDepth .inner {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}
.navDepth .navDepthMenu {
    text-align: center;
    padding: 0 50px;
    border-right: var(--border);
}
.navDepth .navDepthMenu:last-of-type {
    border-right: 0
}
.navDepth .navDepthMenu strong {
    font-weight: var(--fw-bold);
    display: block;
    font-size: var(--font-16);
    margin-bottom: 20px
}
.navDepth .navDepthMenu strong.on,
.navDepth .gnb-depth > li.on a,
.navDepth .gnb-depth > li a:hover {
    color: var(--color-primary);
}
.navDepth .gnb-depth > li {
    margin-bottom: var(--space-10);
    font-size: var(--font-15);
    display: block;
    text-align: center;
    font-weight:var(--fw-normal);
}
.navDepth .gnb-depth > li:last-child {
    margin-bottom: 0;
}
/* Header fixed */
header.navbar-fixed-top {
    z-index: 5;
    width: 100%;
    height: 80px;
    position: fixed !important;
    top:0;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}
header.main-header.navbar-fixed-top {
    bottom:auto;
    top: 0;
}
    /*  Header 미디어쿼리 */
    @media all and (max-width: 1699px) {
        header {
            height: 80px;
        }
        header.main-header {
            position: relative;
            bottom: auto;
        }
        h1.logo {
            width: 280px;
        }
        nav ul.navbarNav > li > a {
            font-size: var(--font-18)
        }
        nav ul.navbarNav > li {
            margin: 0 var(--space-20);
        }
        .navDepth {
            top: 80px
        }
        .navDepth .inner {
            padding: 30px 0
        }
        nav ul.navbarNav > li > a span:after {
            bottom: -28px
        }
    }
    @media all and (max-width: 1299px) {
        h1.logo {
            width: 250px;
        }
        .headRight ul.headSns {
            margin-left: 30px;
        }
        .headRight ul.headSns::before {
            left: -15px;
        }
        .headRight ul.headSns li:not(:first-child) {
            margin-left: var(--space-15);
        }
    }
    @media all and (max-width: 1199px) {
        h1.logo {
            width: 280px;
        }
        .headRight {
            margin-right: 60px
        }
        .headRight ul.headSns {
            display: none;
        }
        nav.navbar {
            display: none;
        }
    }
    @media all and (max-width: 767px) {
        header,
        header.navbar-fixed-top {
            height: 70px;
        }
        h1.logo {
            width: 220px;
        }
        .headRight {
            margin-right: 50px;
        }
        .headRight .eng {
            font-size: 14px
        }
        .headRight .eng img {
            width: 15px;
        }
    }
    @media all and (max-width: 375px) {
        h1.logo {
            width: 200px;
        }
    }

/* Footer */
footer {
    position: relative;
    width: 100%;
    border: var(--border)
}
footer .layout {
    display: flex;
    justify-content: space-between;
}
footer .rowTop {
    padding: var(--space-65) 0 var(--space-70)
}
footer .rowTop .footerTitle {
    display: block;
    text-transform: uppercase;
    font-weight: var(--fw-black);
    font-size: var(--font-18);
    margin-bottom: var(--space-30)
}
footer .rowTop li {
    font-size: var(--font-16);
    font-weight: var(--fw-normal);
    margin-bottom: var(--space-10)
}
footer .rowTop li:last-child {
    margin-bottom: 0
}
footer .rowTop .flexLeft {
    width:30%
}
footer .rowTop .flexLeft img {
    width:100%;
    max-width: 367px;
}
footer .rowTop .flexRight {
    width: 65%;
    max-width: 886px;
    display: flex;
    justify-content: space-between
} 
footer .rowBottom {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--space-20) 0
}
footer .rowBottom copyright {
    font-size: var(--font-16);
    font-weight: var(--fw-light);
}
footer .rowBottom a:hover {
    color: var(--color-white);
    opacity: 0.7;
}
footer .rowBottom .sns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
footer .rowBottom .sns li {
    margin-left: 23px
}
footer .rowBottom .sns li a {
    display: flex;
}
    /* footer 미디어쿼리 */
    @media all and (max-width:1699px) {
        footer .rowTop .flexRight {
            width: 60%;
        }
    }
    @media all and (max-width:1199px) {
        footer .rowTop {
            padding: var(--space-60) 0 var(--space-50);
        }
        footer .rowTop .flexRight {
            width: 55%
        }
        footer .rowTop .flexRight .contactus {
            width: 65%
        }
    }
    @media all and (max-width:1023px) {
        footer .rowTop .layout {
            flex-direction: column;
        }
        footer .rowTop .flexRight {
            width: 100%;
        }
        footer .rowTop .flexLeft {
            width: 100%;
            margin-bottom: var(--space-35)
        }
        footer .rowTop .flexLeft img {
            max-width: 300px;
        }
    }
    @media all and (max-width:767px) {
        footer .layout {
            align-items: flex-start;
            flex-direction: column;
        }
        footer .rowTop {
            padding: var(--space-40) 0 var(--space-30);
        }
        footer .rowTop .footerTitle {
            font-size: var(--font-16);
            margin-bottom: var(--space-15)
        }
        footer .rowTop .flexLeft img {
            max-width: 250px;
        }
        footer .rowTop .flexRight {
            width: 100%;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
        }
        footer .rowTop .flexRight .contactus {
            width: 100%
        }
        footer .rowTop li {
            font-size: var(--font-15);
            margin-bottom: var(--space-5);
        }
        footer .flexRight .sitemap {
            margin-top: var(--space-30)
        }
        footer .flexRight .sitemap ul {
            display: flex;
            flex-wrap: wrap;
        }
        footer .flexRight .sitemap ul li:not(:last-child) {
            margin-right: var(--space-15)
        }
        footer .flexRight .sitemap ul li {
            margin-bottom:0
        }
        footer .rowBottom {
            padding: var(--space-15) 0
        }
        footer .rowBottom .layout {
            align-items: center;
            flex-direction: column-reverse;
        }
        footer .rowBottom .sns li {
            margin:0 var(--space-10);
        }
        footer .rowBottom .sns li img {
            height: var(--space-15);
        }
        footer .rowBottom copyright {
            margin-top: var(--space-5);
            font-size: var(--font-14);
        }
    }