@import url("reset.css"); 

#header{position: fixed; top: 0; width: 100%; height: 100px; z-index: 9990; transition: height .45s cubic-bezier(0.22, 1, 0.36, 1), background-color .35s ease, box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);}
#header.bg{height: 80px; background-color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);}
#header.bg .hd_wrap{max-width: 1600px;}
#header .hd_wrap{position: relative; max-width: 1280px; height: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; transition: max-width 0.8s ease;}
#header .hd_wrap h1.logo{width: fit-content;}
#header .hd_wrap h1.logo a{display: flex; align-items: center;}
#header .hd_wrap h1.logo a span.logo_mark{width: fit-content;}
#header .hd_wrap h1.logo a span.logo_text{text-indent: -9999px;}
#header .hd_wrap nav.gnb {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:100;}
#header .hd_wrap nav.gnb ul {display:flex; width:fit-content; margin:0; padding:0; list-style:none;}
#header .hd_wrap nav.gnb ul > li {position:relative; width:140px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800;}
#header .hd_wrap nav.gnb ul > li > a {position:relative; display:inline-block; padding-bottom:6px; text-decoration:none; color:#111; line-height:1.2;}
#header .hd_wrap nav.gnb ul > li > a::after {content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#111; transform:scaleX(0); transform-origin:left center; transition:transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
#header .hd_wrap nav.gnb ul > li:hover > a::after {transform:scaleX(1);}
#header .hd_wrap nav.gnb ul > li.has-sub {padding-bottom:24px; margin-bottom:-24px;}
#header .hd_wrap nav.gnb ul > li.has-sub .depth2 {position:absolute; top:75%; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; width:220px; padding:12px; background:#fff; border:1px solid rgba(17,17,17,.08); border-radius:16px; box-shadow:0 16px 40px rgba(0,0,0,.08); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease, transform .3s ease, visibility .3s ease; z-index:200;}
#header .hd_wrap nav.gnb ul > li.has-sub:hover .depth2 {opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%);}
#header .hd_wrap nav.gnb ul > li.has-sub .depth2 li {width:100%; display:block; font-size:16px; font-weight:600;}
#header .hd_wrap nav.gnb ul > li.has-sub .depth2 li a {display:block; width:100%; padding:12px 14px; border-radius:10px; color:#111; text-decoration:none; box-sizing:border-box; text-align: center;}
#header .hd_wrap nav.gnb ul > li.has-sub .depth2 li a:hover {background:#f5f7fa;}
#header .hd_wrap nav.gnb ul > li.has-sub .depth2 li a::after {display:none;}
#header .hd_wrap .hd_btn{display: flex; gap: 10px; width: fit-content; align-items: center;}
#header .hd_wrap .hd_btn a{display: flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 500px; background: linear-gradient(to bottom right, #4B83FF 0%, #81E8FB 100%); color: #fff; font-size: 18px; min-width: 142px; min-height: 42px; box-sizing: border-box; }
#header .hd_wrap .hd_btn a:hover{background: linear-gradient(to bottom right, #81E8FB 0%, #4B83FF 100%);}

#header .hd_wrap .hd_btn .sitemenu{display: none; flex-direction: column; gap: 11px; transition: all .7s ease; cursor: pointer;}
#header .hd_wrap .hd_btn .sitemenu.active{gap:10px;}
#header .hd_wrap .hd_btn .bar{display:block;height:3px;width:34px;background:#111;transition:all .7s ease;}
#header.hover .hd_wrap .hd_btnc .bar{background-color: #5a5a5a;}
#header.bg .hd_wrap .hd_btn .bar{background-color: #5a5a5a;}
#header .hd_wrap .hd_btn .bar.x-middle{display:block;height:3px;width:24px;background:#111;transition:all .7s ease;}
#header.hover .hd_wrap .hd_btn .bar.x-middle{background-color: #5a5a5a;}
#header.bg .hd_wrap .hd_btn .bar.x-middle{background-color: #5a5a5a;}
#header .hd_wrap .hd_btn .sitemenu.active .x-top{background:#111;transform:translateY(13px) rotateZ(45deg);}
#header .hd_wrap .hd_btn .sitemenu.active .x-middle{width:0;}
#header .hd_wrap .hd_btn .sitemenu.active .x-bottom{background:#111;transform:translateY(-13px) rotateZ(-45deg);}



#header .mobile_nav{position:fixed;top:100px;left:0;width:100%;height:calc(100vh - 100px);background:#fff;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);transition:opacity .35s ease, visibility .35s ease, transform .45s cubic-bezier(0.22, 1, 0.36, 1);z-index:999;overflow-y:auto;}
#header.bg .mobile_nav{top:80px;height:calc(100vh - 80px);}
#header .mobile_nav.active{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);}
#header .mobile_nav .mobile_nav_inner{width:92%;margin:0 auto;padding:30px 0 40px;}
#header .mobile_nav .mobile_gnb{margin:0;padding:0;list-style:none;border-top:1px solid #eaeaea;}
#header .mobile_nav .mobile_gnb > li{border-bottom:1px solid #eaeaea;}
#header .mobile_nav .mobile_gnb > li > a,
#header .mobile_nav .mobile_gnb > li > button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:22px 0;background:none;border:0;color:#111;font-size:16px;font-weight:800;text-align:left;cursor:pointer;}
#header .mobile_nav .mobile_gnb > li > a{text-decoration:none;}
#header .mobile_nav .mobile_gnb .mobile_sub_toggle .arrow{display:block;width:10px;height:10px;border-right:2px solid #111;border-bottom:2px solid #111;transform:rotate(45deg);transition:transform .35s ease;margin-right:4px;}
#header .mobile_nav .mobile_gnb .mobile_has_sub.active .mobile_sub_toggle .arrow{transform:rotate(225deg);}
#header .mobile_nav .mobile_depth2{display:none;margin:0;padding:0 0 18px 0;list-style:none;}
#header .mobile_nav .mobile_gnb .mobile_has_sub.active .mobile_depth2{display:block;}
#header .mobile_nav .mobile_depth2 li a{display:block;padding:12px 0 12px 12px;color:#555;font-size:15px;font-weight:600;text-decoration:none;}
#header .mobile_nav .mobile_depth2 li a:hover{color:#111;}
#header .mobile_nav .mobile_inqry{margin-top:30px;}
#header .mobile_nav .mobile_inqry a{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;padding:14px 20px;border-radius:500px;background:linear-gradient(to bottom right, #4B83FF 0%, #81E8FB 100%);color:#fff;font-size:18px;font-weight:700;text-decoration:none;box-sizing:border-box;}
body.menu-open{overflow:hidden;}
#header .mobile_nav_btn{margin-top:24px;}
#header .mobile_nav_btn a{display:flex;align-items:center;justify-content:center;width:100%;height:54px;border-radius:10px;background:#111;color:#fff;font-size:16px;font-weight:700;text-decoration:none;}



@media screen and (max-width:1600px) {
#header.bg .hd_wrap{max-width: 92%;}
}
@media screen and (max-width:1024px) {
    #header .hd_wrap h1.logo{height: 30px;}
    #header .hd_wrap h1.logo a{height: 100%;}
    #header .hd_wrap h1.logo a span.logo_mark{display: block; height: 100%;}
    #header .hd_wrap h1.logo a span.logo_mark img{height: 100%;}

    #header .hd_wrap nav.gnb{display: none;}
    #header .hd_wrap .hd_btn .sitemenu{display: flex;}
}


@media screen and (min-width:1025px){
    #header .mobile_nav{
        display: none !important;
    }
}

@media screen and (max-width:1024px){
    #header{
        height: 80px;
    }

    #header .hd_wrap{
        width: 92%;
    }

    #header .mobile_nav{
        top: 80px;
        height: calc(100vh - 80px);
    }
}

@media screen and (max-width:768px){

    #header .hd_wrap .hd_btn .sitemenu{gap: 7px;}
    #header .hd_wrap .hd_btn a{font-size: 15px; min-width: 116px; min-height: 32px;}
    #header .hd_wrap .hd_btn .sitemenu .bar{width: 24px; height: 2px;}
    #header .hd_wrap .hd_btn .sitemenu.x-middle{width: 14px; height: 2px;}
    #header .hd_wrap .hd_btn .sitemenu.active .x-top{transform : translateY(12px) rotateZ(45deg);}
    #header .hd_wrap .hd_btn .sitemenu.active .x-bottom{transform : translateY(-12px) rotateZ(-45deg);}
   
}