a:hover, #abgne_marquee ul li a:hover {
	color:#e14163
}
#event-flex {

    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: row wrap
}
#event {
	margin:0 auto;
	width:100%;
}
#AD-Audition {
	margin:0 auto;
	width:100%;
	background-color:#f8f8f8;
}
#ADCarousel {
	background-color:#eeeeee;
	padding-bottom:13px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}
#ADCarousel .nav a {
    display:block;
    border-radius:0px;
	color:#575757;
	font-size:14px;
	padding:10px 4px
}
#ADCarousel .nav {
	margin-bottom:10px!important;	
}
#ADCarousel .nav-justified {
	width:100%
}
#ADCarousel .nav-justified > li {
	width: 24.3%;
	width: -webkit-calc(25% - 2px); /** Safari 6, Chrome 19-25 **/
	width: -moz-calc(25% - 2px); /** FF 4-15  **/
	width: calc(25% - 2px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
	float:left;
    display: table-cell;
}
#ADCarousel > .nav-pills > li {
	border-bottom-right-radius:10px;
	background-color: #e5e3d6;
	border-right:1px solid #e5e5e5;
}
#ADCarousel li:first-child {
	border-bottom-left-radius:5px;
}
#ADCarousel li:last-child {
	border-bottom-right-radius:10px;
	border-right:1px solid #eee
}

#ADCarousel .nav {
	margin-top:0;
	background:#eee;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}

#ADCarousel > .nav-pills > li > a:hover,
#ADCarousel > .nav-pills > li.active > a,
#ADCarousel > .nav-pills > li.active > a:hover,
#ADCarousel > .nav-pills > li.active > a:focus {
	border-bottom-right-radius:10px;
	background-color:#d8d3bf!important;
	color:#303030;
	border-top: 2px solid #e14163
}
.carousel {
	margin-bottom: 0;
	padding: 0;
}
.carousel-inner {
	padding-bottom:0!important;
	margin-bottom:0!important
}
/* The controlsy */
/*.carousel-control {
	opacity: 0.35;
	position: absolute;
	left: 0;
	height: 50px;
	width: 50px;
	font-size: 42px;
	top: calc(50% - 90px);
	top: 26%\9
}
.carousel-control .right {
	right: 0
}*/
.thumbnail {
	cursor:pointer;
	border:0px;
	background-color:#eeeeee
}
.thumbnail img {
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
.teacher {
	padding: 0 20px 22px;
	line-height:1;
	color: #303030;
	font-size: 16px
}
.course-name {
	padding: 26px 20px 0;
	line-height:1;
	font-size: 28px;
	color: #303030
}
.teacher-s {
	padding: 0 13px;
	line-height:1;
	color: #303030;
	font-size: 13px
}
.course-name-s {
	padding: 12px 13px 15px;
	line-height:1;
	font-size: 17px;
	color: #303030
}

/*.course-classify {
	padding: 0 10px;
	line-height: 1;
	font-size: 16px;
	color: #999
}*/
.col-20 {
	padding: 15px 5px 0;
}
.col-AD {
	float: left;
	position: relative;
	min-height: 1px;
	padding: 0;
	margin: 0 0 30px;
}
/*.video-preview {
	line-height: 55px;
	margin-top: 21px;
	margin-right: 7px
}*/

.video {
/*	background:url(../image/btn-play.png) right bottom no-repeat;*/
}
.video:hover {
/*	background:url(../image/btn-play-hover.png) right bottom no-repeat;*/
}
.video-title {
	height: 95px
}

.col-recommand {
	padding: 0;
}
.col-recommand .col-sm-8 {
	padding: 5px 0 15px 20px;
}
.recommand {
	position: relative;
	z-index: 0;
	margin: 0 auto;
}
.recommand .h3 {
	position: relative;
	padding: 9px 10px;
	margin: 9px -10px;
	font-size: 15px;
	line-height: 19px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	/* css3 extras */
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	zoom: 1;
	z-index:9
}
.recommand .pink-ribbon {
	background: #e03c61;
}
.recommand .blue-ribbon {
	background: #26a1cb;
}
.recommand > a > span.small {
	color:#FFF;
	margin-left: 10px
}
.recommand > a > span.small:after {
	content:"| More"
}
.recommand > div {
	margin-top: -35px;
	border-radius:8px
}
.recommand >  div > img {
	border-radius:5px
}
.recommand .h3:before, .recommand .h3:after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 100%;
	left: 0;
	border-width: 0 10px 10px 0;
	border-style: solid;
}
.recommand .pink-ribbon:before, .recommand .pink-ribbon:after {
	border-color: transparent maroon;
}
.recommand .blue-ribbon:before, .recommand .blue-ribbon:after {
	border-color: transparent #346d8e;
}
.recommand .h3:after {
	right: auto;
	left: 0;/*    border-width:0 0 10px 10px;*/
}

.video-s {
	background:url(../image/btn-play-s.png) right bottom no-repeat;
}
.video-s:hover {
	background:url(../image/btn-play-hover-s.png) right bottom no-repeat;
}
.video-s-title {
	height: 95px
}

.main-function {
	margin:15px 0 0;
}
.main-function .col-33 {
	margin:0;
}
.main-function > .col-33 > div{
	text-align:center;
	border-radius:5px;
	background-color:#FFFFFF;
}
.main-function .popover {
  line-height: 2;
}
.main-function .popover.bottom {
  width:180px;
  text-align:center;
}
.main-function hr { margin:10px 0 }

#Hot-Course H3 {
	color:#FFF;
	border-radius: 5px;
	text-align: center;
	padding-top:10px;
	font-weight:normal;
	background-color:#e14163
}
#Hot-Course H3 > P {
	font-size:15px;
	padding: 0 0 15px;
	line-height: 18px;
}
#Hot-Course ul {
	list-style:none
}
#Hot-Course  li {
	border-bottom:1px solid #f5c9c6;
	font-size:18px;

}
#Hot-Course  ul > li > ul, #Hot-Course  ul > li > a > ul {
	padding-left:0!important;
}
#Hot-Course .detail {
	margin:-6px auto 7px;
	line-height: 1.5;
	font-size:14.5px;
	border-bottom:0px;
	color:#4F4F4F;
	padding:0!important
}

#Hot-Course  ul > li > div {
	margin:-3px 0 0 ;
	padding:0 0 10px;
	color:#4F4F4F;
}
#Hot-Course .col-33, #Hot-Course .col-50 , #Hot-Course .col-100 { 
	margin:0;
	color:#26a1cb;
	font-size: 15px;
	padding:3px 0;
	display:inline-block;
	float:none
}
#Hot-Course .col-33 { 	width:33.3333%}
#Hot-Course .col-50 { 	width:49.5%}
#Hot-Course .col-100 { width:100% }
#Hot-Course span.col-100 { background-color:#eeeeee!important; padding:0 10px; color:#303035; margin-top:0!important; line-height:26px }
#Hot-Course .accordion > div { margin-top:0}


#Hot-feature {
	background:url(../image/bg-hot-feature.jpg) center no-repeat;
	background-color:#f5f6f8;
	color:#303030;
	padding-top: 36px;
	padding-bottom: 36px
}
#Hot-feature img {
	margin-bottom:12px
}
/*mobile big //////////////////////////////*/
@media (max-width: 767px) {
#event {
	order: 1;
	-webkit-order: 1
}
#AD-Audition {
	order: 2;
	-webkit-order: 2;
	padding-top: 0;
	padding-bottom: 15px;
}


.col-AD {
	width: 100%;
	padding: 15px;
}
.video {
/*	background:url(../image/btn-play-s.png) right bottom no-repeat;*/
}
.video:hover {
/*	background:url(../image/btn-play-hover-s.png) right bottom no-repeat;*/
}
.video-title {
	height: 95px
}
.teacher {
	padding: 0 13px;
	line-height:1;
	color: #303030;
	font-size: 13px
}
.course-name {
	padding: 12px 13px 0;
	line-height:1;
	font-size: 17px;
	color: #303030
}
.col-recommand {
	width: 100%;
}
.main-function {
	padding:15px;
}
.main-function .col-33 {
	 width: 33.33%;
}
.main-function > div:nth-child(3n+1) {
	padding:10px 0 10px 15px;
}
.main-function > div:nth-child(3n+2) {
	padding:10px 0 10px 8px;
}
.main-function > div:nth-child(3n+3) {
	padding:10px 15px 10px 9px;
}
.main-function > .col-33 > div {
	padding:6px
}
.video-preview {
	line-height: 55px;
	margin-top: 21px;
	margin-right: 7px
}
.col-recommand {
	width: 100%;
	float: left;
}
.col-recommand .col-sm-8 {
	float: left;
	padding: 15px;
}
/*.recommand > a > div > div  {	overflow:hidden;}.recommand > a > div > div > img {	margin-bottom:-45px}*/

#Hot-Course {
	padding: 15px 15px 30px;
}
#Hot-Course ul {
	padding-left:25px;
	padding-right:25px
}
#Hot-Course .col-xs-16 {
	padding-left:10px;
	padding-right:10px;
}
#Hot-Course H3 {
	line-height: 45px;
	font-size:28px;
}
#Hot-Course H3 > P {
	line-height: 18px;
}
#Hot-Course  ul > li > div {
	padding-right:20px;
}
#Hot-Course  ul > li > div > a {
	padding:5px 20px 5px 0;
}
#Hot-feature {
	background:url(../image/bg-hot-feature.jpg) center
}
#Hot-feature {
	padding-top: 45px;
	padding-bottom: 60px
}
#Hot-feature .col-20 {
	width: 33.33%;
	padding: 30px 10px;
}
}
/*mobile small //////////////////////////////*/
@media (max-width: 480px) {
#AD-Audition {
	padding-top: 8px;
	padding-bottom: 0
}
#ADCarousel .nav a {
	font-size:12px!important;
	padding:10px 0px!important;
}
.main-function {
	padding:15px;
}
.main-function .col-33 {
	 width: 50%;
}
.main-function > div:nth-child(odd) {
	padding:10px 8px 10px 15px;
}
.main-function > div:nth-child(even) {
	padding:10px 15px 10px 9px;
}

.main-function img {
	width:60px;
	height:auto
}
#Hot-Course {
	padding: 15px 15px 30px;
}

#Hot-feature .col-20 {
 width: 50%;
}

}
/*pad //////////////////////////////////////////*/
@media (min-width: 768px) and (max-width: 991px) {
#event {
	order: 1;
	-webkit-order: 1
}
#AD-Audition {
	order: 2;
	-webkit-order: 2;
	padding-top: 8px;
	padding-bottom: 0
}
.col-AD {
	width: 100%;
	padding: 15px;
	padding-left:25px
}

#ADCarousel .nav {
	margin-bottom:10px
}
.col-recommand {
	width: 100%;

	padding: 15px 14px 0 5px
}
.col-recommand .col-sm-8 {
	padding: 5px 0 15px 20px;
}
.main-function {
	padding:0 0 20px;
}
.main-function .col-33 {
	 width: 33.33%;
}
.main-function > div:nth-child(3n+1) {
	padding:10px 0 10px 20px;
}
.main-function > div:nth-child(3n+2) {
	padding:10px 0 10px 17px;
}
.main-function > div:nth-child(3n+3) {
	padding:10px 0 10px 17px;
}

.main-function > .col-33 > div {
	padding:6px
}

#Hot-Course {
	padding-bottom: 30px
}
#Hot-Course ul {
	padding-left:10px;
	padding-right:10px;
}
#Hot-Course .col-sm-8 {
	padding-left:25px;
	padding-right:25px;
}
#Hot-Course H3 > P {
	padding-top:10px
}
#Hot-Course ul > li > div {
	padding-right:20px
}
#Hot-feature .col-20 {
	width: 20%;
	padding: 0 10px;
}
}
/*screen 1024 /////////////////////////////////*/
@media (min-width: 992px) {
#event {
	order: 2;
	-webkit-order: 2
}
#AD-Audition {
	order: 1;
	-webkit-order: 1;
	padding-top: 24px;
	padding-bottom: 16px
}
.col-AD {
	width: 51%;/*695px;*/
	margin-top: -7px;
	margin-bottom:0
}

.col-recommand {
	width: 49%;
	float: right;
	margin: 0 -15px;
}
.main-function {
	padding:0;
	margin:0 0 0 10px!important
}

.main-function > div {
	padding:6px 0 6px 11px;
}

.main-function > .col-33 > div {
	padding:9px 6px;

}
.main-function img {
	width:54px;
	height:auto;
}

#Hot-Course {
	padding-top:0;
	padding-bottom:28px;
}
#Hot-Course .container {
	padding-left:0;
	padding-right:0
}
#Hot-Course .col-md-4 {
	padding-left:10px;
	padding-right:10px;
}
#Hot-Course H3 {
	line-height: 35px;
	font-size:24px;
}
#Hot-Course H3 > P {
	padding-top:0;
}
#Hot-feature {
	padding-top: 18px;
	padding-bottom: 33px
}
}
@media (min-width: 992px) and (max-width:1199px) {
#Hot-Course ul {
	padding-left:5px;
	padding-right:5px
}
#Hot-Course  ul > li {
	font-size:17px!important
}
#Hot-Course  ul > li > div > a, #Hot-Course .detail {
	font-size:13px!important;
}
.recommand > a > span.small:after {
	font-family: FontAwesome;
    display: inline-block;
    vertical-align:baseline;
	content:"\f105"
}
}
@media (min-width: 1200px) and (max-width:1327px) {
.main-function img {
	width:52px;
	height:auto;
}
}

/*screen 1280 /////////////////////////////////*/
@media (min-width: 1200px)  {
#Hot-Course ul {
	padding-left:15px;
	padding-right:15px
}
.main-function {
	font-size:16px;
	padding:15px 0 0;
	margin:0!important
}

.main-function > div:nth-child(3n+1) {
	padding:9px 0 9px 20px;
}
.main-function > div:nth-child(3n+2) {
	padding:9px 0 9px 17px;
}
.main-function > div:nth-child(3n+3) {
	padding:9px 0 9px 17px;
}

#Hot-feature .img-circle {
	width: 100px;
	height: 100px;
}
#Hot-Course .col-md-4 {
	padding-left:15px;
	padding-right:15px;
}
#Hot-Course H3 {
	line-height: 41px;
	font-size:28px;
}
#Hot-Course .detail {
	margin-right:-10px!important;
}
}
/*screen 1366 /////////////////////////////////*/
@media (min-width: 1328px)  {
.recommand > a > span.small:after {
	content:"| More"
}
}
@media (min-width: 1328px) and (max-width:1439px) {
#AD-Audition {
	padding-top: 24px;
	padding-bottom: 10px
}

#Hot-Course {
	padding-top: 0
}
}
@media (min-width: 1328px) {
.main-function {
	padding:15px 0 0;
}
.main-function > .col-33 > div {
	padding:10px 12px
}
.main-function img {
	width:62px;
	height:auto;
}
#Hot-Course H3 {
	line-height: 45px;
}
#Hot-feature > .container {
    width: 1240px
}
}
@media (min-width: 1440px) {
#AD-Audition {
	padding-top: 36px;
	padding-bottom: 36px
}
#Hot-Course {
	padding-top: 30px;
	padding-bottom: 36px
}
.main-function {
	padding:14px 0 0;
}
.main-function > .col-33 > div {
	padding:11px 12px
}
#Hot-feature > .container {
    width: 1248px
}
}

/*可刪?
.modal {
  text-align: center;
  padding: 0!important;
}

.modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}

.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}
.modal-content {
	border-radius:6px;
    height: 100%!important;
}
.modal-header {
  padding: 10px 10px 5px;
}
.modal-body {
	padding: 0 10px;
	margin-top:0;

}
.modal-footer {
  padding: 10px;
 }
@media  (max-width: 767px) { 
 .modal-dialog {
	margin:50px 7px;
	width:96%;
	height:100%!important
}
.modal-content {
    height: 75%!important;
}
.modal-body {
	height:100%!important
}
}
@media (min-width: 1220px) {
  .modal-lg {
    width: 1000px;
  }
}

.close {
    font-size: 36px;
}
可刪?*/

a.label-default {
  color: #303030!important;
  font-size:15px!important;
  font-weight:normal!important}
a.label-default:hover {
  color: #e14163!important
}