#overlay { display: none;}
.overlay_menu01{ display:none;}
.overlay_menu02{ display:none;}
.overlay_menu03{ display:none;}
#nav-icon {display: none;}
.mobilechild {display: none;}


/********** MEDIA QUERIES ***********************/
/* for webkit only */
@media screen and (-webkit-min-device-pixel-ratio:0) {  

} 

/* for 1280px or less */
@media screen and (max-width: 1280px) {
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}	
.mobilechild{-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 0.5s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/}


/* fullscreen-menu overlay */
#overlay {
  padding-bottom: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* Overlay positioning */
  display: none;
  position: absolute;
  z-index:7000;
  left: 0;
  top: 0;
  width: 100%;
  /* Want a left- or right sided navigation instead? Just play around with the width! */
 background: url("../images/menu_bg02.png") center center repeat; 
}

#overlay div {}

.overlay_menu01{ display:block; position:relative ; width:100% ; margin: 130px 0 0 0; z-index:9500 }
.mmenu_01 { float:left; width:100% ; margin: 0 0 30px 0  ; text-align:center;text-align: center;font:1.3em/1em 'Noto Sans TC', sans-serif;}
.mobilechild { padding: 15px 0 0 0;}
.mobilechild li{padding:10px 10px;width: 30%; margin: 0 0 3px 35% ;background: url("../images/menu_bg01.png") center center repeat; text-align: center;}


.overlay_menu02{ display:block;float:left;position:relative ; width:10% ; margin: 0; margin: 0 0 0 45%; z-index:9500}
.overlay_menu03{display:block;float:left; position:relative ; width:25% ; margin: 0; margin: 30px 0 0 37.5%; z-index:9500}
.mmenu_03 { float:left; width:50%; color:#738087 ;font:300 1.3em/1em 'Open Sans', sans-serif; margin: 11px 0 0 0;text-shadow: 1px 1px 1px #aaa; text-align:center;}
.mmenu_04 { float:left; width:50%; color:#738087 ;font:300 1.13em/1em 'Noto Sans TC', sans-serif; margin: 12px 0 0 0;text-shadow: 1px 1px 1px #aaa; text-align:center;}
.mmenu_01 a,.mmenu_02 a,.mmenu_03 a,.mmenu_04 a{color:#738087}
.mmenu_01 a:hover,.mmenu_02 a:hover,.mmenu_03 a:hover,.mmenu_04 a:hover{color:#2ea9c0}


.mmenu_login {float:left; width: 100%; height: 45px; padding: 0 0 0 0; background-color:#ead26c;color: #fff; border: none; cursor: pointer;margin: 0 0 0 0;font:1.55em/1em 'Noto Sans TC', sans-serif;text-align: left;border-radius:10px; transition:0.5s ease;transition-property:all;text-shadow: 1px 1px 1px #999; text-align:center}
.mmenu_login:hover { background-color:#2ea9c0; color: #fff;text-shadow: 1px 1px 1px #ccc}


/* fullscreen-menu */
/*----------------------------------*/
/*----------------------------------*/
/* hamburger-icon  */
#nav-icon {
  display: block;
  position: absolute;
  margin: 0 auto;
  top:62px;
  left:50px;
  width: 25px;
  height: 25px;
  z-index: 9500;
  /* Bring icon ontop of overlay */
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

#nav-icon span {
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  background: #6ccde0;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;  
}

#nav-icon span:nth-child(1) { top: 0px;}
#nav-icon span:nth-child(2) { top: 9px;}
#nav-icon span:nth-child(3) { top: 18px;}
#nav-icon.animate-icon span:nth-child(1) { top: 9px; -webkit-transform: rotate(135deg);  transform: rotate(135deg);}
#nav-icon.animate-icon span:nth-child(2) { opacity: 0; left: -60px;}
#nav-icon.animate-icon span:nth-child(3) { top: 9px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}

}

/* for 1024px or less */
@media screen and (max-width: 1024px) {
#nav-icon {
  left:5%; top:63px;

}


}
/* for 768px or less */
@media screen and (max-width: 768px) {
	
.mobilechild li{padding:10px 10px;width: 35%; margin: 0 0 3px 32.5% ;background: url("../images/menu_bg01.png") center center repeat; text-align: center;}
.overlay_menu02{ float:left;position:relative ; width:20% ; margin: 0; margin: 0 0 0 40%; }
.overlay_menu03{float:left; position:relative ; width:35% ; margin: 0; margin: 30px 0 0 32.5%;}

#nav-icon { top:62px; left:40px; width: 25px; height: 25px;}

	
}

/* for 480px or less */
@media screen and (max-width: 480px) {
.mobilechild li{padding:10px 10px;width: 60%; margin: 0 0 3px 20% ;background: url("../images/menu_bg01.png") center center repeat; text-align: center;}
.overlay_menu02{ float:left;position:relative ; width:30% ; margin: 0; margin: 0 0 0 35%; }
.overlay_menu03{float:left; position:relative ; width:60% ; margin: 0; margin: 30px 0 0 20%; }



#nav-icon { top:54px; left:7.5%; width: 25px; height: 25px;}
#nav-icon span {height: 3px;}

#nav-icon span:nth-child(1) { top: 0px;}
#nav-icon span:nth-child(2) { top: 8px;}
#nav-icon span:nth-child(3) { top: 16px;}
#nav-icon.animate-icon span:nth-child(1) { top: 8px; -webkit-transform: rotate(135deg);  transform: rotate(135deg);}
#nav-icon.animate-icon span:nth-child(2) { opacity: 0; left: -60px;}
#nav-icon.animate-icon span:nth-child(3) { top: 8px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg);}	
}