@charset "utf-8";
#header{
	box-shadow:0 2px 5px rgba(0,0,0,.4)}
#navMenu {
    width: 100%;
	margin: 0 auto;
 	float:left;
	background: #8cc63f;
    background: -moz-linear-gradient(top, #8cc63f 0%, #5abe57 100%);
    background: -webkit-linear-gradient(top, #8cc63f 0%,#5abe57 100%);
    background: linear-gradient(to bottom, #8cc63f 0%,#5abe57 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cc63f', endColorstr='#5abe57',GradientType=0 );

	min-width:990px
}
#navMenu .container {
    width: 100%;
}
.mobileNav {
	position:absolute;
	top:0px;
	right:0px;
    display: block;
	width:70px;
	height:70px;
	font-size:0;
	background:#000;
}
.mobileNav span {
	float:right;
	margin:28px 24px 0 0;
}
@media screen and (max-width: 420px) {
	/*.mobileNav {
		width:55px;
		height:55px;
	}
	.mobileNav span {
		float:right;
		margin:20px 16px 0 0;
	}*/
}
.mobileNav em,
.mobileNav em::after,
.mobileNav em::before {
	/* this is the menu icon */
	display: block;
	position: relative;
	height: 2px;
	width: 22px;
	background: #FFF;
	-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
}
.mobileNav em {
	/* this is the menu central line */
	margin: 6px auto 14px;
	-webkit-transition: background-color .2s;
	        transition: background-color .2s;
}
.mobileNav em::before,
.mobileNav em::after {
	position: absolute;
	content: '';
	left: 0;
	-webkit-transition: -webkit-transform .2s;
	        transition: -webkit-transform .2s;
	        transition: transform .2s;
	        transition: transform .2s, -webkit-transform .2s;
}
.mobileNav em::before {
	/* this is the menu icon top line */
	-webkit-transform: translateY(-6px);
		-ms-transform: translateY(-6px);
			transform: translateY(-6px);
}
.mobileNav em::after {
	/* this is the menu icon bottom line */
	-webkit-transform: translateY(6px);
		-ms-transform: translateY(6px);
			transform: translateY(6px);
}
.mobileNav.nav-open em {
	/* transform menu icon into a 'X' icon */
	background-color: rgba(255, 255, 255, 0);
}
.mobileNav.nav-open em::before {
	/* rotate top line */
	-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
			transform: rotate(-45deg);
}
.mobileNav.nav-open em::after {
	/* rotate bottom line */
	 -webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
			transform: rotate(45deg);
}
.menu-dropdown a {
	cursor:pointer;
}
.sp-nav-btn:before {
    content: "";
    position: absolute;
    display: block;
    width: 14px;
    height: 2px;
    top: 24px;
    right: 21px;
    margin: -1px 0 0;
    background-color: #fff;
}
.sp-nav-btn:after {
	content: "";
	position: absolute;
	display: block;
	width: 2px;
	height: 14px;
	top: 25px;
	right: 27px;
	margin: -8px 0 0;
	background-color: #fff;
	-webkit-transition: -webkit-transform .2s linear;
	   -moz-transition: -moz-transform .2s linear;
	    -ms-transition: -ms-transform .2s linear;
		 -o-transition: -o-transform .2s linear;
	        transition: transform .2s linear;
}
.open .sp-nav-btn:after {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

	.sp-nav-btn {
		display:none;
	}	
/*-------------991*/
	
#menuBg{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	background:rgba(0, 0, 0, 0.7);
	z-index:99;
}
#navi {
	display: none;
	position: relative;   
	float: left;
    width: 100%;
	margin: 0 auto;
    list-style: none;
}
#navi.show-on-mobile {
	display: block;
}
#navi > li {
	position:relative;
    float: left;
	width: 100%;
    padding: 0;
    margin: 0;
	border-bottom:1px solid #448B45;
}
#navi > li:last-child {
	border-bottom: none;
}
#navi > li > a {
	display: block;
	color:#FFF;
	font-size:2em;
	font-weight:bold;
	padding:15px;
}
#navi > li > a.open {
	background:rgba(0,0,0,.3);
}

#navi > li.unit-now > a {
	background: #608c27;
    background: -moz-linear-gradient(top, #608c27 2%, #27681a 100%);
    background: -webkit-linear-gradient(top, #608c27 2%,#27681a 100%);
    background: linear-gradient(to bottom, #608c27 2%,#27681a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608c27', endColorstr='#27681a',GradientType=0 );
	}
#navi > li:hover ,
#navi > li > a:focus  {
    background-color:rgba(0,0,0,0.4)
}


#navi > li > ul {
	display: none;
	float: left;
	width: 100%;    
	padding:0;
	margin: 0;
	list-style: none;
	background: #448B45;
	box-sizing: border-box;
	box-shadow:2px 2px 5px rgba(0,0,0,.4)
}
#navi > li > ul > li {
    float: left;
    width: 100%;
}
#navi > li > ul > li > a {
	position:relative;
	display: block;
    color: #FFF;
	font-size:1.6em;
	line-height:120%;
}
#navi > li > ul > li > a:hover, #navi > li > ul > li > a:FOCUS {
    color: #fbd116;
	background-color:#360
}
#navi > li > ul > li > a:after {
	position: absolute;
	content: url(../images/navi-arrow.png);
	top: 50%;
	right: 15px;
	margin-top: -12px;
	-webkit-transition:all 0.4s;
	   -moz-transition:all 0.4s;    
         -o-transition:all 0.4s;
            transition:all 0.4s;
}
#navi > li > ul > li > a:hover:after{
	right: 10px;
	text-decoration:none;
}
#navi > li > ul.normal-sub {
    width: 100%;
	padding:0px;
}
#navi > li > ul.normal-sub > li {
    width: 100%;
}
#navi > li > ul.normal-sub > li a {
	padding:15px;
	border-bottom: 1px dotted rgba(255, 255, 255, 0.41);
}
 
#navi > li > ul.normal-sub > li:last-child  a {
	border-bottom: none;
}

#navi > li > ul{
	display:block !important;
	visibility:hidden;
	opacity:0;
	transition:all 0.4s;}
#navi > li > ul.normal-sub{
	display:block !important;
	visibility:hidden;
	opacity:0;
	transition:all 0.4s;}
		
#navi > li:hover > ul.normal-sub, 
#navi > li > ul.normal-sub.show{
	visibility:visible !important;
	opacity:1 ; }	
	

	
@media screen and (min-width: 420px) {

	
	
	}
	.mobileNav {
		display: none;
	}
	.menu-dropdown:before {
		display: none;
	}
	#navi {
		display:block;
	}
	#navi > li {
		width:auto;
		border-bottom:none;
	}
 
/*
2018/3/1下午 03:04
上方主選單寬度，依全部字數算出每字占比%，再依每項字數算出每項寬度
選單字數已改變，重算新寬度
 */ 
/* #navi > li.t3{	 width:7.32%}
 #navi > li.t4{	 width:9.75%}
 #navi > li.t6{	 width:14.63%}
 #navi > li.t7{	 width:17.07%}
 #navi > li#navm6, #navi > li#navm7, #navi > li#navm8{width:9.75%}
 #navi > li#navm3{width:7.32%}
 #navi > li#navm2, #navi > li#navm4{ width:14.63% }
 #navi > li#navm5{ width:17.07% }*/
 
 
	#navi > li > a {
		font-size:2em;
		line-height:60px;
		padding:0 23px;  /* 0 14px */
		text-align:center;
	}
	#navi > li:hover ,
	#navi > li > a:focus {
		background: #709e32;
		background: -moz-linear-gradient(top, #709e32 1%, #4a9845 100%);
		background: -webkit-linear-gradient(top, #709e32 1%,#4a9845 100%); 
		background: linear-gradient(to bottom, #709e32 1%,#4a9845 100%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#709e32', endColorstr='#4a9845',GradientType=0 ); 
	
	}
	#navi > li > ul {
		position: absolute;  
		left: 0;
		z-index: 99;		
	}
	#navi > li#navm10 > ul {
		right:0;
	}
	#navi > li > ul > li > a {
		font-size:1.6em;
	}
	#navi > li > ul > li > a:after {
		content:"";
	}	
	#navi > li > ul.normal-sub {
		left: auto;
		width: 220px;
		padding:0px;
	}
	#navi > li > ul.normal-sub > li a {
		padding:15px 10px;
	}
@media screen and (max-width: 1200px) {
	#navi > li > a {
	font-size:1.8em;}
	}		
@media screen and (max-width: 1024px) {	
#navi > li > a{
	padding:0 15px;}  /* 0 13px */

}
	
/*991*/


@media screen and (min-width: 991px) {
#navi > li:hover > ul{
	visibility:visible !important;
	opacity:1 ;}	
#navi > li > ul {
	left: auto;
	width: 220px;
	padding:0px;
}
#navi > li:last-child > ul, #navi > li#navm10 > ul{
	right:0;
	left:auto;}
#navi > li > ul > li a {
	padding:15px 10px;
}
#navi > li > ul > li a {
    padding: 15px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.41);
}
	
	}