/* common class */

:root 
{
    --hm:20px;
    --hsm:18px;
    --main: #E76203;
    --black: #111;
    --gray:#767676;
}

.hm 
{
    color :#fff;
    font-weight: 500;
    font-size: var(--hm);
}

.hm.active, .hs.active, .hm:hover, .hsm:hover   
{
    color: var(--main);
    font-weight: 600;
}

.hsm 
{
    color :var(--black);
    font-weight: 500;
    font-size: var(--hsm);
}


/* header */

.header 
{
    width: 100%;    
    height: 90px;
    display: flex;
    justify-content: center;
    position:fixed;
    box-sizing: content-box;
/*     border-bottom: 1px solid #e5e5ec; */
/*     background: #fff;    */
    background: rgba(0,0,0,0.3);   
    z-index:3;
}

.header.on 
{
     border-bottom: 1px solid #e5e5ec; 
     background: #fff;    	
} 

.header.on .menu_wrap > li .hm{ color: var(--black);}

.headerBackground 
{
    width: 100%;
    /* height: 406px; .menu_wrap > li > ul 높이값 + 90으로 설정하기 */
    border-bottom: 1px solid #e5e5ec;
    position: absolute;
    top: 0;	
    display:none;
    background: #fff;
    z-index:2;
}

.headerInner 
{
    width: calc((1500 / 1920) * 100%);
    height: 100%;   
    display:flex;	
	align-items: center;
	z-index:3;
}

.logo 
{
	display: flex;
    align-items: center;
    justify-content: center;
      z-index:1;
}

.menu_wrap 
{
    display: flex;
    gap: 0 40px;
    margin: 0 auto;	
    height: 100%;
    align-items: center;
}

.menu_wrap:hover .hm 
{
	color:#111;
}

.menu_wrap > li 
{
    position: relative;
    padding: 0 40px;
    text-align: center;
    height:100%;
    display:flex;
    align-items:center;
}

.menu_wrap > li > ul 
{
	position: absolute;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    display: none;
}

.menu_wrap > li > ul li 
{
	padding: 14px 0;
}

.menu_wrap > li:hover
{
	color: var(--main);
}

.m_headerInner { display: none; }

.header > .headerInner > .logout{
    border: 1px solid white;
    width: 70px;
    height: 30px;
    border-radius: 4px;
    cursor: pointer;
	margin-left: 10px;
	color : white;
} 
.header.on > .headerInner > .logout{
    border: 1px solid var(--gray);
    color: var(--gray);
}
.header > .headerInner > .logout:hover{
    border: 1px solid var(--main);
    color: var(--main);
}
/* 반응형 구간 */

/* 노트북 & 테블릿 가로 (해상도 1024px ~ 1279px)*/ 
@media all and (max-width:1279px) 
{ 

} 

/* 테블릿 가로 (해상도 768px ~ 1023px)*/ 
@media all and (max-width:1023px) 
{ 
	:root 
	{
	    --hm:16px;
	    --hsm:14px;
	}
	.menu_wrap { gap: 0 20px; }
	.menu_wrap > li { padding: 0 20px; }
	.hsm { letter-spacing: -1px; }
} 

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px)
{
	.menu_wrap 
	{  
		display: none;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #fff;
        margin: inherit;
        flex-direction: column;
        align-items: center;
        z-index: 44;
        padding-top: 40px;	
        overflow: scroll;
	}
	.m_headerInner 
	{ 
		display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        padding: 0 40px; 
    }
	.headerInner, .headerBackground { display: none; }
	.menu_wrap > li 
	{
        padding: 0;
        height: initial;
        width: 100%;
        border-bottom: 1px solid #e5e5ec;
        flex-direction: column;
	}
	.menu_wrap > li.first 
	{
		border-top: 2px solid #111;
	}
	.menu_wrap > li.news 
	{
		border-bottom: 2px solid #111;
	}
	
	.menu_wrap > li > ul 
	{
	    display: none;
	    position: initial;
	    width: 100%;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    transform: initial;
	    border: 2px solid #111;	
	    border-right: 0;
        border-left: 0;
	}
	
	.menu_wrap > li > ul li { padding: 24px; }
	.hm { font-size: 24px; width: 100%; display: flex; justify-content: space-between; padding: 40px; color:#111;}
	.hsm { font-size: 20px;}
	
	.logo { margin-bottom: 40px; }
	.mlogo { margin-bottom:0; }
	
	.logout{
		color:black;
		border: 0;
		width: 100%;
	    height: 70px;
	    font-size: 20px;
	}
	.logout:hover{
		border: 0;
		color: var(--main);
	}
}
/* 모바일 세로 (해상도 ~ 479px)*/ 
@media all and (max-width:479px) 
{   

}