
header{width:100%;min-width:1000px; margin:auto; background-color:rgba(17,17,17,0.5); z-index:10000000000;}

    .logo{float:left;width:235px;margin-top:30px;display:inline-block;}
    .logo img{display:inline-block;}


	/* ´ë¸Þ´º */
    .gnb{width:100%; max-width:1000px; height:110px;margin:auto;}
    .menu {float:right;width:720px;margin:0 auto;}
    .menu:after {content:"";display:table;clear:both;}
    .menu li {float:left;width:120px;height:110px;}
    .menu li a {display:block;position:relative;font-size:12px;color:#fff;line-height:110px;vertical-align:middle;text-align:center;font-size:15px;font-weight:bold;}
    .menu>li>a:before {content:"";display:block;position:absolute;top:25px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50px;-webkit-transform:translateY(-10px) scale(0,0);-ms-transform:translateY(-10px) scale(0,0);transform:translateY(-10px) scale(0,0);opacity:0;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
    .menu>li:nth-child(1)>a:before{background-color:#8ebe23;}
    .menu>li:nth-child(2)>a:before{background-color:#6ab565;}
    .menu>li:nth-child(3)>a:before{background-color:#59ae85;}
    .menu>li:nth-child(4)>a:before{background-color:#5ed0c8;}
    .menu>li:nth-child(5)>a:before{background-color:#62bad0;}
    .menu>li:nth-child(6)>a:before{background-color:#38b4fe;}

    /* ¼­ºê¸Þ´º */
    .menu li .submenu {visibility:hidden;margin-top:-10px; text-align:center; margin-left:20px;height:30px;-webkit-transition:.3s all ease-out;-o-transition:.3s all ease-out;transition:.3s all ease-out;-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;opacity:0;}
    .menu li .submenu.smenu01 {width:600px;}
    .menu li .submenu.smenu02 {width:600px;}
    .menu li .submenu.smenu03 {width:200px;}
    .menu li .submenu.smenu04 {width:200px;}
    .menu li .submenu.smenu05 {width:300px;}
    .menu li .submenu.smenu06 {width:400px;}
	
    .menu li:nth-child(2) .submenu {/*left:auto;right:20px;*/ margin-left:-100px;}
	.menu li:nth-child(5) .submenu {/*left:auto;right:20px;*/ margin-left:-200px;}
	.menu li:last-child .submenu {/*left:auto;right:20px;*/ margin-left:-300px;}
    .menu li .submenu:before {content:"";display:block;position:absolute;top:100px;left:0;right:0;width:100%;height:0;background-color:#999933;opacity:0;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
    .menu li .submenu:after {content:"";display:table;clear:both;}
    .menu li .submenu li {float:left;width:100px;height:30px;text-align:left;}
    .menu li .submenu a {display:block;position:absolute;font-size:12px;color:#fff;line-height:30px;}
    /* hover */
    .menu li:hover a:before {opacity:1;-webkit-transform:translateY(0) scale(1,1);-ms-transform:translateY(0) scale(1,1);transform:translateY(0) scale(1,1)}
    .menu li:hover .submenu {visibility:visible;opacity:1;}
    .menu li:hover .submenu:before {height:30px;opacity:1;}
	
	.menu li:nth-child(1) .submenu:before{background-color:#8ebe23;}
    .menu li:nth-child(2) .submenu:before{background-color:#6ab565;}
    .menu li:nth-child(3) .submenu:before{background-color:#59ae85;}
    .menu li:nth-child(4) .submenu:before{background-color:#5ed0c8;}
    .menu li:nth-child(5) .submenu:before{background-color:#62bad0;}
    .menu li:nth-child(6) .submenu:before{background-color:#38b4fe;}
	

   /* /* ´ë¸Þ´º 
    .gnb{width:1000px;height:110px;margin:auto;}
    .menu {float:right;width:720px;margin:0 auto;}
    .menu:after {content:"";display:table;clear:both;}
    .menu li {position:relative;float:left;width:120px;height:110px;}
    .menu li a {display:block;position:absolute;width:100%;font-size:12px;color:#fff;line-height:110px;vertical-align:middle;text-align:center;font-size:15px;font-weight:bold;}
    .menu>li>a:before {content:"";display:block;position:absolute;top:25px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50px;-webkit-transform:translateY(-10px) scale(0,0);-ms-transform:translateY(-10px) scale(0,0);transform:translateY(-10px) scale(0,0);opacity:0;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
    .menu>li:nth-child(1)>a:before{background-color:#8ebe23;}
    .menu>li:nth-child(2)>a:before{background-color:#6ab565;}
    .menu>li:nth-child(3)>a:before{background-color:#59ae85;}
    .menu>li:nth-child(4)>a:before{background-color:#5ed0c8;}
    .menu>li:nth-child(5)>a:before{background-color:#62bad0;}
    .menu>li:nth-child(6)>a:before{background-color:#38b4fe;}

   ¼­ºê¸Þ´º 
    .menu li .submenu {visibility:hidden;margin-top:100px;margin-left:20px;height:30px;-webkit-transition:.3s all ease-out;-o-transition:.3s all ease-out;transition:.3s all ease-out;-webkit-transition-delay:.2s;-o-transition-delay:.2s;transition-delay:.2s;opacity:0; z-index:10000;}
    .menu li .submenu.smenu01 {width:600px;}
    .menu li .submenu.smenu02 {width:600px;}
    .menu li .submenu.smenu03 {width:200px;}
    .menu li .submenu.smenu04 {width:200px;}
    .menu li .submenu.smenu05 {width:300px; position:absolute; left:-200px;}
    .menu li .submenu.smenu06 {width:400px; position:absolute; left:-300px;}
    .menu li:last-child .submenu {left:auto;right:20px;}
    .menu li .submenu:before{content:"";display:block;position:fixed;top:100px;left:0;width:100%;height:0;background-color:#999933;opacity:0;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
	
	.menu li:nth-child(1) .submenu:before{background-color:#8ebe23;}
    .menu li:nth-child(2) .submenu:before{background-color:#6ab565;}
    .menu li:nth-child(3) .submenu:before{background-color:#59ae85;}
    .menu li:nth-child(4) .submenu:before{background-color:#5ed0c8;}
    .menu li:nth-child(5) .submenu:before{background-color:#62bad0;}
    .menu li:nth-child(6) .submenu:before{background-color:#38b4fe;}
	
	
    .menu li .submenu:after {content:"";display:table;clear:both;}
    .menu li .submenu li {float:left; width:100px; height:30px; text-align:left;}
    .menu li .submenu a {display:block; position:absolute; width:100%; height:30px; font-size:12px; color:#fff; line-height:30px;}
     hover
    .menu li:hover a:before {opacity:1;-webkit-transform:translateY(0) scale(1,1);-ms-transform:translateY(0) scale(1,1);transform:translateY(0) scale(1,1)}
    .menu li:hover .submenu {visibility:visible;opacity:1;}
    .menu li:hover .submenu:before {height:30px;opacity:1;}*/
	
	
	