:root {
    --header--pc: 67px; /* 상단 메뉴의 높이 */
    --header--pc--fixed: 50px; /* 상단 메뉴 스크롤 발생시 높이 조정을 위하여 fixed 추가 */
    --gnb-sub-header--pc: 360px;/* 매뉴 서브 콘텐츠 높이 (서브 수량에 따라 조정 해야 함) */
    --gnb-logo-width: 270px;/* 메뉴 좌측 로고 넓이 */
    --gnb-etc-width: 170px;/* 메뉴 우측 콘텐츠 넓이 */
    --gnb-logo-left-space: 30px; /* 좌측 로고 PC 여백 공간 만들기 */
    --gnb-logo-mobile-left-space: 15px; /* 좌측 로고 mobile 여백 공간 만들기 */
    --gnb-logo-etc-Max-width: 850px;/* (.nav__ul) class 콘텐츠 넓이 최대 크기 */
    --gnb-sub-menu-number: calc(100% / 5);/* 서버 카테고리 숫량 나누기 */
    --mobile-bg-color: #5CA0CC;/* 모바일 화면 매뉴 활성화 배경 컬러 */
    --mobile-a-link-line-color: #fff; /* 모바일 메뉴 1뎁스 라인 컬러 */
    --mobile-a-link-2Depth-line-color: #d9d9d9; /* 모바일 메뉴 3뎁스 라인 컬러 */
    --mobile-a-link-2Depth-font-color: #5CA0CC; /* 모바일 메뉴 3뎁스 폰트 컬러 */
    --header--mo:50px; /* 모바일 메뉴 활성화 상단 높이 닫기 있는 흰색 부분 */
    --search__box-line: #00C6BC;/* 모달 검색 창 라인 색상 */
}

.gnb-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header--pc + 35px);
    background-color: #fff;
    z-index: 99;
}
.gnb-side-login {
    display:inline-block;
    width: 100%;
    padding:0 5%;
    margin:0 auto;
    text-align:right;
}
.gnb-side-login > a {
    display:inline-block;
    padding:10px 15px;
}

@media  (max-width: 420px){
    .gnb-side-login > a {
        padding:8px 8px;
    }
}
.gnb-side-login > span {
    display:inline-block;
    width:1px;
    height:10px;
    font-size:0;
    background: #dedede;
}
.gnb-header__inner {
    position: relative;
    width: 100%;
    height: var(--header--pc);
    border-top:1px solid #dedede;
    border-bottom:1px solid #dedede;
}
.gnb-header__inner .logo {/* 넓이 1*/
    position: absolute;
    z-index:1;
    top:0;
    left:0;
    padding-left: var(--gnb-logo-left-space);
    width: var(--gnb-logo-width);
    height: var(--header--pc);
    display: flex;
    align-items: center;
    justify-content:flex-end;
}
@media  (max-width: 460px){
    .gnb-header__inner .logo {/* 넓이 1*/
        justify-content:flex-start;
    }
}
.gnb-header__inner .gnb-header-right-container {/* 넓이 3*/
    position: absolute;
    z-index:1;
    top:0;
    right:0;
    width: var(--gnb-etc-width);
    height: var(--header--pc);
    display: flex;
    align-items: center;
    justify-content:flex-start;
}
.gnb-header__inner .gnb-header-right-container button {
    margin-left:3px;
    margin-right:3px;
}
.gnb-header .logo .logo__link {
    display: flex;
    align-items: center;
    height:100%;
}
.gnb-header .logo .logo__link img {width:100%;max-width:225px;}
.nav--mo{display: none;}
.nav .btn-gnb-close{
    position: absolute;
    top: 10px;
    right: 20px;
    background:none;
    border:none;
}

.nav .btn-gnb-close > img {
    transform: rotate(45deg);
    width:25px;
}
.gnb-header-right-container .btn-gnb-search{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--header--pc) - 22px);
    height: calc(var(--header--pc) - 22px);
    background: #00C6BC;
    border:none;
    border-radius: 45px;
}
.gnb-header-right-container .btn-gnb-sns {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--header--pc) - 22px);
    border:none;
    background: transparent;
}
.gnb-header-right-container .btn-gnb-language {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: calc(var(--header--pc) - 22px);
    color:#fff;
    background: #00C6BC;
    border:none;
    border-radius: 45px;
}
.gnb-header-right-container .btn-gnb-language img {
    margin-right:8px;
    width:18px;
}
.gnb-header-right-container .btn-gnb-menu{
    position: relative;
    width: var(--header--pc);
    height: var(--header--pc);
}
.gnb-header-right-container .btn-gnb-menu > span{
    position: absolute;
    left: calc(5px + 10px);
    display: inline-block;
    width: 20%;
    height: 2px;
    background-color: #555;
}
.gnb-header-right-container .btn-gnb-menu > span:first-of-type{
    width: 35%;
    top: calc(var(--header--pc) / 3);
}
.gnb-header-right-container .btn-gnb-menu > span:nth-of-type(2){top: calc(var(--header--pc) / 3 + 8px);}
.gnb-header-right-container .btn-gnb-menu > span:last-of-type{
    width: 35%;
    top: calc(var(--header--pc) / 3  + 16px);
}
.gnb-header-right-container .gnb-header--mo{display: none;}



.gnb-header-right-container .btn-gnb-menu:hover > span{
    width: 35%;
}
.gnb-header-right-container .btn-gnb-menu:hover > span:first-of-type{
    width: 20%;
}
.gnb-header-right-container .btn-gnb-menu:hover > span:last-of-type{
    width: 20%;
}

/************** 통합검색 **************/
.common-search{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .8);
    z-index: 99;
}
.common-search.on{display: grid;}
.common-search__contents {
    display:flex;
    max-width: 100%;
    flex-direction: column;
    justify-content: center;
}
.common-search__contents .search__tit{
    word-break: keep-all;
    text-align:center;
    color:#fff;
    margin-bottom:25px;
}
.common-search__contents .search__tit > img {
    max-width: 40px;
    margin-right: 20px;
}
.common-search__contents .common-search__box {
    width: 780px;
    width: clamp(300px, 40vw, 800px);
    border: 2px solid var(--search__box-line);
    border-radius:50px;
    background-color: #fff;
}
.common-search__contents .inner-search__box {
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.common-search__contents .common-search__box .btn-search{
    margin-right: 1em;
    border:none;
    background:none;
}
.common-search__contents .search__input{
    width: 100%;
    padding: 1em 1em 1em 2em;
    border:none;
    background: none;
}
.common-search__contents .btn-search-close {
    margin-top:25px;
    background:none;
    border:none;
}
/************** 통합검색 끝 **************/
@media screen and (min-width: 992px){
    .gnb-header__inner .nav {/* 넓이 2*/
        position: absolute;
        z-index:0;
        width: 100%;
        height: var(--header--pc);
    }
    .nav__ul{

        display: flex;
        width: 100%;
        max-width: var(--gnb-logo-etc-Max-width);
        height: 100%;
        margin:0 auto;
        left:80px;
    }
    @media (max-width: 1350px){
        .nav__ul{
            display: flex;
            width: calc(100% - (var(--gnb-logo-width) + var(--gnb-etc-width)));
            max-width: var(--gnb-logo-etc-Max-width);
            height: 100%;
            margin:0 var(--gnb-etc-width) 0 var(--gnb-logo-width);
            left:0;
        }
    }
    .nav__li{
        position: relative;
        width: var(--gnb-sub-menu-number);
    }
    .nav__li > .nav__menu{
        display: flex;
        width: 100%;
        height: var(--header--pc);
        align-items: center;
        font-weight:700;
        justify-content: center;
    }
    .nav__li:hover > .nav__menu {
        color:#00C6BC;
        background:#fff;
    }
    .nav__menu___arrow{display: none;}
    .lev2-wrapper{
        position: absolute;
        top: var(--header--pc);
        left: 0;
        display: none;
        width: 100%;
        padding: 20px 0.9em;
        transition: left .2s;
        z-index: 10;
    }
    .lev2__li{padding: 0 0;}
    .lev2__li .lev-item{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 6px .5rem;
        letter-spacing: -1.28px;
        white-space: nowrap;
    }
    .lev2__li .lev-item::before{
        content:"·";
        position: absolute;
        top: 50%;
        left: -2px;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .w2_li {
        display:flex;
        justify-content: space-between;
        flex-wrap:wrap;
    }
    .w2_li .lev2__li {
        width:calc(100% / 2);
    }

    .nav:hover{
        height: var(--gnb-sub-header--pc);
        background:#fff;
        box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.15);
    }
    .nav.line{box-shadow: 0px 1px 0 #7b42ff;}
    .nav:hover::before{
        content: "";
        position: absolute;
        top: var(--header--pc);
        left: 0;
        width: calc(var(--gnb-logo-width) + 50px);
        height:  calc(var(--gnb-sub-header--pc) - var(--header--pc));
        /*
        background: url(../GNB/image/bg_gnb.svg) no-repeat left center/cover;
        */
    }
    .nav:hover::after{
        content:"";
        position: absolute;
        top: var(--header--pc);
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #ccc;
    }
    .nav:hover .lev2-wrapper{
        display: block;
    }
    /*
    .nav:hover  .nav__li {
        border-left:1px solid #eee;
    }
    .nav:hover  .nav__li:nth-last-child(1) {
        border-right:1px solid #eee;
    }
    */
    .nav__li:hover .lev2-wrapper a {
        color: #fff;
    }
    .nav__li:hover .lev2-wrapper a:hover {
        color:#000;
    }

    .nav__li:hover {
        position: relative;
        z-index:1;
        background: #00C6BC;
        color: #fff;
    }
    .nav:hover .lev2__li {padding: 0 0;}
    .lev2__li:hover .lev-item{
        color:#fff;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}
/********** 스크롤 하단 이동시 동작  **************************/
.gnb-header.fixed  {
    height: var(--header--pc--fixed + 35px);
    border-bottom:1px solid #ccc;
}
.fixed .gnb-header__inner {
    height: var(--header--pc--fixed);
}
.fixed .gnb-header__inner .logo {/* 넓이 1*/
    height: var(--header--pc--fixed);
}
.fixed .gnb-header__inner .nav {/* 넓이 2*/
    height: var(--header--pc--fixed);
}
.fixed .gnb-header__inner .gnb-header-right-container {/* 넓이 3*/
    height: var(--header--pc--fixed);
}
.fixed .gnb-header-right-container .btn-gnb-sns {
    width: calc(var(--header--pc--fixed) - 15px);
    height: calc(var(--header--pc--fixed) - 15px);
}
.fixed .gnb-header-right-container .btn-gnb-sns > img {width:100%;}
.fixed .gnb-header-right-container .btn-gnb-search{
    width: calc(var(--header--pc--fixed) - 15px);
    height: calc(var(--header--pc--fixed) - 15px);
}
.fixed .gnb-header-right-container .btn-gnb-language {
    height: calc(var(--header--pc--fixed) - 15px);
}
.fixed.gnb-header .logo .logo__link img {height:23px;}
.fixed .gnb-header__inner .logo {justify-content:start;}

.fixed .gnb-header-right-container .btn-gnb-menu > span:first-of-type{
    top: calc(var(--header--pc--fixed) / 3);
}
.fixed .gnb-header-right-container .btn-gnb-menu > span:nth-of-type(2){top: calc(var(--header--pc--fixed) / 3 + 8px);}
.fixed .gnb-header-right-container .btn-gnb-menu > span:last-of-type{
    top: calc(var(--header--pc--fixed) / 3  + 16px);
}

@media screen and (min-width: 992px){
    .fixed .nav__li > .nav__menu{
        height: var(--header--pc--fixed);
    }
    .fixed .lev2-wrapper{
        top: var(--header--pc--fixed);
    }
    .fixed .nav:hover::before{
        top: var(--header--pc--fixed);
        height: calc(var(--gnb-sub-header--pc) - var(--header--pc--fixed));
    }
    .fixed .nav:hover::after{
        top: var(--header--pc--fixed);
    }
    .fixed .nav:hover {
        height: var(--gnb-sub-header--pc);
    }
}
/**** 여기서 부터 모바일 *********************************************************/
@media screen and (max-width: 991px){
    .gnb-header__inner .logo {
        padding-left: var(--gnb-logo-mobile-left-space);
    }
    .gnb-header-right-container .gnb-header--mo{
        position: fixed;
        top: 33px;
        right: 0;
        display: block;
        background:none;
        border:none;
    }
    .fixed .gnb-header-right-container .gnb-header--mo {

    }
    .gnb-header-right-container .gnb-header--mo .btn-gnb-menu{
        display: inline-block;
        background:none;
        border:none;
    }
    .gnb-header__inner .gnb-header-right-container {
        right:55px;
    }
    .gnb-header.active{
        height: 100%;
        background: none;
        transition: all 0.3s;
        -moz-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -o-transition: all 0.3s;
        background-color: var(--mobile-bg-color);
    }
    .gnb-header.active .header__inner{
        position: fixed;
        top: 0;
        left: 0;
        inset: 0;
    }
    .fixed .gnb-header-right-container .btn-gnb-menu{
        position: relative;
        margin-top: -3px;
        width: var(--header--pc--fixed);
        height: var(--header--pc--fixed);
    }
    .fixed .gnb-header__inner .gnb-header-right-container {right:15px;}

    .gnb-header.active .nav{
        right: 0;
        width: 100%;
        background-color: var(--mobile-bg-color);
    }
    .gnb-header.active .gnb-header-right-container {
        right:-200px;
    }
    .gnb-header.active h1.logo {
        left:-200px;
    }
    .nav{
        position: absolute;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        transition: all .75s;
        z-index: 99;
    }
    .nav--mo{
        display: block;
        height: var(--header--mo);
        background-color: #fff;
    }
    .nav__ul{
        padding: 20px;
        height: calc(100vh - var(--header--mo));
        overflow: auto;
    }
    .nav__li{
        position: relative;
        border-bottom: 1px solid var(--mobile-a-link-line-color);
    }
    .nav__menu{
        display: block;
        width: 100%;
        height: 100%;
        padding: 0.97em 1.25em;
        color: #fff;
    }
    .nav__menu___arrow{
        position: absolute;
        top: 14px;
        right: 22px;
        display: block;
        width: 15px;
        height: 9px;
    }
    .nav__menu___arrow.on {
        top: 28px;
        right: 22px;
        transform: rotate(180deg);
    }
    .lev2-wrapper{
        display: none;
        text-align: left;
        background-color: #fff;
    }
    .lev2-wrapper .lev-item{
        display: block;
        width: 100%;
        height: 100%;
        padding: 0.81em 1.25em;
        border-top: 1px solid var(--mobile-a-link-2Depth-line-color);
        font-weight: 700;
        color: var(--mobile-a-link-2Depth-font-color);
    }
    .lev2-wrapper .lev-item::before{
        content: "-";
        padding-right: 5px;
    }
}
@media screen and (max-width: 470px){
    .gnb-header__inner .gnb-header-right-container .btn-gnb-search,
    .gnb-header__inner .gnb-header-right-container .btn-gnb-language {
        display:none;
    }
}
@media (max-width: 530px){
    .gnb-header-right-container > button {
        display:none !important;
    }
}