@charset "utf-8";

/*header 기본*/

    /*기본 레이아웃*/
    .header { width: 100%; height: 100px; position: fixed; z-index: 100; backdrop-filter: blur(6px); }
    .header .header-wrap { height: 100px; overflow: hidden; transition: all .3s ease-in-out; }
    .header .header-wrap.on { overflow: initial; }
    .header .header-wrap::before { content: ""; width: 100%; height: 1px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); background: #c1c1c1; transition: all .2s ease-in-out; opacity: 0; }
    .header .header-wrap.add-line::before { opacity: 1; }
    .h-inner { width: 96%; height: 100%; max-width: 1720px; padding-top: 25px; position: relative; margin: 0 auto; } 

    /* logo */
    .header .header-wrap .logo { width: 26rem; float: left; }
    .header .header-wrap .logo img { width: 100%; }
    .header .header-wrap .logo img.logo_b { display: none; }

    /* 헤더 호버 시 배경색이 바뀌는 경우의 로고(기본) */ 
    .header .header-wrap .logo.on img.logo_b { display: block; }
    .header .header-wrap .logo.on img.logo_w { display: none; }

/*header 기본 e*/

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

/* 햄버튼 스타일 s */
    /* ham-btn */
    .ham-btn { width: 40px; height: 40px; position: absolute; top: 30px; right:0; transition: all .3s ease-in-out; z-index: 200; cursor: pointer; opacity: 1; background: url('/resources/img/common/ico_ham.svg') no-repeat center/ 27px; filter:invert(1); }

    /* 모바일메뉴 활성화시 햄버튼 */
    .mob_gnb .ham-btn { z-index: 9999; } 
    .hd-ham-btn.ham-btn.active { opacity: 0; }

    /* 스크롤 시 햄버튼 */
    body:has(.header:hover) .hd-ham-btn.ham-btn { filter: none; }
    .hd-ham-btn.ham-btn.scroll { filter: none; }
/* 햄버튼 스타일 e */

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

/* gnb s*/ 
    /* 기본 레이아웃 */
    .gnb_wrap { width: auto; text-align: center; }
    .gnb_wrap > .gnb { overflow: hidden; }
    .gnb_wrap:hover > .gnb { overflow: inherit; }
    .gnb_wrap > .gnb > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -ms-flex-direction: row; flex-direction: row; -webkit-box-lines: single; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
    .gnb_wrap > .gnb > ul > li { position: relative; vertical-align: top; }
    .gnb_wrap > .gnb > ul > li > a { display: inline-block; text-align: center; font-weight: 800; color: #fff; font-size: var(--fs-20); padding: 14px 20px 28px; margin: 0 30px; white-space: nowrap; }
    header:hover .gnb_wrap > .gnb > ul > li > a { color:var(--main-black) }
        
    .gnb_wrap > .gnb > ul > li:hover > a,
    .gnb_wrap > .gnb > ul > li:focus > a { position: relative; }
    .gnb_wrap > .gnb > ul > li:hover > a::before,
    .gnb_wrap > .gnb > ul > li:focus > a::before { opacity: 1; }

    .gnb_wrap .img_wrap { display: none; }
    .gnb_wrap > .gnb > ul ul > li > a { transition:.3s ease; font-size: var(--fs-18); font-weight: 500; white-space: nowrap; }
    .gnb_wrap > .gnb > ul ul > li:hover a { color:var(--key-color); }

    /*alldrop:S--------------------------*/
    .header:hover .gnb_wrap.alldrop > .gnb > ul .two_depth, 
    .header:focus .gnb_wrap.alldrop > .gnb > ul .two_depth { display: block; }

    .gnb_wrap.alldrop > .gnb > ul .two_depth { padding: 20px 0 30px; }
    .gnb_wrap.alldrop > .gnb > ul .two_depth > li { margin-top: 20px; }

    .gnb_wrap.alldrop:hover > .gnb > ul > li .two_depth,
    .gnb_wrap.alldrop:focus > .gnb > ul > li .two_depth { opacity: 1; }
    /*alldrop:E--------------------------*/

/* gnb e*/ 

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

/* 스크롤 탑이 메인 비주얼 지나면 헤더 변경 s */
    .header.scroll { }
    .header.scroll .gnb_wrap > .gnb > ul > li > a { color: var(--color-black); }

    /* 스크롤 시 배경색이 바뀌지 않을 경우의 로고 */
    .scroll .header-wrap .logo img.logo_b { display: block; }
    .scroll .header-wrap .logo img.logo_w { display: none; }

    /* 원드롭 스크롤시  */
    .header.scroll .gnb_wrap.onedrop  > .gnb > ul > li > a:hover { color: #fff; }

/*스크롤 탑이 메인 비주얼 지나면 헤더 변경 e*/

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

/* 모바일메뉴 공통 기본 s*/
.mobile_menu { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; box-sizing: border-box; overflow: hidden; display: none; background: transparent; z-index: 250; }
.mobile_menu::after { content: ''; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.75); position: fixed; top: 0; left: 0; opacity: 0; transition: all 0.7s linear;  z-index: -1; }
.mobile_menu.mobileOn::after { opacity: 1; }

.mobile_menu .top_box { position: absolute; width: 90%; top:25px; left:5%; z-index: 500; display: flex; justify-content: space-between; }
.mobile_menu .top_box .logo { width: 26rem; }
.top_box .head-icons { margin-left: 0; }

.mob_gnb .gnb > ul > li .two-depth-wrap .img_wrap { display: none; }
.mobile_menu.mb-mode .gnb > ul > li > .two-depth-wrap .two_depth { display: none; }

.mobile_menu .nav-eng { display: none; }
.mobile_menu.eng-on .nav { display: none; }
.mobile_menu.eng-on .nav-eng { display: block; }


.mob_gnb.mob_gnb_half { width: 100%; height: 100vh; background-color: white; position: absolute; top: 0; left: unset; right: 0; transform: inherit; overflow: hidden; }
.mobile-menu-wrap { width: 92%; max-width: 1720px; padding: 16rem 8rem 10rem; margin:0 auto; }

.mobile-menu-wrap .ham-btn { background: none; top:0; }
.mob_gnb .ham-btn::after { content: ''; display: block; position: absolute; width: 75%; height: 2px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(45deg); background: white; }
.mob_gnb .ham-btn::before { content: ''; display: block; position: absolute; width: 75%; height: 2px; left:50%; top:50%; transform: translate(-50%,-50%) rotate(135deg); background: white; }

.mob_gnb.mob_gnb_half .gnb { width: 100%; height: 80vh; }
.mob_gnb.mob_gnb_half .gnb > ul { display: flex; flex-wrap: wrap; overflow-y: auto; height: 100%; }
.mob_gnb.mob_gnb_half .gnb > ul > li { padding: 10px 0; width: 20%; }
.mob_gnb.mob_gnb_half .gnb > ul > li > a { display: block; padding: 10px 0 15px; font-size: var(--fs-26); font-weight: 700; line-height: 120%; transition: .3s ease; word-break: keep-all; padding-bottom: 20px; }

.mobile_menu.mb-mode .mob_gnb.mob_gnb_half .gnb > ul > li > .two-depth-wrap .two_depth { width: calc(100% - 20px); border-left: 1px solid #eee; margin-left: 20px; }

.mob_gnb.mob_gnb_half .gnb > ul > li ul a { display: inline-block; font-size: var(--fs-20); line-height: 140%; padding: 6px 0 6px 12px; position: relative; }
.mo-wrap .txt_wrap { display: none; }

/* 하프창 크기 그대로 혹은 이상 */
.mobile_menu.mobileOn.rightIn .mob_gnb.mob_gnb_half { right: -645px; } 

.mobile_menu .mob_gnb.mob_gnb_half.ani_circle { background-color: transparent; }
.mobile_menu .mob_gnb.mob_gnb_half.ani_circle .bg { width: 0; height: 0; border-radius: 50%; background-color: var(--key-color); position: absolute; top: 0; right: 0; transform: translate(50%, -50%); }
.mobile_menu .mob_gnb.mob_gnb_half.ani_circle .mobile-menu-wrap { position: relative; }


@media screen and (max-width:1400px){
    .mob_gnb.mob_gnb_half .gnb > ul > li { width: 33%; }
    
}
@media screen and (max-width:768px){
    .mobile-menu-wrap { width: 100%; padding: 11rem 24px; }
    .mobile_menu .top_box .logo { width: 22rem; }
    /* mob_gnb_half */
    .mob_gnb.mob_gnb_half { width: 100%; }
    .mob_gnb.mob_gnb_half .gnb > ul > li { width: 100%; }
}

@media screen and (max-width:1700px){
    .header .header-wrap .logo { width: 24rem; }
}

@media screen and (max-width:1300px){
    .gnb_wrap { display: none; }
}

@media screen and (max-width:1024px){
    /* header */
    .header { height: 80px; }
    .header .header-wrap .logo { width: 20rem; }
    .header .header-wrap { height: 80px !important; }
    .header .header-wrap .h-inner { width: 100%; padding: 24px; }

    /* dropdown효과 */
    .header .header-wrap::before { display: none; }
    .header .header-wrap:hover { background-color: inherit; height: 80px; }
        
    /* 스크롤 */
    .scroll .head:hover { background-color: #fff; }
    .header.scroll .head:hover .logo img.logo_b { display: inline; }
    .header.scroll .head:hover .logo img.logo_w { display: none; }

    .scroll:hover .ham_btn span { background-color: var(--color-black); }
    .scroll:hover .ham_btn.active span { background-color: #fff; }
    .ham-btn { top:20px; right: 24px; }
}

@media screen and (max-width:500px){
    .mobile_menu .gnb > ul > li > ul { display: none; }
}