#top-head-inner{ display: none;}
/*===平版型區===*/
@media (min-width: 685px) and (max-width: 1050px) {
/* ***********************************************************
* #global-nav
* *********************************************************** */
#top-head-inner{ display:block;}
.open #global-nav { visibility: visible;}
#global-nav { visibility: hidden; position: fixed; z-index:1003; display:table; vertical-align:middle; top: 0; height: 100%; width: 100%; text-align: center; font-size:18px;}
#global-nav ul { display: table-cell; vertical-align: middle; list-style: none; padding: 30px;}
#global-nav a { color: #fff; text-decoration: none; display: block; padding:10px 0;}
/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li { display:inline-block; width:50%; opacity:0; -webkit-transform: scaleX(0) translateX(-260px); transform: scaleX(0) translateX(-260px); -webkit-transition: none; transition: none;}
.open #global-nav ul li { opacity:1; -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transition-delay:.1s; transition-delay: .1s;}
/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg { content: ""; width: 60px; height: 60px; top:20px; right:20px; z-index:1000; display: block; position: fixed; -webkit-border-radius: 50%; border-radius: 50%;-webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(1); transform: scale(1);}
.open #nav-bg {	background: #ff9299; -webkit-transform: scale(50); transform: scale(50); -webkit-transition: all .6s ease-out; transition: all .6s ease-out;}
/* ***********************************************************
* .nav-toggle
* *********************************************************** */
.nav-toggle { display: block; position: fixed; z-index: 1004; top:8px; right:20px; width:57px; height:53px; cursor: pointer; padding:15px; -webkit-tap-highlight-color:rgba(0,0,0,0); behavior:expression(this.onFocus=this.blur()); /* for IE */transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; -ms-transition:all 0.3s;}
.nav-toggle-w{ top:10px; right:2%; behavior:expression(this.onFocus=this.blur()); /* for IE */transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; -ms-transition:all 0.3s;}
.nav-toggle div { position: relative; display: flex; flex-direction: column;}
.nav-toggle span {/*display: block; */ height: 2px; width: 100%; background: #424242;/*left: 0; */ zoom: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; margin: 3px 0;}
.nav-toggle span:nth-child(1) { top: 0;}
.nav-toggle span:nth-child(2) { top: 6px;}
.nav-toggle span:nth-child(3) { top: 12px;}
.open .nav-toggle { background: transparent;}
.open .nav-toggle span { background: #fff;}
.open .nav-toggle span:nth-child(1) { top:6px; -webkit-transform: translateY(8px) rotate(-135deg); transform: translateY(8px) rotate(-135deg); zoom: 1;}
.open .nav-toggle span:nth-child(2) { width: 0; left: 50%;}
.open .nav-toggle span:nth-child(3) { top:6px; -webkit-transform: translateY(-8px) rotate(135deg); transform: translateY(-8px) rotate(135deg); zoom: 1;}
}

/*===手機版型區===*/
@media screen and (max-width: 686px) {
/* ***********************************************************
* #global-nav
* *********************************************************** */
#top-head-inner{ display:block;}
.open #global-nav { visibility: visible;}
#global-nav { visibility: hidden; position: fixed; z-index:1003; display:table; vertical-align:middle; top: 0; height: 100%; width: 100%; text-align: center; font-size:16px;}
#global-nav ul { display: table-cell; vertical-align: middle; list-style: none; padding:20px;}
#global-nav a { color: #fff; text-decoration: none; display: block; padding:8px 0;}
/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li { opacity:0; -webkit-transform: scaleX(0) translateX(-260px); transform: scaleX(0) translateX(-260px); -webkit-transition: none; transition: none;}
.open #global-nav ul li { opacity:1; -webkit-transform: scaleX(1) translateX(0); transform: scaleX(1) translateX(0); -webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-transition-delay:.1s; transition-delay: .1s;}
/* ***********************************************************
* #nav-bg
* *********************************************************** */
#nav-bg { content: ""; width: 60px; height: 60px; top:25px; right:65px; z-index:1000; display: block; position: fixed; -webkit-border-radius: 50%; border-radius: 50%;-webkit-transition: all .3s ease-out; transition: all .3s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: scale(1); transform: scale(1);}
.open #nav-bg {	background: #ff9299; -webkit-transform: scale(50); transform: scale(50); -webkit-transition: all .6s ease-out; transition: all .6s ease-out;}
/* ***********************************************************
* .nav-toggle
* *********************************************************** */
.nav-toggle { display: block; position: fixed; z-index: 1004; top:4px; right:0px; width:50px; height:50px; cursor: pointer; padding:15px; -webkit-tap-highlight-color:rgba(0,0,0,0); behavior:expression(this.onFocus=this.blur()); /* for IE */transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; -ms-transition:all 0.3s;}
.nav-toggle-w{ top:6px; right:0%; behavior:expression(this.onFocus=this.blur()); /* for IE */transition-property:all 0.3s;-moz-transition:all 0.3s; /* Firefox 4 */-webkit-transition:all 0.3s; /* Safari and Chrome */-o-transition:all 0.3s; -ms-transition:all 0.3s;}
.nav-toggle div { position: relative; display: flex; flex-direction: column;}
.nav-toggle span {/*display: block; */ height: 2px; width: 100%; background: #424242;/*left: 0; */ zoom: 1; -webkit-transition: .35s ease-in-out; transition: .35s ease-in-out; margin: 2px 0;}
.nav-toggle span:nth-child(1) { top: 0;}
.nav-toggle span:nth-child(2) { top: 4px;}
.nav-toggle span:nth-child(3) { top: 8px;}
.open .nav-toggle { background: transparent;}
.open .nav-toggle span { background: #fff;}
.open .nav-toggle span:nth-child(1) { top: 4px; -webkit-transform: translateY(6px) rotate(-135deg); transform: translateY(6px) rotate(-135deg); zoom: 1;}
.open .nav-toggle span:nth-child(2) { width: 0; left: 50%;}
.open .nav-toggle span:nth-child(3) { top: 4px; -webkit-transform: translateY(-6px) rotate(135deg); transform: translateY(-6px) rotate(135deg); zoom: 1;}
}