@charset "utf-8";

#preview_item { display: none; }
#hd { display: none; }

/* ---------- #my-header ---------- */
#my-header { position: fixed; z-index: 999; top: 0px; left: 50%; transform: translate(-50%, 0); width: 100%; /*overflow: hidden*/; box-shadow: 0 4px 15px 0 rgba(0,0,0,0.15); }

/*top*/
#my-header .top { padding: 12px 0; height: 80px; background: #fff; box-sizing: border-box; }  
#my-header .top .container-xxl { display: flex; justify-content: space-between; align-items: flex-start; height: 100%; }
#my-header .logo { flex-shrink: 0; width: 250px; height: 100%; }  
#my-header .logo > a { display: block; width: 100%; height: 100%; }  
#my-header .right { height: 100%; display: flex; justify-content: flex-end; align-items: center; }  
#my-header .login-wrap { display: flex; justify-content: space-between; align-items: center; }
#my-header .login-wrap > li { flex-shrink: 0; position: relative; padding: 0 10px; }
#my-header .login-wrap > li.line::after { position: absolute; top: 6px; left: 0px; width: 1px; height: 10px; background: var(--gray-bd); display: block; content: ""; }
#my-header .login-wrap > li > a { font-size: 13px; font-weight: 400; color: var(--gray-61); }
#my-header .btn-wrap { display: flex; justify-content: flex-end; align-items: center; }
#my-header .btn-wrap > li > * { display: block; width: 40px; height: 100%; margin-left: 10px; cursor: pointer; }

/*nav-bar*/
#nav-bar { background: var(--mc); text-align: center; }
#nav-bar .gnb { height: 60px; display: flex; justify-content: center; align-items: flex-start; }
#nav-bar .gnb h2 { padding: 0 50px; font-size: 17px; line-height: 60px; font-weight: 500; color: #fff; }
#nav-bar .lnb { 
    position: absolute; top: 140px; left: 0; width: 100%; z-index: 1; overflow: hidden;
    display: none/*flex*/; justify-content: center; align-items: flex-start; background: #fff; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.15); 
}
#nav-bar .lnb::after { position: absolute; top: 60px; width: 100%; height: 100%; background: #f1f1f1; display: block; content: ""; z-index: -1; }
#nav-bar .lnb > li { position: relative; height: 60px; overflow: hidden; }
#nav-bar .lnb > li::after { position: absolute; top: 58px; left: 0; width: 0; height: 2px; background: var(--mc); display: block; content: ""; z-index: 1; }
#nav-bar .lnb h3 { padding: 0 40px; font-size: 15px; line-height: 60px; font-weight: 700; color: var(--gray-33); }
#nav-bar .sub li h4 { font-size: 15px; font-weight: 400; color: var(--gray-55); margin-bottom: 10px; }
#nav-bar .sub li:first-child h4 { margin-top: 30px; }
#nav-bar .sub li:last-child h4 { margin-bottom: 30px; }



/*** hover  ***/
/* 1200px or more */
@media all and (min-width : 1200px){
    #nav-bar .gnb > li:hover .lnb { display: flex; }
    #nav-bar .lnb li:hover { height: auto; overflow: hidden; }
    #nav-bar .lnb li:hover::after { width: 100%; transition-duration: 0.4s; }
    #nav-bar .lnb li:hover h3 { color: var(--mc); }
    #nav-bar .sub li:hover h4 { color: var(--mc); }

}



/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    /*top*/
    #my-header .top { padding: 15px 0; height: 80px; border-bottom: 2px solid var(--mc); }  
    #my-header .logo { width: 180px; height: 100%; }   
    #my-header .login-wrap { display: none; }
    #my-header .btn-wrap > li > * { width: 34px; margin-left: 7px; }
    /*nav-bar*/
    #nav-bar { display: none; }
}



/* 767px or less */
@media all and (max-width : 767px){
    /*top*/
    #my-header .top { padding: 10px 0; height: 70px; }  
        #my-header .logo { width: 150px; height: 100%; }   
    #my-header .btn-wrap > li > * { width: 28px; margin-left: 5px; }
}