/* header */

.mobileheader{
	display: none;
}

@media all and (max-width:1023px){

header.header{
		display: none;
}
.mobileheader 
{
    width: 100%;
    top: 0;
    left: 0;
    display: flex !important; 
    justify-content: center;
    border-bottom: 1px solid var(--background-deppgray);
}

.mobileheaderInner 
{	
	position: fixed;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 90px;
    justify-content: space-between;
   	background-color: #fff;
   	z-index: 999;
}
.mobileheader .mobileBtnBox{
    width: 100%;
    height: 90px;
    display: flex;
    justify-content: center;
    position: relative;
    align-items: center;
}
.mobileheader .mobileBtnBox a{
    position: absolute;    
    left: 24px;
}
  
.mobileheaderInner .menuList 
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    margin-top: 80px;
    background-color: #fff;
    opacity: 0;
    transition: 0.3s all;
    display: none;
    pointer-events: none;
}
.mobileheaderInner .menuList.active{
    opacity: 1;
    display: flex;
    pointer-events: auto;
}
.mobileheaderInner ul {
	display: none;
}
.mobileheaderInner ul li 
{   
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--menu-font);
}

.mobileheaderInner ul li a 
{
    font-weight: 400;
    color: #767676;
}
.mobileheaderInner ul li.on a,
.mobileheaderInner ul li:hover a
{
    color: var(--main-color);
    font-weight: 600;
}

.Header_btn{
    position: absolute;
    right: 24px;
}
.lang{
	gap :0 24px;
}
.lang span:hover{
	color: #003D8F;
	cursor: pointer;
	font-weight: 600;
	
}
.menu-toggle {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border: none;
    cursor: pointer;
  }
  
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 3px;
    background-color: #003D8F;
    margin-bottom: 5px;
    transition: all 0.3s;
  }
  
  .menu-toggle span:nth-child(2) {
    width: 20px;
  }
  
  .menu-toggle.active span {
    background-color: #003D8F;
  }
  
  .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }
  
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  
  .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }
	.lang{
		display: flex;
		align-items: center;
		justify-content: center;
		gap:0;
	}
	
	.lang .earth {
		width: 24px;
	}
	.lang .earth img {
	  transition: filter 0.5s ease; 
	}
	.lang:hover .earth img {
	  filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(1747%) hue-rotate(197deg) brightness(95%) contrast(101%);
	}
	.lang .earth.Active img{
			filter: brightness(0) saturate(100%) invert(12%) sepia(97%) saturate(1747%) hue-rotate(197deg) brightness(92%) contrast(101%);
	}
	.lang .Eng, .lang .Kor{
	    display: flex;
	    align-content: center;
		align-items: center;
	    gap: 0 12px;
	}
	.lang:hover .Eng, .lang:hover .Kor{
		color :var(--main-color);
		font-weight: 600;
	}
}