@charset "utf-8";

#navMenu {
    width: 100%;
	margin: 0 auto;
 	 
}
#navMenu .container {
    width: 100%;
}
.mobileNav {
	display: none;
}
#menuBg{
	display: none;
}
@media screen and (max-width: 990px) {
	#navMenu .container {
		padding:0;
	}
	.mobileNav {
		display: block;
		position:absolute;
		top:0px;
		right:0;		
		width: 55px;
		height: 55px;
		font-size: 0;
		margin-top:0px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
	}
	.mobileNav span {
		float:right;
		margin:19px 19px 0 0;
	}
	.mobileNav em,
	.mobileNav em::after,
	.mobileNav em::before {
		/* this is the menu icon */
		display: block;
		position: relative;
		height: 2px;
		width: 22px;
		background: #333;
		-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{ opacity: 0.5}
	.sp-nav-btn:before {
		content: "";
		position: absolute;
		display: block;
		width: 14px;
		height: 2px;
		top: 24px;
		right: 19px;
		margin: -1px 0 0;
		background-color: #fff;
	}
	.sp-nav-btn:after {
		content: "";
		position: absolute;
		display: block;
		width: 2px;
		height: 14px;
		top: 25px;
		right: 25px;
		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;
	}
	
	.plus .sp-nav-btn:before{ height: 1px;}
	.plus .sp-nav-btn:after{ width: 1px;}
	.plus .sp-nav-btn:before, .plus .sp-nav-btn:after{ background-color: #000}
	.plus.open .sp-nav-btn:before, .plus.open .sp-nav-btn:after, .plus:hover .sp-nav-btn:before, .plus:hover .sp-nav-btn:after{ background-color: #fff}
	
	.open .sp-nav-btn:after {
		-webkit-transform: rotate(90deg);
		   -moz-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			 -o-transform: rotate(90deg);
				transform: rotate(90deg);
	}
	#menuBg{
		position: absolute;
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		background:rgba(0, 0, 0, 0.7);
		z-index:99; backdrop-filter: blur(5px);
	}
}
@media screen and (min-width: 991px) {
	#navMenu {
		position:relative;
		z-index:100;
		float:right;
		width:auto;
		min-width:calc(100% - 300px);
		margin-top: 25px;
		transition: 0.5S
	}
	.fixed #navMenu {margin-top: 50px;}
}

 
/** navi **/
#navi {
	position: relative;   
	float: right;
    width: auto;
	margin: 0 auto;    
}
#navi > ul {
	list-style: none;
}
#navi > ul > li {
	position:relative;
    float: left;
    padding: 0;
    margin: 0;
}
#navi > ul > li > a {
	display: block;
	color:#000;
	font-size:1.9em;
	font-weight:bold;
	padding:15px;
}
#navi > ul > li > ul {
	display: none;
	float: left;
	width: auto;    
	padding:0;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
}


#navi > ul > li > ul > li {
    float: left;
    width: 100%;
}
#navi > ul > li > ul > li > ul > li a{ line-height: 1.2 }
#navi > ul > li > ul > li > a {
	position:relative;
	display: block;
    color: #000;
	font-size:1.7em;
	line-height:120%;
}
#navi > ul > li > ul > li > a:hover,
#navi > ul > li > ul > li > a:focus,
#navi > ul > li > ul > li > a.open {
	color:#fff;
	background-color:rgba(27,81,58,0.55);
	
}
#navi > ul > li > ul > li > a:after,
#navi > ul > li > ul > li > a.open:after {
	/*background: url(../images/ico-webadd-R-w.svg) center no-repeat;
	background-repeat: no-repeat;
	background-size:65%;
 	width:24px; height:24px;
	display:block;
	position:absolute;
	content:'';
	right:12px;
	opacity:0;
	top:50%; margin-top:-12px;
	transition:all 0.1s;
	-webkit-transition:all 0.1s;*/
 	}

#navi > ul > li > ul > li > a.open:after{
	opacity:1}

#navi > ul > li > ul > li > a:hover:after, 
#navi > ul > li > ul > li > a:focus:after,
#navi > ul > li > ul > li:hover > a:after{
	opacity:1;
 	}

#navi > ul > li > ul.normal-sub {
    width: 100%;
	padding:0;
	box-sizing:border-box;
}
#navi > ul > li > ul.normal-sub > li, #navi > ul > li > ul > li  {
    width: 100%;
	/*border-bottom:1px solid rgba(255,255,255,0.4)*/
}
#navi > ul > li > ul.normal-sub > li a {
	padding:15px;
}
#navi > ul > li > ul.normal-sub > li:last-child   {
	border-bottom: none;
}

.sp-fix #navi {
		display:none;		
	}



@media screen and (max-width: 990px) {
	#navi {
		display:none;		
	}
	#navi.show-on-mobile {
		display: block;
		width:100%
	}	
	#navi > ul > li {
		width: 100%;
		border-bottom:1px solid #69af80
;
	}
	#navi > ul > li:last-child{border-bottom:none;}
	#navi > ul > li > a.open {
		background:rgba(0,0,0,0.8);
	}
	#navi > ul > li > a{
		color:#fff; background-color: #168254}
	#navi > ul > li:hover > a,
	#navi > ul > li > a:activ,
	#navi > ul > li > a:focus {
		background:rgba(0,0,0,0.4);
	}
	#navi > ul > li > ul {
		background: #c3dbd0; width: 100%
	}
	#navi > ul > li > ul.normal-sub > li {
		border-bottom:1px dotted #0e4287;
	}
	#navi > ul > li > ul > li{border-bottom:1px dotted #0e4287;}
	#navi > ul > li > ul.normal-sub > li:last-child{border-bottom:none;}
	
	#navi > ul > li > ul > li > a{ display:block; width: 100%; padding: 15px; padding-right: 35px;}
	
	#navi > ul > li > ul > li > a:after {
		position: absolute;
		content:'';
		width: 24px; height: 24px;
		background-image:url(../images/ico-webadd-R-b.svg);
 		background-position:center;
		background-repeat:no-repeat;
 		background-size: 50%;
		top: 50%;
		right:13px;
		margin-top: -12px;
		-webkit-transition:all 0.1s;
		   -moz-transition:all 0.1s;    
			 -o-transition:all 0.1s;
				transition:all 0.1s;
	}
	#navi > ul > li > ul > li > a:hover:after{	text-decoration:none; background-image:url(../images/ico-webadd-R-w.svg);}
	
	#navi > ul > li > ul > li > a.open:after{ transform:rotate(90deg); background-image:url(../images/ico-webadd-R-w.svg); }
	
	#navi > ul > li > ul > li > a.plus:after{ display: none}
 
 
/*第三層表單*/
	#info > ul > li > ul{
	display:none}
 	
	#info > ul > li > ul > li a{
		padding-left:20px !important}
	
#navi > ul > li > ul > li > ul{
	background-color:#fff; display: none; list-style: none}/*手機板預設第三層隱藏*/
	
#navi > ul > li > ul > li > ul li a{
	padding:15px 25px; padding-right: 35px;
	color:#1f8744;
	font-size:1.5em;
	border-bottom:1px dotted #ccc;
	display:block;
	position: relative;
	}
	
	#navi > ul > li > ul > li > ul li a:after{
		position: absolute;
		content:'';
		width: 24px; height: 24px;
		background-image:url(../images/ico-webadd-R-g.svg);
 		background-position:center;
		background-repeat:no-repeat;
 		background-size: 50%;
		top: 50%;
		right:13px;
		margin-top: -12px;
		-webkit-transition:all 0.1s;
		   -moz-transition:all 0.1s;    
			 -o-transition:all 0.1s;
				transition:all 0.1s;
	}	
	
	
 	
#navi > ul > li > ul > li > ul li:last-child a{
	border-bottom: none}
#navi > ul > li > ul > li > ul li a:hover{
	background-color:#f2f2f2}
	
/*搜尋框開啟邏輯*/
.target-menu.close .search{
	display: none !important }

	
#navi > ul > li > ul > li > a:after{
	opacity:1}		
}
@media screen and (min-width: 991px) {
	#navi {
		display:block;
		padding-right:110px
	}
	#navi > ul > li {width: auto;}
	#navi > ul > li > a {
		width:100%;
		font-size:1.9em;
		line-height:50px;
		text-align:center;
		padding:0 10px;
		position: relative;
				 -webkit-transition:all 0.1s ease;
		   -moz-transition:all 0.1s ease;
			 -o-transition:all 0.1s ease;
				transition:all 0.1s ease; 
	}
	#navi > ul > li > a.on{ box-sizing:border-box;}
	
	#navi > ul > li > a.on:after{ 
		content: ''; display: block; width: calc(100% - 20px); position: absolute; bottom: 0; left: 10px; height: 4px; background: #168254; opacity: 0.5}
	
	#navi > ul:hover > li > a.on:after{ display: none}
	
	#navi > ul > li > a.on.open:after, #navi > ul > li > a.on:hover:after, #navi > ul > li:hover > a.on:after{
	display: none}
			
	#navi > ul > li:hover > a ,
	#navi > ul > li > a:focus,
	#navi > ul > li.on > a,
	#navi > ul > li > a.open{
		color:#168254;
	}	
	#navi > ul > li > ul:before {	  
	  content: '';
	  display: block;
	  position: absolute;
	  z-index: 10;
	  transition: all 0.1s ease;
	  -webkit-transition: all 0.1s ease;
	  top:-6px;
	  left: 0;
	  width: 0px;
	  height: 6px;
 	  display:none;
	}
	/*#navi > ul > li > ul:before,
	#navi > ul > li:hover > ul:before {
	  width: 100%;
	}*/
	#navi > ul > li > ul {
		position: absolute;  
		left: 0;
		z-index: 99;
		-webkit-box-shadow: 1px 2px 6px rgba(0,0,0,.2);
		-moz-box-shadow: 1px 2px 6px rgba(0,0,0,.2);
		box-shadow: 1px 2px 6px rgba(0,0,0,.2);	
		/*border-bottom-left-radius: 15px;border-top-right-radius: 15px;*/
		background: #1f8744;

	}
	#navi > ul > li > ul.focu-show { opacity: 1 !important; visibility: visible}
	
	
	#navi > ul > li:last-child > ul {
 		left: auto;
		right:0
		 
	}
	
	
	#navi > ul > li > ul > li > a, #navi > ul > li > ul > li a {
		font-size:1.6em;
		color:#fff;
		position: relative
	}
	#navi > ul > li > ul > li > a {
        position: relative;
        display: block;
        color: #fff;
        font-size: 1.9em;
        line-height: 135%;
        padding: 10px 32px 10px 12px;
        box-sizing: border-box;
        border-radius: 3px;
    }
	#navi > ul > li > ul > li > a:focus,
	#navi > ul > li > ul > li > a:hover{
		color:#ffff66;
		background:#168254;
	}
	#navi > ul > li > ul > li > a:focus:after,
	#navi > ul > li > ul > li > a:hover:after {
		border-color:#ffff66;
	}
	#navi > ul > li > ul > li > a:after {
        content: '';
        display: block;
        position: absolute;
        right: 17px;
        top: 50%;
        width: 6px;
        height: 6px;
        margin-top: -2px;
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
        transform: rotate(45deg) translate(0, -50%);
		opacity: 0;
		transition: all 0.2s
    }
	
	#navi > ul > li > ul > li > a:hover:after, #navi > ul > li > ul > li > a:focus:after, #navi > ul > li > ul > li > a.open:after { opacity: 1}
	
	
	
	#navi > ul > li > ul.normal-sub, #navi > ul > li > ul{
		position: absolute;
        display: block;
        left: 50%;
        width: 180px;
        padding: 9px 0;
        margin-left: -90px;
        visibility: hidden;
        opacity: 0;
        background: #168254;
        border-radius: 2px;
        box-sizing: border-box;
        z-index: 99;
	}
	    #navi > ul > li > ul:before {
        content: '';
        display: block;
        position: absolute;
        top: -16px;
        left: 50%;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 8px 8px 8px;
        border-color: transparent transparent #168254 transparent;
        margin-left: -9px;
    }
 
	#navi > ul > li > ul.normal-sub > li a , #navi > ul > li > ul > li a{
		padding:10px ;
 	}
	
	#navi > ul > li > ul > li:hover > a,#navi > ul > li > ul > li  a:hover, #navi > ul > li > ul > li a:focus{padding-right:25px; background-color: rgba(0,0,0,0.3)}
	 
	
	#navi > ul > li > ul > li{ position:relative}
	
	#navi > ul > li > ul > li> ul{
		position:absolute;
		width:170px;
		right:-170px;
		top:0px;
		background-color:rgba(16,81,51,0.6);    backdrop-filter: blur(5px);
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: all 0.1s;
		padding: 10px;
		box-sizing: border-box
	}
	
	#navi > ul > li > ul > li> ul.focu-show{ visibility: visible; opacity: 1}
	
	#navi > ul > li > ul > li:hover > ul{ display:block; visibility: visible; opacity: 1} 
	
	#navi > ul > li > ul > li > ul li{ display:block; border-bottom:1px dashed rgba(255,255,255,0.5) }
	
	#navi > ul > li > ul > li > ul li:last-child{ border-bottom: 0}
	
	#navi > ul > li > ul > li > ul li a{ display:block;padding:11.5px 15px !important; }
	
	#navi > ul > li > ul > li {
        position: relative;
        display: block;
        width: 100%;
        padding: 1px 10px;
        box-sizing: border-box;
    }
		
	#navi > ul > li > ul > li > ul li a:hover,
	#navi > ul > li > ul > li > ul li a:focus{
		background-color:rgba(0,0,0,0.3)}
		
	
	/*TAB*/
	#navi > ul > li > ul.normal-sub{
		visibility: hidden;
		display:block !important;
		opacity: 0;
		 -webkit-transition:all 0.1s ease;
		   -moz-transition:all 0.1s ease;
			 -o-transition:all 0.1s ease;
				transition:all 0.1s ease; 
				}
				
	#navi > ul > li > ul.normal-sub.focu-show{
 		height:inherit;
		visibility:visible;
		opacity: 1;
		display: block !important
	}
	
}

@media screen and (min-width: 1200px) {
#navi > ul > li > a{
	padding:0 15px;
	font-size: 2.1em}	
}