/* 排版
-------------------------------------------------- */
.inline-block { display: inline-block !important;}
.margin_t60 { margin-top: 60px !important;}
.margin_t45 { margin-top: 45px !important;}
.margin_t30 { margin-top: 30px !important;}
.margin_t20 { margin-top: 20px !important;}
.margin_t15 { margin-top: 15px !important;}
.margin_t0 { margin-top: 0 !important;}
.margin_center { margin: 0 auto!important;}
.margin_l10 { margin-left: 10px !important;}
.margin_b30 { margin-bottom: 30px !important;}
.margin_b20 { margin-bottom: 20px !important;}



/* header
-------------------------------------------------- */
 #homeBanner {
	background: url(../images/banner_bg3.png) center top no-repeat;
	display: block;
	margin: 0px auto;
	padding-bottom:15px;
	width: 100%;
	position: relative;
	padding-top: 1px;
	background-color: #e9e9e9;
 }
 #bannerText {
	width: 100%;
 }
 .wh{padding:20px 0;}
 .gone{display:block;}
 .gone2{display:none;}

/* 內容
------------------------- */
.caption h3 { width: 220px; border-radius: 10px; background-color:#49892B; color:#fff; font-size: 24px; font-weight: bold; padding:15px 10px; text-align: center; text-shadow:-1px -1px #0d5c81; white-space:nowrap; font-family:微軟正黑體;}
.caption h4 { line-height: 1.7em; font-family:微軟正黑體;}
.caption p { font-size: 16px; font-family:微軟正黑體;}
.caption p.date-event { padding-top: 20px;}
.caption p.subt { font-size: 20px; font-weight: bold; color: #007CB7;font-family:微軟正黑體;}
.caption p.subt:before { content:"●"; padding-right: 10px; color: #007CB7;}
.caption ul { padding: 10px 0 10px 10px ; margin: 10px 0 10px 10px;}
.caption ul li { list-style:disc; font-size: 16px;}
.icon_share { text-align:right; margin-top: 20px;}
.icon_android { display: none;}
.icon_ios { display: none;}
.icon_line { display: none;}
.icon_fb { margin-top: 20px;}
.icon_share2 {display: none;}
.btn_download { margin-top: 15px;}
.ditch01{margin:10px 0 20px;}
.caption div{position:relative;}
.caption .arrow, .caption .arrow2{position: absolute; width:44px; height:100px; background:url(../images/arrow.png) no-repeat; top:80px; right:-20px;}
.caption .arrow2{top:20px; right:-25px;}
p.tits{font-size:22px;}
/* Footer
-------------------------------------------------- */
  footer{ background-color: #333; padding: 50px 0; }
  .footer p {line-height: 1.5em;font-family:微軟正黑體;}
  .white {color:#fff;}
  .mail a { color:#ff8a00;}
  .mail a:hover { color:#ffe115;}
  .coinfo {text-align: right;}


/* RESPONSIVE CSS
-------------------------------------------------- */


/* Between Medium and Small size 1280x 800 */
@media only screen and (max-width: 1280px) and (min-width: 1025px) and (min-height: 300px)  and (max-height: 900px)  { 
  	#homeBanner {height: 570px;}

}


/* iPad 橫式 1024x768 --------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) and (min-width: 970px) { 
	.container{margin-top:20px;}
	.footer p {text-align:center; line-height: 1em;}
    .coinfo {text-align:center; margin-bottom: 10px;}
	.btn_download img { width: 50%;}
	.caption .arrow{top:55px; right:-25px;}
}



/* iPad 直式 size800x600--------------------------------------------------------------------------- */
@media only screen and (max-width: 969px) and (min-width: 760px) { 
	#homeBanner {height: 400px;}
	#bannerText {width: 100%;}
	.coinfo {text-align:center; margin-bottom: 10px;}
	.footer p, .white, .mail {text-align:center; line-height: 1em;}
	.btn_download img { width: 45%;}
	.ditch01{margin:30px 0 10px;}
	.caption p{font-size:15px;}
	.caption .arrow{top:25px; right:-25px;}

}

@media only screen and (max-width: 759px) and (min-width: 481px) { 
	section{ margin:0;}
	#bannerText { position:relative;}
	#bannerText {width: 100%;}
	.logo { width: 160px; }
	.caption h3 { width: 100%;}
	.coinfo {text-align:center; margin-bottom: 10px; }
	.footer p, .white, .mail {text-align:center; line-height: 1em; font-size: 13px;}
	.icon_android {display: inline-block; width: 80px; }
	.icon_ios {display: inline-block; width: 80px;}
	.icon_line { display:  inline-block;}
	.icon_qrcode {display: none;}
    .icon_share { text-align: left; margin-top: 15px;}
	.icon_share2 {display: inline-block;}
	.icon_share {display: none;}
	.btn_download {display: none;}
	.ban_title { width: 90%;}
	.ditch01{ margin:0 auto; width: 75%; padding-top: 20px;}
	p.tits{font-size:22px;}
	


}
/* 660px and mobile --------------------------------------------------------------------------- */

@media screen and (max-width: 480px)  and (min-width: 381px)  {
	section{ margin:0;}
	#bannerText { position:relative;}
	#bannerText {width: 100%;}
	.logo { width: 160px; }
	.caption h3 { width: 100%;}
	.coinfo {text-align:center; margin-bottom: 10px; }
	.footer p, .white, .mail {text-align:center; line-height: 1em; font-size: 13px;}
	.icon_android {display: inline-block; width: 80px; }
	.icon_ios {display: inline-block; width: 80px;}
	.icon_line { display:  inline-block;}
	.icon_qrcode {display: none;}
    .icon_share { text-align: left; margin-top: 15px;}
	.icon_share2 {display: inline-block;}
	.icon_share {display: none;}
	.btn_download {display: none;}
	.ditch01{ margin:0 auto; width: 75%; padding-top: 20px;}
	p.tits{font-size:22px;}
	.gone{display:none;}
    .gone2{display:block;}
	.caption .arrow2{top:30px; right:-23px;}
}

@media screen and (max-width: 380px) {
	section{ margin:0;}
	.caption div{margin-bottom:20px;}
	#bannerText { position:relative;}
	#bannerText {width: 100%;}
	.logo { width: 120px; }
	.caption h3 { width: 100%;}
	.coinfo {text-align:center; margin-bottom: 10px; }
	.footer p, p.white, p.mail {text-align:center; line-height: 1em; font-size: 13px;}
	.icon_android {display: inline-block; width: 80px; }
	.icon_ios {display: inline-block; width: 80px;}
	.icon_line { display:  inline-block;}
	.icon_qrcode {display: none;}
    .icon_share { text-align: left; margin-top: 15px;}
	
	.icon_share2 {display: inline-block;}
	.icon_share {display: none;}
	.btn_download {display: none;}
	.caption p{font-size:14px;}
	.caption ul li{font-size:14px;}
	.gone{display:none;}
    .gone2{display:block;}
	p.tits{font-size:22px;}
	.caption .arrow2{top:10px; right:-23px;}
	
}