@charset "utf-8";
/* CSS Document */

body {
	background-repeat: repeat;
font-family: Arial, 'Meiryo', "微軟正黑體", "Microsoft JhengHei", sans-serif;
	 background-image:url(../images/bg.jpg); 
} 
.wrapper{position:relative; background-image:url(../images/gray_bg.png); overflow:hidden;}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.move{-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;}
.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;
}
/*很多物件通用*/
.BRR{ height:0px;}
.width1280{ max-width:1280px; min-width:280px; height:auto; margin:0 auto;}
.topICON{ text-align:center; padding-top:20px; padding-bottom:20px;}


/*BANNER*/
.banner{ position:relative; overflow:hidden;}
img.banner001, img.banner002, img.banner003, img.banner004, img.banner005,img.banner006{position:absolute;}
img.banner001{-webkit-animation-delay: 0s; /* Chrome, Safari, Opera */ animation-delay: 0s;}
img.banner002{-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */ animation-delay:0.3s;}
img.banner003{-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}
img.banner004{-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}
img.banner005{-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}
img.banner006{-webkit-animation-delay: 0.6s; /* Chrome, Safari, Opera */ animation-delay:0.6s;}

/*表單區*/
.fill{text-align:center;z-index:100;padding-top: 9px;padding-bottom:25px;width:100%;height:auto; background-image: url(../images/28.jpg);;}
.fill h2{text-align:center;line-height: 35px; color:#f2e394;font-weight: bold;}
.fill h2 .important{text-align:center;line-height: 25px; font-weight:bold;margin-top:0px;font-style: italic; color:#FFF;}
.fill h2 .Secondary{ color:#FFF; font-weight:bold;}
.fill .share{ display:block; width:280px; margin:0 auto;}
.fill .share ul{}
.fill .share ul li{ float:left; list-style:none; padding-left:12px;}
.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:200px; height:auto; min-width:150px; margin:0 auto; width:90%}
.fill .statement{ color:#333; line-height:40px;}
.fill .statement a{ color:#000; text-decoration: underline;}
.fill .statement a:hover{ color:#000;}
.fill .form-control{margin-bottom:5px;margin-left: 7px; width:98%;}
/*PIC通用*/
img.pic{ max-width:300px; width:80%; height:auto; margin:0 auto; display:block;}
img.pic2{ max-width:600px; width:100%; height:auto; margin:0 auto; display:block;}
img.pic3{ max-width:200px; width:100%; height:auto; margin:0 auto; display:block;}
/*為何你該練好英文口說*/
.SpeakEnglish{text-align: center; background-image:url(../images/brickwall.png);padding-top:20px;padding-bottom: 20px;}
.SpeakEnglish h2{font-style: italic; font-weight: bold;margin-top: 0;color:#0075a9;}
.SpeakEnglish h2 .important{color: #ff733f;}
.SpeakEnglish h3{ color:#0075a9;margin-top: 0;font-weight: bold;letter-spacing:20PX}
.SpeakEnglish p{color: #000; font-size:17px;padding-left:30px; padding-right:30px;}

/*不用洪荒之力，跟著線上真人這樣學！*/
.Learn{text-align: center;padding-bottom: 60px;background-color:#ffe690;}
.Learn2{text-align: center;padding-bottom: 60px;padding-top: 50px;background-color:#d4d984;}
.title{background-color:#ec4863;padding-top: 15px;padding-bottom: 15px;margin-bottom: 0px;}
.Learn .title h2{ font-weight: bold;margin-top: 0;color:#FFF;margin-bottom:0px;}
.Learn .title h2 .important{color:#ffff9d}
.Learn h4, .Learn2 h4{color:#d90000; font-weight: bold;margin-top: 0;padding-bottom:20px;line-height:35px;}
.Learn h3, .Learn2 h3{color:#bd4832; font-weight: bold;margin-top:10px;margin-bottom: 10px;font-size:22px;}
.Learn h5, .Learn2 h5{color:#000; font-weight: bold;margin-top:5px;font-size:20px;}
.Learn p, .Learn2 p{ padding-left:30px; padding-right:30px;font-size:18px; padding-bottom:35px;}
.triangle-bottom {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 40px 50px 0 50px;
    border-color: #ec4863 transparent transparent transparent;margin-bottom:25px;
}
.myButton {
	background-color:#ec4863;
	-moz-border-radius:28px;
	-webkit-border-radius:28px;
	border-radius:28px;
	border:1px solid #ffffff;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:22px;
	font-weight:bold;
	/* font-style:italic; */
	padding:16px 30px;
	text-decoration:none;
	margin-left:20px;
	margin-right:20px;
}
.myButton:hover {
	background-color:#ffffff;text-decoration:none;
}



/**************以上開始為內文部分--結束**************/

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width:900px) {
/*BANNER*/
/*表單區*/
.fill{bottom:0%;}
.fill h2{ font-size:28px}
.fill h2 .important{ font-size:28px}
img.banner_big{	width: 100%;height: auto; display:block;}
img.banner_min{ display:none;}
img.banner001{display: block;bottom: 0%;left: 0%;z-index: 5;max-width:1920px;height:auto;width: 100vw;}
img.banner002{display: block;bottom: 1%;left: 22%;z-index: 6;max-width:815px;height:auto;width: 43vw;}
img.banner003{display: block;bottom: 5%;right: 9%;z-index: 6;max-width:390px;height:auto;width: 21vw;}
img.banner004{display: block;bottom: 6%;left: 8%;z-index: 7;max-width:460px;height:auto;width: 23.5vw;}
img.banner005{display: block;top: 2%;left: 7%;z-index: 5;max-width:1080px;height:auto;width: 57vw;}
img.banner006{display: block;bottom: 25%;right: 14%;z-index: 2;max-width:585px;height:auto;width: 31vw;}

/*標題通用*/
.title h2{ font-size:30px;}
.title h2 .important{font-size:30px;}
.BRR{ display:none;}

/*不用洪荒之力，跟著線上真人這樣學！*/
.Learn{background-image:url(../images/bg01.png);background-repeat:no-repeat;background-position:bottom left;}
.Learn2{background-image:url(../images/bg02.png);background-repeat:no-repeat;background-position:top right;}
.Learn h4, .Learn2 h4{ font-size:26px;}
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 280px) and (max-width:959px) {
/*BANNER*/
img.banner_big{	display:none;}
img.banner_min{ width: 100%;max-width:960px;
	min-width:280px;
	height: auto; display:block;}
img.banner001{display: block;bottom: 0%;left: 0%;z-index: 5;max-width:1920px;height:auto;width: 100vw;}
img.banner002{display: block;bottom: 0%;left: 29%;z-index: 6;max-width:815px;height:auto;width: 50vw;}
img.banner003{display: block;bottom: 5%;right: -8%;z-index: 6;max-width:390px;height:auto;width: 26vw;}
img.banner004{display: block;bottom: 7%;left: 1%;z-index: 7;max-width:460px;height:auto;width: 39vw;}
img.banner005{display: block;top: 7%;left: -2%;z-index: 5;max-width:1080px;height:auto;width: 114vw;}
img.banner006{display: block;bottom: 10%;right: -2%;z-index: 2;max-width:585px;height:auto;width: 50vw;}
.fill{}
.fill h2{ font-size:22px}
.fill h2 .important{ font-size:22px}
/*標題通用*/
.title h2{ font-size:25px;}
.title h2 .important{font-size:32px;}
.BRR{ display: block;}
/*不用洪荒之力，跟著線上真人這樣學！*/
.Learn{background-image: none}
.Learn2{background-image:none}
.Learn h4, .Learn2 h4{ font-size:24px;}


/*手機板的FOOTER------別刪除-------------------------------*/
.FOOTER_frame{ height:450px;}
}

/*========================================================*/
@media only screen and (max-width: 1280px) {

}
/*↓↓↓↓ *螢幕尺寸【大於於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 768px) {
}

/*↓↓↓↓ 	螢幕尺寸【大於】481時頁面顯示效果	↓↓↓↓ */
@media (min-width: 481px) {
}


/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {
}

/*↓↓↓↓ 螢幕尺寸【大於】1024時頁面顯示效果	↓↓↓↓ */
@media (min-width:1024px) {
}

/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1023px) {
}

@media only screen and (max-width: 1280px) {


}