/* 주메뉴 */
#menu {position:relative; float:left; margin:0 0 0 100px; width:calc(100% - 460px); display:inline-block; z-index:2;}
#menu::before {position:absolute; left:50%; top:85px; z-index:-2; width:1000%; height:0; margin-left:-500%; border-top:1px solid #ddd; background-color:#f5f8ff; content:''; opacity:0;}
#menu > li {float:left; width:20%; font-size:15px; color:#000; text-align:center; vertical-align:top;}
#menu > li > a {display:inline-block; font-size:19px; font-weight:700; padding:32px 0; margin:0 25px; color:#222; text-decoration:none;}
#menu > li:hover > a {position:relative; color:#0c4ca3;}
#menu > li:first-child .submenu {border-left: 1px solid #ddd;}
#menu .submenu {/*overflow:hidden;*/ visibility:hidden; position:relative; height:0; padding:0; border-right:1px solid #ddd; line-height:32px;}
#menu .submenu::before {position:absolute; left:50%; top:-4px; width:0; height:4px; background-color:#2860c5; content:''; transition:all 0.2s;}
#menu .submenu::after {position:absolute; left:0; top:0; width:100%; height:100%; background-color:#fff; content:''; opacity:0; z-index:-1; transition:all 0.2s;}
#menu .submenu a {display: block; font-size:15px; color:#666;}
#menu .submenu a:hover,
#menu .submenu a:focus,
#menu .submenu a:active {color:#2860c5; text-decoration:underline;}


/* 주메뉴 활성화 */
#menu:hover::before {visibility:visible; height:260px; opacity:1; transition:all 0.3s; border-bottom:1px #ddd solid;}
#menu:hover .submenu {visibility:visible; height:258px; padding:20px 0; opacity:1; transition:all 0.3s;}
#menu li:hover .submenu::before {left:0; width:100%;}
#menu li:hover .submenu::after {opacity:1;}


.control {display:none}
.gnb-util {float:right; display:inline-block; margin-right:-5px; line-height:52px; margin-top:16px;}
.gnb-util > a {position:relative; float:left; padding:0 10px; font-size:14px; color:#000; font-weight:400;}
.gnb-util > a:before {content:"";position:absolute;left:0;top:50%;width:1px;height:8px;margin-top:-4px;background:#e0e0e0;opacity:0.5);}
.gnb-util > a:first-child::before {display:none;}





@media (max-width:1024px){

	#menu ~ .gnb-util {display:none;}
	#menu.active ~ .gnb-util {display:block; position:absolute; top:5px; left:15px; float:none; margin-right:0; line-height:52px; margin-top:0; z-index:12;}

	#menu {visibility:hidden; float:none; position:absolute; left:0; top:0; z-index:10; width:100%; height:auto; margin:0; background-color:#fff; opacity:0;}
	#menu.active {display:block; visibility:visible; height:auto; opacity:1;}
	#menu::before {display:block; position:relative; left:0; width:100%; height:60px !important; margin:0; background-color:#fff;}
	#menu + .control {position:absolute; right:0; top:0; z-index:11; width:60px; height:60px; line-height:60px; display:block; overflow:hidden; text-align:center;}
    #menu + .control::before {display:block; font-family:'xeicon'; font-size:30px; color:#333; content:'';}
    #menu.active + .control::before {display:block; font-family:'xeicon'; font-size:30px; color:#333; content:'';}
	
	#menu > li {float:none; width:100%; font-size:15px; color:#000; text-align:left; vertical-align:top; border-bottom:1px #ddd solid; background:#fff;}
	#menu > li:first-child {border-top:1px #ddd solid;}
	#menu > li > a {position: relative; display:block; font-size:18px; font-weight:700; padding:0 0; line-height:50px; margin:0; padding:0 25px; background:#f4f4f4; color:#222; text-decoration:none; transition:all 0.2s;}
    #menu > li > a::after {position:absolute; right:25px; top:0; font-family:'xeicon'; color:#cfcdcd; content:''; transition:all 0.2s;}
	#menu .active > a,
	#menu > li:hover > a {background:#306fd9; color:#fff;}
	#menu > li:hover > a::after {transform: rotate(180deg);}
	#menu > li:first-child .submenu {border-left:0;}
	#menu:hover .submenu {height:0; padding:0;}
	#menu .submenu {display:none; visibility:hidden; position:relative; height:0; padding:0; border-right:0; line-height:32px; background:#fff;}
	#menu li:hover .submenu {display:block; height:100%;}
	#menu .submenu li {border-bottom:1px #ddd solid;}
	#menu .submenu li:last-child {border-bottom:0;}
	#menu .submenu li a {padding:0 25px; line-height:44px;}
	#menu .submenu::before,	#menu .submenu::after {display:none;}

}