@charset "utf-8";
/* CSS Document */
body {
	background-color:#fff;
	font-family: "Microsoft YaHei" ! important; 
} 
.wrapper{
	position: relative;
	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.banner001{-webkit-animation-delay:0.3s; /* Chrome, Safari, Opera */ animation-delay:0.3s;}
img.banner002{-webkit-animation-delay:0.5s; /* Chrome, Safari, Opera */ animation-delay:0.5s;}
img.banner003{-webkit-animation-delay:0.7s; /* Chrome, Safari, Opera */ animation-delay:0.7s;}
img.banner004{-webkit-animation-delay:0.7s; /* Chrome, Safari, Opera */ animation-delay:0.7s;}


/*表單區*/
.fill{text-align:center;z-index:100;padding-top:10px;padding-bottom:10px;width:100%;height:auto;}
.fill h2{text-align:center;color:#333366;font-weight:bold;}
.fill h2 .red{color:#990000;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: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:289px; height:auto; min-width:150px; margin:0 auto; width:90%; padding-top:5px;}
.fill .statement{ color:#FFF; line-height:40px;}
.fill .statement a{ color:#FFF; text-decoration: underline;}
.fill .statement a:hover{ color:#FFF;}
.fill .form-control{margin-bottom:5px;margin-left: 7px; width:98%;}

/*PIC通用*/
img.pic{ max-width:296px; margin:0 auto;display:block;height:auto;}
img.pic01{max-width: 330px;margin:0 auto;display:block;height:auto;}
/**************以下開始為內文部分**************/

/*四招*/
.four{background-image:url(../images/bg.jpg);background-repeat:repeat; background-position:center;overflow:auto;padding-left:4px; padding-right:4px;}
.four .content{}
.four .content h2{text-align:center;font-weight:bold;color:#0068b7; color:#d16650; margin-bottom:5px; font-size:22px;}
.four .content p{text-align:center;color:#0068b7;  color:#6b6b6b;font-size:18px;}
.content .box {}/*第一列圖與第二列圖之間的間距*/

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width:900px) {
.BRR{ display:none;}
/*BANNER*/
.banner_big{width: 100%;height: auto; display:block;}
.banner_min{ display:none;}
img.banner001{display: block;top: 2%;left: 14%;z-index: 3;/*max-width: 1169px;*/height:auto;width: 61vw;}
img.banner002{display: block;top: 25%;left: 32.5%;z-index: 6;/*max-width: 731px;*/height:auto;width: 37vw;}
img.banner003{display: block;top: 50%;left: 68%;z-index: 6;/*max-width: 191px;*/height:auto;width: 9vw;}
img.banner004{display: block;top: 20%;left: 14%;z-index: 4;/*max-width: 791px;*/height:auto;width: 38vw;}
img.banner005{display: block;top: 75%;left: 40.5%;z-index: 5;max-width: 410px;height:auto;width: 22vw;}

/*表單區*/
.fill{ background-image:url(../images/fill_bg01.jpg); background-repeat:no-repeat;background-size: cover;background-position: center bottom;}
.fill h2{ font-size:26px;}
.fill h2 .red{ font-size:35px;}

/*PIC通用*/
img.pic{ width:93%;}
img.pic01{width:93%;;}

/*四招*/
.four {padding-top: 50px;padding-bottom: 50px;}
.content .box { padding-bottom:30px;}/*第一列圖與第二列圖之間的間



/*箭頭*/
.arrow{ transform:rotate(0deg); padding-top:50px;}
}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
.BRR{ display: block;}
@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: 8.5%;left: -7%;z-index: 5;max-width: 1169px;height:auto;width: 99vw;}
img.banner002{display: block;top: 21%;left: 24.8%;z-index: 5;max-width: 731px;height:auto;width: 63vw;}
img.banner003{display: block;top: 61%;left: 47%;z-index: 6;max-width: 191px;height:auto;width: 19vw;}
img.banner004{display: block;top: 35%;left: -5%;z-index: 5;max-width: 791px;height:auto;width: 81vw;}
img.banner005{display: block;top: 73%;left: 11.8%;z-index: 15;max-width: 410px;height:auto;width: 43vw;}

/*表單區*/
.fill{ background-image:url(../images/fill_bg02.jpg); background-repeat:repeat;}
.fill h2{ font-size:23px;}
.fill h2 .red{ font-size:30px;}

/*PIC通用*/
img.pic{ width:100%;}
img.pic01{width:100%;}

/*四招*/
.four {padding-top: 10px;padding-bottom: 10px;}
.content .box { padding-bottom:8px;}/*第一列圖與第二列圖之間的間


/*箭頭*/
.arrow{ transform:rotate(90deg)}

/*手機板的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) {


}