﻿@charset "utf-8";
/* CSS Document */
body {
	background-repeat: repeat;
	font-family: "Microsoft YaHei" ! important; 
} 
.wrapper{
	position: relative;
	/*background-image: url(images/banner002.jpg);*/
	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;}
.myButton {
  background-color:#44c767;
  -moz-border-radius:28px;
  -webkit-border-radius:28px;
  border-radius:28px;
  display:inline-block;
  cursor:pointer;
  color:#ffffff;
  font-family:Arial;
  font-size:17px;
  padding:9px 33px;
  text-decoration:none;
}
.myButton:hover {
  background-color:#5cbf2a;
}
.myButton:active {
  position:relative;
  top:1px;
}

/*BANNER 進場delay時間、浮動*/
.banner{ position:relative; overflow:hidden;}
img.banner001, img.banner002, img.banner003, img.banner004{position:absolute;}
img.banner_big{-webkit-animation-delay:0.5s; /* Chrome, Safari, Opera */ animation-delay:0.5s; -webkit-animation-duration:0.5s; /* Chrome, Safari, Opera */ animation-duration:0.5s;}
img.banner_min{-webkit-animation-delay:0.5s; /* Chrome, Safari, Opera */ animation-delay:0.5s; -webkit-animation-duration:0.5s; /* Chrome, Safari, Opera */ animation-duration:0.5s;}
img.banner001{-webkit-animation-delay:0.7s; /* Chrome, Safari, Opera */ animation-delay:0.7s;}
img.banner002{-webkit-animation-delay:1.5s; /* Chrome, Safari, Opera */ animation-delay:1.5s;}
img.banner003{-webkit-animation-delay:1.5s;  /*Chrome, Safari, Opera  */ animation-delay:1.5s;}
img.banner004{-webkit-animation-delay:1.3s; /* Chrome, Safari, Opera */ animation-delay:1.3s;}


/*表單區*/
.fill{text-align:center; z-index:100; padding-top:10px; padding-bottom:10px;width:100%; height:auto; background-image:url(../images/Yellow_background.jpg);}
.fill h2{text-align:center;line-height: 25px;padding-bottom: 10px;font-style: italic; font-weight:bold; color:#613d19;}
.fill h2 .important{text-align:center;line-height: 25px; font-weight:bold;margin-top:0px; font-style: italic; color:#f6d258}
.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:450px; 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:280px; height:auto; min-width:150px; margin:0 auto; margin-top:10px; width:90%}
.fill .statement{ color:#595959; line-height:40px;}
.fill .statement a{ color:#595959; text-decoration: none;}
.fill .statement a:hover{ color:#337ab7;}
.fill .form-control{margin-bottom:5px;margin-left: 7px; width:98%;}

/*PIC通用*/
img.pic{ max-width:600px; width:90%; height:auto; margin:0 auto; display:block;}
img.pic2{ max-width:300px; width:65%; height:auto; margin:0 auto; display:block; border:15px #84cbff solid}
img.pic3{ max-width:300px; width:65%; height:auto; margin:0 auto; display:block; border:15px #84cbff solid}
img.pic4{ max-width:120px; width:100%; height:auto; margin:0 auto;}
img.pic5{ max-width:50px; width:100%; height:auto; margin:0 auto;}
/**************以下開始為內文部分**************/

/*為什麼你需要以日語和西班牙語為目標*/
.intend{ background-size:100%; background-position:top center; background-color:#f9f490; background-repeat:no-repeat; text-align:center; }
.intend .title1{ color:#204ae4; font-size:38px; font-style:italic;font-weight: bold; padding-bottom:25px;}
.intend .title2{ color:#2f9410; font-size:38px; font-style:italic;font-weight: bold; padding-bottom:25px;}
/*.intend .title .important{color:#063271}*/
.intend .box1, .intend .box2{padding-top:25px;background-image: url(../images/c_bg.jpg); }
.intend .box2{ background-image: url(../images/d_bg.jpg);}
.intend p{ font-size:20px;color: 0a0a0a;margin:20px 43px;}
.intend h3{font-size: 30px;font-weight: bold;color: #790d0d;}


/*在家學西語優勢*/
.Process{ text-align:center;}
.Advantage{text-align:center; background-image:url(../images/e_bg.jpg);padding-bottom:25px;}
.Advantage .title{ color:#fe6305; font-size:38px; font-style:italic;font-weight: bold; padding-top:25px; padding-bottom:25px;}
.Advantage h2{font-weight: bold; color:#f2f45a; font-size:24px; }
.Advantage p{ color:#ffffff; font-size:17px; padding-left:25px; padding-right:25px; }
.table-blue {background-color: #3a6a92;}
.table-gray{background-color: #343431;}
.onandout td h3{font-size: 20px;color: #f58d06; }


/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width:900px) {
/*BANNER*/
/*表單區*/
.fill h2{ font-size:38px}
.fill h2 .important{ font-size:35px}
.banner_big{width: 100%;height: auto; display:block;}
.banner_min{ display:none;}
img.banner001{display: block;top: 1%;left: 26.5%;z-index: 5;max-width: 880px;height:auto;width: 46vw;}
img.banner002{display: block;top: 50%;left: 28%;z-index: 5;max-width: 680px;height:auto;width: 30vw;}
img.banner003{display: none;}
img.banner004{display: block;bottom: -6%;right: 15.5%;z-index: 5;max-width: 500px;height:auto;width: 26vw;}
.BRR{ display:none;}

/*箭頭*/
.arrow{ transform:rotate(0deg); padding-top:50px;}

/*勝的圖案*/
.pic02_b{margin-top:-15%; margin-right:-85%; width:80px; height:80px}
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 280px) and (max-width:959px) {
/*BANNER*/
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 1%;left: 1.5%;z-index: 5;max-width: 880px;height:auto;width: 95vw;}
img.banner002{display: none;}
img.banner003{display: block;top: 34%;left: 4%;z-index: 4;max-width: 520px; height:auto;width: 63vw;}
img.banner004{display: block;bottom: -3%;right: 0%;z-index: 6;max-width: 907px;height:auto;width: 64vw;}
/*表單*/
.fill{text-align:center; z-index:100; padding-top:10px; padding-bottom:10px;width:100%; height:auto; background-image:url(../images/Yellow_background_min.jpg);}
.fill h2{ font-size:28px}
.fill h2 .important{ font-size:28px; line-height:35px;}
.BRR{ display: block;}
/*為什麼你需要以日語和西班牙語為目標*/
.intend{ background-size:100%; background-position:top center; background-color:#f9f490; background-repeat:no-repeat; text-align:center; }
.intend .title1{ color:#204ae4; font-size:26px; font-style:italic;font-weight: bold; padding-bottom:25px;}
.intend .title2{ color:#2f9410; font-size:26px; font-style:italic;font-weight: bold; padding-bottom:25px;}
.intend .box1, .intend .box2{padding-top:25px;background-image: url(../images/c_bg.jpg); }
.intend .box2{ background-image: url(../images/d_bg.jpg);}
.intend p{ font-size:18px;color: 0a0a0a;margin:20px 43px;}
.intend h3{font-size: 22px;font-weight: bold;color: #790d0d;}
/*在家學西語優勢*/
.fadeIn .title{font-size: 28px;}

/*箭頭*/
.arrow{ transform:rotate(90deg)}

/*勝的圖案*/
.pic02_b{margin-top:-85%; margin-right:-85%; width:40px; height:40px}



/*手機板的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) {


}
