@charset "utf-8";
/* CSS Document */
.infopoin{
    /*font-style: oblique;
    color: salmon;*/
    color: red;

}
.classInfo{
	display: block;
}

.classinfo-img{
	width: 75%;
}

.course-name.video01.movie-name{
	font-size: calc(.5vw + 16px);
	color: #00697C;
}
.course-name.video01.second-name{
	font-size: calc(.5vw + 16px);
	color: #0070AF;
}

/*促銷css-------*/

.course-name.video01.second-name.red{
	font-size: calc(.5vw + 16px);
	color: #E50629;
}

.course-name.video01.second-name.black{
	font-size: calc(.5vw + 16px);
	color: #252525;
}

.course-name.video01.second-name.black .red{
	font-size: calc(.5vw + 16px);
	color: #E50629;
}

.width-center{
	width: 75%;
	text-align: center;
}

@media screen and (max-width: 991px){
	.width-center{
		width: 100%;
		text-align: center;
	}
}

/*------------*/

/*新增內文次標題css-----*/

.course-name.video01.second-name.sp-title{
	font-size: calc(1vw + 16px);
	color: #09a4fc;
	border-left: 6px solid #09a4fc;
	padding-left: 10px;
}

.title-class-info.sp-blue{
	color: #0070AF;
}

/*--------------*/

/*老師介紹css---------*/
.course-name .teacher{
	font-size: calc(.6vw + 15px);
}

.teacher-width{
	width: 75%;
}

.div-set{
	display: inline-block;
	vertical-align: middle;
}

.text-width{
	width: calc(100% - 440px);
}


@media screen and (max-width: 991px){
	.teacher-width{
		width: 100%;
	}
}


@media screen and (max-width: 767px){
	.div-set{
		display: block;
	}
	
	.text-width{
		width: 100%;
	}
	
}



/*--------------*/


.video-width{
	width: 75%;
	margin: 0px auto;
}

.movie-w{
	width: 67%; /*75%;*/
}

.youtube-width{
	position: relative;
	/*width: 75%;*/
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.padding-15{
	padding-top: 15px;
	padding-bottom: 15px;
}


.youtube-width iframe, .youtube-width object, .youtube-width embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 991px){
	.classinfo-img{
		width: 100%;
	}
	
	.movie-w{
		width: 100%;
	}
	
	.video-width{
		width: 100%;
	}
	
}


@media screen and (max-width: 540px){
	.classinfo-img{
		display: block;
	}
}

.title-class-info .blue{
	color: blue;
}

.link-color{
	color: #FF8F00;
}
a:hover{
	text-decoration: none;
}



















