/*2019.10.03*/


/* ==================================================
   搭配透明nav自定反制bootstrap css
================================================== */
#Main-navbar .navbar-nav {
	margin:0;
	margin-bottom:15px;
}
.navbar-collapse {
    box-shadow:none;
	border-top:none;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background: none;
    border-color: none;
}
.nav>li>a:focus,
.nav>li>a:hover {
    background: none;
}
/*解決ios看不到符號bug*/
.navbar-nav > li > a .caret{
	border:4px solid transparent;
	border-bottom:none;
	border-top-color:#FFF;
	margin-left:0.35em;
}
.navbar-nav > li.open > a .caret{
	/*border-top-color:#221815;*/
	border-top-color:#ff717b;
}

@media (min-width: 768px){
	.container {
		width: auto;
	}
	 .navbar-header {
	 	float: none;
	}
	 .container > .navbar-header,
	 .container-fluid > .navbar-header,
	 .container > .navbar-collapse,
	 .container-fluid > .navbar-collapse {
		 margin-right: -15px;
		 margin-left: -15px;
	}
	.container > .navbar-collapse{
		display:none !important;
	}
	.container > .navbar-collapse.collapsing,
	.container > .navbar-collapse.in{
		display:block !important;
	}
	 .navbar > .container .navbar-brand,
	 .navbar > .container-fluid .navbar-brand {
	 	margin-left: 0;
	}
	 .navbar-toggle {
	 	display: inline-block;
	}
	 #Main-navbar .navbar-nav {
	 	float: none;
	}
	#Main-navbar .navbar-nav > li {
	 	float: none;
	}
}

@media (min-width: 992px) {
	.container {
		width: 750px;
	}
	 .navbar-header {
	 	float: left;
	}
	 .navbar-collapse {
		 width: auto;
		 border-top: 0;
		 box-shadow: none;
	}
	 .navbar-collapse.collapse {
		 display: block !important;
		 height: auto !important;
		 padding-bottom: 0;
		 overflow: visible !important;
	}
	 .navbar-collapse.in {
	 	overflow-y: visible;
	}
	 .container > .navbar-header,
	 .container-fluid > .navbar-header,
	 .container > .navbar-collapse,
	 .container-fluid > .navbar-collapse {
		 margin-right: 0;
		 margin-left: 0;
	}
	 .navbar-toggle {
	 	display: none;
	}
	 #Main-navbar .navbar-nav {
		 float: left;
		 margin: 0;
	}
	 #Main-navbar .navbar-nav > li {
	 	float: left;
	}
	/*取消主選單旁的箭頭*/
	#Main-navbar .navbar-nav > li > a  .caret{
		display:none;
	}
}


@media (max-width: 767px) {  /*xs*/
	 #Main-navbar .navbar-nav .open .dropdown-menu {
	 	position: absolute;
	}
}


@media (max-width: 991px) {
	 #Main-navbar .navbar-nav .open .dropdown-menu {
		 position: static;
		 float: none;
		 width: auto;
		 margin-top: 0;
		 border: 0;
		 box-shadow: none;
	}
	 #Main-navbar .navbar-nav .open .dropdown-menu > li > a,
	 #Main-navbar .navbar-nav .open .dropdown-menu .dropdown-header {
	 	padding: 10px 15px 10px 30px; /*下拉展開第二層選單後縮*/
		text-align: left;
	}
	 #Main-navbar .navbar-nav .open .dropdown-menu > li > a {
	 	line-height: 20px;
	}
	 #Main-navbar .navbar-nav .open .dropdown-menu > li > a:hover,
	 #Main-navbar .navbar-nav .open .dropdown-menu > li > a:focus {
	 	background-image: none;
	}
}


@media (min-width:1200px) { /*lg*/
	/*取消主選單旁的箭頭
	#Main-navbar .navbar-nav > li > a  .caret{
		display:none;
	}*/
}




/* ==================================================
   透明nav
================================================== */
header {
	position: absolute;
	padding: 30px 0;
	width: 100%;
	z-index: 20; /* 要壓過下圖輪播圓點.carousel-indicators */
	left: 0;
	top: 34px; /* 這值必須至少是頂部黑 bar 的高度 */
	transition: all 0.3s;
}
header .navbar {
	margin-bottom: 0;
	border: none;
}

/******************* 當主選單往下滑變置頂固定時 ********************/
header.fixed {
	position: fixed;
	top:0;
	/*padding:10px 0;*/
	padding:6px 0;
	background-color:#221815; /*深黑色*/
	/* background-color: rgba(0,0,0, 0.9); 桌機版 header 固定時底色 */
	/*background: rgba(34,24,21, 0.95);  桌機版 header 固定時底色#221815 */
}
header.fixed .navbar {
    min-height:40px;
}
header.fixed .navbar-header .navbar-brand img.logo {
	height:40px;   /*長駐置頂黑bar上的logo*/
	margin-top:1px; 
}

/******************* logo start ********************/
header .navbar-brand {
	position: relative;
	z-index: 10;
	text-decoration: none;
	padding:0;
	height: auto;
}
.navbar-header .navbar-brand img.logo {
	/*height:43px   選單大圖上logo*/
	height:55px;   /*選單大圖上logo*/ /*md-lg*/
}



/******************* 漢堡 start ********************/
header .navbar-toggle {
	margin-top:18px;
	margin-right: 0;
	padding: 0;
}
header .navbar-toggle.active {
	margin-top: 20px
}
/* 漢堡線條顏色 */
header .navbar-toggle .icon-bar {
	position: relative;
	transition: all .5s ease-in-out;
	/*background-color:#eee;*/
	xxxxbackground-color:#fff;
	background-color:#ff717b;
	/*background-color:#e01d30; 紅色偏亮*/
}
header .navbar-toggle.active .icon-bar:nth-of-type(2) {
	background-color: transparent;
}
header .navbar-toggle.active .icon-bar:nth-of-type(1) {
	top: 6px;
	transform: rotate(45deg)
}
header .navbar-toggle.active .icon-bar:nth-of-type(3) {
	top: -6px;
	transform: rotate(-45deg)
}

/* 場次表快速按鈕 */
header .scheduleBtn {
	position: relative;
    float: right;
	margin-top:16px;
    margin-right:15px;
}
header .scheduleBtn i {
	color:#ff717b;
	font-size:22px;
}

@media (min-width:992px) { /*md-lg*/
	header .scheduleBtn {
		display: none;
	}
}



/******************* 主選單 start ********************/
#Main-navbar .navbar-nav > li > a {
	/*padding:17px 18px 15px; 主選單第一層*/
	padding:10px 12px; /*主選單第一層*/
	font-size:16px;
	white-space:nowrap;
	color: #fff;
}

/*主選單第一層所在active*/
#Main-navbar .nav.navbar-nav > li.active > a {
	background:#c31426;
	/*border-top:#32aa96 solid 3px;*/
}
#Main-navbar .nav.navbar-nav > li.open > a,
#Main-navbar .nav.navbar-nav > li > a:hover {
	background:#c31426;
}



/******************* 第二層次選單 start ********************/
#Main-navbar .navbar-nav > li > .dropdown-menu {
    padding: 0;
    text-align: center;
    /*background-color: rgba(0,0,0, 0.8);
	background-color: #c31426;
	background-color: #221815;*/
	background-color:#221815; /*深黑色*/
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: none;
	border-radius:0;
	/*border-bottom:#ff5c68 solid 1px !important; #c31426紅色偏亮*/
	xxxxborder-bottom:#c31426 solid 1px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);	
    left:auto;
    right:0;
}
#Main-navbar .navbar-nav > li > .dropdown-menu > li > a {
	padding: 0 20px;
	font-size: 16px;
	color: #fff;
	line-height: 45px;
	border: none !important;
	/*border-top:#ff5c68 solid 1px !important; #c31426紅色偏亮*/
	xxxxxborder-top:#c31426 solid 1px !important;
	border-bottom:#c31426 solid 1px !important;
	/*border-top: #32aa96 solid 1px;
	white-space:nowrap;*/
	background:none;
}
#Main-navbar .navbar-nav > li > .dropdown-menu > li > a:hover {
	text-decoration: none;
	/*background: #32aa96;*/
	/*background:#9d1522; #c31426加深*/
	background:#c31426;
}
#Main-navbar .navbar-nav > li > .dropdown-menu > li > a:focus { /*點後反應*/
	background: inherit;
}


/******************* 第三層次選單 start ********************/
#Main-navbar .navbar-nav > li > .dropdown-menu > li > .nav3 {
	/*margin-left:13px;*/
	margin-left:23px;
	padding-bottom:8px;
}
#Main-navbar .navbar-nav > li > .dropdown-menu > li > .nav3 li {
	text-align:left;
	margin-bottom:4px;
	color:#fff;
}
#Main-navbar .navbar-nav > li > .dropdown-menu > li > .nav3 li a {
	xxxxcolor:#ccc;
	color:#fff;
	font-size:15.5px;
}



/********* 頂部黑 bar 之 桌機版 & 行動版 共用樣式 start *********/
/*.topBar,
.topBar_mobile{
	background:#000;
	color:#FFF;
	padding:0.5em;
}*/
.topBar .navbar-collapse {
    float: none;
}



/* ==================================================
   桌機版RWD start
================================================== */
@media (min-width:992px) {
	header .navbar > .container{
		/*width:auto;*/
	}
	header .brand {
		width: 100%;
	}
	header .navbar-header {
		/*width:29%;*/
		width:auto;
	}
	.navbar-collapse {
		float: right;
		margin-top: 0;
	}
	/* 桌機版時把行動版 .topBar_mobile 隱藏 */
	.topBar_mobile{
		display:none;
	}
	header.fixed #Main-navbar .navbar-nav {
		/*margin-top:6px;*/
	}
	header.fixed #Main-navbar .navbar-nav a {
		padding:10px 15px;
	}
	header.fixed #Main-navbar .navbar-nav > li > .dropdown-menu {
		 /*margin-top:10px;置頂時的下拉區塊齊bar*/
		margin-top:6px; /*置頂時的下拉區塊齊bar*/
		/*background-color: rgba(0,0,0, 0.9);*/
	}
}


@media (min-width:992px) and (max-width:1199px) {  /*md*/
	#Main-navbar .navbar-nav > li > a {
		padding:15px 11px;
		font-size:14.5px; /* 主選單第一層*/
	}
	#Main-navbar .navbar-nav > li > .dropdown-menu > li > a {
		font-size: 15px;
	}
}



/* ==================================================
   手機版 RWD
================================================== */
@media (max-width: 991px) {  /*xs,sm*/
	header {
		position: fixed;
		top:0;
		/*padding:10px 0;*/
		padding:5px 0;
		/*background:#46beaa; 手機版header底色*/
		/*background:#221815; 手機版header底色-深黑色*/
		background:#c31426; /*手機版header底色-紅色*/
		/*background: linear-gradient(to right, #c31426 0%, #8a0e1b 10%, #221815 75%); 紅色漸層*/
	}
	header.fixed {
		/* background-color: rgba(0,0,0, 1.0); 置頂固定住的 header 底色 */
		/*background:#4eb8a9; 手機版header底色*/
		display: none;/*xs,sm時不需要*/
	}
	header .navbar .container {
		padding-left:17px;
	}
	header.open {
		overflow: auto; /* 手機選單展開過長時出現拉bar */
		height:100vh;
		border-bottom:#FFF solid 1px;
		xxxxxbackground: linear-gradient(to top, #c31426 0%, #8a0e1b 3%, #221815 35%); /*top黑色到紅色漸層*/
		/*background: linear-gradient(to bottom right, #221815 60%, #c31426 100%); 斜角黑色到紅色漸層*/
		background: linear-gradient(to bottom right, #e3323a 0%, #c31426 10%, #6e000c 100%); /*斜角紅色漸層*/
	}
	header.open .container>.navbar-header {
		border-bottom:#FFF solid 1px;
		padding-bottom:10px;
	}	
	header .brand {
		/*width:70%; 不能用會變形*/
		padding:0;
	}
	.navbar-collapse {
		float: none;
		margin-top: 12px;
	}
	.container>.navbar-header {
		margin:0;
	}	
	.navbar-header .navbar-brand img.logo {
		height:45px;   /*主選單上logo*/ /*xs,sm*/
		margin-top:3px; 
	}	
	#Main-navbar .navbar-nav > li > a {
		font-size:18px; /* 主選單第一層*/
		font-weight:normal;
	}
	#Main-navbar .nav.navbar-nav > li.open > a,
	#Main-navbar .nav.navbar-nav > li > a:hover {
		background: inherit;
	}
	#Main-navbar .nav.navbar-nav > li.open > a {
		xxxbackground-color: rgba(0,0,0, 0.0); /*透明度*/
		xxxxbackground-color:#221815; /*深黑色*/
		background-color:transparent;
		xxxcolor:#ca2435; /*紅色字偏亮*/
		xxxcolor:#d2a087; /*玫塊金*/
		text-shadow:none; 
	}
	/******************* 第二層次選單 start ********************/
	#Main-navbar .navbar-nav > li > .dropdown-menu {
		background-color: transparent;
		border-bottom:#ff5c68 solid 1px !important;/*紅線調亮*/
	}
	#Main-navbar .navbar-nav > li > .dropdown-menu > li > a {
		white-space:inherit; /*解決手機版有第二層文字過長跑版,造成bug*/
		xxxxborder-top: #221815 solid 1px;
		border-top:#ff5c68 solid 1px !important;/*紅線調亮*/
		border-bottom:none !important;
	}
	#Main-navbar .navbar-nav > li > .dropdown-menu > li > a:hover {
		background: none;
	}	
	#Main-navbar .navbar-nav > li > a .badge {
		/*background-color:#c31426; 紅色*/
		background-color:#221815; /*深黑色*/
	}
	.topBar_mobile {
		padding-bottom:12px;
		border-bottom:#fff solid 1px;
		padding-left:5px;
		margin-bottom:15px;
		color:#ff5c68; /*手機版間隔線*/
	}	
	.topBar_mobile a,
	.topBar_mobile a:hover {
		color:#FFF;
		/*font-size: 18px;
		margin:0 15px;*/
		font-size: 17px;
		margin:0 9px;
	}		
	/* 行動版時把桌機版 .topBar 隱藏 */
	.topBar{
		display:none;
	}
}
