body.overflow-hidden {
  /* when primary navigation is visible, the content in the background won't scroll */
  overflow: hidden;
}
.fixed-header {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255,255,255,1.00);
  height: calc(85px + 35px);
  width: 100%;
  z-index: ;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fixed-header {
height: calc(85px + 0px);
background: transparent;
box-shadow: none;
}

@media only screen and (min-width: 1201px) {
  /* scroll up 會顯示header */
  /*.fixed-header {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    /*-webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .fixed-header.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    /*position: fixed;
    top: -80px;
    background: rgba(255,255,255,1.00);
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  /*.fixed-header.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    /*-webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    box-shadow: 0 0px 7px rgba(0, 0, 0, 0.1);
  }
  
  /*.fixed-header.menu-is-open {
    /* add a background color to the header when the navigation is open */
    /*background-color: transparent;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
    position: fixed;
  }*/
}

/* trigger button  */
.trigger-button {
    display:inline-flex;
    padding: 10px 20px;
    cursor:pointer;
    width: ;
    height: ;
	background-color:#f0f0f0;
	position:relative; 
	z-index:16000005;
	text-decoration:none;
}
.trigger-button:hover{text-decoration:none;}
.trigger-button .trigger-name{
	font-family: 'SimplonNorm-Medium', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';text-transform:uppercase; font-size:1.063em; white-space:nowrap; color:#000; text-decoration:none
}
.trigger-button .trigger-text {
    color: #333;
    text-transform: uppercase;
    /*font-weight: 700;*/
    /* hide the text on small devices */
    display: none;
    /* hide the text */
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
}
.trigger-button .trigger-text.close { display: none}
.menu-is-open .trigger-button .trigger-text.open { display: none}
.menu-is-open .trigger-button .trigger-text.close { display: block}
.trigger-button .trigger-icon {
  /* this span is the central line of the menu icon */
  display: block;
  width: 16px;
  height: 2px;
  margin:11px 10px 0 0;
  background-color: #000;
  -webkit-transition: background-color 0.3s;
  -moz-transition: background-color 0.3s;
  transition: background-color 0.3s;
  /* these are the upper and lower lines in the menu icon */
}
.trigger-button .trigger-icon::before, .trigger-button .trigger-icon:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #000;
  right: 0;
  -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s;
  -moz-transition: -moz-transform .3s, top .3s, background-color 0s;
  transition: transform .3s, top .3s, background-color 0s;
}
.trigger-button .trigger-icon::before {
  top: -6px;
}
.trigger-button .trigger-icon::after {
  top: 6px;
}
.trigger-button .trigger-icon.is-clicked {
  background-color: rgba(255, 255, 255, 0);
}
.trigger-button .trigger-icon.is-clicked::before, .trigger-button .trigger-icon.is-clicked::after {
  background-color: #333;
}
.trigger-button .trigger-icon.is-clicked::before {
  top: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.trigger-button .trigger-icon.is-clicked::after {
  top: 0;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.trigger-button {
/*background-color: transparent;*/
}
.trigger-button .trigger-text {
display: inline-block;
}
.trigger-button .trigger-icon {

-webkit-transform: translateX(0) translateY(-50%);
-moz-transform: translateX(0) translateY(-50%);
-ms-transform: translateX(0) translateY(-50%);
-o-transform: translateX(0) translateY(-50%);
transform: translateX(0) translateY(-50%);
}


/* overlay nav */
.overlay-nav {
  /* by default it's hidden - on top of the viewport */
  font-family: 'SimplonNorm-Medium', 'droid sans' ,'Helvetica', 'verdana' ,'Arial', 'sans-serif';
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(2, 23, 37, 0.96);
  z-index: 2;
  text-align: center;
  padding: 90px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: auto;
  /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
  -webkit-overflow-scrolling: touch;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.overlay-nav.is-visible {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.overlayNav-box {
    text-align: center;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
    z-index: 16000002;
}
.overlayNav-box .overlayNav-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.overlayNav-box .overlayNav-mainNav {
    font-size: 2.1em;
    font-weight: 700;
    width:59%; 
    padding-left: 0%;
}
.overlayNav-box .overlayNav-mainNav ul.nav-main * + * {
    margin-top: 1.5em;
}
.overlayNav-box .overlayNav-subNav {
    display:inline-flex;
    flex-direction:column;
}
.overlayNav-box .overlayNav-subNav ul.nav-sub { 
    font-size: 1.35em;
    font-weight: 700;

}
.overlayNav-box .overlayNav-subNav ul.nav-sub * + * {
    margin-top: .8em;
}
.overlayNav-box .overlayNav-subNav ul.nav-followSocial{
    border-top: 1px #666 solid; 
    padding: 20px 0 10px 0 ;
    margin-top: 50px;
}
.overlayNav-box ul.nav-main, .overlayNav-box ul.nav-sub {
    display: inline-block;
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.overlayNav-box ul.nav-main li, .overlayNav-box ul.nav-sub li {
    display: block;
}
.overlayNav-box ul.nav-main li a, .overlayNav-box ul.nav-sub li a {
    position: relative;
    color: #212121;
    text-decoration: none;
}
.overlayNav-box ul.nav-main li a:hover, .overlayNav-box ul.nav-sub li a:hover {
    color:#000; 
}
.overlayNav-box ul.nav-main li a::after, .overlayNav-box ul.nav-sub li a::after {
    content: '';
    position: absolute;
    bottom:-5px;
    width: 0;
    height: 4px;
    /*display: block;*/
    right: 0;
    background: #74ba00;
    transition: width .3s ease;
    -webkit-transition: width .3s ease;
}
.overlayNav-box ul.nav-main li a:hover::after, .overlayNav-box ul.nav-sub li a:hover::after {
    width: 100%;
    left: 0;
    background: #74ba00;
}

.nav-followSocial{ padding-bottom: 20px; display:inline-flex; flex-wrap:nowrap;}
ul.nav-followSocial{list-style: none;margin:0; padding: 0;*zoom:1;}
ul.nav-followSocial:before, ul.nav-followSocial:after {display:table;line-height:0;content:"";}
ul.nav-followSocial:after {clear: both}
ul.nav-followSocial * + * {margin-left: 5px;}
ul.nav-followSocial li{  }
@media only screen and (min-width: 1601px) {
	.trigger-button {
		padding: 12px 25px;
	}
}
@media only screen and (max-width: 800px) {
	.trigger-button .trigger-name{
		font-size:1em; 
	}
	.overlayNav-box .overlayNav-mainNav{
		font-size: 2em;
	}
	.overlayNav-box .overlayNav-subNav ul.nav-sub{
		font-size: 1.25em;
	}
}
@media only screen and (max-width: 700px) {
	.trigger-button {
		padding: 10px 10px;
	}
	.trigger-button .trigger-name{
		font-size:0.938em; 
	}
}
@media only screen and (max-width: 567px) {
    .trigger-button {width: 45px; height: 45px; padding-right:1px}
    .trigger-button .trigger-icon{ width: 25px;}
	.trigger-button .trigger-name{ display:none}
    .overlay-nav { padding: 8vh 0px 3vh 0}
    .overlayNav-box {display:block;align-items: center;}
    .overlayNav-box .overlayNav-wrapper{display: block;}
    .overlayNav-box .overlayNav-mainNav { width: 100%; font-size: 1.5em}
    .overlayNav-box .overlayNav-mainNav ul.nav-main * + *{margin-top: 2.5vh;}
    .overlayNav-box .overlayNav-subNav {display: inline-block; font-size: 1em; margin-top: 30px;}   
	.overlayNav-box .overlayNav-subNav ul.nav-sub { font-size: 1.15em;}
    .overlayNav-box .overlayNav-subNav ul.nav-sub * + *{margin-top: 1.2vh;}
    .overlayNav-box .overlayNav-subNav ul.nav-followSocial{ margin-top: 30px}
    .overlayNav-box ul.nav-main, .overlayNav-box ul.nav-sub{ display: block;}
    .overlayNav-box ul.nav-main li, .overlayNav-box ul.nav-sub li{ text-align: center;}
	.overlayNav-box ul.nav-main li a:hover, .overlayNav-box ul.nav-sub li a:hover, .overlayNav-box ul.nav-main li a:focus, .overlayNav-box ul.nav-sub li a:focus {color:#74ba00;}
	.overlayNav-box ul.nav-main li a::after, .overlayNav-box ul.nav-sub li a::after { display:none}
	.fixed-header {height: calc(75px + 35px);}
}
@media only screen and (max-width: 360px) {
	.trigger-button {background-color: transparent; margin-right:-8px; }
}
@media (orientation:landscape) and (max-width:850px){
      .overlayNav-box{ display:block}
  }