/* 노말라이즈 */
body, ul, p {
    margin:0;
    padding:0;
    list-style:none;
}
/* body {
    word-break:keep-all;
} */
a {
    text-decoration:none;
    color:inherit;
}

a.delay-1, a.delay-2, a.delay-3, a.delay-4, a.delay-5, a.delay-6, a.delay-7{
    color: white;
}

/* html {
    overflow-x:hidden;
    line-height:1.15;
} */
/* 노말라이즈 */

/* 라이브러리 */
/* .con {
    max-width:1300px;
    margin:0 auto;
} */
.row::after {
    content:"";
    display:block;
    clear:both;
}
.cell {
    box-sizing:border-box;
}
/* 모바일메뉴 화살표 오른쪽 정렬 */
.cell-right {
    float: right;
}
.line-height-0 {
    line-height:0;
}
.line-height-0 > * {
    line-height:normal;
}
.visible-on {
    display:block;
}
.visible-off {
    display:none;
}
/* .img-box {
    overflow:hidden;
} */
.img-box > img {
    width:100%;
    display:block;

    transition: transform 0.3s ease-in-out, z-index 0s 0.3s;
    position: relative;
    /* z-index: 1; */
  
}

.header .img-box:hover > img {
    transform: translateY(4px);
    /* z-index: 1; */
  
}

.relative {
    position:relative;
}
.block {
    display:block;
}
/* 라이브러리 끝 */

/* body {
    background-color:#dfdfdf;
    height:3000px;
} */

html.m-menu-scroll, html.m-menu-scroll > body {
    overflow:hidden;
}

/* 커스텀 */
.header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* 원하는 너비 설정 */
    /* max-width: 1200px; 최대 너비 제한 */
    height: 86px;
    background-color: #fff;
    z-index: 100;
}

.header > .header-inner {
    /* max-width:1220px;
    margin:0 auto;
    position:relative; */
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    /* margin-left: auto; */
    /* margin-right: 0; */
    position: relative;
    display: flex;
    justify-content: center; /* 내부 요소도 가운데 정렬 */
}

/* 상단 로고 */
.header > .logo {
    position: absolute;
    /* top:20%;
    left:20px; */
    margin-top: 26px;
    /* margin-right: 20px; */
    /* transform:translatex(-50%); */
    width:240px;

 
}

/* 상단 메뉴바 */
.header > .header-inner > .top-menu-bar > ul {
    display:inline-block;
}

.header > .header-inner > .top-menu-bar > ul:nth-child(2) {
    margin-right:105px;
}

.header > .header-inner > .top-menu-bar > ul > li > a {
    display:block;
    margin:0 20px;
    /* margin: 0 calc(2vw + 5px); */
    font-size:16px;
    font-weight:700;
    position:relative;
    line-height:86px;
}

.header > .header-inner > .top-menu-bar > ul > li > a > * {
    line-height:normal;
}

.header > .header-inner > .top-menu-bar > ul > li:not(.no-underline) > a::after {
    content:"";
    display:block;
    background-color:#009e96;
    position:absolute;
    bottom:0;
    left:50%;
    width:0%;
    height:5px;
    transform:translatex(-50%);
    transition:width .3s ease-in-out;
}


.header > .header-inner > .top-menu-bar > ul > li > a.active::after {
    width:100%;
}

/* 2차 메뉴 배경 */
.header > .header-inner > .top-menu-bar > .sub-menu-bg {
    /* position:fixed;
    top:86px;
    left:0;
    width:100%;
    height:0;
    background-color:#000000;
    border-top:1px solid #ccc;
    z-index:-5; */
    /* transition:height .3s ease-in-out; */
    position: fixed;
    top: 86px;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.9);
    border-top: 1px solid #ccc;
    /* z-index: -5; */
    z-index: -5;
}

/* 2차 메뉴 */
.header > .header-inner > .top-menu-bar ul > li {
    position:relative;
}

.header > .header-inner > .top-menu-bar > ul > li > ul {
    position:absolute;
    top:100%;
    left:0;
    min-width:1025px;
    padding-top:20px;
    visibility:hidden;
}

.header > .header-inner > .top-menu-bar > ul > li.active > ul {
    visibility:visible;
}

.header > .header-inner > .top-menu-bar > ul > li > ul > li {
    margin-left:20px;
    /* margin-left:calc(2vw + 5px); */
}

.header > .header-inner > .top-menu-bar > ul > li > ul > li > a {
    font-weight:400;
}

.header > .header-inner > .top-menu-bar > ul ul > li > a {
    display:inline-block;
    font-size:16px;
    padding:7px 0;
    position:relative;
    visibility:hidden;
    transform:translatex(-10px);
    opacity:0;
}

/* 2차 메뉴 나오는 딜레이 */
.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a {
    visibility:visible;
    opacity:1;
    transform:translatex(0);
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-1 {
    transition:visibility .2s, opacity .2s, transform .2s;
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-2 {
    transition:visibility .2s .1s, opacity .2s .1s, transform .2s .1s;
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-3 {
    transition:visibility .2s .2s, opacity .2s .2s, transform .2s .2s;
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-4 {
    transition:visibility .2s .3s, opacity .2s .3s, transform .2s .3s;
} 

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-5 {
    transition:visibility .2s .4s, opacity .2s .4s, transform .2s .4s;
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-6 {
    transition:visibility .2s .5s, opacity .2s .5s, transform .2s .5s;
}

.header > .header-inner > .top-menu-bar > ul > li.active ul > li > a.delay-7 {
    transition:visibility .2s .6s, opacity .2s .6s, transform .2s .6s;
}


.header > .header-inner > .top-menu-bar > ul ul > li > a::after {
    content: "";
    display: block;
    background-color: #ffffff;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    height: 0.1vw; /* 뷰포트 너비에 비례하는 선의 높이 */
    transform: translateX(-50%);
    transition: width .1s ease-in-out;
}

.header > .header-inner > .top-menu-bar > ul ul > li > a:hover::after {
    width:100%;
}

/* 3차 메뉴 */
/* .header > .header-inner > .top-menu-bar > ul ul ul > li {
    margin-right:80px;
} */
.search-link {
    color: black; /* 기본 색상 */
    text-decoration: none; /* 밑줄 제거 */
    transition: color 0.3s ease; /* 부드러운 색상 변경 효과 */
}

.search-link:hover {
    color: #009e96; /* 호버 시 색상을 빨간색으로 변경 */
}

/* 서브메뉴 실질적 width, height */
.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height {
    width:100%;
    /* height:320px; */
    position:fixed;
    top:86px;
    left:0;
    z-index:-3;
    display:none;
}

.header > .header-inner > .top-menu-bar > ul > li.active > .sub-menu-height {
    display:block;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-1 {
    height:90px;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-2 {
    height:330px;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-3 {
    height:210px;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-4 {
    height:210px;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-5 {
    height:175px;
}

.header > .header-inner > .top-menu-bar > ul > li > .sub-menu-height-6 {
    height:175px;
}

/* 상단 헤더 반응형 */
@media (max-width:1200px){
    .header {
        display:none;
    }
    /* 메뉴를 피해서 표시 */
    body{
        margin-top: 50px;
        background-color:#dfdfdf;
    }
}

@media (min-width:1200px){
    .m-header {
        display:none;
    }

    /* 메뉴를 피해서 표시 */
    body{
        margin-top: 86px;
        background-color:#dfdfdf;
    }

    html.m-menu-scroll, html.m-menu-scroll > body {
        overflow:auto;
    }
}

/* 모바일 헤더 */
.m-header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color:#ffffff;
    text-align:center;
    z-index:500;
    border-bottom: 1px solid #ccc;
}

.m-header > .logo {
    margin-top: 9px;
    width:150px;
    display:inline-block;
    
}
.m-header > .search {
    position:absolute;
    top:50%;
    right:20px;
    transform:translatey(-50%);
}
/* 모바일 메뉴 버튼 */
.m-header > .m-menu-btn {
    position:absolute;
    top:50%;
    left:12px;
    transform:translatey(-50%);
    width:46px;
    height:46px;
    cursor:pointer;
}

.m-header > .m-menu-btn > div {
    width: 50%; /* 너비는 50%로 고정 */
    height: 0.1vw; /* 높이는 고정된 2px로 설정 (깨끗하게 보이도록) */
    background-color: #000;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%); /* 중앙 정렬 */
    box-sizing: border-box; /* padding이나 border를 포함하여 계산 */
    transition: all 0.2s ease; /* 부드러운 애니메이션 */
}

.m-header > .m-menu-btn > div:nth-child(2) {
    top:23px;
}

.m-header > .m-menu-btn > div:nth-child(3) {
    top:30px;
}

/* 버튼 클릭 시 애니메이션 */
.m-header > .m-menu-btn.active div:nth-child(1) {
    top:50%;
    transform:translatex(-50%) translatey(-50%) rotate(45deg);
}

.m-header > .m-menu-btn.active div:nth-child(3) {
    top:50%;
    transform:translatex(-50%) translatey(-50%) rotate(-45deg);
}

.m-header > .m-menu-btn.active div:nth-child(2) {
    opacity:0;
}

/* 모바일 배경 마스크 */
.m-header > .mobile-mask {
    position:fixed;
    top:50px;
    left:0;
    width:100%;
    height:0;
    background-color:#fff;
    z-index:-5;
    transition:height .3s;
}

/* 모바일 메뉴 리스트 */
.m-header > .m-menu-list {
    visibility: hidden; /* 기본적으로 메뉴는 숨김 */
    opacity: 0; /* 투명도 0으로 설정 */
    transform: translateY(-10px); /* 메뉴가 위쪽으로 이동된 상태 */
    transition: visibility 0s 0.3s, opacity 0.3s ease, transform 0.3s ease; /* 애니메이션 효과 */
    /* z-index: 499; */
    
    
}

/* footer 링크가 가려지는 문제 수정 */
.m-header > .m-menu-list.active {
    visibility: visible; /* 메뉴가 보이도록 설정 */
    opacity: 1; /* 투명도 1로 설정 */
    transform: translateY(0); /* 원래 위치로 돌아옴 */
    transition: visibility 0s 0s, opacity 0.3s ease, transform 0.3s ease; /* 애니메이션 효과 */
    max-height: 80vh; /* 메뉴가 화면을 넘지 않도록 최대 높이 설정 (필요시 조정 가능) */
    overflow-y: auto;
}

.m-header > .m-menu-list > ul > li {
    border-bottom:1px solid #ccc;
    visibility:hidden;
    transform:translatey(-20px);
    opacity:0;
    position:relative;
}

.m-header > .m-menu-list.active > ul > li {
    visibility:visible;
    transform:translatey(0);
    opacity:1;
}

.m-header > .m-menu-list.active > ul > li.delay-1 {
    transition:visibility .5s, opacity .5s, transform .5s;
}

.m-header > .m-menu-list.active > ul > li.delay-2 {
    transition:visibility .5s .1s, opacity .5s .1s, transform .5s .1s;
}

.m-header > .m-menu-list.active > ul > li.delay-3 {
    transition:visibility .5s .2s, opacity .5s .2s, transform .5s .2s;
}

.m-header > .m-menu-list.active > ul > li.delay-4 {
    transition:visibility .5s .3s, opacity .5s .3s, transform .5s .3s;
}

.m-header > .m-menu-list.active > ul > li.delay-5 {
    transition:visibility .5s .4s, opacity .5s .4s, transform .5s .4s;
}

.m-header > .m-menu-list.active > ul > li.delay-6 {
    transition:visibility .5s .5s, opacity .5s .5s, transform .5s .5s;
}

.m-header > .m-menu-list > ul > li > a {
    display:block;
    padding:30px 24px;
    text-align:left;
    font-size:17px;
}

.m-header > .m-menu-list > ul > li > a > span {
    transition:transform .3s;
}

.m-header > .m-menu-list > ul > li.active > a > span {
    transform:rotate(180deg);
}

/* 2차 메뉴 관련 */

.m-header > .m-menu-list > ul > li > ul {
    padding:20px 48px;
    background-color:#f9f9f9;
    display:none;
}

.m-header > .m-menu-list > ul > li > ul > li > a {
    display:block;
    text-align:left;
    padding:10px 0;
    font-size:16px;
}

/* 3차 메뉴 */
.m-header > .m-menu-list > ul > li > ul ul {
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid #ccc;
}

.m-header > .m-menu-list > ul > li > ul ul > li > a {
    display:block;
    text-align:left;
    font-size:16px;
    font-weight:400;
    padding:10px 0;
}