@charset "utf-8";

/* Header */
header { position: fixed; z-index: 100; width: 100%; height: 90px; transition: .3s ease-out; }
header .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; width: 94%; max-width: 1720px; height: 100%; margin-inline: auto; transition: all .3s ease-in-out; }
header .logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 154px; height: 100%; background: url("/resources/img/common/logo_w.png") no-repeat center/contain; text-indent: -9999px; overflow: hidden; transition: background .3s ease-out; filter: brightness(1.2); }
header .logo a { display: block; width: 100%; height: 100%; }
header .header-right { display: flex; align-items: center; justify-content: center; gap: 100px; flex-shrink: 0; width: max-content; height: 100%; }
header .phone-number a { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-family); font-size: var(--fs-18); font-weight: 200; letter-spacing: -0.01em; line-height: 1; color: #efefef; }
header .phone-number a::before { content: '';  width: 16px; height: 16px; background: url('/resources/img/mark_tel.png') no-repeat center / contain; filter: brightness(1.5); }




/* GNB Wrap */
#gnb-wrap { display: inline-block; text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#gnb-wrap .gnb > ul { display: flex; justify-content: center; transition: .3s ease-out; }
#gnb-wrap .gnb > ul > li { position: relative; }
#gnb-wrap .gnb > ul > li > a { width: max-content; position: relative; display: inline-block; padding: 0 40px; font-family: var(--font-family); font-size: var(--fs-18); font-weight: 700; color: #fff; letter-spacing: -0.01em; line-height: 1; transition: .3s ease-out; }
#gnb-wrap .gnb > ul > li > a::before { content: ''; position: absolute; left: 50%; top: -16px; transform: translateX(-50%); width: 12px; height: 12px; background: url('/resources/img/mark_gnb.png') no-repeat center / contain; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; pointer-events: none; }
#gnb-wrap .gnb > ul > li > a:hover::before,
#gnb-wrap .gnb > ul > li > a:focus-visible::before,
#gnb-wrap .gnb > ul > li:hover > a::before,
#gnb-wrap .gnb > ul > li:focus-within > a::before { opacity: 1; visibility: visible; }
#gnb-wrap .menu-two-depth { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 40px; visibility: hidden; opacity: 0; transition: .3s ease; white-space: nowrap; }
#gnb-wrap .menu-two-depth > li > a { padding: 0; font-family: var(--font-family); font-size: var(--fs-16); font-weight: 400; letter-spacing: -0.01em; line-height: 1.4; opacity: 1; transition: .3s ease; white-space: nowrap; color: #fff; }
#gnb-wrap .menu-two-depth > li:hover a { opacity: 0.8; }
#gnb-wrap .menu-img-wrap { display: none; }

/* GNB Wrap - One Drop */
#gnb-wrap.onedrop .gnb > ul > li { z-index: 0; position: relative; }
#gnb-wrap.onedrop .gnb > ul > li:where(:hover, :focus-within) .menu-two-depth { visibility: visible; opacity: 1; }
#gnb-wrap.onedrop .menu-two-depth { top: calc(100% + 14px); bottom: auto; left: 50%; transform: translateX(-50%); min-width: auto; height: 40px; padding: 0 40px; background: var(--gray1); border-radius: 0; }
#gnb-wrap.onedrop .menu-two-depth > li > a { position: relative; padding: 0; }

/* Ham button */
header .header-right .ham-btn { width: 28px; height: 20px; cursor: pointer; position: relative; display: inline-flex; flex-direction: column; justify-content: space-between; border: none; background: transparent; padding: 0; }
header .header-right .ham-btn span { width: 100%; height: 2px; background-color: #efefef; transform: none; position: static; left: auto; top: auto; }


@media screen and (max-width: 1600px) {
    header .header-right .ham-btn { width: 28px; height: 20px; }
}

@media screen and (max-width: 1280px) {
    header { height: 80px; }
    #gnb-wrap .gnb > ul > li > a { padding: 0 28px; }
    header .header-right { gap: 48px; }
}

@media screen and (max-width: 1024px) {
    header { height: 70px; }
    #gnb-wrap { display: none; }
    header .phone-number { display: none; }
    header .header-right .ham-btn { display: inline-flex; width: 24px; height: 18px; }
    header .header-inner { max-width: 100%; justify-content: space-between; }
}
@media screen and (max-width: 640px) {
    header { height: 56px; }
    header .logo { width: 18rem; }
}


/* Mobile Menu */
.mobile-menu-wrap { visibility: hidden; z-index: 100; position: fixed; inset:0; background: transparent; opacity: 0; transition: .3s ease; }
/* .mobile-menu-wrap::after { visibility: hidden; z-index: -1; content: ''; position: absolute; background-color: rgba(0, 0, 0, 0.6); inset:0; transition: opacity 0.7s linear; pointer-events: none; } */
.mobile-menu-wrap .mobile-menu { transition: .3s ease-out; }
.mobile-menu-wrap .mobile-top-box { display: flex; align-items: center; justify-content: space-between; height: 30px; }
.mobile-menu-wrap .mobile-top-box .mobile-logo { width: 203px; aspect-ratio: 203/30; }
.mobile-menu-wrap .mobile-top-box .mobile-logo img { width: 100%; height: 100%; object-fit: contain; } 
.mobile-menu-wrap .mobile-top-box .ham-btn { position: relative; }
.mobile-menu-wrap .mobile-top-box .ham-btn span { width: 38px; height: 2px; background-color: var(--gray4); left: 0; top: 50%; position: absolute; transition: .35s ease-out; }
.mobile-menu-wrap .mobile-top-box .ham-btn .hb01 { transform: rotate(45deg); }
.mobile-menu-wrap .mobile-top-box .ham-btn .hb02 { transform: rotate(-45deg); }

/* Mobile Menu Open */
.mobile-menu-wrap.mobileOn { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn::after { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn.mob-half .mobile-menu { transform: translateX(0); }

/* GNB Wide */
.mobile-menu-wrap.mob-wide .mobile-menu { position: relative; width: 100%; height: 100vh; padding: 80px; color: white; }
.mobile-menu-wrap.mob-wide .mobile-menu::after { content: ''; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--main-black) 95%, transparent); z-index: -1; pointer-events: none; }
.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { display: flex; justify-content: center; align-items: center;  height: stretch;  }
.mobile-menu-wrap.mob-wide .gnb > ul { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.mobile-menu-wrap.mob-wide .gnb > ul > li { text-align: center; width: 100%; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > a { font-size: var(--fs-24); font-weight: 600; color: white; letter-spacing: -0.24px; word-break: keep-all; position: relative; transition: .3s ease-out; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > a::before { content: ''; width: 2.4rem; height: 2.4rem; background: url('/resources/img/mark_mob_ck.png') no-repeat center / contain; opacity: 1; visibility: hidden; transition: opacity .4s ease, visibility .3s ease; pointer-events: none; position: absolute; left: 0; top: 0; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:hover > a,
.mobile-menu-wrap.mob-wide .gnb > ul > li:focus > a { padding-left: 40px; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:hover > a::before,
.mobile-menu-wrap.mob-wide .gnb > ul > li:focus > a::before { opacity: 1; visibility: visible; }
.mobile-menu-wrap.mob-wide .gnb > ul > li.is-open > a { opacity: 0.7; }
.mobile-menu-wrap.mob-wide .gnb > ul > li .menu-img-wrap { display: none; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > .menu-two-depth-wrap { display: none; overflow: hidden; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > .menu-two-depth-wrap .menu-two-depth { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 30px; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > .menu-two-depth-wrap .menu-two-depth > li > a { display: block; font-size: var(--fs-20); font-weight: 300; letter-spacing: -0.2px; line-height: 1; color: white; }
.mobile-menu-wrap.mob-wide .gnb > ul > li > .menu-two-depth-wrap .menu-two-depth > li > a:hover { opacity: 0.7; }

@media screen and (max-width:1600px){
    .mobile-menu-wrap.mob-wide .mobile-menu { padding: 60px; }
    .mobile-menu-wrap .mobile-top-box .ham-btn span { width: 32px; }
}
@media screen and (max-width:1024px){
    .mobile-menu-wrap.mob-wide .mobile-menu { padding: 4rem; }
    .mobile-menu-wrap.mob-wide .gnb > ul > li:hover > a,
    .mobile-menu-wrap.mob-wide .gnb > ul > li:focus > a { padding-left: 3.6rem; }
    .mobile-menu-wrap.mob-wide .gnb > ul > li > a::before { }
}
@media screen and (max-width:768px){
    .mobile-menu-wrap.mob-wide #mobile-gnb-wrap { width: 100%; padding: 11rem 24px; }
    .mobile-menu-wrap.mob-wide .mobile-menu { width: 100%; }
    .mobile-menu-wrap.mob-wide .gnb > ul > li { width: 100%; }
}

.sub header .logo { background: url("/resources/img/common/logo.png") no-repeat center/contain; }
.sub header .phone-number a { color: var(--gray1); }
.sub header .phone-number a::before { filter: brightness(1); }
.sub #gnb-wrap .gnb > ul > li > a { color: var(--main-black); }
.sub header .header-right .ham-btn span { background-color: var(--main-black); }

/* Scroll */
header.scroll { background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
header.scroll .logo { background: url("/resources/img/common/logo.png") no-repeat center/contain; filter: brightness(1); }
header.scroll .phone-number a { color: var(--gray2); }
header.scroll .phone-number a::before { filter: brightness(1); }
header.scroll .header-right .ham-btn span { background-color: var(--main-black); }
header.scroll #gnb-wrap .gnb > ul > li > a { color: var(--main-black); }
header.scroll #gnb-wrap .gnb > ul > li > a::before { background: url('/resources/img/mark_gnb.png') no-repeat center / contain; filter: brightness(1.5); }