@charset "utf-8";
/* CSS Document */
body {
	background-repeat: repeat;
	background-image:url(../images/grass.png);
	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:#150606;
  -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, img.banner005{position:absolute;}
img.banner001{-webkit-animation-delay:0.1s; /* Chrome, Safari, Opera */ animation-delay:0.1s;}
img.banner002{-webkit-animation-delay:0.3s; /* Chrome, Safari, Opera */ animation-delay:0.3s;}
img.banner003{-webkit-animation-delay:0.5s; /* Chrome, Safari, Opera */ animation-delay:0.5s;}
img.banner004{-webkit-animation-delay:0.7s; /* Chrome, Safari, Opera */ animation-delay:0.7s;}
img.banner005{-webkit-animation-delay:0.9s; /* Chrome, Safari, Opera */ animation-delay:0.9s;}


/*表單區*/
.fill{text-align:center; z-index:100; padding-top:10px; padding-bottom:25px;width:100%; height:auto; background-color:rgba(0,0,0,0.35);}
.fill h2{line-height: 1.5em;font-style: italic; color:#FFF ;margin-bottom:20px; font-weight:bold;}
.fill h2 .im_pink{margin-top:0px;color:#ffb6ad;}
.fill h2 .im_yellow{margin-top:0px;color:#fee300;}
.fill h3{ font-size:18px; text-decoration:underline; color:#FFF; font-style:italic;}
.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:300px; height:auto; min-width:150px; margin:0 auto; width:95%; margin-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%;}


/**************以下開始為內文部分**************/
/*標題用*/
.title{ text-align:center; margin:0 auto; padding-left:7px; padding-right:7px;}
.title h2{font-style:italic;font-weight: bold;font-size:28px;text-shadow:0px 0px 20px #000;letter-spacing: 1.5px;border:1px solid #ff9fe3;max-width:600px;min-width:170px;line-height:2em;margin:0 auto;}
.title.first h2{color:#ff9fe3;border:1px solid #ff9fe3;max-width:600px;min-width:170px;}
.title.second h2{color:#fff;border:1px solid #fff;max-width:600px;min-width:170px;}
.title .im_big{ font-size:38px;}

/*線上學，讓你和日本職棒同步！*/
#online{background-image:url(../images/bg4.png);height: 1150px;background-attachment:fixed;margin:0 auto;overflow:hidden;background-repeat:no-repeat;padding:0;background-size:cover;}
#online h3{font-size:25px;font-weight: bold;text-align:center;color:#fff;font-style:italic;line-height: 1.3em;}
#online h4{font-size:22px;font-weight: bold;text-align:center;color:#ffe900;font-style:italic;line-height: 1.3em; padding-bottom:10px;}
#online h5{font-size:18px;text-align:center;color:#fff; line-height:1.3em;}

#online .im_small{ font-size:30px;}
#online .im_blue{ color:#6bf7fc; font-weight:bold; font-size:19px;}
.pitcher{}
.hitter{}
.hitter h3{ padding-top:30px;}

/*前進巨蛋一定要認識的棒球術語*/
#ongoing{ background-image:url(../images/bg3.png) ;height: 600px; background-position: left top;background-attachment:fixed;margin:0 auto;overflow:hidden;background-repeat:no-repeat;padding:0; background-color:#000;background-size:cover;}

.Choose .table{min-width: 150px;}
.Choose .table-bordered{ border-color:#333;}
.Choose .table.box{font-size:16px; text-align:center;}
.Choose .table.box tr { border-color:#18120d; border-width:3px;}
.Choose .table.box tr th{background: #ffd03f;
background: -moz-linear-gradient(top,  #ffd03f 0%, #ffd03f 50%, #fab400 50%, #fab400 100%);
background: -webkit-linear-gradient(top,  #ffd03f 0%,#ffd03f 50%,#fab400 50%,#fab400 100%);
background: linear-gradient(to bottom,  #ffd03f 0%,#ffd03f 50%,#fab400 50%,#fab400 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd03f', endColorstr='#fab400',GradientType=0 );
border-color:#18120d;border-width:3px;padding-bottom:10px;}
.Choose .table.box tr td{text-align:center;color:#FFF; font-size:15px; border-color:#18120d;border-width:3px; background-color:#000; line-height:1.5em;}
#ongoing .epilog{ margin-bottom:10px;}
#ongoing .epilog h3{ color:#e19964; font-size:18px; text-align:center; line-height:1em;}
#ongoing .epilog h4{ color:#dedddc; font-size:15px; text-align:center; }

img.pic01{max-width: 330px;min-width:150px;width:90%;height:auto;display:block;margin: 0 auto;}

/*區塊按鈕*/
.end{ margin:0 auto; text-align:center;padding-top:25px;}
.go_fill {
	font-size:22px;
	-moz-border-radius:25px;
	-webkit-border-radius:25px;
	border-radius: 8px;
	border: 2px solid #d07902;
	padding:8px 18px;
	text-decoration:none;
	background:-moz-linear-gradient( center top, #ffec64 5%, #ffab23 100% );
	background:-ms-linear-gradient( top, #ffec64 5%, #ffab23 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23');
	background-color: #150606;
	color: #fff;
	display:inline-block;
	margin-bottom:25px;
	font-weight:bold;
	text-align:center
}
.go_fill:visited {	background-color: #150606;
	color: #fff;}
.go_fill:hover {
	background:-moz-linear-gradient( center top, #ffab23 5%, #ffec64 100% );
	background:-ms-linear-gradient( top, #ffab23 5%, #ffec64 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64');
	background-color:#ffab23;color:#000;text-decoration:none;
}
.go_fill:active {
	position:relative;
	top:1px;
	background-color:#ffab23;color:#000;text-decoration:none;
}

/*	↓↓↓↓	螢幕尺寸大於960時頁面顯示效果↓↓↓↓	 */
@media (min-width:900px) {
/*BANNER*/
/*表單區*/
.banner_big{width: 100%;height: auto; display:block;}
.banner_min{ display:none;}
img.banner001{display: block;top: 4%;left: 32%;z-index: 5;max-width: 832px;height:auto;width: 36vw;}
img.banner002{display: block;top: 48%;left: 13%;z-index: 5;max-width: 640px;height:auto;width: 35vw;}
img.banner003{display: block;bottom: 23%;left: 50.5%;z-index: 4;max-width: 460px;height:auto;width: 24vw;}
img.banner004{display: block;bottom: -2%;right: 22%;z-index: 4;max-width: 1102px;height:auto;width: 58vw;}
img.banner005{display: block;top: 62%;right: 12%;z-index: 8;max-width: 306px;height:auto;width: 16vw;}

.BRR{ display:none;}

.fill h2{ font-size:25px; text-align:left;}
.fill h2 .im_pink{font-size:30px; text-align:left;}
.fill h2 .im_yellow{font-size:30px; text-align:left;}
.title{padding-top: 35px;padding-bottom: 30px;}
.title.first h2{}
#online h3{}
#online h4{}
.title .im_big{}
#online{}
#online .im_small{ }
#ongoing .epilog h3{ }
.fill h3{text-align:right;}

}

/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 280px) and (max-width:959px) {
/*BANNER*/
.BRR{ display: block;}
.banner_big{display:none;}
.banner_min{ width: 100%;max-width:960px;min-width:280px;height: auto; display:block;}
img.banner001{display: block;top: 3%;left: 7%;z-index: 5;max-width: 832px;height:auto;width: 85vw;}
img.banner002{display: block;top: 56%;left: 11%;z-index: 5;max-width: 640px;height:auto;width: 58vw;}
img.banner003{display: block;top: 68%;left: 36%;z-index: 5;max-width: 460px;height:auto;width: 48vw;}
img.banner004{display:none;}
img.banner005{display: block;top: 45%;right: -9%;z-index: 5;max-width: 306px;height:auto;width: 32vw;}


.fill h2{ font-size:20px; text-align:center;}
.fill h2 .im_pink{font-size:25px; text-align:center;}
.fill h2 .im_yellow{font-size:25px; text-align:center;}
.title{ padding-top:10px;padding-bottom: 10px;}
.title.first h2{font-size:24px;line-height: 1.5em;}
.title.second h2{font-size:24px;line-height: 1.5em;}
.title .im_big{ font-size:26px;}
#online .im_small{ font-size:22px;}
#online h3{ font-size:20px;}
#online h4{font-size: 15px;}
#ongoing .epilog h3{font-size:16px;}
.fill h3{text-align:center;}

#online{background-attachment:scroll;background-position:bottom center;height: auto;}
#ongoing{background-attachment:scroll;}

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


}