@charset "utf-8";
/* CSS Document */
body {
	background-repeat: repeat;
	font-family: "微軟正黑體", sans-serif;
}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
*{
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
	}
.NO{ display:none;}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.myAni.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.myAni.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.myAni.infinite.pulse {
/*animation-delay: 2s;*/
-webkit-animation-name: pulse !important;
animation-name: pulse !important;
}

/*表頭表尾 請勿------------------------------------砍*/
.top, .footer{
    line-height: 0px; width:100%;
}
.top, .footer{
    z-index: 99;
    position: relative;
}

.width1280{max-width:1280px;min-width:280px;height:auto;margin:0 auto;}
.BRR{ height:1px;}
/*BANNER*/
.banner{position:relative;overflow: hidden;}
img.banner001{-webkit-animation-delay: 1.5s;animation-delay: 2s;}
img.pic05{-webkit-animation-delay: 1s;animation-delay: 0.6s;}
img.pic04{-webkit-animation-delay: 1.2s;animation-delay: 0.3s;}

.fill{-webkit-animation-delay: 2s;animation-delay: 0.6s;}
img.banner001 { position:absolute;}


/*表單區*/
.fill{width: 100%;text-align:center;z-index:100;padding-top: 1%;padding-bottom: 3%;overflow: hidden;}
.fill h2{color: #4194c4;text-align:center;line-height: 50px;font-weight:bold;padding-top: 15px;font-size: 44px;}
.fill h3{color:#FFF;text-align:center;line-height: 5px;font-weight:bold;font-size: 38px;padding-bottom: 21px;}
.fill p{color: #24324b;text-align:center;line-height: 18px;font-size: 23px;padding-bottom: 21px;letter-spacing: 5px;}
.fill .share{ display:block; width:280px; margin:0 auto;}
.fill .share ul{}
.fill .share ul li{float:left;list-style:none;padding-left: 15px;padding-top: 26px;}
.fill #sBut{ display:block; max-width:400px; height:auto; min-width:280px; margin:0 auto; width:100%}
.fill .go_button{-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */animation-duration: 2s;max-width: 253px;height:auto;min-width:150px;margin: 15px auto;width:90%;}
.fill .statement{color: #4194c4;line-height:40px;}
.fill .statement a{color: #24324b;}
.fill .statement a:hover{ color:#FFF;}
.fill .form-control{margin-bottom: 13px;margin-left: 0;width: 95%;background-color: #d2e2eb75;border: 0;border-radius: 50px;height: 47px;font-size: 17px;}

.bg{ background-image: url(../images/bg02.png); background-repeat:repeat;}
/*實體補習班的3大學習窘境*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
.study{text-align:center;padding-top:0px;padding-bottom:25px;overflow: hidden;}
.study h1{background-image: url(../images/bg01.png);background-repeat:repeat;line-height: 1.2em;color: #000000;margin-bottom:0px;width: 51%;height: 40%;text-align: left;padding-left: 13%;padding-top: 2%;position: absolute;font-size: 3.4em;font-weight: bold;}
.study p{color:#333;font-size: 21px;max-width: 290px;display:block;margin:0 auto;line-height:32px;}
img.PIC{max-width:395px;height:auto;min-width: 155px;width: 97%;margin-bottom: 13px;margin-top: 6%;}

/*解決你的學習盲點*/
.save{text-align:center;padding-top: 4%;padding-bottom:0px;overflow: hidden;margin-left: 0;margin-right: 0;}
.save h1{background-image: url(../images/bg01.png);background-repeat:repeat;margin-top: 5%;line-height: 1.2em;color: #000000;margin-left: 16%;width: 550px;height: 50%;text-align: left;padding-left: 66px;padding-right: 55px;padding-top: 55px;position: absolute;font-size: 3.4em;font-weight: bold;}
.save p{color:#333;font-size: 24px;max-width: 400px;display:block;margin: 0px auto;line-height:32px;text-align: left;text-decoration:underline;margin-left: 66px;}
.space{display:block;height: 280px;}
.save .tex{
	position: absolute;
	margin-top: 12%;

	margin-left: 16%;
	width: 550px;
	height: 60%;
	text-align: left;
	padding-top: 55px;
	z-index: 10;
}
img.PIC04{
	max-width:748px;
	height:auto;
	min-width: 200px;
	width: 97%;
	margin-top: -37%;
	margin-left: -81%;
	z-index: 10;
	position: absolute;
}
img.PIC05{max-width:748px;height:auto;min-width: 200px;width: 97%;/* margin-bottom: 13px; */margin-top: -39%;z-index: 9;}
img.banner005{max-width:419px;height:auto;margin-left: 49%;margin-top: 1%;}

/*巨匠線上真人獨家3大之最*/
.point{text-align:center;padding-top: 0px;padding-bottom:25px;overflow: hidden;}
.point h1{background-image: url(../images/bg01.png);background-repeat:repeat;margin-top: 2%;line-height: 1.2em;color: #000000;margin-bottom:0px;width: 51%;height: 30%;text-align: left;padding-left: 13%;padding-right: 1%;padding-top: 2%;position: absolute;font-size: 3.4em;font-weight: bold;}
.point p{color:#333;font-size: 20px;max-width: 79%;display:block;margin:0 auto;line-height: 1.4;margin-bottom: 12%;}
img.point{max-width:325px;height:auto;min-width: 150px;margin-top: 15%;margin-bottom: -2%;}
img.banner006{max-width:854px;height:auto;margin-left: 49%;margin-top: 1%;}

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width: 1601px) {
.fill{position: relative;width: 100%;height:auto;z-index: 12;}

/*BANNER*/
img.banner_big{ width: 100%;height: auto;}
img.banner_min{ display:none;}
img.banner001{display: block;top: 20%;left: 44%;z-index: 5;max-width: 524px;height:auto;width: 31vw;}

}

/*	↓↓↓↓	ipad 橫向 w1024 ↓↓↓↓	 */
@media (min-width: 1024px) and (max-width:1600px) {
.width1280{
	width:80%;
}
/*BANNER*/
img.banner_big{ width: 100%;height: auto;}
img.banner_min{ display:none;}
img.banner001{display: block;top: 15%;left: 46%;z-index:1;height:auto;width: 34vw;}


.fill .form-control{width: 91%;}	
.study h1{background-image: url(../images/bg01.png);background-repeat:repeat;margin-top: 2%;line-height: 1.2em;color: #000000;margin-bottom:0px;width: 62%;height: 40%;text-align: left;padding-left: 9%;padding-top: 2%;position: absolute;font-size: 3em;}
.study p{color:#333;font-size: 20px;width: 95%;display:block;margin:0 auto;line-height: 1.4;}
.save h1{background-image: url(../images/bg01.png);background-repeat:repeat;margin-top: 5%;line-height: 1.2em;color: #000000;margin-left: 7%;width: 45%;height: 55%;text-align: left;padding-left: 5%;padding-right: 3%;padding-top: 2%;position: absolute;font-size: 3em;}
.save p{color:#333;font-size: 22px;max-width: 350px;line-height:32px;text-align: left;text-decoration:underline;margin-left: -7%;}
.point h1{background-image: url(../images/bg01.png);background-repeat:repeat;margin-top: 2%;line-height: 1.2em;color: #000000;margin-bottom:0px;width: 62%;height: 40%;text-align: left;padding-left: 9%;padding-right: 1%;padding-top: 2%;position: absolute;font-size: 3em;}
img.PIC{max-width:395px;height:auto;width: 89%;margin-bottom: 13px;margin-top: 14%;}
img.point{max-width:325px;width: 89%;height:auto;min-width: 150px;margin-top: 23%;margin-bottom: -2%;}
img.banner006{max-width: 387px;height:auto;margin-left: 62%;margin-top: 2%;}
img.banner005{max-width: 300px;height:auto;margin-left: 56%;margin-top: 1%;}
img.PIC04{position: absolute;max-width:748px;height:auto;min-width: 200px;width: 120%;top: -34%;left: 86%;z-index: 10;}
img.PIC05{max-width:748px;height:auto;width: 120%;margin-top: -64%;margin-left: -12%;}	
}

/*	↓↓↓↓	ipad 直向 w768 ↓↓↓↓	 */
@media (min-width: 768px) and (max-width:1023px) {	

/*.BRR{ display: block;}*/
.banner{position:relative;overflow: hidden;}
.fill{ position: relative;-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px; z-index:1}
.fill h2{ padding-top:0px;}
.fill .form-control{margin-bottom: 13px;margin-left: 41px;width: 89%;}

/*BANNER*/
img.banner_big{	display:none;}
img.banner_min{width: 100%;max-width:960px;min-width:280px;height: auto;}
img.banner001{display: block;top: 28%;left: 46%;z-index:1;max-width:730px;height:auto;width: 57vw;}


.study h1{width: 92%;height: 26%;text-align: left;padding-left: 12%;padding-top: 3%;position: absolute;font-size: 3.4em;}
.study p{color:#333;font-size: 21px;max-width: 290px;display:block;margin:0 auto;line-height:32px;margin-bottom: 10%;}
.save h1{margin-left: 17%;width: 66%;height: 64%;padding-left: 6%;padding-right: 3%;padding-top: 4%;font-size: 3.4em;}
.save p{font-size: 24px;max-width: 400px;display:block;margin: 9px auto;line-height:32px;text-align: left;text-decoration:underline;margin-left: 10%;}
.point h1{width: 92%;height: 26%;text-align: left;padding-left: 12%;padding-top: 2%;position: absolute;font-size: 3.4em;}
.point p{color:#333;font-size: 21px;max-width: 290px;display:block;margin:0 auto;line-height:32px;margin-bottom: 12%;}
.space{display:block;height: 220px;}
.space02{display:block;height: 200px;}
	
.save .tex {
    margin-top: 19%;
    margin-left: 16%;
    width: 550px;
    height: 60%;
    text-align: left;
    padding-top: 55px;
}
	
img.PIC04{width: 89%;margin-bottom: 10%;margin-top: 34%;margin-left: -82%;}
img.PIC05{width: 93%;margin-bottom: 14px;margin-top: 28%;margin-left: -6%;}
img.PIC{max-width:395px;height:auto;width: 89%;margin-bottom: 13px;margin-top: 0%;}
img.point{max-width:325px;width: 89%;height:auto;min-width: 150px;margin-top: -2%;margin-bottom: -2%;}
img.banner005{display:none;}
img.banner006{display:none;}

}

/* ↓↓↓↓ 手機尺寸, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 321px) and (max-width:767px) {
/*手機板的FOOTER------別刪除*/
.FOOTER_frame{ height:450px;}	
/*BANNER*/
img.banner_big{	display:none;}
img.banner_min{width: 100%;max-width:960px;min-width:280px;height: auto;}
img.banner001{display: block;top: 27%;left: 44%;z-index:1;max-width:730px;height:auto;width: 64vw;}

.space{display:block;height: 25%;}
.space02{display:block;height: 170px;}
.study h1{width: 325px;height: 36%;padding-left: 8%;padding-right: 9%;padding-top: 5%;font-size: 2.4em;}
.study p{color:#333;font-size: 21px;max-width: 264px;display:block;margin:0 auto;line-height:32px;margin-bottom: 10%;}
.save h1{margin-left: 12%;width: 77%;height: 83%;padding-left: 9%;padding-right: 7%;padding-top: 5%;font-size: 2.5em;}
.save p{font-size: 20px;width: 78%;margin: 0 auto;line-height: 27px;text-align: left;text-decoration:underline;margin-left: 7%;}
.point h1{width: 325px;height: 27%;padding-left: 8%;padding-right: 6%;padding-top: 5%;font-size: 2.4em;}
.point p{color:#333;font-size: 21px;max-width: 290px;display:block;margin:0 auto;line-height:32px;margin-bottom: 12%;}
.space{display:block;height: 170px;}

.save .tex {
    position: absolute;
    margin-top: 33%;
    margin-left: 16%;
    text-align: left;
    padding-top: 55px;
    z-index: 10;
    width: 78%;
}

.fill {
    width: 100%;
    padding: 4%;
    padding-bottom: 3%;
}	
.fill h2 {
    line-height: 1.2;
    padding-top: 15px;
    font-size: 37px;
    padding: 0 7%;
}
.fill p {
    line-height: 1.2;
    font-size: 18px;
    padding-bottom: 21px;
    letter-spacing: 1px;
}
.fill .form-control {
    width: 100%;
}
img.PIC04{width: 100%;margin-bottom: 10%;margin-top: -111%;margin-left: -48%;}
img.PIC05{width: 105%;margin-bottom: 14px;margin-top: 54%;margin-left: 1%;}
img.PIC{max-width:395px;height:auto;width: 75%;margin-bottom: 13px;margin-top: 6%;}
img.point{max-width:325px;width: 75%;height:auto;min-width: 150px;margin-top: 5%;margin-bottom: -2%;}
img.banner005{display:none;}
img.banner006{display:none;}

}

/* ↓↓↓↓ 手機尺寸, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 300px) and (max-width:320px) {
/*手機板的FOOTER------別刪除*/
.FOOTER_frame{ height:450px;}	
/*BANNER*/
img.banner_big{	display:none;}
img.banner_min{width: 100%;max-width:960px;min-width:280px;height: auto;}
img.banner001{display: block;top: 28%;left: 43%;z-index:1;max-width:730px;height:auto;width: 64vw;}

.space{display:block;height: 25%;}
.space02{display:block;height: 170px;}
.study h1{width: 91%;height: 36%;padding-left: 12%;padding-top: 3%;font-size: 2.2em;}
.study p{color:#333;font-size: 19px;width: 244px;display:block;margin:0 auto;line-height: 1.3;margin-bottom: 10%;}
.save h1{margin-left: 12%;width: 79%;height: 83%;padding-left: 11%;padding-right: 7%;padding-top: 5%;font-size: 2.2em;}
.save p{font-size: 19px;width: 201%;display:block;margin: 9px auto;line-height: 27px;text-align: left;text-decoration:underline;margin-left: 5%;}
.point h1{width: 98%;height: 31%;padding-left: 12%;padding-right: 5%;padding-top: 5%;font-size: 2.2em;}
.point p{color:#333;font-size: 19px;width: 276px;display:block;margin:0 auto;line-height: 1.3;margin-bottom: 12%;}
.space{display:block;height: 170px;}

.save .tex {
    position: absolute;
    margin-top: 30%;
    margin-left: 22%;
    text-align: left;
    padding-top: 55px;
    z-index: 10;
    width: 30%;
}
.fill {
    width: 100%;
    padding: 4%;
    padding-bottom: 3%;
}	
.fill h2 {
    line-height: 1.2;
    padding-top: 15px;
    font-size: 37px;
}
.fill p {
    line-height: 1.2;
    font-size: 18px;
    padding-bottom: 21px;
    letter-spacing: 1px;
}
.fill .form-control {
    width: 100%;
}
	
img.point {
    height: auto;
    width: 83%;
    margin-top: 15%;
    margin-bottom: -2%;
}
img.PIC04{width: 100%;margin-bottom: 10%;margin-top: -123%;margin-left: -48%;}
img.PIC05{width: 105%;margin-bottom: 50px;margin-top: 83%;margin-left: 1%;}
img.PIC{max-width:395px;height:auto;width: 75%;margin-bottom: 13px;margin-top: 6%;}
img.banner005{display:none;}
img.banner006{display:none;}

}