/*仿宋*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
.ft-fangsong{ font-family: 'cwTeXFangSong', serif; }

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
/*覆寫 Bootstrap*/
body {
	font-family: "Helvetica Neue", Helvetica, Arial, 微軟正黑體, serif;
	font-size: 16px;
	line-height: 1.6em;
	text-align: justify;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
	font-weight: normal;
	line-height: 1.3em;
	margin-bottom: 16px;
}
h1,.h1 { font-size: 32px; margin-top: 36px; }
h2,.h2 { font-size: 24px; margin-top: 24px; }
h3,.h3 { font-size: 22px; margin-top: 24px; }
h4,.h4 { font-size: 18px; margin-top: 20px; }
p{ margin-bottom: 12px; }

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
	font-weight: normal;
}

/*還原 mdb 設定*/
.navbar, footer.page-footer, h1, h2, h3, h4, h5, p, span.badge-md.new{
	font-weight: normal;
}

.omit{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.gap-10{
	height: 10px;
}
.card .card-title, .card-content p {
  font-weight: normal;
}

/*只有標題相鄰*/
h1+h2, h2+h3, h3+h4{
	margin-top: 0;
}

/*header*/
#main-header{
	position: relative;
	overflow: hidden;
	margin-top: 0;
	background: #f7f2e8;
}
/*#header-border{
	position: absolute;
	width: 80px;
	height: 184px;
	background: #ffa;
	border-bottom: 1px solid #f00;
}*/
/*#main-header.home{
	margin-top: -100px;
}
#main-header.animated{
	transition-property: margin-top;
	transition-duration: 0.6s;
}*/

#main-header .container{
	/*position: relative;*/
	height: 200px;
	/*background-image: url("../images/header-2x.png");*/
	background-repeat: no-repeat;
	background-size: contain;
}
@media screen and (max-width: 750px) {
	#main-header .container{
		height: 100px;
	}
}

#title-img{
	height: 90px;
	margin-top: 5px;
	margin-left: -5px;
}
#header-note{
	position: absolute;
	left: 160px;
	bottom: 10px;
	color: #fff;
	font-size: 18px;
	line-height: 22px;
	margin: 0;
	padding-right: 10px;
}
/*#header-img{
	position: absolute;
	height: 90px;
	right: 0px;
	bottom: 0px;
	
	animation-duration: 1s;
	animation-delay: 0.5s;
}*/

#side-btn{
	padding: 8px 20px 12px;
	line-height: 20px;
	font-size: 24px;
	cursor: pointer;
	margin-top: 0;
	color: #fff;
	position: relative;
	left: -16px;
}

/* nav */
.navbar{
	margin-bottom: 0;
	min-height: 40px;
	background: #99754a;
}
.navbar .navbar-nav > li > a {
    color: rgba(255,255,255,1);
    padding: 12px 12px 9px 12px;
	border-bottom: 3px solid rgba(255,255,255,0);
}
.navbar .navbar-nav > li.active > a {
    color: rgba(255,255,255,0.8);
	/*background: #84551e;*/
	border-bottom-color: #f48fb1;
}
.navbar .fa{
	font-size: 16px;
	line-height: 16px;
	padding: 0;
	margin: 0;
}

/*修飾左間距*/
@media (min-width: 768px){
	.navbar > .container{
		padding-left: 0;
	}
}

/*內容區*/
.main-container{
	min-height: 340px;
}
.home-container{
	width: 100%;
	min-height: 840px;
	background-color: #ede2ce;
	background-size: cover;
	background-position: 50% 50%;
}
/*非首頁中間區*/
.sub-main{
	background: #ede2ce;
	background-position: left 50% top 0px;
	background-repeat: no-repeat;
}

/*footer*/
footer.page-footer{
	margin-top: 0;
	padding-bottom: 20px;
	font-size: 14px;
	background: #88856d;
	color: #aaa;
}

/*home*/
.home-logo{
	margin-top: 40px;
	animation-duration: 3s;
	animation-delay: 1.5s;
}
.card .card-image{
	position: relative;
}
#perform-info{
	position: relative;
}
#hello{
	position: absolute;
	bottom: 4px;
	left: 0px;
	z-index: 100;
}
.card .card-image .card-title{
	top: 0;
	bottom: auto;
	font-size: 20px;
}
.home-intro{
	margin-top: 80px;
	animation-duration: 3s;
	animation-delay: 0.5s;
}
.per-label{
	color: #2BBBAD;
}
#intro-block{
	height: 20px;
	margin-bottom: 20px;
	background: rgba(255, 255, 255, 0.3);
}
#intro{
	margin-top: 40px;
	margin-bottom: 100px;
}
#intro p{
	/*font-family: Times, 'Times New Roman', '新細明體', serif;*/
	font-size: 16px;
	color: #fff;
}
a.btn.mybtn, a.btn.mybtn:hover{
	color: #fff;
}
.white-link{
	color: #b2ebf2;
}
.white-link:hover{
	color: #bbdefb;
}


/*modal 外觀*/
.ckc60video .modal-header{
	background: #3F729B;
	color: #fff;
}
.ckc60video .modal-body{
	background: #000;
}
.ckc60video .modal-footer{
	background: #3F729B;
}

.hello .modal-body p{
	font-size: 16px;
}

/*video*/

/* sidebar 相關 */
/* Off Canvas ----------- */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}

/*sidebar*/
.side-content{
	position: relative;
}
.sidebar-toggle-btn{
	padding: 0 15px;
	margin: 10px 0 0 0px;
}
.sidebar-toggle-btn .fa{
	font-size: 24px;
	line-height: 32px;
}

/* accordion *******/
#sidebar .panel-group{
	margin-top: 6px;
}
#sidebar .panel{
	border-color: #b2dfdb;
}
#sidebar .panel-heading{
	position: relative;
	padding: 0;
}

#sidebar a{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#sidebar .panel-heading a{
	display: block;
	/*position: relative;*/
	padding: 10px 20px 10px 15px;
	background: #2BBBAD;
	color: #fff;
}
/*目前歌曲*/
/*#sidebar .collection .collection-item.active{
	background-color: #ffe0b2;
}*/
#sidebar .arrow{
	position: absolute;
	font-size: 20px;
	right: 8px;
	top: 10px;
}

#sidebar .panel-body{
	padding: 0;
}
#sidebar .collection{
	margin: 0;
	border: none;
}
#sidebar a.collection-item{
	padding-right: 10px;
}
/*歌曲內容*/
.switch span.lever{
	margin: 0 8px 0 8px;
}
.switch label{
	font-size: 14px;
	font-weight: normal;
}
/*part*/
.my-card-part{
	position: relative;
	padding: 15px;
}
.part-title{
	font-size: 20px;
	padding-right: 80px;
}
.part-note{
	color: #b9f6ca;
}
.intro-switch{
	position: absolute;
	right: 5px;
	top: 5px;
}
.intro-switch label{
	color: #b9f6ca;
}
.part-intro{
	border-top: 1px solid #fff;
	margin-top: 10px;
	padding-top: 10px;
}
.part-intro p{
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 10px;
}

/*song*/
.song-title-content{
	position: relative;
}
.song-nav-bar{
	position: absolute;
	right: -5px;
	top: -5px;
}
.song-nav-bar button{
	margin: 0;
	font-size: 14px;
	line-height: 14px;
	padding: 4px 14px 4px 8px;
}
/*.song-nav-bar button fa{
	margin-top: 2px;
}*/
.song-data{
	position: relative;
}
.song-title{
	font-size: 24px;
	line-height: 30px;
	padding-right: 100px;
	text-align: left;
	margin-bottom: 10px;
}
.song-note{
	color: #2196f3;
}
.song-note.padding-right{
	padding-right: 100px;
}
.song-switch{
	position: absolute;
	right: 5px;
	top: 40px;
}
.song-intro{
	border-top: 1px solid #ddd;
	margin-top: 10px;
	padding-top: 10px;
}
.card .card-content .song-intro p{
	color: #000;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 10px;
}
.card .card-content .song-intro p:last-child{
	margin-bottom: 0;
}
/*影片及控制*/
#player{
	background: #000;
}
#video-action{
	padding-top: 10px;
	padding-bottom: 10px;
}
#lyrics-action .switch{
	/*float: left;*/
	margin-right: 16px;
}
/*原文及中文開關自訂*/
.switch.color-1 label input[type=checkbox]:checked + .lever {
  background-color: #f7e7bc;
}
.switch.color-1 label input[type=checkbox]:checked + .lever:after {
  background-color: #ff8f00;
}
.switch.color-1 label{
	color: #ffa000;
}
/******/

/*歌詞*/
#lyrics-container{
	border-top: 1px solid #ececec;
}
.original, .chinese{
	text-align: left;
}
.chinese{
	color: #2196f3 ;
}

/*page*/

.card-content.page-title{
	padding: 5px 20px 3px 20px;
}

/*演出人員頁*/
.my-content.card-content{
	padding: 0px;
}
.my-content.card-content h5{
	border: none;
	padding: 20px;
	line-height: 1em;
	margin: 0;
	font-size: 20px;
	color: #fff;
}
.my-content.card-content .view{
	cursor: pointer;
}
.performer-info{
	color: #33b5e5;
}

/*還原 mdb 改變的項目符號*/
.document ul li{
	list-style-type: disc;
	margin-left: 20px;
	font-weight: normal;
}
.document p{
	font-size: 16px;
	line-height: 24px;
}
.testimonial-card .card-content p{
	font-weight: normal;
}
.testimonial-card .card-up {
	height: 100px;
}


/*@media (max-width: 1199px) {
	.card-content.per{
		margin-top: 20px;
	}
}*/

/*@media(max-width: 400px){
	.card-content.per{
		padding: 0px;
	}
}*/
.card-content.group-label{
	font-size: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.group-label{
	margin-top: 0;
	padding-bottom: 4px;
	border-bottom: 1px #ddd solid;
}
.group-label.Soprano{
	/*background: #ffebee;*/
	color: #ef5350;
	border-color: #ef5350;
}
.group-label.Alto{
	/*background: #fff3e0;*/
	color: #ff9800;
	border-color: #ff9800;
}
.group-label.Tenor{
	/*background: #c8e6c9;*/
	color: #43a047;
	border-color: #43a047;
}
.group-label.Bass{
	/*background: #bbdefb;*/
	color: #2196f3;
	border-color: #2196f3;
}
.all-performers p{
	margin: 0;
	font-size: 18px;
}
/*.card-footer{
	padding: 10px 20px;
}*/

/*staffs*/
.staff-title{
	margin-top: 10px;
	color: #2BBBAD;
}
table.staff tr td:first-child{
	width: 120px;
	color: #33b5e5;
	text-align: right;
}
table.workers tr td:first-child{
	width: 100px;
	color: #33b5e5;
	text-align: right;
}
table.thanks .title{
	color: #33b5e5;
	margin-left: 16px;
}

table.staff tr:last-child,
table.workers tr:last-child,
table.thanks tr:last-child{
	border-bottom: 1px solid #ddd;
}

/*album*/
#album-tabs ul.nav.nav-tabs li a{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
#album-tabs ul.nav.nav-tabs li.active a{
	border-bottom-color: #ff80ab;
	color: #ec407a;
}
a.thumb{
	display: block;
	width: 132px;
	height: 132px;
	margin: 0px;
	float: left;
	border: 1px solid #fff;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media (max-width: 1199px) {
	a.thumb{
		width: 107px;
		height: 107px;
	}
}
@media (max-width: 991px) {
	a.thumb{
		width: 106px;
		height: 106px;
	}
}
@media (max-width: 767px) {
	a.thumb{
		width: 105px;
		height: 105px;
	}
}
@media (max-width: 399px) {
	a.thumb{
		width: 80px;
		height: 80px;
	}
}
/*年表*/
#about p{
	font-size: 16px;
}
blockquote{
	color: #3F729B;
	/*background: #e1f5ff;*/
	background: #fff;
	border-left-color: #afdcf8;
}
blockquote ul li{
	font-size: 16px;
}

/*表格式*/
#about table td:first-child{
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
	font-weight: bold;
	color: #9933CC;
	text-align: right;
}
#about table ul{
	margin-bottom: 0;
}
/*時間軸*/
#timeline-container{
	position: relative;
}
#timeline{
	padding-top: 20px;
	padding-bottom: 20px;
	min-height: 300px;
}
#timeline::before{
	content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: #afdcf8;
    left: 100px;
}

#timeline .year-block{
	position: relative;
	padding-top: 30px;
	padding-bottom: 10px;
}
#timeline .year{
	position: absolute;
	text-align: right;
	font-family: 'Lato', 'Calibri', 'Arial', sans-serif;
	font-size: 30px;
	top: 0px;
	left: 0px;
	color: #6cbfee;
	width: 80px;
}
#timeline .yearicon{
	position: absolute;
	width: 40px;
	height: 40px;
	background: #46a4da;
	border-radius: 50%;
	top: -5px;
	left: 85px;
	border: 8px solid #afdcf8;
}
#timeline .event{
	position: relative;
	background: #e1f5ff;
	padding: 6px 12px;
	border-radius: 4px;
	margin-left: 125px;
	margin-bottom: 6px;
}
#timeline .event::after{
	right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-right-color: #e1f5ff;
    border-width: 10px;
    top: 8px;
}
#timeline .date{
	position: absolute;
	width: 120px;
	text-align: right;
	left: -150px;
	color: #999;
}

/*外連youtube*/
.yt-link{
	color: #afdcf8;
}
.yt-link:hover, yt-link:active{
	color: #fff;
}