@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400,500,600,700;&display=swap');
/* CSS Document @media由小寫到大*/
*{padding:0;margin:0; box-sizing: border-box;}
img{max-width: 100%; image-rendering: -webkit-optimize-contrast; /* 针对WebKit引擎 */
    image-rendering: crisp-edges;}
body{-webkit-overflow-scrolling: touch;line-height: 1.6;font-family: 'Noto Sans TC', sans-serif;
	background-size:20px 20px,20px 20px;}
.wrap{font-family: 'Noto Sans TC', sans-serif;font-weight: 400;overflow: hidden;text-align: center;}

header{background-color: #FC90EF;}

/*品牌介紹*/
.info{ background-color: #FC90EF;}
.info h2{ font-size: 1.1rem; line-height: 1.4;}
.info h2 span{ color: #F9E784;}
.info-frame{ border-radius: 1.2em;}
.info-frame img{ width: 65%;}
.info-frame .text{ font-size: 1rem; font-weight: 500;}

.sec1{background-color: #BAE2F8; }
.sec2{background-color: #FFF0C6;}
.sec3{background-color: #A2E0DC;}

/*課程*/

.classitem h3{ 
	background: url(../images/title.png) no-repeat bottom center ;background-size: auto 100%; margin-bottom: 0px; padding: 15px 20px;
	font-weight: bold;color: #2b2b2b; font-size: 1.8em; letter-spacing: 2px;
}
.classitem h4{ font-size: 1.1rem;}
.classitem .card{border-radius: 0; border: 2px solid #000;}
.card .money{margin-bottom: 0; font-weight: 700; font-size: 2.2rem; line-height: 1.2; margin-top: 10px; color: #677BFF;}
.card .money span{font-size: 1.2rem;color: #999;}
.card .card-body{padding: 10px 0;text-align: left;}
.card .card-body h5{ font-size: 1.4rem; line-height: 1.3; font-weight: 700;}
.card .card-body .text{ line-height: 1.4; }
.card .card-footer{background: #fff;border-top: 0; padding: 0;text-align: right;}
.card .btn-primary {
	background: #FC90EF; color: #000; border: 2px solid #000; border-radius: 10px; padding:0.25rem 1.25rem; 
	font-size: 1.4rem; font-weight: 700; box-shadow: 2px 2px 0px 1px rgba(0, 0, 0, 1);}
.card .btn-primary:hover {background: #000; color: #FC90EF;border: 1px solid #000; }

/*coupon*/
.coupon {margin: 10px 0;}
.coupon h2{font-weight: bold; font-size: 1.8em;}
.coupon h2 span{font-size: 1.1em;}
.coupon h2 big{color:#ef4b67;font-style: italic;font-family: sans-serif;}
.coupon p{margin-bottom: 0;font-weight:500;font-size: 1.05em;}
.coupon input{opacity: 0;position: absolute;}
.coupon-left{background: url(../images/coupon_s_text_t.png) no-repeat top,url(../images/coupon_s_text_bg.png) repeat-y;background-size: 100% auto;padding: 45px 15px 15px;}
.coupon-right button{background: url(../images/coupon_s_center.png) no-repeat top,url(../images/coupon_s_btn_b.png) no-repeat bottom,url(../images/coupon_s_btn_bg.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;width: 100%;border: 0;font-weight: bold;font-size: 2em;color: #2b2b2b;text-shadow: 3px 3px 0 #ffe900;letter-spacing: 2px;}
.coupon-right button.actived{background: url(../images/coupon2_s_center.png) no-repeat top,url(../images/coupon2_s_btn_b.png) no-repeat bottom,url(../images/coupon2_s_btn_bg.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;color: #fff;text-shadow: 3px 3px 0 #595757;}

.coupon-left2{background: url(../images/coupon_s_text_t2.png) no-repeat top,url(../images/coupon_s_text_bg2.png) repeat-y;background-size: 100% auto;padding: 45px 15px 15px;}
.coupon-right2 button{background: url(../images/coupon_s_center2.png) no-repeat top,url(../images/coupon_s_btn_b2.png) no-repeat bottom,url(../images/coupon_s_btn_bg2.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;width: 100%;border: 0;font-weight: bold;font-size: 2em;color: #2b2b2b;text-shadow: 3px 3px 0 #ffe900;letter-spacing: 2px;}
.coupon-right2 button.actived{background: url(../images/coupon2_s_center2.png) no-repeat top,url(../images/coupon2_s_btn_b2.png) no-repeat bottom,url(../images/coupon2_s_btn_bg2.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;color: #fff;text-shadow: 3px 3px 0 #595757;}

.coupon-left3{background: url(../images/coupon_s_text_t3.png) no-repeat top,url(../images/coupon_s_text_bg3.png) repeat-y;background-size: 100% auto;padding: 45px 15px 15px;}
.coupon-right3 button{background: url(../images/coupon_s_center3.png) no-repeat top,url(../images/coupon_s_btn_b3.png) no-repeat bottom,url(../images/coupon_s_btn_bg3.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;width: 100%;border: 0;font-weight: bold;font-size: 2em;color: #2b2b2b;text-shadow: 3px 3px 0 #ffe900;letter-spacing: 2px;}
.coupon-right3 button.actived{background: url(../images/coupon2_s_center3.png) no-repeat top,url(../images/coupon2_s_btn_b3.png) no-repeat bottom,url(../images/coupon2_s_btn_bg3.png) repeat-y;background-size: 100% auto;padding:15% 15px 10%;color: #fff;text-shadow: 3px 3px 0 #595757;}

/*notice*/
.notice{ font-weight:400;text-align: left; background-color: #FFF0C6;}
.notice h4{ font-size: 1.6rem;}
.notice p span{background: #FC90EF;display: inline-block;border-radius: 25px;padding: 3px 10px;}


footer{padding-bottom:15px; font-size: 0.9rem;font-weight: 400;}
.footer_link a{display: inline-block;width: 32px;height: 32px;background: #333;border-radius: 30px;color: #fff;margin-right:10px;vertical-align: middle;line-height: 29px;text-align: center;}
.footer_link a:hover{ background:#33b5e2;}


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

	.footer_link a{margin-right:0px;margin-left: 10px;}
}

@media (min-width: 768px) {/*md*/

	.info-frame{ border-radius: 50em;}
	.info h2{ font-size: 1.5rem; }
	.info-frame img{ width: 75%;}
	.info-frame .text{  font-size: 1.2rem; text-align: left;}

    /*課程*/
	.classitem h3{font-size: 2.4rem;}
	.classitem h4{ font-size: 1.6rem;}
	.card .card-body{padding:0 0 5px;}
	.card .card-body h5{ font-size: 1.4rem; line-height: 1.3; font-weight: 700;}
	.card .card-body .text{ font-size: 1rem; line-height: 1.4;}
	.card .money{ font-size: 2rem; line-height: 1.2;}	
	.card .money span{font-size: 1.6rem;}
	.card .btn-primary { font-size: 1.2rem; }


	/*coupon*/
	.coupon h2{ font-size: 1.7em;}
	.coupon h2 span{font-size: 1.1em;}
	.coupon h2 big{color:#ef4b67;font-style: italic;font-family: sans-serif;}
	
	.coupon-left{background: url(../images/coupon_text_l.png) no-repeat left,url(../images/coupon_text_bg.png) repeat-x;background-size:auto 100%;padding: 20px 5% 20px 10%;}
	.coupon-right{display: flex;align-content: stretch;height: 100%;}
	.coupon-right button{background: url(../images/coupon_center.png) no-repeat left,url(../images/coupon_btn_r.png) no-repeat right,url(../images/coupon_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;color: #2b2b2b;}
	.coupon-right button.actived{background: url(../images/coupon2_center.png) no-repeat left,url(../images/coupon2_btn_r.png) no-repeat right,url(../images/coupon2_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;}	

	.coupon-left2{background: url(../images/coupon_text_l2.png) no-repeat left,url(../images/coupon_text_bg.png) repeat-x;background-size:auto 100%;padding: 20px 5% 20px 10%;}
	.coupon-right2{display: flex;align-content: stretch;height: 100%;}
	.coupon-right2 button{background: url(../images/coupon_center2.png) no-repeat left,url(../images/coupon_btn_r2.png) no-repeat right,url(../images/coupon_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;color: #2b2b2b;}
	.coupon-right2 button.actived{background: url(../images/coupon2_center2.png) no-repeat left,url(../images/coupon2_btn_r2.png) no-repeat right,url(../images/coupon2_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;}	

	.coupon-left3{background: url(../images/coupon_text_l3.png) no-repeat left,url(../images/coupon_text_bg.png) repeat-x;background-size:auto 100%;padding: 20px 5% 20px 10%;}
	.coupon-right3{display: flex;align-content: stretch;height: 100%;}
	.coupon-right3 button{background: url(../images/coupon_center3.png) no-repeat left,url(../images/coupon_btn_r3.png) no-repeat right,url(../images/coupon_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;color: #2b2b2b;}
	.coupon-right3 button.actived{background: url(../images/coupon2_center3.png) no-repeat left,url(../images/coupon2_btn_r3.png) no-repeat right,url(../images/coupon2_btn_bg.png) repeat-x;background-size: auto 100%;padding:15px 12% 15px 20%;}	

	.notice h4{ font-size: 1.4rem;}

}


	@media (min-width: 992px) { /*lg*/
		header{ background: url(../images/head-bg.png) bottom; background-size:cover;}

		.info h2{ font-size: 1.5rem;}
		.info-frame img{ width: 70%;}
		.info-frame .text{  font-size: 1.4rem; text-align: left;}		
		
		
		/*課程*/
		.classitem h3{font-size: 2.4rem;}
		.classitem h4{ font-size: 1.6rem;}
		.card .card-body{padding:0 0 5px;}
		.card .card-body h5{ font-size: 1.8rem; }
		.card .card-body .text{ font-size: 1.2rem; }
		.card .btn-primary { font-size: 1.4rem;}
	
		.coupon{margin-top: 20px;}
		.coupon h2{font-size: 2em;}
		.coupon-right button{font-size: 2.4em;}
		.notice{font-size: 1.25em;}
	}


	@media (min-width: 1200px){ /*xl*/
		.wrap {	font-size: 13pt;}
		.info h2{ font-size: 2.2rem;}
		.info-frame img{ width: 60%;}
		.info-frame .text{  font-size: 1.5rem; text-align: left;}	
		
		.class-bg{ background: url(../images/class-bg.png) no-repeat center ;background-size:cover; padding: 80px 0 0;}
		.classitem h3{padding:25px 15px 25px;font-size: 2.5em;}
		.card .card-body h5{ font-size: 2.1rem; }
		.card .card-body .text{ font-size: 1.5rem; }
		.card .btn-primary { font-size: 1.8rem;}
		.card .money{ font-size: 2.8rem; }	
		.card .money span{font-size: 1.6rem;}

		.notice { font-size: 1.3rem;}
		.notice h4{ font-size: 1.8rem;}



		footer{font-size: 1rem;}

	}