/* header */
#header {position: fixed; left: 0; top: 0; width:100%; background: #e30613; z-index:57; transition: .3s;}
#header .header-inner {position: relative; max-width: 1700px; height: 80px; margin:0 auto; display: flex; justify-content: space-between; align-items: center; z-index: 10;}
#header h1 a {position: relative; display: block;}

#nav {position: relative; display: flex; align-items: center; height: 100%;}
#nav .gnb {display: flex; height: 100%;}
#nav .gnb > li {position: relative; text-align: center;}
#nav .gnb > li + li {margin-left: 84px;}
#nav .gnb > li > a {font-family: 'NanumSquare'; font-size: 20px; font-weight: 400; color: #fff; height: 100%; display: flex; align-items: center; transition: color .3s;}

/*child_menu*/
#nav .gnb .lnb {position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: 100%; background: #fff; min-width: 178px; display: none;}
#nav .gnb .lnb::before {content: ''; position: absolute; left: 50%; top: -11px; transform: translateX(-50%); width: 21px; height: 11px; background: url("../img/tri.png");}
#nav .gnb .lnb li a {display: block; white-space: nowrap;  font-family: 'NanumBarunGothic'; font-size: 14px; font-weight: 400; color: #e30613; padding: 18px 0; transition: .3s;}
#nav .gnb .lnb li + li a {border-top: 1px solid rgba(227, 6, 19, .25);}
#nav .gnb .lnb li:hover a {color: #c9020e;}
#nav .gnb .lnb li a.active {color: #c9020e;}

/* media query */
@media screen and (max-width: 1700px) {
    #header .header-inner {padding: 0 60px;}
}

@media screen and (max-width: 1300px) {
    #nav .gnb > li > a {font-size: 18px;}
    #nav .gnb > li + li {margin-left: 74px;}
}

@media screen and (max-width: 1200px) {
    #nav .gnb > li > a {font-size: 17px;}
    #nav .gnb > li + li {margin-left: 64px;}
}

@media screen and (max-width: 1024px) {
    #header .header-inner {height: 60px; justify-content: center;}
    #nav {display: none;}
    #header h1 a {max-width: 155px;}
}