@charset "utf-8";

/* ---------- #my_header ---------- */
#my_header { position: fixed; z-index: 99; top: 0; left: 0; z-index: 99; width: 100%; }

/* 최상단 영역 */
#my_header .top { width: 100%; height: 100px; background: #fff; border-bottom: 3px solid var(--main-color); }
#my_header .top .container { display: flex; justify-content: space-between; align-items: center; }
#my_header .logo { height: 53px; }
#my_header .right { display: flex; justify-content: flex-end; align-items: center; }
#my_header .right > ul { display: flex; justify-content: flex-end; align-items: center; }
#my_header .right > .btn_wrap { margin-left: 12px; display: flex; justify-content: flex-end; align-items: center; }
#my_header .right > .btn_wrap > * { margin-left: 7px; width: 45px; height: 45px; cursor: pointer; }

/* 1차메뉴 */
#my_header nav { position: relative; z-index: 99; margin-top: 0px; width: 100%; height: 60px; background: var(--main-color); }
#my_header nav::before { position: absolute; top: 60px; left: 0;  width: 100%; height: /*207px*/0; background: #ffffffe3; border-bottom: 0; display: block; content: ""; }
#my_header nav ul.gnb_wrap { display: flex; justify-content: center; align-items: flex-start; }
#my_header nav ul.gnb_wrap > li { position: relative; margin-right: 80px; text-align: center; }
#my_header nav ul.gnb_wrap > li:last-child { margin-right: 0; }
#my_header nav ul.gnb_wrap > li > a > h2 { line-height: 58px; font-size: 16px; color: #fff; font-weight: 500; }

/* 2차메뉴 */
#my_header nav ul.gnb_wrap > li > div { position: absolute; z-index: 99; top: 50px; left: 50%; transform: translate(-50%,0); height: /*auto*/0; overflow: hidden; }
#my_header nav ul.lnb_wrap { padding: 30px 20px; min-width: 150px; text-align: center; }
#my_header nav ul.lnb_wrap > li { margin: 12px 0; }
#my_header nav ul.lnb_wrap > li > a > h3 { font-size: 14px; font-weight: 400; color: var(--gray-33); line-height: 125%; transition-duration: 0.1s; }


/*** hover  ***/
/* 1200px or more */
@media all and (min-width : 1200px){
  
    #my_header.on nav::before { height: 207px; border-bottom: 1px solid var(--border-color); transition-duration: 0.4s; }
    #my_header.on nav ul.gnb_wrap > li > div { height: 207px; transition-duration: 0.4s;}
    #my_header nav ul.lnb_wrap > li:hover h3 { padding-left: 3px; color: var(--sub-01); font-weight: 700; }

}


/*** responsive ***/
/* 1200px or less */
@media all and (max-width: 1200px){

    /* 최상단 영역 */
    #my_header .top { height: 75px; }
    #my_header .logo { height: 38px; }
    #my_header .right > .btn_wrap { margin-left: 0px; }
    #my_header .right > .btn_wrap > * { margin-left: 7px; width: 35px; height: 35px; }
    
    /* 1차메뉴 */
    #my_header nav { display: none; }
}

/* 767px or less */
@media all and (max-width: 767px){

    /* 최상단 영역 */
    #my_header .top { height: 75px; }
    #my_header .logo { height: 34px; }
    #my_header .right > ul { display: none; }
    #my_header .right > .btn_wrap > * { margin-left: 5px; width: 30px; height: 30px; }

}