@charset "utf-8";

/*header 기본*/
    /*기본 레이아웃*/
    .header { background-color: #fff; position: sticky; top: 0; z-index: 9999; transition: transform .6s ease; }
    .header-wrap { height: 5.625rem; box-sizing: border-box; transition: all .3s ease-in-out; font-size: .875rem; font-family: var(--font-head); }
    .h-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 1.875rem; position: relative; margin: 0 auto; } 

    /* logo */
    .header-wrap .logo a { display: flex; align-items: center; gap: 14px; overflow: hidden; }
    .header-wrap .logo .mark { display: flex; }
    .header-wrap .logo .mark > span { display: block; width: 16px; height: 16px; transform: translateY(140%); transition: border-radius .7s cubic-bezier(.23,1,.32,1),transform .3s }
    .header-wrap .logo.in .mark > span { transform: translateY(0); }
    .header-wrap .logo .mark > span.mark1 { background-color: var(--color-green); transition-delay: .6s,0ms }
    .header-wrap .logo .mark > span.mark2 { background-color: var(--color-yellow); transition-delay: .5s,.1s }
    .header-wrap .logo .mark > span.mark3 { background-color: var(--color-grey); transition-delay: .6s,.2s }

    .header-wrap .logo .h1-txt { width: max-content; height: 26px; overflow: hidden; }
    .header-wrap .logo .h1-txt p { font: 500 24px/120% var(--font-head); }

    #header .logo .mark > span[data-type="1"] {
        border-radius: 100% 0 0
    }
    
    #header .logo .mark > span[data-type="2"] {
        border-radius: 0 100% 0 0
    }
    
    #header .logo .mark > span[data-type="3"] {
        border-radius: 0 0 100%
    }
    
    #header .logo .mark > span[data-type="4"] {
        border-radius: 0 0 0 100%
    }
/*header 기본 e*/

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 햄버튼 스타일 s */
    .ham-btn {  width: 32px; height: 32px; font-size: 0; text-indent: -9999px; background: url('/resources/img/common/ham_btn.svg') no-repeat center/contain; transition: all 0.3s ease; display: none; }
    .ham-btn.active { background: url('/resources/img/common/ham_btn_close.svg') no-repeat center/contain; }
/* 햄버튼 스타일 e */

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* gnb s*/ 
    .gnb_wrap > .gnb > ul { display: flex; align-items: center; gap: 2.5rem; padding-right: 3.75rem; }
    .gnb_wrap > .gnb > ul.clear::after { display: none; }
    .gnb_wrap > .gnb > ul > li { position: relative; }
    .gnb_wrap > .gnb > ul > li::before { content: ""; width: 6.4285714286em; background: var(--color-green); aspect-ratio: 1 / 1; position: absolute; left: 0; top: 0; transform: scaleY(0);transition: transform .3s ease; transform-origin: 0 0; }
    .gnb_wrap > .gnb > ul > li:hover::before { transform: scaleY(1); }
    .gnb_wrap > .gnb > ul > li > a { display: block; padding: .7142857143em; overflow: hidden; isolation: isolate; }
    .gnb_wrap > .gnb > ul > li .img_wrap { display: none; }

    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth  { opacity: 0; visibility: hidden; position: absolute; transform: translateY(1em); left: .7142857143em; top: 100%; margin-top: -6px; white-space: nowrap; background: #fff; border: 1px solid var(--color-green); transition: opacity .2s, visibility .2s, transform .4s ease; }
    .gnb_wrap.onedrop > .gnb > ul > li:hover ul.two_depth { opacity: 1; visibility: visible; transform: translateY(0) skewX(0); }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth a { display: block; padding: .8571428571em 2.1428571429em .8571428571em .7142857143em; transition: background-color .2s; }
    .gnb_wrap.onedrop > .gnb > ul > li ul.two_depth a:hover { background-color: var(--color-green);}
/* gnb e*/ 

/* ---------------------------------------------------------------------------------------------------------------------------------------------- */

/* 모바일메뉴 공통 기본 s*/
.mobile_menu { width: 100%; height: 100%; padding-top: 91px; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow: hidden; background: #fff; z-index: 250; transform: translateX(100%); transition: all 0.6s ease; }
.mobile_menu.open { transform: translateX(0); }

.mob_gnb .gnb > ul > li .img_wrap { display: none; }
/* 모바일메뉴 공통 기본 e*/

/* 반응형 */
@media screen and (max-width:1024px){
    /* header */
    .header,
    .header .header-wrap { height: 90px; }

    .gnb_wrap { display: none; }
    .ham-btn { display: block; }
}
@media screen and (max-width:768px){
  .header .header-wrap .h-inner { padding:0 1.5rem; }
}
@media screen and (max-width:500px){
}