/* Base */
html,
body {
	font-family: 'Noto Sans TC', "Microsoft JhengHei", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif;
	font-size: 16px;
	color: #333333;
}

/* Text Color Animation */
.pateTitle-H4 {
	animation: pateTitle-H4 3s infinite alternate;
	/*IE*/
	-moz-animation: pateTitle-H4 3s infinite alternate;
	/*FireFox*/
	-webkit-animation: pateTitle-H4 3s infinite alternate;
	/*Chrome, Safari*/
}

@keyframes pateTitle-H4 {
	from {
		color: rgba(253, 231, 76, 1.00);
	}

	to {
		color: rgba(255, 255, 255, 1.00);
	}
}

@-moz-keyframes pateTitle-H4 {
	from {
		color: rgba(253, 231, 76, 1.00);
	}

	to {
		color: rgba(255, 255, 255, 1.00);
	}
}

@-webkit-keyframes pateTitle-H4 {
	from {
		color: rgba(253, 231, 76, 1.00);
	}

	to {
		color: rgba(255, 255, 255, 1.00);
	}
}

/* Base */
.contentBox {
	padding: 75px 0;
}

.pageTitle {
	color: #fff;
	font-size: 36px;
	font-weight: bolder;
	padding: 0 0 24px 0;
}

.pageDescription {
	color: #1b1b1b;
	font-size: 21px;
	font-weight: bolder;
	line-height: 27px;
	padding: 0 0 24px 0;
}

.pageTitle h4 {
	line-height: 1;
	font-size: 2.25rem;
	color: #D68A7D;
	margin-bottom: 7px;
	-webkit-animation: pateTitle-H4 1.4s 0.5s infinite;
	animation: pateTitle-H4 1.4s 0.5s infinite;
}

.breakText {
	display: inline-block;
	padding-left: 15px;
}

/* Cover */
.mainCoverBox img {
	width: 100%;
	height: auto;
}

.classTitle {
	color: #FFFFFF;
	font-size: 48px;
	font-weight: bolder;
	margin: 15px 0;
	text-align: center;
}

/* Introduction */
.IntroductionBox {
	width: 100%;
	height: auto;
	background-color: #ffc823;
	background: url("../images/bg.png") no-repeat center center;
	background-size: cover;
}

.IntroductionTitle {
	width: 100%;
	height: auto;
}

.IntroductionTitle p {
	font-size: 1.35rem;
	line-height: 1.75;
	color: #000;
	text-align: center;
    font-weight: 300;
    letter-spacing: 0.2rem;
}

/* Teacher */
.TeacherBox {
	width: 100%;
	height: auto;
	background-color: #fff;
}

.TeacherTime {
	width: 100%;
	font-size: 1.5rem;
	line-height: 1.8;
	color: #000;
    font-weight: 700;
    font-family: 'Montserrat','Noto Sans TC',"Microsoft JhengHei", sans-serif;
    padding-right: 20px;
}

.classInfoBoxTitle .start { font-weight: 400; font-size: 1rem; letter-spacing: 0.2rem;}
.TeacherTime p {
	font-size: 1rem;
	color: #e60012;
	font-weight: 400;
}
.classInfoBoxTitle2 .ft { font-weight: 300; font-size: 0.95rem;}
.TeacherTime .day, .classInfoBoxTitle .day, .classInfoBoxTitle2 .day { font-size: 1.1rem; font-weight: 400; letter-spacing: 0.05rem;}
.TeacherTime .add { font-size: 1.1rem; font-weight: 400; /*letter-spacing: 0.05rem;*/ display: inline-block;}
.TeacherButton {
	width: 240px;
	height: 60px;
	background-color: #e60012;
	color: #fff;
	font-size: 1.5rem;
	line-height: 2.5;
	margin: 25px 0;
	text-align: center;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.TeacherButton:hover { border: 2px solid #e60012; background-color: #ffffff; color: #e60012; line-height: 2.3; }

.next { color: #e60012; font-size: 1rem; text-align: center; font-weight: 300; margin-right: 20px; letter-spacing: 0.2rem; margin-top: -10px;}
/*.TeacherButton img { width: 80px; height: auto;}*/
.free::before { content: url("../images/free.gif"); position: absolute; left: 5%;}
.TeacherLine {
	float: right;
	width: 1px;
	height: 100%;
	background-color: #000;
}

.TeacherWork {
	width: 100%;
	height: auto;
	padding: 0 30px 15px 30px;
}

.TeacherDescription {
	width: 100%;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #000;
	text-align: justify;
}

.TeacherDescription p {
	font-size: 0.85rem;
    color: gray;
    font-weight: 300;
    margin-top: 0.75rem;
}

.TeacherDescriptionCicleBox {
	display: block;
	float: left;
	width: 25%;
	height: auto;
	margin: 15px 0;
}

.TeacherDescriptionCicleBoxPhoto {
	display: block;
	overflow: hidden;
	width: 110px;
	height: 110px;
	margin: 0.8rem auto;
	border-radius: 50%;
    margin-left: -8px;
}

.TeacherDescriptionBoxRight {
	display: block;
	float: left;
	width: 75%;
	height: auto;
	font-size: 1.125rem;
	line-height: 1.5;
	color: #000;
	text-align: justify;
	margin: 2rem 0;
}
.TeacherDescriptionBoxRight a { font-size: 0.85rem; color: #e60012;}
.TeacherDescriptionBoxRight a i { font-size: 1.35rem; margin-right: 0.25rem;}
.TeacherDescriptionBoxRight a:hover { text-decoration: underline;}
.TeacherDescriptionBoxRight p {
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 5px;
    text-align: left;
}
.TeacherDescriptionBoxPic img {
	cursor: pointer;/*ayuan*/
}
/* ayuan */
.modal-content {
	background: transparent;
	border: 0;
}
.modal-header {
	border-bottom: 0;
}
.modal-header .close {
	color: #ffffff;
	position: absolute;
	right: 10%;
	opacity: 100;
	border: 1px solid;
}
.modal-dialog iframe {
		width: 100%;
	    margin: 10% auto;
}
@media (min-width: 576px){
	.modal-dialog {
		max-width: 100%;
	}
	
}
@media (max-width: 479.98px){ 
    .TeacherDescriptionCicleBoxPhoto { margin-left: 0; display: block; margin: 0 auto;}
    .TeacherDescriptionBoxRight { width: 100%;}
                            }
.TeacherDescriptionBoxPic {
	width: 100%;
	height: auto;
	margin-top: 50px;
}
@media (max-width: 767px){ .contentBox { padding: 50px 0;}
.TeacherDescriptionBoxPic { margin-top: 0;}}
.TeacherDescriptionBoxPicBox {
	width: 100%;
	height: auto;
}

.classInfoBox {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #2d3384;
	background-image: url(../images/bg2.png);
	background-repeat: repeat-y;
	background-size: contain;
}
.TeacherBox .workshop { color: #000000; font-size: 2.25rem; font-weight: 700; font-family: 'Montserrat','Noto Sans TC',"Microsoft JhengHei", sans-serif; padding: 2.5rem 0 0 0; letter-spacing: 0.1rem; line-height: 1.5;}
.TeacherBox .workshop .ft { font-weight: 400; font-size: 1rem;}
.TeacherBox .workshop .tch { font-size: 1rem; display: inline-block;}
.classInfoBox .upcoming { color: #ffffff; font-size: 2.5rem; font-weight: 800; font-family: 'Montserrat','Noto Sans TC',"Microsoft JhengHei", sans-serif; padding: 2.5rem 0 0 0; letter-spacing: 0.2rem;}
.classInfoBoxImgBox {
	position: relative;
	width: 100%;
	height: auto;
}

.classInfoBoxImg {
	display: block;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
}

.classInfoBoxImg img {
	display: block;
	width: 100%;
	height: auto;
	z-index: 98;
    padding: 0 40%;
}

.classInfoBoxTitle {
    font-family: 'Montserrat','Noto Sans TC',"Microsoft JhengHei", sans-serif;
	font-size: 1.45rem;
	line-height: 1.5;
	color: #ffc823;
	font-weight: 700;
	text-align: center;
	margin: 15px 0;
}
.classInfoBoxTitle2 {
    font-family: 'Montserrat','Noto Sans TC',"Microsoft JhengHei", sans-serif;
	font-size: 1.25rem;
	line-height: 1.5;
	color: #ffffff;
	font-weight: 500;
	text-align: center;
	margin: 15px 0;
}
.noteBOxTitle {
	width: 100%;
	font-size: 1.125rem;
	line-height: 1.3;
	color: #fff;
	font-weight: 500;
}

.noteBOxTitle ul {
	list-style-type: decimal;
	padding-left: 20px;
    font-weight: 300;
    font-size: 1rem;
}

.noteBOxTitle p {
	position: relative;
	width: 100%;
	color: #ffc823;
	padding-top: 10px;
	margin-bottom: 5px;
    border-top: 1px solid #ffffff;
    margin-top: 80px;
}

.noteLine {
	position: absolute;
	width: 88%;
	height: 1px;
	background-color: #fff;
	top: 85%;
	right: 0;
}