/* skip navigation */
#u_skip{position:fixed;left:0;top:0;width:100%;text-align:center;z-index:9999;background-color:var(--color-gray90);}
#u_skip a{display:flex;}
#u_skip a:not(:focus){position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;}
#u_skip a:focus{align-items:center;justify-content:center;font-size:1.5rem;color:#fff;width:100%;height:5.8rem;margin:0 auto;text-align:center;outline:2px solid var(--color-secondary100);outline-offset:-.4rem;}

/* 헤더영역 */
header{position:relative;z-index:3000;width:100%;height:70px;padding:0 16px;border-bottom:1px solid var(--color-gray40); color:var(--color-gray80);font-size:var(--header-font);}
.main header{position:absolute;top:0;left:0;border-color:rgba(255,255,255, 0.3);color: #fff;}
header.is_fixed{position:fixed;top:0;left:0;width:100%;background:#fff;color:var(--color-gray80);box-shadow:0 4px 10px rgba(0,0,0,0.08);}
.sub header.is_fixed {border:none}
.main header.is_fixed .header_inner .logo_area .h_logo{background:url(/asset/www/images/h_sub_logo.svg) no-repeat center / contain;}
.main header.is_fixed .header_inner .util_area > a{color:#047EE2;border-color:var(--color-primary);}
.main header.is_fixed .header_inner .util_area > a::before{background-color:var(--color-primary);}
.main header.is_fixed .header_inner .util_area .menu_btn span,
.main header.is_fixed .header_inner .util_area .menu_btn span::before,
.main header.is_fixed .header_inner .util_area .menu_btn span::after{background:var(--color-gray70);}

header .header_inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;height:100%;margin:0 auto;}
header .header_inner .logo_area .h_logo{display:block;width:158px;height:36px;background:url(/asset/www/images/h_sub_logo.svg) no-repeat center / contain;}
.main header .header_inner .logo_area .h_logo{background:url(/asset/www/images/h_logo.svg) no-repeat center / contain;}
header .header_inner .gnb{display:flex;align-items:center;height:100%}
header .header_inner .gnb ul{display:flex;align-items:center;gap:clamp(20px, 4vw, 60px);height:100%}
header .header_inner .gnb ul li{display:flex;align-items:center;position:relative;width:100%;height:100%}
header .header_inner .gnb ul li + li::before{content:'';position:absolute;top:50%;left: calc(clamp(16px, 4vw, 60px) / -2);width:3px;height:3px;background-color:rgba(255,255,255, 0.5);border-radius:50%;transform: translate(-50%, -50%);}
header .header_inner .gnb ul li a{font-family:'Paperlogy';display:block;position:relative;height:100%;line-height:70px;font-weight:400;white-space:nowrap;}
header .header_inner .gnb ul li a.on{font-weight:500;}
header .header_inner .gnb ul li a::before{content:'';position:absolute;width:0;height:2px;bottom:0;left:50%;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:width 0.3s ease, left 0.3s ease}
header .header_inner .gnb ul li.on a::before{width:100%;left:0;z-index:3000;transform:scaleX(1)}
header .header_inner .util_area > a{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:130px;height:40px;padding:0 12px;border:1px solid var(--color-primary);border-radius:50px;font-size:16px;font-weight:500;text-align:center;color:#047EE2;line-height:1;box-sizing:border-box;}
header .header_inner .util_area > a::before{content:'';display:block;width:22px;height:22px;-webkit-mask:url('/asset/www/images/ico_contact.svg') no-repeat center / contain;mask:url('/asset/www/images/ico_contact.svg') no-repeat center / contain;background-color:var(--color-primary);}
.main header .header_inner .util_area > a{color:#fff;border-color: #fff;}
.main header .header_inner .util_area > a::before{background-color:#fff;}
header .header_inner .util_area .menu_btn{display:none;position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;box-sizing:border-box;}
header .header_inner .util_area .menu_btn span{position:absolute;top:50%;left:50%;width:18px;height:2px;background:var(--color-gray70);transform:translate(-50%, -50%);transition:background .3s ease;}
header .header_inner .util_area .menu_btn span::before,
header .header_inner .util_area .menu_btn span::after{content:'';position:absolute;left:50%;width:18px;height:2px;background:var(--color-gray70);transform:translateX(-50%);transition:top .3s ease, transform .3s ease, opacity .3s ease, background .3s ease;}
.main header .header_inner .util_area .menu_btn span,
.main header .header_inner .util_area .menu_btn span::before,
.main header .header_inner .util_area .menu_btn span::after{background:#fff;}
header .header_inner .util_area .menu_btn span::before{top:-6px;}
header .header_inner .util_area .menu_btn span::after{top:6px;}
header .header_inner .util_area .menu_btn.is_active span{background:transparent;}
header .header_inner .util_area .menu_btn.is_active span::before{top:0;transform:translateX(-50%) rotate(45deg);background:var(--color-gray70);}
header .header_inner .util_area .menu_btn.is_active span::after{top:0;transform:translateX(-50%) rotate(-45deg);background:var(--color-gray70);}
header .menu_dim{display: none;}

/* GNB 2depth 드롭다운 */
header .header_inner .gnb .depth2{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);flex-direction:column;gap:0;height:auto;min-width:190px;padding:8px 0;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.12);z-index:3100;align-items:stretch;}
header .header_inner .gnb ul li:hover .depth2{display:flex;}
header .header_inner .gnb .depth2 li{height:auto;width:100%;display:block;}
header .header_inner .gnb .depth2 li + li::before{display:none;}
header .header_inner .gnb .depth2 li a{height:auto;line-height:1;padding:10px 20px;color:var(--color-gray80);white-space:nowrap;font-size:14px;font-family:'Pretendard';}
header .header_inner .gnb .depth2 li a::before{display:none !important;}
header .header_inner .gnb .depth2 li a:hover{color:var(--color-primary);}

@media (min-width:1024px) {
    header .header_inner .gnb ul li a:hover{font-weight:500;}
    header .header_inner .gnb ul li a:hover::before{width:100%;left:0;z-index:3000;transform:scaleX(1)}
    header .header_inner .util_area > a:hover{text-decoration:underline;}
}
@media (max-width: 1024px) {
    header .header_inner .gnb ul li a::after {display: none !important;}
}
@media(max-width:768px){
    header .header_inner .gnb{display:block;position:fixed;top:0;right:0;width:min(280px, 80%);height:100vh;height:100dvh;padding:50px 20px;z-index:2990;background:var(--color-gray70);box-sizing:border-box;overflow-y:auto;transform:translateX(100%);opacity:0;visibility:hidden;pointer-events:none;transition:none;}
    header.is_menu_ready .header_inner .gnb{transition:transform .35s ease, opacity .25s ease, visibility 0s linear .35s;}
    header .header_inner .util_area > a{display: none;}
    header .header_inner .gnb.is_active{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;transition: transform .35s ease, opacity .25s ease;}
    header.is_menu_ready .header_inner .gnb:not(.is_active) {transform:translateX(100%);opacity:0;visibility:hidden;transition: transform .35s ease, opacity .25s ease, visibility 0s linear .35s;}
    header .header_inner .gnb.is_active{background:#fff;}
    header .header_inner .gnb ul{flex-direction:column;align-items: flex-start;}
    header .header_inner .gnb ul li{height: unset;}
    header .header_inner .gnb ul li a{width:100%;line-height:1;color:var(--color-gray80);}
    header .header_inner .gnb ul li.on a{padding-bottom:10px;font-weight:600}
    header .header_inner .util_area .menu_btn{display:block;z-index:2990;}
    header .header_inner .gnb .depth2{display:flex;position:static;transform:none;box-shadow:none;border-radius:0;padding:6px 0 6px 12px;background:transparent;min-width:unset;}
    header .header_inner .gnb .depth2 li a{padding:6px 0;font-size:13px;color:var(--color-gray50);}
    header .menu_dim{display:block;position:fixed;top:0;left:0;width:100%;height:100%;z-index:2980;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;pointer-events:none;transition:none;transition:none;}
    header.is_menu_ready .menu_dim{transition:opacity .3s ease,visibility 0s linear 0s;}
    header .menu_dim.is_active{opacity:1;visibility:visible;pointer-events:auto;transition: opacity .3s ease;}
    header.is_menu_ready .menu_dim:not(.is_active) {opacity:0;visibility:hidden;transition: opacity .3s ease, visibility 0s linear .3s;}
    header .header_inner .gnb.is_active + .util_area > a{display:inline-flex;align-items:center;justify-content:center;gap:5px;position:fixed;right:20px;bottom:20px;width:calc(min(280px, 80%) - 40px);border:1px solid var(--color-primary);color:var(--color-primary);font-weight:500;z-index:3000;}
    header .header_inner .gnb.is_active + .util_area > a::before{-webkit-mask:url('/asset/www/images/ico_contact.svg') no-repeat center / contain;mask:url('/asset/www/images/ico_contact.svg') no-repeat center / contain;background-color:var(--color-primary)}
    header .header_inner .util_area .menu_btn{display:block;z-index:3000;}
}

/* 푸터 영역 */
footer{font-family:'Pretendard';padding:60px 16px;background:var(--color-gray80);font-size:var(--font-size-xs);font-weight:300;color:#fff}
footer .footer_inner{max-width:1400px;height:100%;margin:0 auto;}
footer .footer_inner .f_top{display:flex;justify-content:space-between;padding-bottom: 20px;border-bottom:1px solid rgba(255,255,255, 0.3)}
footer .footer_inner .f_top .f_logo{display:block;width:158px;height:36px;background:url(/asset/www/images/f_logo.svg) no-repeat center / contain;}
footer .footer_inner .f_top .sns_area{display:flex;gap:20px;}
footer .footer_inner .f_top .sns_area .instargram{display:block;width:26px;height:26px;background:url(/asset/www/images/ico_insta.svg) no-repeat center / contain;}
footer .footer_inner .f_top .sns_area .blog{display:block;width:26px;height:26px;background:url(/asset/www/images/ico_blog.svg) no-repeat center / contain;}
footer .footer_inner .f_info{display:flex;flex-direction:column;gap:10px;margin-top:20px;font-weight:200;}
footer .footer_inner .f_info .copy{color:var(--color-gray50);}


/* 2026-07 header dropdown stabilization */
header .header_inner .gnb > ul{display:flex;align-items:center;gap:clamp(20px, 4vw, 60px);height:100%}
header .header_inner .gnb > ul > li{display:flex;align-items:center;position:relative;width:auto;height:100%;flex:0 0 auto}
header .header_inner .gnb > ul > li > a{height:100%;line-height:70px;white-space:nowrap}
header .header_inner .gnb .depth2{display:none;position:absolute;top:100%;left:50%;z-index:3100;min-width:220px;height:auto;padding:12px 16px;gap:0;flex-direction:column;align-items:stretch;border:1px solid var(--color-gray10);border-radius:12px;background:#fff;box-shadow:0 8px 18px rgba(0,0,0,.08);transform:translateX(-50%)}
header .header_inner .gnb > ul > li:hover > .depth2,
header .header_inner .gnb > ul > li:focus-within > .depth2{display:flex}
header .header_inner .gnb .depth2 li{display:block;width:auto;height:auto}
header .header_inner .gnb .depth2 li + li{margin-top:8px}
header .header_inner .gnb .depth2 li + li::before{display:none}
header .header_inner .gnb .depth2 a{height:auto;padding:6px 0;font-family:'Paperlogy';font-size:var(--font-size-sm);line-height:1.35;color:var(--color-gray80);white-space:nowrap}
header .header_inner .gnb .depth2 a::before{display:none}
@media(max-width:768px){
    header .header_inner .gnb > ul{height:auto;gap:20px}
    header .header_inner .gnb > ul > li{display:block;width:100%;height:auto}
    header .header_inner .gnb > ul > li > a{height:auto;line-height:1.2}
    header .header_inner .gnb .depth2{display:flex;position:static;min-width:0;margin-top:12px;padding:0 0 0 14px;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none}
    header .header_inner .gnb .depth2 a{padding:4px 0;color:var(--color-gray70);font-size:var(--font-size-xs)}
}


/* Floating top button */
.floating_top_btn{position:fixed;right:28px;bottom:28px;z-index:2900;width:56px;height:56px;border:0;border-radius:50%;background:var(--color-primary);color:#fff;font-family:'Paperlogy';font-size:13px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease;cursor:pointer}
.floating_top_btn.is_visible{opacity:1;visibility:visible;transform:translateY(0)}
.floating_top_btn:hover{background:#047EE2}
@media(max-width:768px){.floating_top_btn{right:18px;bottom:18px;width:48px;height:48px;font-size:12px;z-index:2970}}