/*選單橫條*/
.navbar {
}
/*選單區*/
.nav-wrap {
}
/* 觸發區*/
.nav-wrap__trigger {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	padding: 12px 20px;
	height: 65px;
	width: 70px;
}
.nav-wrap__trigger-line {
	width: 30px;
	height: 3px;
	background-color: #fff;
	display: block;
	margin: 8px auto;
	transition: all 0.3s ease-in-out;
}

.nav-wrap--open .nav-wrap__trigger-line:nth-child(2){
	opacity: 0;
}
.nav-wrap--open .nav-wrap__trigger-line:nth-child(1){
	transform: translateY(11px) rotate(45deg);
}
.nav-wrap--open .nav-wrap__trigger-line:nth-child(3){
	transform: translateY(-11px) rotate(-45deg);
}


/*網站選單 - 外框*/
.nav-wrap__dropbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100vh;
	background: #000;
	pointer-events: none;
	opacity: 0;
	transform: translateX(101%);
	transition: transform .5s, opacity .45s;
}
.nav-wrap--open .nav-wrap__dropbox-overlay {
	pointer-events: auto;
	opacity: 1;
	transform: none;
	transition: transform .35s, opacity .3s;
}
.nav-wrap__dropbox {
	overflow-y: auto;
	height: 100%;
	position: relative;
	padding: 80px 0 10vh;
	-webkit-overflow-scrolling: touch;
}
.nav-wrap--open .nav-wrap__dropbox {
}

/*主選選單*/
.nav {
	padding: 0;
	margin: 0;
}
.nav--open {

}
/*項目*/
.nav__item {
}

/*各層標題和連結*/
.nav__link {
	display: block;
	cursor: pointer;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
	padding: .5em 10px;
	color: #fff;
	text-align: center;
}

.nav__link:focus,
.nav__link:active {
	color: #ff6666;
}
.nav__item-border {
	display: none;
	position: absolute;
	pointer-events: none;
	transition: .175s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.nav-wrap__subscribe-info {
	text-align: center;
	margin: 10vh 0 0;
}

/* 會員項目 */
.nav__item-user {
	display: none;
}
.header--login .nav__item-user {
	display: block;
}

@media screen and (min-width: 1024px) {

	.nav-wrap__trigger {
		right: 10px;
		transition: opacity .25s, transform .25s;
		transform: none;
	}
	.nav-wrap__dropbox-overlay {
		background: none;
		transition: none;
		position: static;
		opacity: 1;
		transform: none;
		transition: opacity .25s;
		pointer-events: auto;
		height: auto;
	}
	.nav-wrap__dropbox-overlay::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: opacity .5s;
		background: #000;
		opacity: 0;
		pointer-events: none;
		z-index: -1;
		width: 100vw;
		height: 100vh;
	}
	.nav-wrap__dropbox {
		padding: 0;
		overflow: visible;
	}
	.nav {
		display: none;
		flex-wrap: wrap;
		/* opacity: 0;
		pointer-events: none; */
	}
	.nav__item {
		width: auto;
		margin-left: 20px;
	}
	.nav__link {
		color: #ff6666;
		font-size: 16px;
		padding-left: 0;
		padding-right: 0;
	}
	.nav__item--current .nav__link {
		/* border-bottom: 2px solid #ff6666; */
	}
	.nav-wrap__subscribe-info {
		display: none;
	}


	.body-on-top .nav-wrap__trigger {
		opacity: 0;
		pointer-events: none;
		transform: scale(.8);
		transition: opacity .15s, transform .15s;
	}
	.body-on-top .nav {
		/* opacity: 1;
		pointer-events: auto; */
		display: flex;
	}
	.body-on-top .nav__item {
		opacity: 1;
	}
	.body-on-top .nav__item-border {
		bottom: 0;
		display: block;
		height: 2px;
		background: #ff6666;
	}
	.body-on-top .header--login .nav__item-user {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 0;
	}
	.body-on-top .nav__item-user::before {
		content: '';
		height: 1em;
		width: 1px;
		background: #ff6666;
		margin: 0 1em;
	}

	.nav-wrap--open .nav-wrap__dropbox-overlay {
		pointer-events: auto;
		opacity: 1;
		position: fixed;
		width: 100vw;
		height: 100vh;
	}
	.nav-wrap--open .nav-wrap__dropbox-overlay::before {
		opacity: 1;
		z-index: 0;
		pointer-events: auto;
	}
	.nav-wrap--open .nav-wrap__dropbox {
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.nav-wrap--open .nav {
		/* opacity: 1;
		pointer-events: auto; */
		display: flex;
	}
	.nav-wrap--open .nav__item {
		width: 33.33%;
		margin: 0;
		padding: 20px;
		opacity: 1;
		animation: fadeInDown .5s .15s both;
	}
	.nav-wrap--open .nav__link {
		font-size: 48px;
		padding-left: 0;
		padding-right: 0;
		color: #fff;
		transition: color .25s;
	}
	.nav-wrap--open .nav__link:hover {
		color: #ff6666;
		border-bottom: 0;
	}
	.nav-wrap--open .nav__item:nth-child(4),
	.nav-wrap--open .nav__item:nth-child(5),
	.nav-wrap--open .nav__item:nth-child(6) {
		animation-delay: .35s;
	}
	.nav-wrap--open .nav__item:nth-child(7),
	.nav-wrap--open .nav__item:nth-child(8),
	.nav-wrap--open .nav__item:nth-child(9) {
		animation-delay: .55s;
	}
	.nav-wrap--open .nav__item--current .nav__link {
		color: #ff6666;
		border-bottom: 0;
	}
	.nav-wrap--open .nav-wrap__subscribe-info {
		animation: fadeInLeft 1.25s .75s both;
		position: absolute;
		bottom: 40px;
		left: 0;
		right: 0;
		display: block;
	}
	.nav-wrap--open .nav__item-border {
		opacity: 0;
	}
	.nav-wrap--open .nav-wrap__trigger {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	.nav-wrap--open .nav__item-user::before {
		content: none;
	}
}

@media screen and (min-width: 1200px) {
	.nav__item {
		margin-left: 40px;
	}
}


@media screen and (min-width: 1430px) {
	.body-on-top .nav__item-user::before {
		margin: 0 1.5em;
	}
}