@charset "utf-8";

/*-------------------------------------------------------------------
    파일정의 : 레이아웃
-------------------------------------------------------------------*/
/*-------------------------------------------------------------------
    @공통
-------------------------------------------------------------------*/
#skip-nav {height:0}
#skip-nav a {display: block; position: absolute; left: 0; top: -100px; width: 100%; height: 1px; text-align: center}
#skip-nav a:focus, #skip a:active {position: absolute; top: 0; z-index: 120; height: 25px; padding: 10px 0; font-size: 1.4em; font-weight: 700; color: #36348f; background: #fff;}

/*-------------------------------------------------------------------
    @header
-------------------------------------------------------------------*/
#header {
    position:fixed;
    top :0;
    left :0;
    right :0;
    background-color: #000000;
    z-index:9999;
}
#header.on {}
#header .inner {
    
    display: flex;
    justify-content:
    space-between;
    align-items: center;
    height: 6.5rem;
}

.logo {width: 10.9rem; height: 3.2rem; background: url('../img/common/logo.png') no-repeat center; background-size: 100%;}
.logo a { display: block; width: 100%; height: 100%; text-indent: -9999px; }

#header .btn-menu {display: none;}
#header .mobile {display: none;}

.gnb ul {display: flex; align-items: center; justify-content: center; gap: 5.2rem;}
.gnb ul li a {display: block; font-size: 1.1rem; font-weight: 600; font-style: italic; color: #ffffff;}

.gnb ul li.mobile-sns {
    display: none;
}

.sns {display: flex; align-items: center; justify-content: center; gap: 1.2rem;}




@media screen and (max-width: 1024px) {
    #header .inner {height: 11.2rem; position: relative; z-index: 99;}

    .logo {width: 22.3rem; height: 6.5rem;}

    #header .btn-menu {display: block;}
    #header .mobile {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .gnb {display: none; position: absolute; top: 100%; width: 100vw; left: 0;}
    .gnb.active {display: block;}
    .gnb ul {gap: 0; flex-direction: column; background-color: #000000;}
    .gnb ul li {width: 100%;}
    .gnb ul li a {font-size: 2.4em; line-height: 2; text-align: center;}

    .gnb ul li.mobile-sns {
        display: flex;
        justify-content: space-between;
        text-align: center;

        margin-top: 2rem;
        padding-left: 10rem;
        padding-right: 10rem;
        padding-top: 2rem;
        padding-bottom: 2rem;

    }    

    .sns {display: none;}

    
}