@import url("//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("template-nav.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap'); /*Google Fonts 思源中文字型-黑體*/


/*2021.03.18*/

/*解決font-awesome圖示load不出來變方塊的問題*/
.fontawesome:before, 
.fontawesome:after {
	font-family: 'Font Awesome 5 Free'; /*少了它會有bug*/
	font-weight: 900; /*少了它會有bug*/
}

/* 取消新版chrome搞出來的黑框bug */
*,
*:focus {
	outline: none !important;
}

/* ==================================================
   .recommend
================================================== */
/*.alsobuy { 
	padding-top:2.75em; 
	padding-bottom:5em; 
	position: relative;
}*/

/*左右半透明遮罩
.alsobuy .maskL,
.alsobuy .maskR { 
	position:absolute;
	top:6em;
	width:60px;
	height:300px;
	z-index:3;
}
.alsobuy .maskL { 
	left:0;
	background:linear-gradient(to right, rgba(34,34,34,1.0), rgba(34,34,34,0.0));
}
.alsobuy .maskR { 
	right:0;
	background:linear-gradient(to right, rgba(34,34,34,0.0), rgba(34,34,34,1.0));
}
*/



.alsobuy h5 {
    margin: 0 0 16px;
    border-bottom: #b07361 solid 2px;
    padding-bottom: 10px;
}
.recommend { 
	position:relative;
	overflow:hidden;
}
.recommend li { 
	margin:0 10px;/*如果居中放大,則這可以取消*/
	/*transform:scale(0.88); 因為有遮罩, 如果要居中放大,則要反過來這邊縮小0.95,*/
	transition:transform 0.25s;
	margin-bottom:2em; /*和下面點距離*/
}
.recommend li h6 {
    color:#221815;
	line-height:1.2;
}
.recommend li h6 small {
    font-size:75%;
}
.recommend li h6,
.recommend li h6 small {
	white-space: nowrap;  /*不折行 */
	xxxdisplay: block;  /* a標籤需要 */
	overflow: hidden;  /* 限寬超過遮蔽 */
	text-overflow: ellipsis;  /* 字尾會斷乾淨,字不會被削到,超出的就省略 */
}
.recommend li p {
	margin-top:-5px; 
}

@media (max-width: 767px) {  /*xs*/
	.recommend li { 
		margin:0 5px;
	}
}


/* ==================================================
   columns分割成五等分
================================================== */
.col-xs-share5,
.col-sm-share5,
.col-md-share5,
.col-lg-share5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-share5 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) { 
	.col-sm-share5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px)  { 
    .col-md-share5 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-share5 {
        width: 20%;
        float: left;
    }
}




/* ==================================================
   自定反制模組效果
================================================== */
.jumbotron{
	/*color: inherit;*/
	background-color: transparent;
}

/*強制主選單無圓角
.navbar {
    border-radius: 0; 
}*/

.navbar-brand>img {
	display:inline-block !important;
}

/*輸入欄位框*/
input, button, select, textarea,
input[type="file" i]::-webkit-file-upload-button{ /*用於input的file選擇檔案*/
	font-family:"微軟正黑體", Arial;
}
/*必填星號*/
.star {
	font-size:18px;
	font-weight:bold;
	color: #F00;
	line-height:0.8;
	margin:0 3px;
}
/*圖片驗證碼*/
.code .form-control {
	width:120px;
	display:inline-block;
	vertical-align:baseline; 
}
.code img {
	height:35px;
}
/*.code.form-control {
	width:120px;
	display:inline-block;
	vertical-align:baseline; 
}*/

ul.list-unstyled {
	overflow: hidden; /*讓ul回覆正常有高度*/
}
ul.list-hr>li,
ol.list-hr>li {
	border-bottom: 1px solid #ddd; /*設定分隔線*/
	overflow:hidden;
}

ul.inline li,
ol.inline li {
	display: inline-block;
	margin-right:1em;
}
.list-inline>li {
    padding-right: 8px;
    padding-left: 8px;
}

ol.lineSpace li, 
ul.lineSpace li {
    margin-bottom:5px;
}

.media-left, 
.media>.pull-left {
    padding-right: 20px;
}
.dl-horizontal dt {
	width:auto;
	text-align: left;
}

/*複選單選加大*/
input[type=checkbox] ,
input[type=radio] {
  /* Double-sized Checkboxes */
  -ms-transform: scale(1.65); /* IE */
  -moz-transform: scale(1.65); /* FF */
  -webkit-transform: scale(1.65); /* Safari and Chrome */
  -o-transform: scale(1.65); /* Opera */
}



/* ==================================================
   a標籤
================================================== */
/*over到整區會有陰影框邊*/
a.area-link {
	display: inline-block;
	border:1px solid transparent;
	padding:15px;
	margin-bottom:10px;
}
a.area-link:hover, 
a.area-link:focus {
	box-shadow:1px 1px 10px rgba(0,0,0,0.2); /* 外陰影 */
	/*background-color:#CCC;*/
}


/*over到整區圖半透明內文變化*/
a.area-link1:hover p, 
a.area-link1:focus p {
	/*opacity:0.75; 透明度*/
	/*filter:alpha(opacity=75);   針對ie使用 */ 
}
a.area-link1:hover {
	color: #d2a087; /*金色highlight*/
}
a.area-link1:hover img {
	opacity:0.75; /*透明度*/
	filter:alpha(opacity=75);  /* 針對ie使用 */ 
}


/*over到整區變底色*/
a.area-link2 {
	display:block; /* 有些地方套用時才會出現底色,但小心和flexArea相衝 */ 
	overflow:hidden; /* 有些地方套用時才會出現底色 */ 
}
a.area-link2:hover, 
a.area-link2:focus {
	background-color: #f5f5f5; /*淺底色*/
	color: #d2a087; 
}
.kvPaper a.area-link2:hover, 
.kvPaper a.area-link2:focus {
	/*background: linear-gradient(to right, #64d5c2 0%, #42bbaa 50%, #0085a6 100%);  藍綠色漸層*/
	/*background: linear-gradient(to right, #dd0015 0%, #c31426 20%, #221815 100%);  紅色漸層*/
	background: linear-gradient(to right, #d2a087 0%, #b07361 45%, #e6beaa 100%);
}


/*a連結整區白底*/
a.area-link3 {
	background-color:#fff;
	display:inline-block;
	overflow:hidden; /* 圓角用塞圖時才不會影響圓角美觀 */
	border-radius:4px; /* 圓角 */
	margin-bottom:20px;
}
a.area-link3:hover, 
a.area-link3:focus {
	box-shadow:0px 0px 30px rgba(0,0,0,0.2); /* 外陰影 */
}

a.area-link .caption {
	padding:10px; /*內容和邊框的間隔*/
}
a.area-link3 .caption {
	padding:10px; /*內容和邊框的間隔*/
}


/* ==================================================
   反白效果
================================================== */
.white h1, .white h2, .white h3, .white h4, .white h5, .white h6, .white p,
.white small {
	color:#fff;
}
.white {
	color:#fff !important;
}
hr.white {
    border-top:1px solid #fff ;
    clear: both;
}


/* ==================================================
   自定效果
================================================== */
/*徽章,文字壓中線,例如-或-*/
.line-center {
	border-bottom:#666 solid 1px;
	position: relative;
	margin:5px 0 30px;
	width:100%; /*解決套進popout裡發生的bug*/
}
.line-center .badge {
	width:33px;
	height:33px;
	display:block;
	padding:0;
	padding-top:10px;
	box-sizing:border-box;
	border-radius:50%;
	position:absolute;
	top:-17px;
	left:48.5%;
}
.line-center.white {
	border-bottom:#fff solid 1px;
}
.line-center.white .badge {
	background-color: #fff;
	color:#333;
}

.noborder {
	border:none !important;
}

.nopadding {
	padding: 0 !important;
	margin: 0 !important;
}
.nopaddingLR {
	 padding-left:0 !important;
	 padding-right:0 !important;
}
.paddingTop {
	 padding-top:15px;
}
.paddingBtm {
	 padding-bottom:2.75em;
}
.paddingTB { /*回定套在滿版底圖區裡*/
	 padding-top:3.75em;
	 padding-bottom:4em;	 
}
.paddingTB1 { /*特別用在微調整間距*/
	 padding-top:0.75em;
	 padding-bottom:0.5em;	 
}
.nomargin {
	 margin:0 !important;
}
.nomarginTop {
	 margin-top:0 !important;
}
.nomarginBtm {
	 margin-bottom:0 !important;
}
.lessmarginTop {
	 margin-top:-10px !important;
}
.marginTop {
	 margin-top:2em !important;
}
.marginTop1 { /*影片內容表格*/
	 margin-Top:15px;
}
.marginTopless {
	 margin-top:-15px;
}
.marginBtm {
	 margin-bottom:2em;
}
.marginBtm1 {
	 margin-bottom:10px !important;
}



/* ==================================================
   圖片效果
================================================== */
/*圖over放大*/
.piczoom { /*要在a連結上一層*/
	overflow:hidden;
	display:block;
}
.piczoom a img {
    display:block;
	-webkit-transition:transform 1.0s;   /* for MAC safari */
    transition:transform 1.0s;   /*數字愈小速度愈快*/
}
.piczoom a:hover img {
	-webkit-transform:scale(1.05); /* for MAC safari */
	transform:scale(1.1);   /*放大倍數*/
	/*transform:scale(0.95);   縮小倍數*/
}


/*圖上壓半透明bar*/
.bkBarArea {
	position:relative;
	overflow:hidden; /*如果搭配piczoom時才不會圖跑出框外*/
	/*display:inline-block; 加了導致圖有空隙bug*/
}
.bkBar {
	position:absolute;
	padding:8px;
	bottom:0;
	width:100%;
	color:#FFF;
	line-height: 1.25;
	text-align:center;
	background-color: rgba(0,10,20, 0.5); /*透明度*/
}
.bkBar.fix {
	z-index:99; /*mouse over也不會消失*/
	background-color: rgba(0,10,20, 0.65);
}
.bkBarFull,
.bkBarFull-1,
.top20 {
	position:absolute;
	padding:0 20px;
	width:100%;
	height:100%;
	color:#FFF;
	line-height: 1.25;
	text-align:center;
	background-color: rgba(0,0,0, 0.45);  /*透明度*/
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	z-index:1;
    transition: all .25s;
    webkit-transition: all .25s;		
}
.bkBarFull-1 { 
	/*background-color: rgba(0,0,0, 0.15);  /*透明度*/
	background-color: rgba(0,0,0, 0.3);  /*透明度*/
}
.bkBarFull p,
.bkBarFull-1 {
	color:#FFF;
	text-align:center;
}
a:hover .bkBarFull,
a:hover .bkBarFull-1 {
	/*background-color: rgba(0,0,0, 0.5);  透明度*/
	/*background:rgba(24,188,156,0.75)!important; 藍綠色*/
	background:rgba(34,24,21,0.5)!important;
}
/*over黑幕消失*/
.hidden-over a:hover .bkBarFull {
	display:none; 
}


/*觀眾票選TOP 20*/
.top20,
.top20 small {
	color:#FFF;
	text-align:center;
}
.top20 {
	background-color: rgba(0,0,0, 0.35);  /*透明度*/
}
.top20 h4 {
	font-family: 'Garamond';
	font-weight:normal;	
}
.top20 small {
	display:block;
	font-family:"微軟正黑體", Arial;
}
a:hover .top20 {
	display:none;   /*壓字全都消失*/
}
/*觀眾票選TOP 1 第一名*/
.col-md-12 .bkBarArea .top20 h4 {
	font-size:250%;
	font-family: 'Garamond';
	font-weight:normal;	
}
/*首頁最底按鈕-觀眾票選TOP 20*/
h4.top20Btn {
	font-family: 'Garamond';
	font-weight:normal;	
	margin-bottom:10px;
	color:#FFF;
}
h4.top20Btn small {
	color:#FFF;
}


/* ==================================================
   photo over壓半透明色塊
================================================== */
.portfolio-item {
    display: block;
    position: relative;
    /*margin: 0 auto;
    /*max-width: 800px;*/
}

.portfolio-item .portfolio-link .caption {
    position: absolute;
    /*width: 90%; 為了不要超出圖範圍*/
	width:100%;
    height: 100%;
    opacity: 0; /*被預設成透明*/
    /*background: rgba(24,188,156,0.75);*/
	background:rgba(34,24,21,0.75);
    transition: all ease .5s;
	z-index:1;
}
.portfolio-item .portfolio-link .caption:hover {
    opacity: 1;
}
.portfolio-item .portfolio-link .caption .caption-content {
    width: 100%;
    height: 100%; /*垂直居中一定要設高*/
    font-size: 15px;
	line-height:1.35;
	padding:8px; /*為了英文版字太長斷行時*/
    color: #fff;
    display: -webkit-flex; /* Safari */
	display: flex;
    flex-direction: column; /* 預設是row橫排不換行 , 改成column一律換行直排 */
    -webkit-align-items: center;
    align-items: center; /*一律對齊水平中線*/
	-webkit-justify-content: center;
	justify-content: center;	
}
.portfolio-item .portfolio-link .caption .caption-content p {
    color: #fff;
	line-height:1.2;
	margin: 0 0 10px;
}
#portfolio * {
    z-index: 2;
}



/* ==================================================
   按鈕
================================================== */
/*群組按鈕時增加邊界-col*/
.btnMargin>div {
	margin-bottom:15px !important;
}
.btnMargin>.btn {
	margin-bottom:8px;
}

.btn-group-lg>.btn, 
.btn-lg {
    font-size:16px;
}
.btn-group-sm>.btn, 
.btn-sm {
    font-size:15px !important;
}
.btnMargin.center {
	display:inline-block;
	margin:0 auto; 
}
.text-center .center .left {
	margin-left:5px;
}

@media (max-width: 767px) {  /*xs*/
	.text-center .center .left {
		float:none;
	}
}



/*純文字無框按鈕*/
.btn.smaller {
    padding:3px 3px;
}
.btn.smaller:focus,
.btn.smaller:hover {
	/*background-color:#4eb8a9;
	border-color:#4eb8a9;*/
	background-color:#221815; /*深黑色*//
	border-color:#221815; /*深黑色*/
	background-image:none;
	color:#fff;
}

/*群組按鈕*/
.btn-group .btn {
	padding:8px 12px;
}
.btn-group .btn-default.active, 
.btn-group .btn-default:active, 
.btn-group .btn-default.active:hover, 
.btn-group .btn-default:active:hover {
	/*background-color: rgba(78,185,170, 0.8);*/
	/*background-color: #221815; 深黑色*/
	/*background-color: #d2a087; 玫塊金*/
	/*background-color: #c31426;*/
	background-color: #f0f0f0;
}

/*台北電影獎-入選名單*/
.btn-group-justified.awards {
	display: table;
	width:auto; /*解決英文字數不同問題*/
	table-layout: fixed;
	border-collapse: separate;
	margin:0 auto 20px;
}
/*影展節目-場次表類別*/
.btn-group-justified.program {
	display: table;
	width:auto; /*解決英文字數不同問題*/
	table-layout: fixed;
	border-collapse: separate;
	margin:0 auto 20px;
}


/*純文字無框按鈕*/
.btn-link:active, 
.btn-link.active,
.btn-link1:active, 
.btn-link1.active {
	box-shadow: none;
}
.btn-link {
    /*color: #d2a087; 金色highlight*/
	color: #4eb8a9; /*藍綠色*/
	/*color:#ca2435; 紅色字偏亮*/
	/*font-weight: bold;*/
	padding:0 !important;
	margin-bottom:10px;
}
.btn-link:focus,
.btn-link:hover {
	/*color: #4eb8a9; 藍綠色*/
	/*color:#221815; 深黑色*/
	/*color:#ff263b; 加亮*/
	color: #d2a087; /*金色highlight*/
	text-decoration:none;
}
.btn-link1 {
	color:#3cffdd;
	padding:0 !important;
	margin-bottom:10px;
	background-image:none;
}
.btn-link1 h6 {
	margin-top:0;
	line-height:1.5;
}
.btn-link1 h6 small {
	color:#fff; 
	padding:4px 10px 6px;
	background-color: transparent;
	display:block;
	border-radius:4px; /* 圓角 */
	-webkit-border-radius: 4px; /* 圓角*/
	-moz-border-radius:4px; /* 圓角 */			
}
.btn-link1:focus,
.btn-link1:hover {
    color:#333; 
	text-decoration:none;
}

.btn-default {
    text-shadow: none;
	background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 400%);
	background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 400%);
	background-position: 0;
	border-color: #ccc;
}
.btn-default:hover,
.btn-default:focus {
	background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 200%);
	background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 200%);
	background-position: 0;
}
.btn-default.active, 
.btn-default:active,
.btn-default.active:hover, 
.btn-default:active:hover {
	background-color: rgba(0,0,0, 0.1);  /*透明度*/
	border-color: rgba(0,0,0, 0.15);  /*透明度*/
	background-image: none;
}
/*深色底時的btn-default*/
.bgcolor1 .btn-default.active, 
.bgcolor1 .btn-default:active {
	color:#FFF;
}

/*幽靈按鈕*/
.btn-ghost {
	color: #FFF;
	border:#FFF solid 1px;
	background-color: rgba(0,0,0, 0.05);  /*透明度*/
	border-radius: 0;
}
.btn-ghost:focus, 
.btn-ghost:hover {
	color: #FFF;
	/*background-color: rgba(51,204,153, 0.75) !important;
	border-color: #4eb8a9;*/
	background-color: rgba(210,160,135, 0.75) !important;  /*透明度*/
	border-color: #d2a087; /*玫塊金*/
}
.kv-inc .btn-ghost:focus, 
.kv-inc .btn-ghost:hover {
	color:#000;
	border-color: #3cffdd;
	background-color: rgba(60,255,221, 1.0) !important;  /*透明度*/
}
.kv-tfa .btn-ghost:focus, 
.kv-tfa .btn-ghost:hover {
	color:#000;
	/*background-color: rgba(60,255,221, 1.0) !important;*/
	background-color: #ffa484 !important;
	border-color: #ffa484;
}


/*圓型按鈕*/
.btn-round {
	color: #FFF;
	padding-top:27px;
	width:80px;
	height:80px;
	box-sizing:border-box;
	border:#FFF solid 50%;
	/*overflow:hidden;  圓角用塞圖時才不會影響圓角美觀 */	
	background-color: rgba(0,0,0, 0.15);  /*透明度*/
	border-radius:50%; /*for ie*/
}
.btn-round:focus, 
.btn-round:hover {
	color: #FFF;
	 /*background-color: rgba(0,0,0, 0.35); 透明度*/
	border-color:#F36;
	background-color:#F36;
}
/*圓型按鈕-mainstyle*/
.btn-round.mainstyle {
	background-color: rgba(200,150,120, 0.9);
	color:#fff;
}
.btn-round.mainstyle:focus, 
.btn-round.mainstyle:hover {
	/*background-color: rgba(190,150,100, 0.6);  透明度*/
	background-color: rgba(200,150,120, 0.75);  /*金色加深,透明度*/
	border-color:#FFF;
}



/*主要按鈕*/
.btn-mainstyle {
    font-size:16px;
	color:#fff;
	/*background-color:#4eb8a9; 藍綠色*/
	background-color:#221815; /*深黑色*/
	margin-right:5px;
	border-radius:4px; /* 圓角 */
	/*text-transform:uppercase; 字母均為大寫*/
}
.btn-mainstyle:hover,
.btn-mainstyle:focus {
	/*background-color:#41a096; 藍綠色加深*/
	background-color:#333; /*深黑色偏亮*/
	color:#fff;
}
/*套用群組整合下拉表單時*/
.btn-mainstyle.dropdown-toggle {
    font-size:16px;
	color:#fff;
	background-color:#c31426; /*紅色*/
	padding:4px 12px; /*需和群組欄位對應*/
	margin-top:0;
}

/*highlight按鈕*/
.btn-highlight {
    font-size:16px;
	color:#fff;
	background-color: #c31426; /*紅色*/
	margin-right:5px;
	border-radius:4px; /* 圓角 */	
	/*text-transform:uppercase; 字母均為大寫*/
}
.btn-highlight:hover,
.btn-highlight:focus {
	background-color:#dd0015; /*紅色偏亮*/
	color:#fff;
}

/*白底邊框按鈕*/
.btn-border {
    font-size:16px;
	/*color:#4eb8a9;
	border-color:#4eb8a9;*/
	/*color:#d2a087;
	border-color:#d2a087; 玫塊金*/
	color:#221815; /*深黑色*/
	border-color:#ccc;
	margin-right:5px;
	border-radius:4px; /* 圓角 */	
	background-color:#fff; 
	/*text-transform:uppercase; 字母均為大寫*/
}
.btn-border:hover,
.btn-border.active {
	/*background-color:#4eb8a9 !important;*/
	background-color:#221815 !important;
	color:#fff;
}


/*影展節目btn-影片介紹*/
.btn-film {
	transition: all .25s;
    webkit-transition: all .25s;	
}
.btn-film:hover {
	/*background-color:#4eb8a9; 藍綠色*/
	background-color:#c31426; /*紅色*/
}



/*單複選按鈕*/
.btn-radioCheck {
	font-size: 16px;
	color:#fff;
	background-color:#e0a587; /*玫塊金*/
	padding:15px;
	box-sizing:border-box;
	margin-bottom:10px;
	border-radius:4px; /* 圓角 */
	border-color:#fff; /*如果btn-group時需要有邊界線*/
}
.btn-radioCheck:hover,
.btn-radioCheck.active {
	background-color:#c31426; /*紅色*/
	/*background-color:#c8886b; /*玫塊金加深*/
	color:#fff;
}
.btn-radioCheck input[type=checkbox], 
.btn-radioCheck input[type=radio] {
	display:none; /*隱藏勾選狀態*/
}
/*填寫欄位.join*/
.join {
	margin-top:20px;
}
.join .text { 
	padding-top:6px;
}	
.join .form-control.left { /*左右合併填寫欄位*/
	width: 53.777%;
	margin-right:10px;
}
.join .btn-radioCheck {
	font-size: 15px;
	padding: 6px 20px;
	margin-bottom:5px;
}
.join input[type=checkbox].passport {
	margin:10px 0 10px 4px; /*護照*/
}
@media (max-width: 767px) {  /*xs*/
	.join .form-control.left { /*左右合併填寫欄位*/
		/*width:65%;*/
		width:45%;
		margin-right:10px;
	}
	.join .text { 
		padding-top:0;
	}		
	.join .form-control.email { 
		width:100%;
		margin-right:0;
		margin-bottom:6px;
		clear:both;
	}
	.join label {
		font-size: 15px;
		font-weight:bold;
	}
	.join .btn-radioCheck {
		padding: 8px 10px;
	}	
}



/* ==================================================
   flex效果;必須在圖區的上一層;套在容器本身
================================================== */
.vertical-center { /*垂直居中效果,記得要各別配合固定高度*/
	display: -webkit-flex; /* Safari */
	display:flex; 
	flex-direction:column; /* 預設是row橫排不換行 , 改成column一律換行直排 */
	align-items: center;  /*一律對齊水平中線*/
	/*align-items: stretch;  強制等高對齊*/
	/*align-items: flex-start ; 一律對齊起點*/
	/*align-items: flex-end; 一律對齊終點*/
	-webkit-justify-content: center;
	 justify-content: center;
}

/*若是vertical-center上一層容器,對應的是a連結*/
a.text-centerBox {
	position:relative;
	display:block;
	overflow:hidden
}
a.text-centerBox .vertical-center { 
	position: absolute; /*因上一層a並沒有高度,所以加absolute後高度才有作用*/
	height: 100%;
}


.flexArea {
	display:flex; /*須在圖區的上一層*/
	flex-wrap: wrap; /*支援拆行*/
}


@media(max-width:767px) {
	.flexArea {
		display:block;
	}
	.flexArea .kvBusiness {
		padding:50% 0 0; /* padding 用 % 是以外層容器(在此就是指 .flexArea 這個 div)的寬去計算, 例如 50% 就是外層容器寬的一半 */
	}
 }

@media (min-width: 768px) and (max-width: 991px) {  /*sm*/
	.flexAreaNO-sm {
		display:block;
		flex-wrap:nowrap;
	}
}


/* ==================================================
   搜尋 search 滿版蓋黑幕
================================================== */
#search {
    position: fixed;
	z-index:40; /*負數愈後層被蓋住*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; /*撐高滿版*/
	box-sizing:border-box;
    /*background-color: rgba(0, 0, 0, 0.87); 黑幕*/
	background: linear-gradient(to bottom right, #221815 65%, #555 100%); /*斜角黑色漸層*/
	transition: all 0.5s ease-in-out;
	transform: translate(0px, -100%) scale(0, 0);
    opacity: 0;
	box-shadow: 0 0 30px #000;
}
#search.open {
	transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
	/*opacity:0.97;*/
}
#search .vertical-center {
	/*height:600px;*/
	height:450px;
}
#search input[type="search"] {
    width:70%;
	color:#39e4ce;
	border: 0px;
	border-bottom:#39e4ce solid 1px;
    background: rgba(0, 0, 0, 0);
	/*font-size:2.5em;*/
	font-size:2em;
    text-align: center;
	padding:15px;
    outline: none;
}
#search ::-webkit-input-placeholder { /* Chrome輸入框placeholder */
	color:#39e4ce;
}
#search :-ms-input-placeholder { /* IE 10+輸入框placeholder */
  color:#fff;
}
#search .btn {
    margin-top:2em;
	min-width:250px;
	font-size:1.25em;
	padding:15px 0;
	border-radius: 4px;
}
#search .btn-ghost:hover {
	color: #221815;
	/*border-color: #221815; 深黑色*/
	border-color: #38f0d0;
	background-color:#38f0d0 !important;
}
#search .close {
    position: fixed;
    top: 15px;
    right: 15px;
    color: #fff;
	opacity: 1;
	padding: 10px 17px;
	font-size:3em;
	font-weight:normal;
}

@media (max-width: 767px) {  /*xs*/
	#search input[type="search"] {
		font-size:1.75em;
		width:90%;
	}
	#search .btn {
		min-width:150px;
		font-size:15px;
	}
}

@media (min-width: 768px) and (max-width: 991px) {  /*sm*/
}

@media (min-width: 992px) and (max-width: 1199px) {  /*md*/
	#search {
		height: auto !important;
	}	
	#search .vertical-center {
		height: 400px;
	}
}

@media (min-width: 1200px) {  /*lg*/
	#search {
		height: auto !important;
	}
}



/* ==================================================
   會員login-forgetPW 滿版蓋黑幕
================================================== */
#login,
#forgetPW {
    position: fixed;
	z-index:40; /*負數愈後層被蓋住*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; /*預設高撐滿全螢幕*/
	box-sizing:border-box;
    /*background-color: rgba(0, 0, 0, 0.87); 黑幕*/
	transition: all 0.5s ease-in-out;
	transform: translate(0px, -100%) scale(0, 0);
    opacity: 0;
	/*background:rgba(34,24,21,0.93);
	border-top:10px solid #c31426;*/
	/*background: linear-gradient(to bottom right, #221815 50%, #c31426 100%); 斜角紅色漸層*/
	background: linear-gradient(to bottom right, #221815 65%, #555 100%); /*斜角黑色漸層*/
	box-shadow: 0 0 30px #000;
}
#login.open,
#forgetPW.open {
	transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
}
#login .container.vertical-center,
#forgetPW .container.vertical-center {
	max-width:600px;
	height:600px;
}
#login h1,
#forgetPW h1 {
	margin-top:0;
	color:#39e4ce !important;
	font-size:2.25em;
}
#login .form-control ::-webkit-input-placeholder,
#forgetPW .form-control ::-webkit-input-placeholder { /* Chrome輸入框placeholder */
  color:#333;
}
#login .form-control :-ms-input-placeholder,
#forgetPW .form-control :-ms-input-placeholder { /* IE 10+輸入框placeholder */
  color:#333;
}
#login .btn,
#forgetPW .btn {
    margin-top:1em;
	font-size:1.25em;
	padding-top:15px;
	padding-bottom:15px;
	border-radius: 4px;
}

#login .btn-ghost:hover,
#forgetPW .btn-ghost:hover {
	/*border-color: #221815; 深黑色*/
	color:#221815; 
	border-color: #39e4ce;
	background-color:#39e4ce !important;
}
#login h6 {
	padding:20px 0;
}
#login h6.bkstyle {
	/*color:#d2a087 !important; 玫塊金*/
	color:#39e4ce !important;
}
#login a.text-link {
	color: #fff;
}
#login .close,
#forgetPW .close {
    position: fixed;
    top: 15px;
    right: 15px;
    color: #fff;
	opacity: 1;
	padding: 10px 17px;
	font-size:3em;
	font-weight:normal;
}

@media (max-width: 767px) {  /*xs*/
	#login .container.vertical-center,
	#forgetPW .container.vertical-center {
		max-width:600px;
		height: auto;
		padding-top:4em;
	}
}

@media (min-width: 1200px) {  /*lg*/
	#login,
	#forgetPW {
		height: auto;
	}
}

@media (min-width: 1600px) {  /*lg*/
	#login .container.vertical-center,
	#forgetPW .container.vertical-center {
		min-height: 700px;
	}
}


/* ==================================================
   影展節目popout - filmCT 電影介紹
================================================== */
#filmCT {
    position: fixed;
	z-index:40; /*負數愈後層被蓋住*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; /*撐高滿版*/
	margin-bottom:20px;
	overflow:auto;
	box-sizing:border-box;
    background-color: rgba(255, 255, 255, 1.0); /*白幕*/
    -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
    -webkit-transform: translate(0px, -100%) scale(0, 0);
	-moz-transform: translate(0px, -100%) scale(0, 0);
	-o-transform: translate(0px, -100%) scale(0, 0);
	-ms-transform: translate(0px, -100%) scale(0, 0);
	transform: translate(0px, -100%) scale(0, 0);
    opacity: 0;
}
#filmCT.open {
    -webkit-transform: translate(0px, 0px) scale(1, 1);
    -moz-transform: translate(0px, 0px) scale(1, 1);
	-o-transform: translate(0px, 0px) scale(1, 1);
	-ms-transform: translate(0px, 0px) scale(1, 1);
	transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
}

#filmCT>.close {
    position: fixed;
    /*top: 10px;*/
	top:10px;
    right:10px;
	opacity: 1;
	font-size:3em;
	padding:0 15px;
	line-height:1;
	font-weight:normal;
}
#filmCT .close.down {
	margin-top:-20px;
	margin-bottom:20px;
	opacity: 1;
	font-size:3em;
	padding:0 15px;
	line-height:1;
	font-weight:normal;
}


/*套票組合lightbox視窗*/
.modal-header {
    min-height: 16.43px;
    padding:20px 15px 15px;
    border-bottom: 2px solid #c31426;
	background-color: #c31426;
	color:#fff; 
}
.modal-header h5 {
	color:#fff; 
}
.modal-header .close {
    font-size:25px;
    color: #fff;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=100);
    opacity:1;
	margin-left:10px; 
}
.modal-body {
    padding:15px 35px 0;
}
.filmset.modal {
	padding-right:3px !important;
}
.filmset .modal-body p {
	line-height:1.5; 
}

@media (max-width:1199px) {  /*xs-md*/
	/*解決手機版,ipad手指頭點選時的間距*/
	.filmset .modal-body p {
		line-height:2; 
	}
	.modal-body {
		padding:15px 25px 0;
	}
}

@media (min-width: 768px) {
	.filmset .modal-dialog {
		width:92%;
		max-width:800px;
		margin-top:55px; 
	}
}



/* ==================================================
   影展節目popout - trailer 預告片
================================================== */
#trailer {
    position: fixed;
	z-index:50; /*必須在#filmCT層級前面才行*/
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%; /*撐高滿版*/
	box-sizing:border-box;
	background-color: rgba(0, 0, 0, 1.0); /*黑幕*/
	transition: all 0.5s ease-in-out;
	transform: translate(0px, -100%) scale(0, 0);
    opacity: 0;
	border-top: 10px solid #c31426;
}
#trailer.open {
	transform: translate(0px, 0px) scale(1, 1); 
    opacity: 1;
}
#trailer .close {
    position: fixed;
    /*top: 10px;*/
	top:10px;
    right:10px;
    color: #fff;
	opacity: 1;
	font-size:3em;
	padding:0 15px;
	line-height:1;	
	font-weight:normal;
}
#trailer .bar {
	/*height:8px;*/
	height:0; /*取消上面有色bar*/
	margin-bottom:80px;
}


/* ==================================================
   手風琴
================================================== */
.panel-default>.panel-heading {
	background-image: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
    background-repeat: repeat-x;
	background-color: transparent;
    border-color: #ddd;	
	padding:0;
}
.panel-heading .right-arrow {
	width:20px; /*固定寬才不會換符號是size變掉*/
	text-align:center;
}
.panel-title:hover {
	cursor:pointer;
}

.panel-default .expand .right-arrow:after {
    content:"▼"; /*預設*/
}
.panel-default.active .expand .right-arrow:after {
    content:"▲"; /*active反應*/
}
.panel-default.active .expand .right-arrow:after {
    /*color: #F00; */
}


/*style1 有框邊*/
.panel-group .panel.style1 {
	/*border-left: #c31426 solid 4px; 紅色*/
	border-left: #4eb8a9 solid 4px; /*紅色*/
	margin-bottom:10px;
}
.active.style1 .panel-title,
.active.style1 .panel-title a,
.active.style1 .panel-title:hover a,
.style1 .panel-title:hover a,
.style1 .panel-title:hover {
    color: #4eb8a9; /*藍綠色*/
	/*color:#ca2435; 紅色字偏亮*/
	/*color: #d2a087; 金色highlight*/
}
.style1 .panel-title {
	font-size:17px; /*faq單元*/
	font-weight:normal;
	line-height: 1.25;
	padding:10px 20px;
}
.style1 .expand .right-arrow {
    /*color: #d2a087; 箭頭符號-金色*/
	color:#ddd; /*箭頭符號*/
}
.style1 .panel-body {
    padding:20px 20px;
}



/* ==================================================
   Tabs頁籤
================================================== */
.nav-tabs {
  	*zoom: 1;
}
.nav-tabs:before,
.nav-tabs:after {
  	display: table;
  	content: "";
  	line-height: 0;
}
.nav-tabs:after {
  	clear: both;
}

.tabbable {
  	*zoom: 1;
}
.tabbable:before,
.tabbable:after {
  	display: table;
  	content: "";
  	line-height: 0;
}
.tabbable:after {
  	clear: both;
}
.tab-content > .tab-pane {
  	display: none;
}
.tab-content > .active {
  	display: block;
}



/*樣式1*/
.nav.navstyle1 {
 	margin-bottom: 0px;
  	list-style: none;
	border-bottom: none;
	display:inline-block; /*為了配合能居中*/
}
.nav.navstyle1 > li > a {
  	color: #221815;
  	font-size: 18px;
	font-weight: bold;
	border: none;
  	border-radius: 0;
	border-top:#e5e5e5 solid 3px; 
	padding:10px 20px 30px; /*間距*/
}
.nav.navstyle1 > li > a:hover,
.nav.navstyle1 > li > a:focus {
	/*color:#4eb8a9;*/
	/*color:#c31426;*/
	color:#ca2435; /*紅色字偏亮*/
	background:none;
  	text-decoration: none;
  	display: block;
}
.nav.navstyle1>li.active>a, 
.nav.navstyle1>li.active>a:focus, 
.nav.navstyle1>li.active>a:hover {
	border: none;
	/*border-top:#4eb8a9 solid 2px; 
	color:#4eb8a9;*/
	border-top:#ca2435 solid 3px; 
	/*color:#c31426;*/
	color:#ca2435; /*紅色字偏亮*/
	background:none;
  	/*cursor: default;*/
	cursor: pointer; /*over出現手*/
}
.nav.navstyle1 > li > a > img {
  	max-width: none;
}
.nav.navstyle1 > .pull-right {
  	float: right;
}

/*樣式2
.nav.navstyle2 {
	border-bottom: 1px solid #F36;
}
.nav.navstyle2 > li > a {
	border: 1px solid #F36;
    border-bottom-color: #F36;
	background-color: #F36;
	color:#FFF;
}
.nav.navstyle2>li > a:hover {
	background-color: #dc2553;
	color:#FFF;
}
.nav.navstyle2>li.active>a, 
.nav.navstyle2>li.active>a:focus, 
.nav.navstyle2>li.active>a:hover {
	border-color: #F36;
    border-bottom-color: transparent;
	background-color: #fff;
	color: #F36;
	font-weight:bold;
}
*/



/* ==================================================
   signin登入,上下二欄併貼效果
================================================== */
.form-signin {
	padding: 15px;
	margin: 0 auto;
}
.form-signin .form-signin-heading,
.form-signin .checkbox {
	margin-bottom: 10px;
}
.form-signin .checkbox {
	font-weight: normal;
}
.form-signin .form-control {
	position: relative;
	height: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px;
	font-size: 16px;
}
.form-signin .form-control:focus {
	z-index: 2;
}
.form-signin input[type="email"] {
	margin-bottom: -1px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
	margin-bottom: 10px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}



/* ==================================================
   地圖 google map
================================================== */
/*如果使用iframe時*/
iframe.map {
    width: 100%;
    height: 500px;
    border: 0;
    border-width: 0px;
	margin-top: 20px;
}

/*如果使用js時*/
#map-canvas {
	position:relative;
	margin:20px auto 0;
	width:100%;
	height:500px;
}

/*場地介紹頁*/
.venues {
	position:relative;
	margin:20px auto 0;
	width:100%;
	height:400px;
}



/* ==================================================
   列表
================================================== */
/*有日期的*/

/*ol.datelist > li {
	/*border-bottom:#e8e8e0 solid 1px;
}
*/
ol.datelist li .date h2 {
	/*color: #4eb8a9; 藍綠色*/
	/*color:#221815; 深黑色*/
	/*color:#cf1a2d; 紅色字偏亮*/
	color:#e0a587;
	font-size:35px;
	font-family: 'Garamond';
	letter-spacing:0.25px;
	margin-top:0px;
}
ol.datelist li a .date .mark {
	/*background-color: #c31426; 紅色*/
	background-color: rgba(0,0,0, 0.2) !important;
	color:#FFF;
	font-size:13px;
	display:block;
	letter-spacing:1em;
	font-family:Arial;
	padding-left:15px; /*為了對齊下面年份*/
	margin-bottom:5px;
	box-sizing:border-box;
}
ol.datelist li a:hover .date .mark {
	background-color: #221815; /*深黑色*/
}
.space ol.datelist li { 
	padding-bottom:1em; /*得獎榮耀*/
}
ol.datelist li a h6 {
	color:#707070;
	margin-top:1.1em;
}
.kvPaper ol.datelist li a.area-link2:hover h2,
.kvPaper ol.datelist li a.area-link2:hover h6 {
	color:#fff;
}




/* ==================================================
   滑動轉盤-文字進場 carousel-slide-Text Animation
================================================== */
/*影音時的paly按鈕*/
.bs-slider .carousel-inner .item a .videoBtn { 
    position: absolute;
    left:0;
    top:46%;
    right:0;
	text-align: center;
	/*border:5px solid #ffcc00;*/
}
.bs-slider .carousel-inner .item a .videoBtn i { 
	font-size:90px; 
	/*color:#221815; 深黑色*/
	/*color: #c31426; 紅色*/
	color: #fff;
}

@media (max-width: 767px) {  /*xs*/
	.bs-slider .carousel-inner .item a .videoBtn { 
		top:40%;
	}
	.bs-slider .carousel-inner .item a .videoBtn i {
	 	font-size:50px;
	}
}

@media (max-width: 991px) {  /*xs-sm*/
	/*配合固定式置頂nav*/
	#bootstrap-touch-slider { 
		padding-top:55px;  
	}
}

@media (min-width: 768px) and (max-width: 1199px) {  /*sm-md*/
	.bs-slider .carousel-inner .item a .videoBtn i {
	 	font-size:80px;
	}
}


.bs-slider {
    overflow: hidden;
    /*max-height: 700px; 優點是RWD圖不會被截*/
    position: relative;
    background: #000;
}
.bs-slider:hover {
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.bs-slider:active {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}
/*遮半透明黑幕*/
.bs-slider .bs-slider-overlay { 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35);
}
.bs-slider .carousel-inner .item .slide-text h5 {
	font-weight: bold;
}
 /*左右箭頭*/
.bs-slider .carousel-control {
    width:50px !important;
    height:50px !important;
}
.bs-slider .fa {
	font-size:2em;
}
.bs-slider > .carousel-inner > .item > img,
.bs-slider > .carousel-inner > .item > a > img {
    margin: auto;
	/*max-width: none; 抵制原本設定100%*/
}


/*************************Slide effect**********************/
.fade .item {
    top: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    position: absolute;
    left: 0 !important;
    display: block !important;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}
.fade .item:first-child {
    top: auto;
    position: relative;
}
.fade .item.active {
    opacity: 1;
    z-index: 2;
    -webkit-transition: opacity ease-in-out 1s;
    -moz-transition: opacity ease-in-out 1s;
    -ms-transition: opacity ease-in-out 1s;
    -o-transition: opacity ease-in-out 1s;
    transition: opacity ease-in-out 1s;
}



/*主視覺裡的左右箭頭 round control*/
.control-round .carousel-control {
    top: 47%;
	/*opacity: 0; 主視覺裡的左右箭頭,被預設成透明*/
	opacity: 1; /*取消預設透明,箭頭消失*/		
    width: 45px;
    height: 45px;
    /*z-index: 100;*/
    color: #ffffff;
    display: block;
    font-size: 24px;
    cursor: pointer;
    overflow: hidden;
    line-height: 43px;
    text-shadow: none;
    position: absolute;
    font-weight: normal;
    background: transparent;
    -webkit-border-radius: 100px;
    border-radius: 100px;
}
/*主視覺裡的左右箭頭,over時出現,透明度滿*/
.control-round:hover .carousel-control {
    opacity: 1;
}
.control-round .carousel-control.left {
    left: 1%;
}
.control-round .carousel-control.right {
    right: 1%;
}
/*主視覺裡的左右箭頭,over時出現底圓*/
.control-round .carousel-control.left:hover,
.control-round .carousel-control.right:hover{
    color: #fdfdfd;
    background: rgba(0, 0, 0, 0.5);
    border: 0px transparent;
}
.control-round .carousel-control.left>span:nth-child(1){
    left: 45%;
}
.control-round .carousel-control.right>span:nth-child(1){
    right: 45%;
}


/*---------- INDICATORS CONTROL ----------*/
.indicators-line > .carousel-indicators {
	/*right:46.5%;*/
    bottom: 6%;
    left:none;
	/*width: 90%;*/
	width:70%;
    height: 20px;
    font-size: 0;
    overflow-x: auto;
    /*text-align: right;*/
	text-align: center;
    overflow-y: hidden;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1px;
    white-space: nowrap;
	margin-left:-36%;
}
.indicators-line > .carousel-indicators li {
    padding: 0;
    border: 1px solid rgb(158, 158, 158);
    text-indent: 0;
    overflow: hidden;
    text-align: left;
    position: relative;
    letter-spacing: 1px;
	background-color: rgba(255,255,255, 0.5);  /*白半透明度*/
    -webkit-font-smoothing: antialiased;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    /*margin-right: 5px;*/
    -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
    transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
	z-index:1;
    cursor:pointer;
}
.indicators-line > .carousel-indicators li:last-child{
    margin-right: 0;
}
.indicators-line > .carousel-indicators li,
.indicators-line > .carousel-indicators .active:before {
    width: 15px;
    height: 15px;
}
.indicators-line > .carousel-indicators li,
.indicators-line > .carousel-indicators .active {
	margin: 1px 5px 1px 5px; /*間距*/
}
.indicators-line > .carousel-indicators .active {
    box-shadow: 0 0 0 2px #fff;
    background-color: transparent;
    position: relative;
    -webkit-transition: box-shadow 0.3s ease;
    -moz-transition: box-shadow 0.3s ease;
    -o-transition: box-shadow 0.3s ease;
    transition: box-shadow 0.3s ease;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.indicators-line > .carousel-indicators .active:before {
    transform: scale(0.5);
    background-color: #fff;
    content:"";
    position: absolute;
    left:-1px;
    top:-1px;
    border-radius: 50%;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

/*---------- SLIDE CAPTION ----------*/
.slide_style_left {
    text-align: left !important;
}
.slide_style_right {
    text-align: right !important;
}
.slide_style_center {
    text-align: center !important;
}
.slide-text {
    left: 0;
	bottom:28%; /*大圖文案區位置*/
    right: 0;
    margin: auto;
    padding: 10px;
    position: absolute;
    text-align: left;
	padding: 10px 7%;
}
.slide-text > h1 {
    padding: 0;
    color: #ffffff;
    font-size: 80px;
    font-style: normal;
    margin-bottom:-10px;
    display: inline-block;
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.slide-text > h1 small {
	display:block;
    color: #ffffff;
	font-size:20px;
	letter-spacing:0;
}
.slide-text > h5 {
    padding: 0;
	/*color: #4eb8a9; */
	color:#d2a087; /*玫塊金*/
	text-shadow:1px 1px 3px rgba(0,0,0,0.75); /* 外陰影 */
    font-size:26px;
	/*text-align: justify; /*不能被這干擾會有bug*/
    margin-bottom:30px;
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
.slide-text > a:hover,
.slide-text > a:active {
    color: #ffffff;
    background: #222222;
    -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}

@media  (max-width: 767px) {  /*xs*/
	/*主視覺裡的左右箭頭 round control*/
	.control-round .carousel-control {
		bottom:1.25%;
		top:auto;
	}	
	/*主視覺裡的左右箭頭,over時出現底圓*/
	.control-round .carousel-control.left:hover,
	.control-round .carousel-control.right:hover{
		background: rgba(0, 0, 0, 0);
	}	
	.bs-slider .fa {
		font-size: 1.75em; /*主視覺裡的左右箭頭*/
	}	
	.slide-text {
        padding: 10px 0px;
		bottom:15%; /*大圖文案區位置*/
    }
	.slide-text > h1 {
		font-size:30px;
		letter-spacing:-2px;
	}	
	.slide-text > h1 small {
		font-size: 14px;
	}	
	.slide-text > h5 {
		font-size: 15px;
		margin-bottom: 10px;
	}	
	.indicators-line > .carousel-indicators {
		right:38%;  /*大圖底圓點位置*/
		bottom:2%; 
	}
	.indicators-line > .carousel-indicators li,
	.indicators-line > .carousel-indicators .active:before {
		width: 10px;
		height: 10px;
	}
	/*觀眾票選TOP 1 第一名*/
	.col-md-12 .bkBarArea .top20 h4 {
		font-size:200%;
	}	
}


@media  (max-width:767px) {  /*xs小手機480px*/
	.bs-slider > .carousel-inner > .item > img, 
	.bs-slider > .carousel-inner > .item > a > img {	
		display: block;
		/*max-width:none; 之前圖較高但畫面左右會被截*/
		max-width:100%;
		height:auto;	
		/*height:350px;
		margin-left:-40%;*/
		/*height:300px; 之前圖較高但畫面左右會被截*/
		/*margin-left:-26%; 之前圖較高但畫面左右會被截*/
	}
}


@media (min-width: 768px) and (max-width: 991px) {  /*sm*/
    .slide-text {
		bottom:15%; /*大圖文案區位置*/
    }	
	.slide-text > h1 {
		font-size:51px;  /*51px英文版也ok*/
	}	
	.slide-text > h5 {
		font-size: 20px;
	}	
	.indicators-line > .carousel-indicators {
		right:41.5%;  /*大圖底圓點位置*/
	}	
}


@media (min-width: 992px) and (max-width: 1199px) {  /*md*/
	.slide-text {
		bottom:13%; /*大圖文案區位置*/
	}
	.slide-text > h1 {
		font-size: 60px;
	}	
	.slide-text > h5 {
		font-size: 22px;
	}		
	.indicators-line > .carousel-indicators {
		right:43.5%;  /*大圖底圓點位置*/
		bottom:4%; 
	}		
}


@media (min-width: 1200px) and (max-width: 1440px) {   /*lg*/
	.slide-text {
		bottom:17%; /*大圖文案區位置*/
	}	
	.indicators-line > .carousel-indicators {
		right:44.5%;  /*大圖底圓點位置*/
		bottom:8%; 
	}	
}


@media (min-width: 1441px) {  /*lg*/
	.slide-text > h1 {
		font-size:100px;
	}
	.slide-text > h1 small {
		font-size: 22px;
	}	
	.indicators-line > .carousel-indicators {
		bottom:17%;  /*大圖底圓點位置*/
	}	
}


/* ==================================================
   淡入淡出-文字 carousel-fade / #bs-carousel
================================================== */
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity; /*透明度*/
  transition-duration: 1.5s; /*秒數*/
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
  transform: translate3d(0, 0, 0); /*淡入淡出*/
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}
.fade-carousel {
    position: relative;
    /*height: 100vh; 圖滿版高時*/
}
.fade-carousel .carousel-inner .item {
    /*height: 100vh; 圖滿版高時*/
}
/*圓點*/
.carousel-indicators {
    bottom:5px;
}



/* ==================================================
   動態背景film
================================================== */
.bgfilm {
    position: fixed;
	top: 50%;
	left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url(../images/homekv-tfa.jpg) no-repeat;
    background-size: cover;
}

/* ==================================================
   Owl carousel 廣告輪播, owl.theme css
================================================== */
.ADarea {
  padding-top:20px;
}

/*數量圓點*/
.owl-theme .owl-dots {
  text-align: center;
  -webkit-tap-highlight-color: transparent; 
}
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    *display: inline; 
}
 .owl-theme .owl-dots .owl-dot span {
      width: 10px;
      height: 10px;
      /*margin: 5px 7px;*/
	  margin:10px 7px 7px;
      background: #D6D6D6;
      display: block;
      -webkit-backface-visibility: visible;
      transition: opacity 200ms ease;
      border-radius: 30px; 
 }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
      background: #869791; 
}


/* 如果需要反制owl.carousel.min.css */
.owl-carousel .owl-item img { /*原始設計圖會伸縮RWD*/
	display: block;
	width: 100%;
}

@media (max-width: 767px) {  /*xs*/
	/*數量圓點*/
	.owl-theme .owl-dots {
	  display:none;
	}
	.ADarea {
	  padding-bottom:20px;
	}	
}

@media (min-width: 1200px) {
	.owl-carousel .owl-item img {
		width: auto; /*強制桌機版取消圖伸縮*/
	}
}


/* ==================================================
   editor上稿CSS / embed video iframe
================================================== */
.video {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /*影音16:9*/
	/*padding-bottom: 75%; 影音4:3*/
	margin-bottom:25px;
}
.video iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*editor上稿圖*/
article.editor img {
	display: inline-block;
    max-width:100%;
	margin-bottom:5px;
    /*height: auto !important; 購票須知ibon小logo會有問題*/
} 

/*editor上稿裡的h1*/
article h1, 
article .h1 {
	font-size:44px;
	line-height: 1.3;
}

/*editor上稿活動*/
table.events th,
table.events td {
	padding: 8px 2px; !important;
} 
table.events .btn.smaller {
    padding: 8px 3px;
	margin:10px 0;
	line-height:1.2;
}
table.events td strong {/*
	*/font-family:Swz721bc;
	/*font-family: 'Garamond';*/
	font-family: Arial, 微軟正黑體;
	font-size:120%;
} 
@media (max-width: 767px) {  /*xs*/
	table.events td strong {
		font-size:100%;
		font-weight: bold;
	} 
} 



/* ==================================================
   紀錄-無圖的列表連結
================================================== */
ul.textlist {
	margin-bottom:2em;	
}
ul.textlist li {
	/*margin-bottom: 0.75em;*/
}
ul.textlist li a {
	display:block;
	overflow:hidden;
	padding:15px;
	border-bottom: #e5e5e5 solid 3px;
}
ul.textlist li a:hover {
	border-color:#fff;
	background: linear-gradient(to right, #d2a087 0%, #b07361 45%, #e6beaa 100%);
}
ul.textlist li a:hover h5 {
	color: #fff;
}
ul.textlist li a:hover p {
	color: #fff;
	opacity:0.8;
}
ul.textlist h5 {
	/*color: #4eb8a9;*/
	/*color:#cf1a2d; 紅色字偏亮*/
	color:#221815;
	margin:0;
}
ul.textlist p {
	margin:0;
	margin-top:5px;
}


/* ==================================================
   動畫
================================================== */
@keyframes inUP {
  0% {
    transform: translateY(-5px);
	opacity:0; 
  }
  100% {
    transform: translateY(0px);
	opacity:1; 
  }
}

@keyframes goTOP {
  0% {
    transform:translateY(20%);
	opacity:0; 
  }
  50% {
    transform: translateY(10%);
	opacity:0; 
  }
  100% {
    transform: translateY(0%);
	opacity:1; 
  }
}

/*@keyframes zoomin {
  0% {
    transform:scale(0.99);
	opacity:0.5; 
  }
  100% {
    transform:scale(1.0);
	opacity:1; 
  }
}
*/