/* ==================================================
   nav css
================================================== */
.navbar {
	max-width:1920px;
	margin: 0 auto;
	padding: .35rem 1rem;
}
.navbar img.logo {
	width:auto;
	height:70px;
	margin:4px 0; 
}

.navbar-dark {
    background-color:#232323;
}
.navbar-dark .navbar-nav li a.nav-link {
    color:#fff;
	font-size:19px;
	text-align: center;
	line-height: 1.35;
	transition: all 0.5s ease-out;
	white-space:nowrap;
}
/*英文小字*/
.navbar-dark .navbar-nav li a span {
	font-size:13px;
	font-weight: 100;
	letter-spacing:0.5px; 
	display: block;
}
.navbar-dark .navbar-nav li a.nav-link:hover  {
    color:#fff;
}

.navbar-dark .navbar-nav.mr-auto {
   /* margin-right: auto !important;*/
	margin-right: inherit !important;
}
.navbar>.container .show {
	height:calc(100vh - 47px);/*手機版header*/
	overflow: hidden;
}


/*右上工具icon*/
.headerTool {
	display: inline-block;
}
.headerTool a {
	color:#fff;
	font-size:30px; 
	margin:0 1rem; 
}

@media (max-width: 767.98px) {  /*xs,sm手機直橫*/
	.navbar img.logo {
		height:50px;
	}
	/*右上工具icon*/
	.headerTool {
		position: absolute;
		top:1.25rem;
		right:2.5rem;
	}
	.headerTool a {
		font-size:24px;
	}
	/*解決手機版有第二層文字過長破格跑版,造成bug無法下滑選單*/
	/*.dropdown-menu a.dropdown-item {
		white-space:inherit;
	}*/
	.navbar-dark .navbar-nav {
		margin-top:1.5rem; 
	}
	.navbar-dark .navbar-nav li a.nav-link {
		padding:0.75rem 0;
		padding-left:1.35rem; 
		text-align:left;
	}
	/*英文小字*/
	.navbar-dark .navbar-nav li a span {
		font-size:19px;
		letter-spacing:0; 
		display:inline-block;
		margin-left:10px; 
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {  /*md平板直式*/
	.navbar {
		padding-right:0;
	}
	.navbar img.logo {
		height:55px;
	}
	.navbar-dark .navbar-nav li a.nav-link {
		font-size: 16px;
		padding:0.5rem 0.55rem; 
	}
}

@media (min-width: 992px) and (max-width: 1199.98px) {  /*lg平板橫式*/
	.navbar {
		padding-right:0;
	}
	.navbar-dark .navbar-nav li a.nav-link {
		font-size: 18px;
		padding:0.5rem 1.2rem; 
	}
}

@media (min-width: 1200px) {  
	.navbar-dark .navbar-nav li a.nav-link {
		padding:0.5rem 2rem;
	}
	.navbar-dark .navbar-nav li a.nav-link:hover  {
		color: #ffff69;
	}
	/*英文小字*/
	.navbar-dark .navbar-nav li a span {
		font-size:13.5px;
	}
	.navbar-dark .navbar-nav li:after {
		display:block;
		z-index:0; 
		content: "";
		width:0;
		height:3px; 
		background-color: #ffff69;
		transition: all 0.5s ease-out;
	}
	.navbar-dark .navbar-nav li:hover:after {
		width:100%; color: #ffff69;
	}
	.headerTool a:hover {
		color: #ffff69;
	}
}

@media (min-width: 1600px) {  
	.navbar-dark .navbar-nav li a.nav-link {
		padding:0.5rem 4.2rem; 
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {  /*md平板直式~*/
	.navbar-dark .navbar-nav li:first-child a.nav-link { /*第一個子元素*/
		padding-left:0; 
	}
	.navbar-dark .navbar-nav li:last-child a.nav-link { /*最後一個子元素*/
		padding-right:0; 
	}
}


/* ==================================================
   漢堡按鈕-旋轉X
================================================== */
/*Hamburger Menu to X css*/
.burgerBtn {
    width:24px;
    height:22px;
	background-color:transparent !important;
    cursor: pointer;
}
button.burgerBtn:focus {
	outline:none;
}
.burgerBtn i {
    background:#fff;
	border-radius:0;
    width: 100%;
	height:3px;
    content:"";
    display:block;
}
.burgerBtn:hover i {
    background:#ffff69; 
}

.burgerBtn.collapsed i:nth-child(1) {
    animation:outT 1.0s backwards;  /*若要取消進場動畫*/
    animation-direction: reverse;
}
.burgerBtn.collapsed i:nth-child(2) {
	margin:4px 0;
    animation:outM 1.0s backwards;  /*若要取消進場動畫*/
    animation-direction: reverse;
}
.burgerBtn.collapsed i:nth-child(3) {
    animation: outBtm 1.0s backwards; /*若要取消進場動畫*/
    animation-direction: reverse;
}
.burgerBtn i:nth-child(1) {
    animation:inT 1.0s forwards;
}
.burgerBtn i:nth-child(2) {
    animation:outM 1.0s forwards;
}
.burgerBtn i:nth-child(3) {
    animation:inBtm 1.0s forwards;
}
.navbar-toggler {
    padding: 0;
    border-radius: 0;
    background-color: none;
    border: none;
}

@keyframes inM {
  70% {
    transform: rotate(0deg);
  }
  100% {
	transform: rotate(45deg);
  }
}

@keyframes outM {
  70% {
    transform: rotate(0deg);
  }
  100% {
	transform: rotate(45deg);
  }
}

@keyframes inT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  70% {
    transform: translateY(3px) rotate(0deg);
  }
  100% {
    transform: translateY(3px) rotate(135deg);
  }
}

@keyframes outT {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  70% {
    transform: translateY(7px) rotate(0deg);
  }
  100% {
    transform: translateY(7px) rotate(135deg);
  }
}

@keyframes inBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  70% {
    transform: translateY(-3px) rotate(0deg);
  }
  100% {
    transform: translateY(-3px) rotate(135deg);
  }
}

@keyframes outBtm {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  70% {
    transform: translateY(-7px) rotate(0deg);
  }
  100% {
    transform: translateY(-7px) rotate(135deg);
  }
}