/* 메인메뉴 */
.gnbBox {position:relative; left:15%; top:10%;}
nav h2 a {display:inline-block; font-weight:bold; color:#000; margin-bottom:30px; letter-spacing:0.1em; transition: all .3s;}
nav h2 a:hover {color:#c9002b;}
nav h2 a:after {content: ''; display: block; width: 0; height: 2px; background: #c9002b; transition: width .3s;}
nav h2 a:hover::after {width:100%}
nav h2 img {width:150px; }
ul.gnb {width:300px; animation: text .6s .2s both;}
nav > ul.gnb > li {position: relative;}
nav ul.gnb li a {color: #000; text-decoration:none; transition: all .3s ease-in-out; display: inline-block; margin: 0; padding: 0; line-height:25px; }
nav ul.gnb > li > a {font-size:30px; line-height:120%; font-weight:700; padding:15px 0;}
nav ul.gnb > li:hover > a {transform: scale(1.1); color:#c9002b}
nav ul.gnb > li a:after{content: ''; display: block; height: 2px; background-color:#c9002b; transition: all .3s ease-in-out; visibility: hidden; opacity: 0; margin-top: 0px; }
nav ul.gnb > li:hover > a:after {visibility: visible; opacity: 1;}
nav ul.gnb > li:hover > a:after {  transform: translateY(4px);}
nav ul li > .sub-menu {position: absolute; right: -200px; width: 225px; top:20px; visibility: hidden; opacity: 0; transition: all .4s ease-in-out;}
nav ul li > .sub-menu:before { content: '';  width: 80px;  height: 1px; background-color: #000; display: block; position: absolute; top:15px; margin-left: -100px }
nav ul li:hover > .sub-menu {visibility: visible; opacity: 1; transform: translateX(25px); }
nav ul li > .sub-menu li a {font-size:20px; padding:5px 0; }
nav ul.gnb > li > ul > li:hover > a {font-weight: 600; }
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em}
#gnb_empty a {text-decoration:underline}

#btn_close {position:absolute; right:44px; top:30px; z-index:100;}
#btn_close i {color:#fff; font-size:35px; transition:all ease-out .2s;}
#btn_close:hover i {transform: rotate( 90deg );}

.side-nav {position:absolute; right:0; top:0; width:130px; height:100%; background:#000; display:flex; display:flex; flex-direction:column; justify-content: flex-end;}
.nav-sns {display:flex; flex-direction:column; align-items:center;  justify-content: space-between; height:calc(25px * 3 + 50px); margin-bottom:50px;}
.nav-sns li img {height:25px;}

.secondary {display:flex; margin-top:170px; }
.secondary li {margin-right:30px; }
.secondary li a {display:inline-block; color:#000; font-weight:600; transition: all .3s;}
.secondary li a:hover {color:#c9002b;}
.secondary li a:after {content: ''; display: block; width: 0; height: 2px; background: #c9002b; transition: width .3s;}
.secondary li a:hover::after {width:100%}

.secondary li:nth-child(1) {animation: text .6s .2s both;}
.secondary li:nth-child(2) {animation: text .6s .3s both;}
.secondary li:nth-child(3) {animation: text .6s .4s both;}
.secondary li:nth-child(4) {animation: text .6s .5s both;}
.secondary li:nth-child(5) {animation: text .6s .6s both;}
.secondary li:nth-child(6) {animation: text .6s .7s both;}




@media (max-width:1024px){
	.gnbBox {left:10%;}
	nav h2 img {width:140px; margin-bottom:40px;}
	ul.gnb {width:240px;}
	nav ul.gnb > li > a {font-size:24px;padding:12px 0;}
	nav ul li > .sub-menu:before {width: 60px; top:12px; margin-left: -80px }
	nav ul li > .sub-menu li a {font-size:18px; padding:5px 0;}

	#btn_close {right:22px;}
	
	.side-nav {width:80px;}
	.nav-sns li img {height:20px;}

	.secondary li a {font-size:14px;}

}
@media (max-width:768px){
	#btn_close i {color:#000;}
	.side-nav {right:0; top:auto; bottom:0; width:100%; height:60px; flex-direction:row; justify-content: flex-start;}
	.nav-sns {flex-direction:row; height:auto; width:100px;margin-bottom:0; margin-left:10%;}

	.secondary {flex-direction:column; margin-top:40px; }
	.secondary li {margin-right:0; margin-bottom:10px;}
}

@media (max-width:480px){
	nav h2 img {width:120px; margin-bottom:30px;}
	ul.gnb {width:200px;}
	nav ul.gnb > li > a {font-size:22px;}
	nav ul li > .sub-menu:before {width: 40px; top:10px; margin-left: -60px }
	nav ul li > .sub-menu li a {font-size:17px; padding:5px 0;}

	.secondary {margin-top:30px; }
	.secondary li a {font-size:13px;}
	.secondary li {margin-bottom:5px;}
}
@media (max-width:380px){
	nav h2 img {margin-bottom:20px;}
	ul.gnb {width:170px;}
	nav ul.gnb > li > a {font-size:18px;}
	nav ul li > .sub-menu li a {font-size:15px; padding:3px 0;}
}