body { background-color: #5F1985; }

.container {
	width: 100%;
	max-width: 1200px;
}

#content {
	color: #5F1985;
}

.txt-color-db { color: #006a85; }
.txt-color-r { color: #FF646E; }
.txt-color-y { color: #ffb314; }
.txt-color-b { color: #50A7B0; }
.txt-color-g { color: #30a968; }
.txt-color-p { color: #ae5da1; }
.txt-color-o { color: #E96649; }
.txt-color-w { color: #FFF; }


.txt-bigger { font-size: 1.5em; }

hr { border-top: 1px dashed #50A7B0; }



/*--------------------------------------button樣式--------------------------------------------*/

.btn-group {
	display: block;
	margin: 5% auto 0 auto;
}

.event-item .btn-group { margin: 0 auto 5% auto; }


.btn-group a {
	display: block;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

.btn-group a:hover {
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

a.button {
	display: block;
	margin: 1%;
	padding: 0.25em;
	font-size: 27px;
	font-size: 2.7rem;
	border: 7px double;
	background-color: #3E3A39;
	border-color: #FFF598;
	color: #FFF598;
	font-weight: bold;
	text-align: center;
	line-height: 1.5em;
	cursor: pointer;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

a.button:hover {
	background-color: #FF646E;
	/*border-color: #FFF598;
	color: #FFF598;*/
	text-decoration: none;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

.btn-group a.btn-signup, .btn-group a.btn-listen { padding: 5px; }

a.img-btn {
	display: block;
	-webkit-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease;
 }
a.img-btn:hover {
	text-decoration: none;
	-webkit-transform: scale(0.97);
		-ms-transform: scale(0.97);
		 -o-transform: scale(0.97);
			transform: scale(0.97);
	-webkit-transition: all .3s ease;
		 -o-transition: all .3s ease;
			transition: all .3s ease;
 }



/*視窗寬度  767以下切換*/
@media screen and (max-width: 767px)  {
	.btn-group { margin: 0 auto; }
}

/*視窗寬度  480以下切換*/
@media screen and (max-width: 480px)  {
	a.button {
	 	border: 4px double;
		letter-spacing: 0;
	}


}

/*--------------------------------------button樣式 end--------------------------------------------*/



/*-------------------------------------主視覺-------------------------------------------*/
#main-banner {
	position: relative;
	width: 100%;
	background-image: url(images/bg.png?v=200206);
	background-attachment: fixed;
	background-position: top center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
			background-size: cover;
}

.main-nav {
	background-color: #009EA7;
	padding: 3% 0.5%;
}

#act {
	/*background-color: rgba(255, 255, 255, 0.3);*/
	font-size: 16px;
	padding: 0.5em;
	color: #009FA8;
}

.act-block h2 {
	font-size: 3em;
	color: #FFF;
	text-align: center;
	font-weight: bold;
	line-height: 1.5em;
	letter-spacing: 2px;
	margin-top: 2em;
	text-shadow: 0px 0px 11px #ef7b00;
}

.act-block p {
	font-size: 1.25em;
	line-height: 1.5em;
}

.act-block .sub-title {
	background-color: #E61673;
	text-align: center;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFF598;
	padding: 0.25em 1em;
	border-radius: 100px;
	font-size: 1.5em;
	line-height: 2em;
}

.act-block .price {
	font-family: 'Share', cursive;
	font-weight: bold;
	color: #E61673;
	font-size: 6.5em;
	line-height: 1.2em;
}

.price-block a:hover {
	text-decoration: none;
}

/*視窗寬度991以下切換*/
@media screen and (max-width: 991px)  {
	#act { font-size: 10px; }

	.act-block h2 { font-size: 2em; }
}

/*視窗寬度767以下切換*/
@media screen and (max-width: 767px)  {
	#act { font-size: 12px; }

	.act-block h2 {
		font-size: 1.75em;
		letter-spacing: 0;
	}
}






/*-------------------------------------主視覺 end-------------------------------------------*/

#event-content {
	background-image: url(images/bg.png?v=191031);
	background-attachment: fixed;
	background-position: bottom center;
	background-repeat: repeat;
	padding-bottom: 5%;
}

.title-block { margin-top: 8%; }

.title-block h3 {
	color: #3E3A39;
	font-size: 36px;
	font-size: 3.6rem;
	text-align: center;
	font-weight: bold;
	letter-spacing: 5px;
}

.title-block h3 img { display: inline-block; }

.title-block h3 span {
	display: inline-block;
	background-image: url(images/title_bg.png);
	background-size: contain;
	background-repeat: repeat-x;
	min-height: 110px;
	padding-top: 1.4em;
}

.title-block p {
	font-size: 21px;
	font-size: 2.1rem;
	text-align: center;
	letter-spacing: 2px;
	line-height: 1.5em;
	padding: 1em;
	color: #FF4A55;
    font-weight: bold;
}

.title-block strong {
	display: inline-block;
	font-size: 36px;
	font-size: 3.6rem;
	line-height: 2em;
	color: #291E1C;
}

/*視窗寬度700以下切換*/
@media screen and (max-width: 700px)  {
	.title-block h3, .title-block strong {
		font-size: 24px;
		font-size: 2.4rem;
		letter-spacing: 2px;
	}

	.title-block h3 img { height: 70px; }
	.title-block h3 span { min-height: 70px; }

}

/*視窗寬度480以下切換*/
@media screen and (max-width: 480px)  {
	.title-block h3, .title-block strong {
		font-size: 18px;
		font-size: 1.8rem;
	}

	.title-block h3 img { height: 50px; }
	.title-block h3 span { min-height: 50px; }

	.title-block p {
		font-size: 15px;
		font-size: 1.5rem;
	}
}

/*-------------------------------------  活動內容 -------------------------------------------*/

.class-name {
	margin: 1%;
	padding: 0.5em 0;
	color: #fff;
	background-color: #50A7B0;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: 5px;
	text-align: center;
}

.event-item {
	margin: 1%;
	margin-top: 0;
	padding: 2%;
	border: 7px double #50A7B0;
}

.event-item.block-pink {
	background-color: #FF6769;
	border-color: #FFF;
	color: #FFF;
}

.event-item.block-pink p {
	color: #FFF;
	text-align: center;
	max-width: 30em;
	font-size: 21px;
	font-size: 2.1rem;
	line-height: 2em;
	letter-spacing: 5px;
	margin: 3% auto;
}

.event-item.block-pink strong {
	background-color: #F7EF9D;
	color: #E40060;
	font-size: 1.2em;
	padding: 0.1em;
}


#event-content a.button {
	font-size: 27px;
	font-size: 2.7rem;
	letter-spacing: 10px;
}

#event-content a.popover-btn {
	background-color: #44AF35;
	border-color: #FFF;
	color: #FFF;
}

#event-content a.popover-btn:hover {
	background-color: inherit;
	border-color: #44AF35;
	color: #44AF35;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	    -ms-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}

#event-content .popover {
	max-width: 300px;
}



/*視窗寬度  767  之間以下切換*/
@media screen and (max-width: 767px)  {
	.event-item.block-pink p {
		font-size: 16px;
		font-size: 1.6rem;
		letter-spacing: 2px;
	}
}


/*視窗寬度  480  之間以下切換*/
@media screen and (max-width: 480px)  {
	.class-name {
		font-size: 27px;
		font-size: 2.7rem;
	}

	#event-content a.button {
		font-size: 24px;
		font-size: 2.4rem;
		letter-spacing: 5px;
	}

	#event-content a.popover-btn {
		font-size: 18px;
		font-size: 1.8rem;
		letter-spacing: 0;
	}

}


/*-------------------------------------  活動內容 end  -------------------------------------------*/






/*-------------------------------------各主題區塊-------------------------------------------*/

#points .tab-container {
	max-width: 1024px;
	margin: 0 auto;
	padding: 10px;
}

#points ul li {
	width: 25%;
}

#points ul li a {
	padding: 0.25em;
	-webkit-transition:  background-color .5s ease;
	   -moz-transition:  background-color .5s ease;
	    -ms-transition:  background-color .5s ease;
	     -o-transition:  background-color .5s ease;
	        transition:  background-color .5s ease;
}

#points li a:hover, #points li.active a {
	border: none;
	-webkit-transition:  background-color .5s ease;
	   -moz-transition:  background-color .5s ease;
	    -ms-transition:  background-color .5s ease;
	     -o-transition:  background-color .5s ease;
	        transition:  background-color .5s ease;
}

#points ul li p {
	font-size: 30px;
	font-size: 3rem;
	text-align: center;
	font-weight: bold;
	line-height: 1.2em;
	padding: 0.25em;
}

#points ul li p small {
	letter-spacing: 10px;
	font-size: 50%;
}

#points .tab-content {
	padding: 2% 1%;
	background-color: rgba(255, 255, 255, 0.95);
	-webkit-border-radius: 0 0 10px 10px;
	        border-radius: 0 0 10px 10px;
}

#points li.tab-point01 a { color: #1BABA7; border-bottom: 5px solid #1BABA7; }
#points li.tab-point01 a:hover, #points li.tab-point01.active a { color: #FFF; background-color: #1BABA7; }

#points li.tab-point02 a { color: #EEB955; border-bottom: 5px solid #EEB955; }
#points li.tab-point02 a:hover, #points li.tab-point02.active a { color: #FFF; background-color: #EEB955; }

#points li.tab-point03 a { color: #777D2E; border-bottom: 5px solid #777D2E; }
#points li.tab-point03 a:hover, #points li.tab-point03.active a { color: #FFF; background-color: #777D2E; }

#points li.tab-point04 a { color: #03728E; border-bottom: 5px solid #03728E; }
#points li.tab-point04 a:hover, #points li.tab-point04.active a { color: #FFF; background-color: #03728E; }

.tab-title {
	font-size: 16px;
	text-align: center;
}

.tab-title h3 {
	font-size: 4em;
	letter-spacing: 5px;
	line-height: 1.5em;
	font-weight: bold;
}

#point01 .tab-title h3 { color: #1BABA7; }
#point02 .tab-title h3 { color: #EEB955 }
#point03 .tab-title h3 { color: #777D2E; }
#point04 .tab-title h3 { color: #03728E; }

.tab-title p {
	font-size: 1.3125em;
	letter-spacing: 2px;
	line-height: 1.5em;
	padding-bottom: 1em;
	color: #FF4A55;
	font-weight: bold;
}

/*視窗寬度  860  之間以下切換*/
@media screen and (max-width: 860px)  {
	#points ul li p {
		font-size: 21px;
		font-size: 2.1rem;
	}
}

/*視窗寬度  630  之間以下切換*/
@media screen and (max-width: 630px)  {
	#points ul li p {
		font-size: 15px;
		font-size: 1.5rem;
	}

	.tab-title { font-size: 10px; }

	.tab-title h3 { font-size: 3em; letter-spacing: 0; }
}

/*視窗寬度  480  之間以下切換*/
@media screen and (max-width: 480px)  {
	#points ul li p {
		font-size: 10px;
		font-size: 1rem;
	}

	#points ul li p small {
		letter-spacing: 2px;
		font-size: 70%;
	}
}

.free {
	margin: 0 auto;
	margin-bottom: 5%;
}

.free div {
	background-image: url(images/freex4.png);
	background-size: 400%;
}

.free div:nth-child(2) { background-position: 33.3333333% 0; }
.free div:nth-child(3) { background-position: 66.6666666% 0; }
.free div:nth-child(4) { background-position: 100% 0; }

/*視窗寬度991之間以下切換*/
@media screen and (max-width: 991px)  {
	.free { max-width: 600px; }
}

/*-------------------------------------各主題區塊 end-------------------------------------------*/



/*------------------------------------- 師資 -------------------------------------------*/
/*師資tab*/
#teacher .nav-tabs {
	max-width: 1200px;
	margin: 0 auto;
}

#teacher .nav-tabs > li > a:hover {
	border: none;
}
#teacher .nav > li > a:hover, #teacher .nav > li > a:focus {
	background: inherit;
}
#teacher .nav-tabs > li.active > a, #teacher .nav-tabs > li.active > a:hover, #teacher .nav-tabs > li.active > a:focus,
#teacher .nav-tabs > li:hover > a, #teacher .nav-tabs > li:hover > a:hover, #teacher .nav-tabs > li:hover > a:focus {
    background-color: inherit;
    border: none;
    border-bottom: 5px solid;
}

#teacher .nav-tabs > li {
	width: 20%;
	max-width: 200px;
	height: 200px;
}

#teacher .nav-tabs > li > a {
	position: relative;
	background-image: url(images/teachers.png?v=200306);
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	font-size: 30px;
	font-size: 3rem;
	font-weight: bold;
	letter-spacing: 2px;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
	border-bottom: 5px solid;
	-webkit-background-size: 600%;
	     -o-background-size: 600%;
	        background-size: 600%;
	-webkit-transition: background-image .5s ease;
	   -moz-transition: background-image .5s ease;
	    -ms-transition: background-image .5s ease;
	     -o-transition: background-image .5s ease;
	        transition: background-image .5s ease;
}
#teacher .nav-tabs > li:hover > a, #teacher .nav-tabs > li.active > a {
	color: #FFF !important;
	background-image: url(images/teachers_hover.png?v=200306);
	background-repeat: no-repeat;
	-webkit-background-size: 600%;
	     -o-background-size: 600%;
	        background-size: 600%;
}

#teacher .nav-tabs > li.teacher-pic-01 > a, #teacher .nav-tabs > li.teacher-pic-01:hover > a, #teacher .nav-tabs > li.teacher-pic-01.active > a {
	color: #e61f4c;
	border-color: #e61f4c;
	background-position: 0 bottom;
}
#teacher .nav-tabs > li.teacher-pic-02 > a, #teacher .nav-tabs > li.teacher-pic-02:hover > a, #teacher .nav-tabs > li.teacher-pic-02.active > a {
	color: #ffb314;
	border-color: #ffb314;
	background-position: 20% bottom;
}
#teacher .nav-tabs > li.teacher-pic-03 > a, #teacher .nav-tabs > li.teacher-pic-03:hover > a, #teacher .nav-tabs > li.teacher-pic-03.active > a {
	color: #006a85;
	border-color: #006a85;
	background-position: 40% bottom;
}
#teacher .nav-tabs > li.teacher-pic-04 > a, #teacher .nav-tabs > li.teacher-pic-04:hover > a, #teacher .nav-tabs > li.teacher-pic-04.active > a {
	color: #E96649;
	border-color: #E96649;
	background-position: 60% bottom;
}
#teacher .nav-tabs > li.teacher-pic-05 > a, #teacher .nav-tabs > li.teacher-pic-05:hover > a, #teacher .nav-tabs > li.teacher-pic-05.active > a {
	color: #30a968;
	border-color: #30a968;
	background-position: 80% bottom;
}

#teacher .nav-tabs > li.teacher-pic-06 > a, #teacher .nav-tabs > li.teacher-pic-06:hover > a, #teacher .nav-tabs > li.teacher-pic-06.active > a {
	color: #ae5da1;
	border-color: #ae5da1;
	background-position: 100% bottom;
}


#teacher .nav-tabs > li > a > span {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}


#teacher .tab-content {
	background-color: #FFF;
	padding: 4%;
	/*max-width: 1000px;*/
    margin: 0 auto;
}

#teacher .tab-pane h3 {
	font-size: 32px;
	font-size: 3.2rem;
	letter-spacing: 2px;
	line-height: 2em;
	margin-bottom: 1em;
}

#teacher .tab-pane h3 span {
	display: inline-block;
}

#teacher .tab-pane h3 span.teacher-name {
	font-size: 2em;
	font-weight: bold;
	vertical-align: text-top;
	padding: 0 0.25em;
}

#teacher .tab-pane p {
	letter-spacing: 2px;
	line-height: 2em;
	text-align: justify;
}

#teacher a.button {
	padding: 0.25em 1em;
	margin-top: 5%;
	letter-spacing: 5px;
}



/*視窗寬度小於991以下切換*/
@media screen and (max-width: 991px) {
	#teacher .nav-tabs > li {
		height: 165px;
	}
}

/*視窗寬度小於767以下切換*/
@media screen and (max-width: 767px) {
	#teacher .tab-container {
		margin: 2%;
	}

	#teacher .nav-tabs > li {
		height: 2em;
	}
	#teacher .nav-tabs > li > a {
		background-image: none;
		font-size: 15px;
		font-size: 1.5rem;
		letter-spacing: 0;
	}
	#teacher .nav-tabs > li:hover > a, #teacher .nav-tabs > li.active > a {
		color: #FFF !important;
		background-image: none;
	}

	#teacher .nav-tabs > li.teacher-pic-01:hover > a, #teacher .nav-tabs > li.teacher-pic-01.active > a {
		background-color: #e61f4c;
	}
	#teacher .nav-tabs > li.teacher-pic-02:hover > a, #teacher .nav-tabs > li.teacher-pic-02.active > a {
		background-color: #ffb314;
	}
	#teacher .nav-tabs > li.teacher-pic-03:hover > a, #teacher .nav-tabs > li.teacher-pic-03.active > a {
		background-color: #006a85;
	}
	#teacher .nav-tabs > li.teacher-pic-04:hover > a, #teacher .nav-tabs > li.teacher-pic-04.active > a {
		background-color: #E96649;
	}
	#teacher .nav-tabs > li.teacher-pic-05:hover > a, #teacher .nav-tabs > li.teacher-pic-05.active > a {
		background-color: #30a968;
	}
	#teacher .nav-tabs > li.teacher-pic-06:hover > a, #teacher .nav-tabs > li.teacher-pic-06.active > a {
		background-color: #ae5da1;
	}

}

/*視窗寬度小於650以下切換*/
@media screen and (max-width: 650px) {
	#teacher .tab-pane h3 span {
		width: 70%;
	}
}

/*視窗寬度小於480以下切換*/
@media screen and (max-width: 480px)  {
	#teacher .tab-pane h3 {
	    font-size: 21px;
	    font-size: 2.1rem;
	    line-height: 1.75em;
	    margin-bottom: 0.5em;
	}

	#teacher .tab-pane p {
		font-size: 12px;
		font-size: 1.2rem;
	}

	#teacher .tab-content a.button-main {
		font-size: 21px;
		font-size: 2.1rem;
	}
}
/*------------------------------------- 師資 end-------------------------------------------*/



.contact {
	font-size: 16px;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 2em;
	font-weight: bold;
}

.contact p {
	font-size: 1.75em;
	text-align: center;
	letter-spacing: 5px;
	line-height: 2em;
	color: #FFF598;
}

.contact a {
	font-family: 'Share', cursive;
	color: inherit;
	letter-spacing: 2px;
	font-size: 2em;
	font-weight: 700;
}

/*視窗寬度小於767以下切換*/
@media screen and (max-width: 767px) {
	.contact { font-size: 10px; }
	.contact p { letter-spacing: 0; }
	.contact a { letter-spacing: 0; }
}

/*視窗寬度小於480以下切換*/
@media screen and (max-width: 480px) {
	.contact a { font-size: 1.35em; }
}



/*注意事項*/
#notice {
	background-color: #5F1985;
	color: #FFF;
	padding: 5% 0;
}

#notice .title-block { margin-top: 0; }
#notice .title-block p { letter-spacing: 10px; }

#notice .title-block strong { color: #FFF; }

#notice ul { margin: 1em; }

#notice ul p {
	font-size: 1.25em;
	line-height: 2em;
}

#notice ul li {
	line-height: 2em;
	padding: 0.5em 0;
	list-style-type: decimal;
	margin-left: 1.5em;
	text-align: justify;
	letter-spacing: 1px;
}

#notice ul li a {
	color: #FFF697;
}

#notice ul li a:hover {
	text-decoration: underline;
}



/*視窗寬度小於768以下切換*/
@media screen and (max-width: 768px) {
	.act-content h2 {
		font-size: 21px;
		font-size: 2.1rem;
		letter-spacing: 3px;
	}

	.act-block {
		font-size: 12px;
	}
}

/*視窗寬度小於480以下切換*/
@media screen and (max-width: 480px) {
	#notice ul li {
		font-size: 10px;
		font-size: 1rem;
	}
}


/*--------------- 左邊超連結(E) ---------------*/
/*三個button顏色設定*/
.top-left-1 { background-color: #5F1985; }
.top-left-2 { background-color: #B5005F; }
.top-left-3 { background-color: #133776; }
/*--------------- 左邊超連結(E) ---------------*/