/*----- L -----*/
@media screen and (min-width: 801px){
	.nav {
		display: inline-block;
		width: 72%;
	}

	/* 選單 li 之樣式 */
	.nav ul {
		margin: 0;
		padding: 0;
		display: block!important;
	}

	.nav li {
		position: relative;
		display:inline-block;
	}

	.nav li > a {
		color: #353535;
		text-align: center;
		display: block;
		padding: 20px 12px;
		border-bottom: solid 1px transparent;
	}

	.nav li > a:hover {
		color: #7e129c;
		border-bottom: solid 1px #7e129c;
	}

	/* 特定在第一層 > 第二層或以後下拉部分之樣式 */
	.nav li > ul {
		position: absolute;
		margin: 10px 0 0 0;
		height: auto;
		padding: 0;
		background: #ffffff;
		box-shadow: 2px 2px 6px rgba(0,0,0,.2);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-2em);
		transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
		-moz-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
		-webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
		-ms-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
		-o-webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
	}

	/* 當第一層選單被觸發時，指定第二層顯示 */
	.nav li:hover > ul {
		visibility: visible;
		opacity: 1;
		z-index: 1;
		transform: translateY(0%);
		transition-delay: 0s, 0s, 0.2s;
	}

	/* 特定在第二層或以後下拉部分 li 之樣式 */
	.nav li > ul > li {

		margin: 0;
		height: auto;
	}

	/* 第二層或以後選單 li 之樣式 */
	.nav li > ul li a {
		display: block;
		padding: 15px;
		width: 180px;
		margin:0;
		border: 0;
	}

	.nav li > ul li:hover {
		background: #600479;
	}

	.nav li > ul li:hover > a {
		border-bottom: none;
		color: #ffffff;
	}

	/* 第三層之後，上一層的選單觸發則顯示出來（皆為橫向拓展） */
	.nav li > ul ul{
		top: 5px;
		left: 95%;
		z-index: 1100;
	}

	.nav li > ul li:hover > ul{
		display: block;
		position: absolute;

	}

	.nav ul li span.arrow {
		display: none;
	}
}

@media screen and (min-width: 1200px){
	.nav {
		text-align: right;
	}
}

@media screen and (max-width: 1067px){
	.nav {
		    width: 100%;
	}
}

/*----- M -----*/
@media screen and (max-width: 800px){
	header {
		padding: 1rem 0 0;
	}

	/*----- Button -----*/
	.nav-bars {
		width: 50px;
		height: auto;
		display: block;
		position: absolute;
		top: -2.7em;
		right: 25px;
		cursor: pointer;
		padding: 0.5rem;
	}

	.hamburger,
	.hamburger::before,
	.hamburger::after {
		content: '';
		display: block;
		background: #3b0a60;
		height: 3px;
		width: auto;
		border-radius: 3px;
		-webkit-transition: all ease-in-out 350ms;
		transition: all ease-in-out 350ms;
	}

	.hamburger::before {
		-webkit-transform: translateY(-7px);
		transform: translateY(-7px);
	}

	.hamburger::after {
		-webkit-transform: translateY(4px);
		transform: translateY(4px);
	}

	.open .hamburger {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.open .hamburger::before {
		display: none;
	}

	.open .hamburger::after {
		-webkit-transform: translateY(0px) rotate(-90deg);
		transform: translateY(0px) rotate(-90deg);
	}


	/*----- Menu -----*/
	.nav {
		width: 100%;
		height: auto;
		position: relative;
		display: block;
	}
	.nav ul {
		list-style: none;
		padding: 0;
		text-align: left;
		position: relative;
		margin: 0;
		display: none;
	}
	.nav ul li {
		zoom: 1;
		position: relative;
		width: 100%;
		float: none;
	}
	.nav ul li span.arrow {
		display: block;
		position: absolute;
		top: 6px;
		margin: 0;
		right: 15px;
		left: auto;
		padding: 10px;
		color: #ffffff;
		width: auto;
		text-align: center;
		font-size: 7px;
		z-index: 5;
		cursor: pointer;
	}
	.nav ul li span.arrow:hover {
		color: #aaa;
	}
	.nav ul li span.arrow.arrow-rotate {
		-webkit-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.nav ul li a {
		display: block;
		color: #ffffff;
		padding: 15px;
		background: #370066;
		border-bottom: 1px solid #764d8c;
		text-decoration: none;
	}
	.nav ul li ul {
		list-style: none;
		padding: 0;
		display: none;
		left: 0;
		position: static;
		width: 100%;
	}
	.nav ul li ul li {
		width: 100%;
	}
	.nav ul li ul li a {
		background: #5d387d;
		border-bottom: 1px solid #764d8c;
		display: block;
		padding: 15px;
	}
	.nav ul li ul li a:hover {
		background: #f1cbcb;
	}
	.nav ul li:hover a {
		background: #370066;
		border-bottom: 1px solid #764d8c;
	}
	.nav ul li:hover a:hover {
		background: #f1cbcb;
		color: #2a2a2a;
	}
	.nav ul li:hover ul {
		display: none;
	}
	.nav ul li:hover ul a {
		background: #5d387e;
	}
	.nav ul li:hover ul a:hover {
		background: #f1cbcb;
	}
}


/*----- S -----*/
@media screen and (max-width: 500px){
	.nav-bars {
		right: 10px;
	}
}