@charset "UTF-8";

#header {width: 100%; background: var(--dark); position: fixed; top: 0; right: 0; left: 0; z-index: 999;}

#header .btn-login {display: block; width: -webkit-fit-content; width: fit-content; padding: 6px 20px; border-radius: 6px; background: var(--highlight); font-weight: 600; font-size: 1.125rem; color: #fff;}
#header .btn-login.pc {position: absolute; top: 50%; right: 30px; transform: translateY(-50%);}

#header .logo {display: block; height: 50px;}
#header .logo img {display: block; height: 100%; object-fit: contain;}

#header .menu-bar {width: 100%; margin: 0 auto; display: -webkit-flex; display: flex; justify-content: space-between; align-items: center; column-gap: 24px;}

#header #gnb_pc {width: 100%;}
#header #gnb_pc .ul-main-menu {display: grid; grid-template-columns: repeat(6, 1fr);}
#header #gnb_pc .ul-main-menu>.item {display: -webkit-flex; display: flex; font-size: 1.25rem; font-weight: 700; text-align: center;}
#header #gnb_pc .ul-main-menu>.item .main-menu {width: 100%; display: inline-block; color: #fff; margin: auto;}
#header #gnb_pc .ul-main-menu>.item:hover .main-menu {color: var(--highlight);}
#header #gnb_pc .sub-menu-wrap {display: none; position: absolute; top: 80px; right: 0; left: 0; background: #fff;}
#header #gnb_pc:hover .sub-menu-wrap {display: block; border-bottom: 1px solid #EBF3F6;}
#header #gnb_pc .sub-menu-wrap .sub-menu-area {width: 100%; max-width: 1200px; margin: 0 auto; padding-left: 120px; display: grid; grid-template-columns: repeat(6, 180px);}
#header #gnb_pc .ul-sub-menu {width: 180px; background: #fff;}
#header #gnb_pc .ul-sub-menu:hover {background: #E5F8FF;}
#header #gnb_pc .ul-sub-menu>.item {padding: 15px 0; line-height: 1.5; text-align: center;}
#header #gnb_pc .ul-sub-menu>.item:first-child {padding-top: 30px;}
#header #gnb_pc .ul-sub-menu>.item:last-child {padding-bottom: 30px;}
#header #gnb_pc .ul-sub-menu>.item .sub-menu {display: inline-block; font-weight: 500; font-size: 0.938rem; color: var(--darkgray);}
#header #gnb_pc .ul-sub-menu>.item:hover .sub-menu {font-weight: 600; color: var(--highlight);}

#m_menu_open {width: 30px; height: 30px; display: -webkit-flex; display: flex; justify-content: center; align-items: center;}





@media screen and (min-width:1201px){
	#header .menu-bar {padding: 0 100px;}
}

@media screen and (max-width:1200px){
    #header .menu-bar {padding: 0 50px;}
    
    #header #gnb_pc .ul-main-menu {gap: 24px;}
    
    #header #gnb_pc .sub-menu-wrap {padding: 0 50px;}
    #header #gnb_pc .sub-menu-wrap .sub-menu-area {padding-left: 80px;}
    #header #gnb_pc .ul-sub-menu {width: 170px;}
}

@media screen and (max-width:1024px){
    /* #header #gnb_pc .ul-main-menu>.item {width: 140px;} */
    #header #gnb_pc .sub-menu-wrap .sub-menu-area {padding-left: 84px;}
    #header #gnb_pc .ul-sub-menu {width: 140px;}
}

@media screen and (min-width:993px){
    .mobile {display: none;}
    
    #header #gnb_pc  .main-menu {padding-top: 25px; padding-bottom: 25px;}
}

@media screen and (max-width:992px){
    .pc {display: none;}
    .mobile {display: block;}

	#header .btn-login.pc {display: none;}
    #header .menu-bar {height: 70px;}
    #header .logo {height: 44px;}

    #m_menu_open svg {width: 22.34px; height: 19px;}
}

@media screen and (max-width:768px){
    #header .menu-bar {padding: 0 40px;}
}

@media screen and (max-width:480px){
    #header .menu-bar {height: 60px; padding: 0 12px;}
    #header .logo {height: 40px;}

    #m_menu_open svg {width: 20px; height: 17px;}
}