@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500&family=Noto+Serif+TC:wght@700&display=swap');
/* CSS Document */
*{padding:0;margin:0; box-sizing: border-box;}
img{max-width: 100%;}
body{-webkit-overflow-scrolling: touch;line-height: 1.6;font-family: 'Noto Sans TC', sans-serif;color: #000;background:url(../images/bg_dot.png) fixed,url(../images/bg.png) fixed no-repeat #014C63 center;background-size: auto,200% auto;}
.wrap{font-family: 'Noto Sans TC', sans-serif;font-weight: 300;overflow: hidden;}
h2{text-align: center;}

header{max-width: 1200px;margin: 0 auto;}
header h2{background: #fff;color: #014C63; border-radius: 5px;padding: 10px 10px 12px;margin: 0 15px;}
header h2 big{color: #F3645A;}
.org_rounded{background: #F3645A;color: #fff;border-radius: 30px;padding:5px 20px;display: inline-block;}

section{padding-top: 40px;padding-bottom: 40px;}
section h2{margin-bottom: 30px;}
section h3{font-size: 1.6em;}


/*sec1 */
.sec1 a{ font-size: 1.6em;text-align: center;font-weight: bold;color: #014C63;display: block;position: relative;}
.sec1 a:after{content: '\f0a6';font-family: "Font Awesome 5 Free";font-weight: 400;display: inline-block; position: absolute;right: 20px;bottom: 10px;font-size: 2em;transform: rotate(-15deg);}
.sec1 a:hover{text-decoration: none;}
.sec1 a:hover:after{color: #ccc;}
.sec1 .bg-white big{color: #F3645A;}
.sec1 .bg_yellow {background: #FFD600; font-size: 1.6em;text-align: center;font-weight: bold;color: #014C63;}


/*sec2*/
.sec2 h2{color: #FFD600;font-size: 2.4em;}
.stroke {position: relative; z-index: 10;display: inline-block;}
.stroke:before {position: absolute; z-index: -1; -webkit-text-stroke: 6px  #014C63; content: attr(data-stroke); }
.item{background: url(../images/bg_teacher_01_s.png) left bottom no-repeat, url(../images/bg_teacher_02.png) right top no-repeat #fff;border-radius: 5px;padding: 15px;}
.item hr{border-top: 1px dashed #014C63;}
.teacher_img{position: relative;display: flex;justify-content: center;margin-bottom: 15px;}
.teacher_img div{background: #F3645A;color: #fff;border-radius: 50px;text-align: center;display: inline-block;padding: 8px 40px;position: absolute;bottom: 0;font-size: 1.4em;}
.teacher_img img{max-width: 300px;}
.teacher_img h4{margin-bottom: 0;font-size: 1.4em;letter-spacing: 1px;}
.class_link p{margin-bottom: 5px;font-size: 1.15em;}
.class_link span{background: #F3645A;color: #fff; border-radius: 15px;padding: 0px 5px;}
.owl-theme .owl-nav [class*="owl-"]{border: 1px solid #014C63 !important;width: 1.5em;color: #014C63 !important;background: #fff !important; font-size: 1.5em!important;}
.owl-theme .owl-nav [class*="owl-"]:hover{background: #bbdce6 !important;}
.sec2 h5{margin-bottom: 15px;font-size: 1.25em;font-style: italic;}
.sec2 .book{text-align: center;position: relative;}
.sec2 .book:after{position:absolute;content: '購課即抽';display: inline-block;background:#FFD600;color:#014C63;border-radius: 30px;left:-10px;bottom: 15px;padding: 5px 15px;font-size: 1.15em;}

/*sec3*/
.sec3{background:#014C63;border-radius: 5px;border: 2px solid #fff;color: #fff;padding: 0;margin: 40px 0 45px; }
.sec3 h3{text-align: center;background: #fff;color: #014C63;padding: 10px;font-size: 2em;}
.sec3 h4{ color: #FFD600;}
.sec3 hr{border-color: #fff;border-style: dashed;}
.sec3 li{margin-bottom: 10px;}
.sec3 li span{ color: #FFD600;}



footer{text-align: center;padding-top: 10px;padding-bottom: 10px;}
footer p{padding-top: 15px;}
footer a{margin:0 5px;color:#fff;vertical-align: middle;display: inline-block;}
footer{text-align: center;padding-bottom: 15px; color:#fff;}
footer a:hover{ color: #FFD600;}

@media (min-width: 576px){ /*sm*/

}

@media (min-width: 768px) {/*md*/	
	.item{background: url(../images/bg_teacher_01.png) left bottom no-repeat, url(../images/bg_teacher_02.png) right top no-repeat #fff;}
}

@media (min-width: 992px) { /*lg*/
	body{background-size: auto,auto;}
	header h1{margin-top: -35px;}
	header h2{border-radius: 40px;}
	.teacher_img{margin-bottom: 0;}
}

@media (min-width: 993px) { /*lg*/

}

@media (min-width: 1200px){ /*xl*/
	.wrap {	font-size: 13pt;}
	section{padding-top: 40px;padding-bottom: 60px;}
	.sec2 h2{font-size: 3em;}
}