#top-head-inner{ display: none;}
/*===平版型區===*/
@media (min-width: 768px) and (max-width: 992px) {
/* ***********************************************************
* #global-nav
* *********************************************************** */
.body_hidden{ overflow:hidden;}
#top-head-inner{ display:block;}
.open #global-nav { visibility: visible;}
#global-nav { visibility: hidden;  display:table; vertical-align:middle; top: 0; right: 0; height:100%; width:100%; text-align: center; font-size:18px;}
#global-nav ul { display: table-cell; vertical-align: middle; list-style: none;}
#global-nav a { color:rgba(0,0,0,.8); text-decoration: none;}
/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li { display:block; width:100%; opacity:0; padding:10px 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:0; height:100vh; top:0px; right:0px; 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 { width:100%; height:100vh; background:rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /*-webkit-transform: scale(50); transform: scale(50);*/ -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
/* ***********************************************************
* .nav-toggle
* *********************************************************** */
.nav-toggle { display: block; position: fixed; z-index: 1004; top:38px; right:30px; width:32px; height:56px; cursor: pointer; -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-d { top:23px;}

.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: #424242;}
.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;}

.btns{ text-align: center; margin-top: 50px;}
.btns a{ display: inline-block; margin: 0 15px; opacity: .7}
.btns img{ width:20px;}
}

/*===手機版型區===*/
@media screen and (max-width: 767px) {
/* ***********************************************************
* #global-nav
* *********************************************************** */
#top-head-inner{ display:block;}
.open #global-nav { visibility: visible;}
#global-nav { visibility: hidden;  display:table; vertical-align:middle; top: 0; right: 0; height:100%; width:100%; text-align: center; font-size:18px;}
#global-nav ul { display: table-cell; vertical-align: middle; list-style: none;}
#global-nav a { color:rgba(0,0,0,.8); text-decoration: none;}
/* ***********************************************************
* nav-list
* *********************************************************** */
#global-nav ul li { display:block; width:100%; opacity:0; padding:10px 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:0; height:100vh; top:0px; right:0px; 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 { width:100%; height:100vh; background:rgba(255,255,255,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); /*-webkit-transform: scale(50); transform: scale(50);*/ -webkit-transition: all .3s ease-out; transition: all .3s ease-out;}
/* ***********************************************************
* .nav-toggle
* *********************************************************** */
.nav-toggle { display: block; position: fixed; z-index: 1004; top:28px; right:20px; width:28px; height:50px; cursor: pointer; -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-d { top:18px;}
.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: #424242;}
.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;}

.btns{ text-align: center; margin-top: 50px;}
.btns a{ opacity: .7}
.btns img{ display: inline-block; margin: 0 15px; width:20px;}
}