@charset "UTF-8";




/* 
/////////////////////////////////////////////////////
                 diva01 header 컴포넌트 구성
////////////////////////////////////////////////////////
*/


/* header 섹션 개별 책임 선언 */
.fx-vsheader-pt01{
    position: relative; 
    width:100%; 
    height:100vh; 
    overflow: hidden;

    display: flex;
    justify-content: start;
    align-items: center;
    flex-flow: column wrap;
    gap:clamp(2rem, calc(6vw + 1rem) ,15rem);
}

.fx-media{
    position:absolute;
    inset:0; /* 영상배경분리 */

    width:100%;
    height:100%;

    object-fit:cover;
    z-index:0;
}


/* media item에 속하는 태그 */
.fx-media img,
.fx-media video,
.fx-media iframe {
  width: 100%;
  max-width: 100%;
  display: block;
}


.fx-vsheader-pt01 > video, 
.fx-vsheader-pt01 > img { 
    position: absolute; 
    inset: 0; 
    object-fit: cover; 
    z-index: 1;
}





/* 
/////////////////////////////////////////////////////
               diva01 header hero 구성 
/////////////////////////////////////////////////////
*/

.fx-hero{
    position: absolute;
    width:min(92%, 1165px);
    z-index: 10;
    top: 80%; 
    left: 50%; 
    transform: translate3d(-50%, -50%, 0);

    display: flex; 
    justify-content: right; 
    align-items: start; 
    flex-flow: column wrap; 
    gap:1.4rem;
}


.fx-hero__title{
    font-size:var(--wb-font-h2); 
    font-weight:var(--wb-font-weight-black);
    color:var(--wb-font-hero-color);
}


.fx-hero__cont{ 
    font-size:var(--wb-font-hero-text); 
    font-weight:600; 
    line-height: var(--wb-line-text);
    color:var(--wb-font-hero-color);
 }

.fx-hero__btn{ 
    margin-top: clamp(1.8rem, calc(1.8vw + 1rem), 3rem);
    
 }




/* 
/////////////////////////////////////////////////////
                    diva01 nav 구성 
////////////////////////////////////////////////////////
*/


.fx-nav{ 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow:row wrap;

    position:relative;  
    z-index: 10005;   /* z-index: 20; */
    width:100%;  
    background: transparent;
}


.fx-nav.is-scrolled {
    position: fixed;  
    top: 0; 
    left: 0;
    width: 100%;
    z-index: 9999; /* 하단 알맹이 제압 */
    
    /* 스크롤 시 글자 가독성 - 불투명 white */
    background-color: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); 
    border-bottom: 1px solid #e5e5e5;
}


.fx-nav__bar-wrap{ 
    width: 100%;
    background: rgba(255,255,255,.9);
    display: flex;
    justify-content: center;
    align-items: center;
}



/* 2026.6.30 - grid로 수정.. */
.fx-nav__bar{
    position: relative;
    display: grid;
    grid-template-columns: 22rem 1fr 18rem;

    /* grid-template-columns: 26rem 1fr 16rem; */
    width:var(--layout-content-width); 

    gap: var(--space-nav-title-gap);
    min-height: 100px;
    font-size:var(--wb-font-h4);
    font-weight: 900;
    justify-content: center;
    align-items: center;
    letter-spacing: -0.04em;

}



/* //////////////////////  
          로고 적용 
///////////////////////// */
.fx-nav__logo{ 
    flex: 0 0 var(--wb-font-h1);
    display:block;
    width:var(--wb-font-h1);
}


.fx-nav__logo > a > img{ 
    display:block;
}



/* //////////////////////  
        1뎁스 영역 작업  
///////////////////////// */
.fx-nav__depth01{ 
    flex:1 1 0;
    display: flex;
}


.fx-nav__depth01 > li {
    position: relative; /* 언더라인 가속도 이펙트의 기준점 격리 */
    flex: 1 1 0;
    text-align: center;
}

.fx-nav__depth01 > li > a {
    position: relative;
    display: block;
    height: 80px;
    line-height: 80px;
    text-decoration: none;
    color: #000;
    white-space:nowrap; /* 줄바꿈 금지 : 자간을 자동좁힘 */
}





/*  Pc utility 적용  */
.fx-fx-nav__utility{
    grid-column: 3;
    justify-self: end;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1rem, 2vw, 2rem);

}

.fx-fx-nav__search{
    background-color: transparent;
    cursor: pointer;
    width:28px;
    height:28px;

    display: flex;
    justify-content: flex-start;
    margin-top:-1px;
}

.fx-fx-nav__search > svg{
    width:3.4rem;
}




/*  모달 창 팝업 적용 :: pc - mobile 동시사용   */
.fx-search-modal {
    position: fixed;
    inset: 0;
    z-index: 30000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fx-search-modal__dim {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.9);
}

.fx-search-modal__panel {
    position: relative;
    width: min(90%, 64rem);
    margin: 14vh auto 0;
    background: #fff;
    padding: clamp(5rem, calc(6vw + 1rem), 7rem);
    transform: translateY(-1.5rem);
    transition: .3s ease;
}

body.is-search-open .fx-search-modal {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.is-search-open .fx-search-modal__panel {
    transform: translateY(0);
}




/*  search-modal  폼 :: 세팅  */
.fx-search-modal__form {
  margin-top: clamp(2rem, 4vw, 4rem);
}

.fx-search-modal__field {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #111;
}

.fx-search-modal__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 1.6rem 0;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  outline: none;
  background-color: transparent;
}

.fx-search-modal__submit {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding-left: 2rem;
  font-weight: 700;
  cursor: pointer;

}

.fx-search-modal__submit > svg {
    width: clamp(2.2rem, 2.6vw, 3.2rem);
    background-color: #fff;
    color: #1a1a1a;
}



.fx-search-modal__recommend {
  margin-top: clamp(2.4rem, 4vw, 4.8rem);
}

.fx-search-modal__keyword-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.6rem;
}

.fx-search-modal__keyword-list > li {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: var(--wb-font-weight-regular);
}

.fx-search-modal__keyword-list a {
  display: block;
  padding: 0.8rem 1.4rem;
  border: 1px solid #ddd;
  border-radius: 999px;
}

.fx-search-modal__close{
    position:absolute;
    color:#1a1a1a;
    top:20px;
    right:20px;
    cursor: pointer;
    background-color: transparent;
}

.fx-search-modal__close > svg{
    width: clamp(2.2rem, 2.6vw, 3.2rem);
    background-color: #fff;
    color: inherit;
}

.fx-search-modal__close > span{
    background-color: transparent;
    font-size: clamp(1.6rem, 1.8vw, 2.4rem);
}



/* label 검색어 입력 접근성 처리  */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}








/* PC 기본값 */
.fx-sitemap-trigger {
  justify-self: initial;
}

.fx-mobile-nav-trigger {
    display: none;
}

.fx-sitemap-trigger,
.fx-mobile-nav-trigger {
    flex: 0 0 auto;
    position: relative;
    width: 30px;
    height: 20px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.fx-sitemap-trigger > .burger-line,
.fx-mobile-nav-trigger > .burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
    transition:
        top 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.fx-sitemap-trigger > .line-top,
.fx-mobile-nav-trigger > .line-top {
    top: 0;
}

.fx-sitemap-trigger > .line-mid,
.fx-mobile-nav-trigger > .line-mid {
    top: 50%;
    transform: translateY(-50%);
}

.fx-sitemap-trigger > .line-bot,
.fx-mobile-nav-trigger > .line-bot {
    top: 100%;
    transform: translateY(-100%);
}


.fx-nav.is-sitemap-open .fx-sitemap-trigger > .line-top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.fx-nav.is-sitemap-open .fx-sitemap-trigger > .line-mid {
    opacity: 0;
}

.fx-nav.is-sitemap-open .fx-sitemap-trigger > .line-bot {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}

.fx-nav.is-mobile-nav-open .fx-mobile-nav-trigger > .line-top {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

.fx-nav.is-mobile-nav-open .fx-mobile-nav-trigger > .line-mid {
    opacity: 0;
}

.fx-nav.is-mobile-nav-open .fx-mobile-nav-trigger > .line-bot {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
}




/* //////////////////////  
    1뎁스와 2뎁스 사이 경계라인  
///////////////////////// */
.fx-nav__underline{ 
    width:100% ;
    border-bottom:0.3px solid rgba(0,0,0,1);

}




/* //////////////////////  
       2뎁스 시작 제어  
///////////////////////// */
.fx-nav__mega-wrap{
    width: 100%;
    background: rgba(255,255,255,.9);

    display:flex; 
    align-items: start;
    justify-content: center;
    flex-flow: row wrap;

    height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;

    /* 부드러운 하강 시간축 장전 */
    transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}



/* grid 적용 리펙토링.. */
.fx-nav__mega{ 
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr) 18rem;

    /* grid-template-columns: 26rem minmax(0, 1fr) 16rem; */
    width:var(--layout-content-width);
    box-sizing: border-box;
    gap: var(--space-nav-title-gap);

    padding-block: clamp(3rem, calc(3vw + 1rem), 3.5rem);

    /* padding-block: clamp(4rem, calc(3vw + 1rem), 6rem); */
    font-size: var(--wb-font-h5);
    line-height: 2.6;
 }


.fx-nav__mega-menu {
  grid-column: 2;
  min-width: 0;
}

.fx-nav__mega-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}


.fx-nav__mega > li{
    flex:1 1 0;
    text-align: center;
    min-width:0;
}


.fx-nav__mega-side{
    grid-column: 1;
    justify-self: center;

}


/*  left-short 파트.. */
.fx-nav-shorts{
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    align-items: center;
    gap:1rem;

}



/*
.fx-nav-shorts__control {
  width: 3rem;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  background: none;
  color: #c4c4c4;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}
*/


.fx-nav-shorts__control {
    width: 3rem;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    color: #c4c4c4;
    cursor: pointer;
    transition: color .25s ease, transform .25s ease;

    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.fx-nav-shorts__control:active {
    background: transparent;
    box-shadow: none;
}

.fx-nav-shorts__control:focus {
    outline: none;
}

.fx-nav-shorts__control:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.fx-nav-shorts__control:hover,
.fx-nav-shorts__control:focus-visible {
  color: #000;
  transform: scale(1.08);
}

.fx-nav-shorts__control svg {
  width: 100%;
  height: 100%;
  display: block;
}




.fx-nav-shorts__viewport {
  position: relative;  
  width: 12rem;
  aspect-ratio: 9 / 16;
  overflow: hidden;

  border-radius: 3.4rem;
  background-color: #f2f2f2;

  clip-path: inset(0 round 3.4rem);
}



.fx-nav-shorts__item {
    position: absolute;
    inset: -1px;

    overflow: hidden;
    border-radius: inherit;
    clip-path: inherit;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


.fx-nav-shorts__item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.fx-nav-shorts__item video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    border-radius: inherit;
}


.fx-nav-shorts__caption{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 40%;

    display: flex;
    flex-direction: column;
    align-items: start; 
    padding: 1rem;
    box-sizing: border-box;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.35) 45%,
        rgba(0,0,0,0) 100%
    );
}


.fx-nav-shorts__title{ 
    font-size: 1.4rem;
    font-weight: var(--wb-font-weight-black);
    color:#fff;
    height:22px;
    padding-left: 0.8rem;

 }

.fx-nav-shorts__text{
    font-size:1.2rem;
    font-weight: var(--wb-font-weight-regular);
    color:#fff;
    height:12px;
    padding-left: 0.8rem;
}


/*  aside 파트.. */
.fx-nav__mega-aside{
    grid-column: 3;
    min-width: 0;

    line-height:2.2;
    border-left: 1px solid #c4c4c4;
}

.fx-nav__mega-aside-title{
    display: flex;
    flex-flow: column wrap;
    justify-content: start;
    align-items: start;

    margin-top:0.3rem;
    font-weight: var(--wb-font-weight-black);
    padding-left:5rem;
}

.fx-nav__mega-aside-title::after {
    content: "";
    display: block;

    margin-top:0.45rem;
    border-bottom: 4px solid #1a1a1a;
    border-radius: 40px;
    width:2rem;
}


.fx-nav__mega-aside-list{   
    position: relative;

    display: flex;
    flex-flow: column wrap;
    align-items: start;
 }


.fx-nav__mega-aside-list > li{
    padding-left:5rem;
}

.fx-nav__mega-aside-list > li > a{
    position:relative;
    display:inline-block;
}


.fx-nav__mega-aside-list > li:nth-child(1){
    margin-top:2rem;
}



.fx-nav.is-mega-open .fx-nav__mega-wrap {
    height: 280px;
    opacity: 1;
    visibility: visible;
}


/*  2뎁스 블릿 이징 적용 :: 텍스트 개행 대응  */
.fx-nav__depth02 a {
    position: relative;
    padding-left: 0;
    transition: padding-left 0.25s ease;

    display: inline-block;
    white-space: nowrap;
}


.fx-nav__depth02 a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;
    background: currentColor;

    transform: translateY(-50%) scale(0);
    transition: transform 0.25s ease;
}

.fx-nav__depth02 a:hover {
    padding-left: 20px;
}

.fx-nav__depth02 a:hover::before {
    transform: translateY(-50%) scale(1);
}




/* 
/////////////////////////////////////////////
               분리형 모바일 nav 
///////////////////////////////////////////// 
*/
    .fx-mobile-nav{
        display: none;
    }



/* 
////////////////////////////////////////////// 
             전체펼침 - 사이트 맵 적용
////////////////////////////////////////////// 
*/

.fx-nav.is-sitemap-open .fx-nav__depth01,
.fx-nav.is-sitemap-open .fx-nav__mega-wrap {
    display: none;
}

.fx-nav.is-sitemap-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    box-shadow: none;
    z-index: 10007;
}


/*  사이트 맵 세팅  */
.fx-sitemap {
  position: fixed;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10006;
  background-color: #fff;
  overflow: hidden;  

  display: flex;
  flex-direction: column;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-20px);
  transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

.fx-sitemap.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}


.fx-sitemap__inner{
  height: 100%;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;

  padding-block: clamp(5rem, 4.5vw, 5.5rem);
}


.fx-sitemap__card{
    width:min(92%, 1200px);
    margin-inline:auto;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

        
.fx-sitemap__card > h2 {
    width:min(92%, 900px);
    font-size: var(--wb-font-h3);
    font-weight: var(--wb-font-weight-black);
    margin-bottom: var(--space-section-title);

    text-align: center;
    padding-top:0;
}

.fx-sitemap__card > p {
    width:min(92%, 900px);
    text-align: center;

    font-size: var(--wb-font-text);
    font-weight: var(--wb-font-weight-regular);
    line-height: var(--wb-line-text);
}

.fx-sitemap__underline{
    width:min(92%, 900px);
    border-bottom: 1px solid #c4c4c4;
    margin-top:var(--space-section-contents-gap);
}

.fx-sitemap__card-list{ 
    width:min(92%, 1200px);
    margin-top:6rem;

    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    gap:var(--space-section-contents-gap);
 }


.fx-sitemap__card-list > li{ 
    flex: 1 1 0;
    min-width:0;
 }


.fx-sitemap__card-list img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}


.fx-sitemap__card-list > li > h3{ 
    font-size: var(--wb-font-h4);
    font-weight: var(--wb-font-weight-black);
    margin-top: var(--space-sitemap-content);
 }

.fx-sitemap__card-list > li > p{ 
    font-size: var(--wb-font-text);
    font-weight: var(--wb-font-weight-regular);
    margin-top: var(--space-sitemap-content);
    line-height: var(--wb-line-text);
    margin-bottom: var(--space-sitemap-content);
 }


.fx-sitemap__full-menu{
    width:min(92%, 1200px);
    margin-inline:auto;
    margin-top:12rem;

    display: flex;
    justify-content: center;
    flex-flow: column wrap;
}

.fx-sitemap__full-menu > h2{
    width:min(92%, 900px);
    margin-inline:auto;

    font-size: var(--wb-font-h3);
    font-weight: var(--wb-font-weight-black);
    margin-bottom:var(--space-section-title);

    text-align: center;
}

.fx-sitemap__full-menu > p {
    width:min(92%, 900px);
    margin-inline:auto;
    text-align: center;

    font-size: var(--wb-font-text);
    font-weight: var(--wb-font-weight-regular);
    line-height: var(--wb-line-text);
}


.fx-sitemap__underline02{
    width:min(92%, 900px);
    margin-inline: auto;
    border-bottom: 1px solid #c4c4c4;
    margin-top:var(--space-section-contents-gap);
}


.fx-full-menu {
  width:min(92%, 900px);  
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 3vw, 4rem);
  margin-top:var(--space-section-contents-gap);
}


.fx-full-menu > li > h3 {
    font-size: var(--wb-font-h4);
    font-weight: var(--wb-font-weight-black);
    margin-bottom: 1.4rem;
}



.fx-full-menu-list > li{
    font-size: var(--wb-font-text);
    font-weight: var(--wb-font-weight-regular);
    line-height: 3.2rem;

}



/*  단종처리 제품..   */
.fx-sitemap__discontinued{
    width:min(92%, 900px);
    margin:12rem auto 0;
    text-align: center;
}

.fx-sitemap__discontinued > h3{
    font-size: var(--wb-font-h3);
    font-weight: var(--wb-font-weight-black);
    margin-bottom: 1.4rem;
}

.fx-sitemap__discontinued-btn{ 
    width:min(92%, 700px);
    margin-inline:auto;
    background-color: #fff;
    cursor: pointer;

    font-size: var(--wb-font-text);

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap:4rem;
 }

.fx-sitemap__discontinued-obj{ 
    width:min(92%, 1200px);
    margin-inline: auto;
    margin-top:4rem;
    background-color: #f6f6f6;
    padding:4rem;

    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap:4rem;

    overflow: hidden;
    max-height: 0;
    opacity: 0;
    visibility: hidden;

    transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    visibility 0.25s ease;

 }

.fx-sitemap__discontinued-obj > li{ 
    flex: 1 1 20%;
    min-width:0;
    white-space: nowrap;

    font-size: var(--wb-font-text);
    font-weight: var(--wb-font-weight-regular);
}

.fx-full-menu-list > li > a:hover{ 
    text-decoration: underline;
}



.fx-sitemap__discontinued.is-open .fx-sitemap__discontinued-obj {
  max-height: 60rem;
  opacity: 1;
  visibility: visible;
}

.c-icon--discontinued {
  transition: transform 0.3s ease;
}

.fx-sitemap__discontinued.is-open .c-icon--discontinued {
  transform: rotate(180deg);
}







/* ============ 미디어쿼리 분기점 제어  ==============
===============================================*/

@media (min-width:1166px){ 
    /* PC 전용 Hover 인터랙션 모바일 Toggle와 책임 분리 */
    .fx-nav__depth01 > li > a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -10px;
        width: 80%;
        height: 3px;
        background-color: currentColor;

        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 0.28s ease;
    }

    .fx-nav__depth01 > li:hover > a::after,
    .fx-nav__depth01 > li.is-active > a::after {
        transform: translateX(-50%) scaleX(1);
    }


    /*  discover border-underline  */
    .fx-nav__mega-aside-list > li > a::after {
        content: "";
        position: absolute;
        left: 48%;
        bottom:0.5rem;
        width: 90%;
        height: 2px;
        background-color: currentColor;

        transform: translateX(-50%) scaleX(0);
        transform-origin: center;
        transition: transform 0.28s ease;
    }

    .fx-nav__mega-aside-list > li:hover > a::after,
    .fx-nav__mega-aside-list > li.is-active > a::after {
        transform: translateX(-50%) scaleX(1);
    }


}


@media screen and ( max-width:1165px ) {
    .fx-nav__depth01{
        display:none;
    }
    .fx-nav__mega{
        display:none;
    }

    /* ///////////// 분리형 모바일 nav 적용  /////////////// */
    .fx-mobile-nav{
        position: fixed;
        top: 101px;
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 20000;
        width: 100%;
        display: none;
        background-color: #ffffff;

        overflow-y: auto;
        overscroll-behavior: contain;
    }


    .fx-mobile-nav a,
    .fx-mobile-nav button {
        color: inherit;
    }



    .fx-sitemap-trigger {
        display: none;
    }

    .fx-mobile-nav-trigger {
        display: block;
        grid-column:3;
        justify-self: end;

    }

    .fx-nav.is-mobile-nav-open + .fx-mobile-nav{
        display:block;
    }

    .fx-mobile-nav__bar{
        width:100%;
        margin-inline:auto;
        display:block;
    }    

    .fx-fx-nav__utility{
        display: none;
    }
    .fx-fx-nav__search{ 
        display: none;
    }




    /*  grid 수정 적용..   */
    .fx-nav__bar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0;
        width: min(88%, 1165px);
        height: 101px;
        align-items: center;
        justify-content: initial;
    }

    .fx-nav__logo {
        grid-column: 1;
        justify-self: start;
        min-width: 0;
    }

    .fx-mobile-nav-trigger {
        display: block;
        grid-column: 2;
        justify-self: end;
    }


    .fx-mobile-nav__bar > li {
        flex: 0 0 auto;
        width:100%;
        display: block;
        border-bottom: 1px solid #d9d9d9;
        box-sizing: border-box;
    }


    /*  1165px 모바일 네비 시작  */
    .fx-nav__depth01 {
        display: none;
    }

    .fx-mobile-nav__depth01{
        height:52px;
        display: flex;
        padding:0 2rem;
       
    }

    .fx-mobile-nav__depth01 > button {
        font-size:var(--wb-font-h4);
        font-weight:var(--wb-font-weight-bold);
        background-color: #fff;
    }


    .fx-mobile-nav__toggle{
        width:100%;
        height:100%;

        display:flex;
        justify-content:space-between;
        align-items:center;

        border:0;
        padding:0;
        background:none;
        cursor:pointer;
        text-align:left;
    }


    .fx-mobile-nav__toggle > .c-icon {
      font-size: 1.8rem;
      transition: transform 0.3s ease;
    }

    .fx-mobile-nav__bar > li.is-active 
    > .fx-mobile-nav__depth01 
    > .fx-mobile-nav__toggle 
    > .c-icon {
      transform: rotate(90deg);
    }


    .fx-mobile-nav__depth02 > li {
        font-size: var(--wb-font-text);
        line-height: 2.4;
        padding: 0 2rem;
    }


    /*  2뎁스 아코디언 부드러운 동작 열림 추가.. */
    .fx-mobile-nav__depth02 {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
        max-height 0.55s cubic-bezier(0.7, 1, 0.5, 1),
        opacity 0.35s ease;

    }

    .fx-mobile-nav__bar > li.is-active .fx-mobile-nav__depth02 {
        max-height: 1200px;
        opacity: 1;
        background-color: rgba(251, 246, 228, .4);
    }
 
    .fx-nav.is-mobile-nav-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        z-index: 20001;
        background-color: #fff;
    }



    /*      3뎁스 추가     */
    .fx-mobile-nav__sub-toggle{
        font-size:var(--wb-font-text);
        font-weight:var(--wb-font-weight-regular);
        width:100%;
        height:100%;

        display:flex;
        justify-content:space-between;
        align-items:center;

        border:0;
        padding:1.4rem 0;
        background:none;
        cursor:pointer;
        text-align:left;
    }

    .fx-mobile-nav__depth03 > li {
        font-size: var(--wb-font-weight-regular);
        line-height: 2.4;
        padding: 0 2rem;
    }


    /*  3뎁스 아코디언 동작 열림 추가 */
    .fx-mobile-nav__depth03 {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transition:
        max-height 0.55s cubic-bezier(0.7, 1, 0.5, 1),
        opacity 0.35s ease;

    }

    .fx-mobile-nav__depth02 > li.is-sub-active > .fx-mobile-nav__depth03 {
        max-height: 500px;
        opacity: 1;
        background-color: rgba(251, 246, 228, .4);
    }


    /*   svg 회전    */
    .fx-mobile-nav__depth02 > li.is-sub-active
    > .fx-mobile-nav__sub-toggle
    > .c-icon {
      transform: rotate(90deg);
    }


    .fx-mobile-nav__sub-toggle > .c-icon {
      font-size: 1.6rem;
      transition: transform 0.3s ease;
    }


    .fx-nav__bar-wrap {
        height: 101px;
    }

    .fx-sitemap{ 
        display:none;
     }

    /*  햄버거 버튼 클릭시 화면전환 부드럽   */
    .fx-nav__mega-wrap{
        opacity:0;
        visibility:hidden;
        transform:translateY(-12px);
        transition:.3s ease;
    }


    .fx-nav__mega-wrap{
        display:none;
    }


    /*  하단 보더라인 이징효과 삭제 */
    .fx-nav__depth01 > li > a::after{
        display: none;
    }

    .fx-nav__depth01 > li > a{
        text-align: left;
    }


    /* login - search 적용 */
    .fx-mobile-nav__utility{
        display: flex;
        flex-flow: column wrap;
        align-items: flex-start;
        gap:clamp(1rem, 3vw, 2rem);
        margin-top:clamp(4rem, 10vw, 6rem);
        padding-inline: 1.6rem;;
    }

    .fx-mobile-nav__store{
        font-size: var(--wb-font-text);
        font-weight: var(--wb-font-weight-medium);

        display: flex;
        justify-content: center;
        align-items: center;
        gap:0.6rem;
    }

   .fx-mobile-nav__store > svg{
        width:2.6rem;
    }

    .fx-mobile-nav__login{
        font-size: var(--wb-font-text);
        font-weight: var(--wb-font-weight-medium);

        display: flex;
        justify-content: center;
        align-items: center;
        gap:0.6rem;
    }

   .fx-mobile-nav__login > svg{
        width:2.6rem;
    }

    .fx-mobile-nav__help{
        font-size: var(--wb-font-text);
        font-weight: var(--wb-font-weight-medium);
        background-color: #fff;

        display: flex;
        justify-content: center;
        align-items: center;
        gap:0.8rem;
    }

   .fx-mobile-nav__help > svg{
        width:2.3rem;
    }

    .fx-mobile-nav__search{
        font-size: var(--wb-font-text);
        font-weight: var(--wb-font-weight-medium);
        background-color: #fff;

        display: flex;
        justify-content: center;
        align-items: center;
        gap:0.8rem;
    }

    .fx-mobile-nav__search > svg{
        width:2.3rem;
    }





}




@media screen and ( max-width:768px ) {
    .fx-hero{
        top: 78%; 
        left: 50%; 
    }

    .fx-hero__title{
        color:#fff;
    }

    .fx-hero__cont{
        color:#fff;
    }

    /* 모바일에서는 대형 사이트맵 창의 작동을 원천 봉쇄(숨김) */
    .fx-sitemap-window { display: none !important; }


    /*  search- modal 패널 사이즈 수정 */
    .fx-search-modal__panel {
        width: min(70%, 450px);
    }


}


@media screen and ( max-width:450px ) {
    .fx-vsheader-pt01{
        max-height: 80vh; 
    }

    .fx-hero{
        top:74%;
        width:min(86%, 450px);
    }


    .fx-media{
        /* 모바일 분기점 세팅 */
        aspect-ratio: 9 / 16;
        max-height: clamp(50rem, 80vh, 80rem); 
        object-fit: cover;
    }

    /*  search- modal 패널 사이즈 수정 */
    .fx-search-modal__panel {
        width: min(60%, 450px);
    }

}

@media screen and ( max-width:320px ) {
    /*  search- modal 패널 사이즈 수정 */
    .fx-search-modal__panel {
        width: min(50%, 320px);
    }

}





/* iPhone Chrome landscape: low viewport height compensation */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1165px) {
    .fx-vsheader-pt01 {
        height: 130vh;
        min-height: 60rem;
    }
}