/* nav */
.nav-menu,.nav-menu ul,.nav-menu li,.nav-menu a { margin: 0; padding: 0; line-height: normal; list-style: none; display: block; position: relative; }
.nav-menu ul { opacity: 0; position: absolute; top: 100%; left: -9999px; z-index: 999; -webkit-transition: opacity .3s; transition: opacity .3s; }
.nav-menu li:hover > ul { left: 0; opacity: 1; z-index: 1000; }
.nav-menu ul li:hover > ul { top: 0; left: 100%; }
.nav-menu li { cursor: default; float: left; white-space: nowrap; }
.nav-menu ul li { float: none; min-width:300px; }

/* sub width */
.nav-menu ul { min-width: 12em; -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.25); box-shadow: 2px 2px 2px rgba(0,0,0,0.25); }

/* center */
.nav-center {
	width:1400px; 
	margin:0 auto;
	padding-top:8px;
}
.nav-center > li {
	margin:0 14px;
}

/* root */
.nav-menu a {
  padding: 0 31px;
  color: #FFF;
  font-weight: normal;
  font-size: 20px;
  line-height: 40px;
  text-decoration: none;
}

/* root: active */
.nav-menu > li > .nav-active { background-color: rgba(0,0,0,0.05); }

/* root: hover/persistence */
.nav-menu a:hover,.nav-menu a:focus,.nav-menu li:hover a {
 
}

/* 2 */
.nav-menu li li a,.nav-menu li:hover li a {
  padding: 8px 10px;
  background: #FFF;
  color: rgb(4, 12, 44);
  font-size: 18px;
  line-height: normal;
}

/* 2: hover/persistence */
.nav-menu li:hover li a:hover,.nav-menu li:hover li a:focus,.nav-menu li:hover li:hover a {
  /*background: rgb(112, 121, 159);*/
  background-color: #7c7c7c;
  color: #FFF;
}

/* 3 */
.nav-menu li:hover li:hover li a {
  background: #FFF;
  color: rgb(4, 12, 44);
}

/* 3: hover/persistence */
.nav-menu li:hover li:hover li a:hover,.nav-menu li:hover li:hover li a:focus,.nav-menu li:hover li:hover li:hover a {
 /* background: rgb(112, 121, 159);*/
  background-color: #7c7c7c;
  color: #FFF;
}

/* 4 */
.nav-menu li:hover li:hover li:hover li a {
  background: #FFF;
  color: rgb(4, 12, 44);
}

/* 4: hover */
.nav-menu li:hover li:hover li:hover li a:hover,.nav-menu li:hover li:hover li:hover li a:focus {
  /*background: rgb(112, 121, 159);*/
   background-color: #7c7c7c;
  color: #FFF;
}

/* vertical */
.nav-vertical { max-width: 220px; }
.nav-vertical ul { top: 0; left: -9999px; }
.nav-vertical li { width: 100%; float: none; }
.nav-vertical li:hover > ul { left: 100%; }

a#menu-icon {
  display: inline-block;
  padding: 10px;
}
a#menu-icon .bar {
  margin: 3px;
  width: 50px;
  height: 8px;
  background: #fdfdfd;
  border-radius: 5px;
  
	transition: margin 0.2s, transform 0.2s;

	/* same as above but with prefixes added */
	-webkit-transition: margin 0.2s, -webkit-transform 0.2s;
	transition: margin 0.2s, -webkit-transform 0.2s;
	-o-transition: margin 0.2s, transform 0.2s;
	transition: margin 0.2s, transform 0.2s;
	transition: margin 0.2s, transform 0.2s, -webkit-transform 0.2s;
}

a#menu-icon:not(.close):hover {
  padding: 6px 10px;
}
a#menu-icon:not(.close):hover .bar {
  margin: 5px 3px;
}

a#menu-icon.close .bar:first-child {
  -webkit-transform: translateY(10px) rotate(45deg);
      -ms-transform: translateY(10px) rotate(45deg);
          transform: translateY(10px) rotate(45deg);
}
a#menu-icon.close .bar:nth-child(2) {
  opacity: 0;
}
a#menu-icon.close .bar:last-child {
  -webkit-transform: translateY(-10px) rotate(-45deg);
      -ms-transform: translateY(-10px) rotate(-45deg);
          transform: translateY(-10px) rotate(-45deg);
}

.btn_menu{
	width: 100%;
    display: flex;
    justify-content: left;
}

#semi_menu{display:none;}

.menu_board{
	width:100%;
	position:relative;
}

.menu_slide{
	width:100vw;
	/*height:100vh;*/
	position:absolute;
	background:#ebebeb;
	z-index:997;
	top:0;
	bottom:0;
	right:100%;
	display:none;
	overflow-y: scroll;
    overflow-x: hidden;
}

.menu_small{
	width:100%;
	display:flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding:100px 0;
}

.menu_small_pad{
	width:30%;
}

.menu_small_list{font-weight:400;}

.menu_small_list ul li a{
	color: #000;
}



@media only screen and (max-width: 1399px) {
	.nav-center{width:1200px;}
	.nav-center > li {margin: 0 2px;}
	.nav-menu a {font-size:22px; padding:0 16px;}
}

@media only screen and (max-width: 1199px) {
	.nav-center{
		width:1000px;
	}
	
	.nav-center > li {
		margin: 0 16px;
	}
	
	.nav-menu a{
		font-size: 18px;
		padding: 0;
	}
	
	.nav-menu li:hover li a {font-size: 18px;}
}

@media only screen and (max-width: 999px) {
	#full_menu{display:none;}
	#semi_menu{display:flex;}
}

@media only screen and (max-width: 799px) {
	.menu_small_pad {width: 40%;}
}

@media only screen and (max-width: 599px) {
	.menu_small_pad {width: 90%;}
}