#header{
width: 100%;
height: 100px;
background:rgba(42,65,95,0.6);
position: fixed;
top:0px;
z-index:11;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
}
.menu-toggle{
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #FFF;
font-size: 2.5rem;
cursor: pointer;
z-index: 10;
display: none;
}
#nav_menu{
min-width: 100%;
padding-top:20px;
display: flex;
justify-content: space-between;
align-items: center;
text-transform: uppercase;/*모든 글자를 대문자로 바꿈*/
font-size: 1.6rem;
}
.brand{
margin: 0 0 0 10px;
font-size:2rem;
transform: translateX(-77rem);
animation: slideIn .5s forwards;
font-family: 'PyeongChangPeace-Bold', sans-serif;
}
.brand a{
color: #FFF;
}
.brand span{
color: crimson;
}
#nav_menu ul{
display: flex;
margin-right: 20px;
}
#nav_menu ul li{
list-style: none;
transform: translateX(77rem);
animation: slideIn .5s forwards;
}
#nav_menu ul li:nth-child(1){
animation-delay: 0s;
}
#nav_menu ul li:nth-child(2){
animation-delay: .33s;
}
#nav_menu ul li:nth-child(3){
animation-delay: .65s;
}
#nav_menu ul li:nth-child(4){
animation-delay: 1s;
}
#nav_menu ul li a{
font-family:"Tenada","NEXON Lv1 Gothic OTF","Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight: 700;
font-size: 1.25rem;
color: #FFF;
padding: 12px 0 5px 0;
margin: 0 3rem;
position:relative;
}
#nav_menu ul li a:last-child{
margin-right: 0;
}
#nav_menu ul li a::before,
#nav_menu ul li a::after{
content: '';
position: absolute;
width: 100%;
height: 5px;
background-color: #FFF;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
#nav_menu ul li a::before{
top: 0;
transform-origin: left;
}
#nav_menu ul li a::after{
bottom: 0;
transform-origin: right;
}
.overlay{
background-color: rgba(0,0,0,0.8);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
#nav_menu ul li a:hover::before,
#nav_menu ul li a:hover::after{
transform: scaleX(1);
}
@keyframes slideIn {
from{
}
to{
transform: translateX(0);
}
}
.screenFull, .hd_login li a{
font-size: 0.75rem !important;
color: #FFF;
cursor:pointer;
}
.hd_login i{
margin-right:2px;
}
@media screen and (max-width: 768px){
.menu-toggle{
display: block;
}
.menu-toggle i{
position: relative;
top:-10px;
right:-15px;
}
#nav_menu{
padding-top:50px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
#nav_menu ul{
flex-direction: column;
margin: 50px 0 0 0;
display: none;
}
#nav_menu ul li{
margin-top: 3.5rem;
}
#nav_menu ul li a{
margin:0px;
font-size: 1.85rem !important;
}
.brand{
position:absolute;
top:33px;
left:7px;
font-size:2rem;
transform: translateX(-77rem);
animation: slideIn .5s forwards;
font-family: 'PyeongChangPeace-Bold', sans-serif;
}
.overlay.menu-open,
#nav_menu ul.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
}