@charset "utf-8";
.nav_bg{
    background-color: #999999}


@media screen and (min-width:1024px) {
	#web_show{
		display:block;		
	}
#mobile_show{
		display:none;
	}
	.nav_bg{
		background-color: var(--main-color);/*統一參數*/
		width: 100%;
		padding:10px 0;
	}
	.nav_ul{
		width:1000px;
		margin: 0 auto;
		text-align: center;
		
		
	}
	.nav_ul li{
		display: inline-block;
		color: #fff;
		margin: 0 20px;
		font-weight: bold;
		
	}
	.nav_ul a{
		font-size: 14px;
		color: #fff;
		display: block;
		padding: 3px 8px;
		border-radius: 5px;
		transition: all 0.3s ease;
	}
	.nav_ul a:hover{
		transition: all 0.3s ease;
		background-color:rgba(255, 255, 255, .9);
		color: var(--main-color);/*統一參數*/	
	}
}
@media  screen and (min-width: 768px) and (max-width: 1023px) {
	#web_show{
		display:block;		
	}
#mobile_show{
		display:none;
	}
	.nav_bg{
		background-color: var(--main-color);/*統一參數*/
		width: 100%;
		padding: 10px 0;
	}
		.nav_ul{
		width:100%;
		margin: 0 auto;
		text-align: center;
		
		
	}
	.nav_ul li{
		display: inline-block;
		color: #fff;
		margin: 0 5px;
		
	}
	.nav_ul a{
		font-size: 14px;
		color: #fff;
		display: block;
		padding: 3px 8px;
		border-radius: 5px;
		transition: all 0.5s ease;
	}
	.nav_ul a:hover{
		transition: all 0.5s ease;	
	}
}
@media screen and (max-width: 767px) {
	#web_show{
		display:none;		
	}
    #mobile_show{
		display:block;
	}
	.nav_bg{
		background-color:var(--main-color);/*統一參數*/
		width: 100%;
		padding: 5px 0;
	}
		.nav_ul{
		width:100%;
		margin: 0 auto;
		text-align: center;
		
		
	}
	.nav_ul li{
		display: inline-block;
		color: #fff;
		margin: 0 18px;
		
	}
	.nav_ul a{
		font-size: 14px;
		color: #fff;
		display: block;
		padding: 3px 8px;
		border-radius: 5px;
		transition: all 0.5s ease;
	}
	.nav_ul a:hover{
		transition: all 0.5s ease;
		color: #fff;
		background-color: #2d80d3;		
	}
.header_div {  
  position:absolute;
	width: 100%;
	z-index: 100;
	top:8px;
	
}
	
	

.mobile-header-nav {
  background-color: #222222;
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50px;
  width: 100%;
}
.mobile-header-nav li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-header-nav li a {
  color: white;
  display: block;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mobile-header-nav li a:hover {
  background-color: #666;
}

.hamburger-menu {
 display: inline-block;
	position: absolute;
	right: 20px;
	top: 8px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hamburger-menu:hover {
  cursor: pointer;
}
.hamburger-menu .menu-item {
  background: #666;
  display: block;
  height:3px;
  margin: 0 0 8px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 40px;
}
.hamburger-menu.open .menu-item {
  margin: 0 0 5px;
}
.hamburger-menu.open .menu-item:first-child {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 10px;
          transform-origin: 10px;
}
.hamburger-menu.open .menu-item:nth-child(2) {
  opacity: 0;
}
.hamburger-menu.open .menu-item:nth-child(3) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-transform-origin: 8px;
          transform-origin: 8px;
}
}