/* ----- BANNER ----- */
#banner { position:relative; width:100%; max-height:700px; margin:0 auto; overflow:hidden; z-index:1;}
#banner .banner_arrow_l { display:block; position:absolute; top:50%; left:0px; margin:-30px 0 0 0; background:url(../images/icon_arrow_l.svg) no-repeat; width:60px; height:60px; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.6; z-index:997; }
#banner .banner_arrow_l:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
#banner .banner_arrow_r { display:block; position:absolute; top:50%; ; right:0px; margin:-30px 0 0 0; background:url(../images/icon_arrow_r.svg) no-repeat; width:60px; height:60px; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.6; z-index:997; }
#banner .banner_arrow_r:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

#banner .pic b { position:relative; display:block; margin:0 auto; width:100%; height:auto; max-width:1920px; max-height:700px; overflow:hidden; }
#banner .pic b:before { position:absolute; top:0px; left:0px; z-index:997; content:""; width:100%; height:157px; }
#banner .pic b img { width:100%; margin:0 auto; }

#banner .cycle-slide { margin:0 auto; }
#banner .cycle-pager { text-align:center; width:96%; padding:2%; z-index:500; position:absolute; bottom:0px; overflow:hidden; }
#banner .cycle-pager span { font-family:arial; font-size:250%; width:18px; height:18px; display:inline-block; color:#FFF; cursor:pointer;
-webkit-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-moz-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-ms-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-o-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px; }
#banner .cycle-pager span.cycle-pager-active { color:#ac6a08; }
#banner .cycle-pager>* { cursor:pointer; }
#banner .cycle-slide-active img { -moz-transition-duration:15s;
-moz-transform-origin:1;
-moz-transform:scale(1.1);
-webkit-transition-duration:15s;
-webkit-transform-origin:1;
-webkit-transform:scale(1.1);
-o-transition-duration:15s;
-o-transform-origin:1;
-o-transform:scale(1.1);
-ms-transition-duration:15s;
-ms-transform-origin:1;
-ms-transform:scale(1.1);
transition-duration:15s;
transform-origin:1;
transform:scale(1.1); }

#banners { display:none; position:relative; width:100%; max-height:700px; margin:0 auto; overflow:hidden; }
#banners .banner_arrow_l { display:block; position:absolute; top:50%; left:0px; margin:-30px 0 0 0; background:url(../images/icon_arrow_l.svg) no-repeat; width:60px; height:60px; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.6; z-index:997; }
#banners .banner_arrow_l:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }
#banners .banner_arrow_r { display:block; position:absolute; top:50%; right:0px; margin:-30px 0 0 0; background:url(../images/icon_arrow_r.svg) no-repeat; width:60px; height:60px; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.6; z-index:997; }
#banners .banner_arrow_r:hover { filter:alpha(opacity=100); -moz-opacity:1; opacity:1; }

#banners .pic b { position:relative; display:block; margin:0 auto; width:100%; height:auto; max-width:1200px; max-height:1000px; overflow:hidden; }
#banners .pic b:before { position:absolute; top:0px; left:0px; z-index:997; content:""; width:100%; height:157px; }
#banners .pic b img { width:100%; }

#banners .cycle-pager { text-align:center; width:96%; padding:2% 2% 4% 2%; z-index:500; position:absolute; bottom:0px; overflow:hidden; }
#banners .cycle-pager span { font-family:arial; font-size:250%; width:18px; height:18px; display:inline-block; color:#FFF; cursor:pointer;
-webkit-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-moz-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-ms-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
-o-text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px;
text-shadow:rgba(0, 0, 0, 0.4) 0px 0 5px; }
#banners .cycle-pager span.cycle-pager-active { color:#ac6a08; }
#banners .cycle-pager>* { cursor:pointer; }

#bannerss {}
#bannerss b { position:relative; display:block; margin:0 auto; width:100%; height:auto; max-width:1920px; max-height:700px; overflow:hidden;
-webkit-box-shadow:rgba(170, 100, 10, 0.4) 0px 0 10px;
-moz-box-shadow:rgba(170, 100, 10, 0.4) 0px 0 10px;
-ms-box-shadow:rgba(170, 100, 10, 0.4) 0px 0 10px;
-o-box-shadow:rgba(170, 100, 10, 0.4) 0px 0 10px;
box-shadow:rgba(170, 100, 10, 0.4) 0px 0 10px; }
#bannerss b:before { position:absolute; top:0px; left:0px; z-index:997; content:""; width:100%; height:157px; }
#bannerss b img { width:100%; margin-bottom:-4px; }


/* ======================= RWD 其他螢幕尺寸樣式 ======================= */
/*小螢幕-電腦版設計是寬螢幕瀏覽時視情況使用*/
@media only screen and (max-width:1250px) { 
/* ----- BANNER ----- */
#banner { width:100%; height:auto; }
#banner .banner_arrow_l { left:0; }
#banner .banner_arrow_r { right:0; }
#banner .pic b { width:100%; height:auto; margin:0 0 -5px 0; }
#banner .pic b img { width:100%; }
}

/*平板*/
@media only screen and (max-width:960px) { 
/*BANNER*/
#banner { margin:0 auto; }
#bannerss { margin:0 auto; }
}

/*平板*/
@media only screen and (max-width:800px) { 
#banner { display:none; }
#banners { display:block; margin:0 auto; }
}