#skypedetectionswf{ display:none;}
/*Layout start*/
#page { background-color: #FFFFFF; /* max-height:1807px;*/ }
#right { width:112px; height:100%; }
#top { width:1024px; height:100px; }
#footer { width:1024px; height:70px; }
#container { height:598px; }
/*Doubled float margin bug  Solution: Specify display: inline; for the affected float.*/
.left { width:311px; float:left; }
.right { width:713px; float:left; }
/*Layout end*/
/*Header start*/
ul#header { height:278px; }
/*Doubled float margin bug  Solution: Specify display: inline; for the affected float.*/
ul#header li { float:left; display: inline; }
li#logo { width:205px; height:123px; margin: 37px 78px 0 28px; background-image:url(../images/logo.gif); }
li#logo a { width:100%; height:100%; display:block; }
ul#menu li { float:left; display: inline; height:142px; }
ul#menu li a { width:100%; height:100%; display:block; }
ul#menu #home { width:77px; background-image:url(../images/home.gif); }
ul#menu #home a:hover { background-image:url(../images/home_hover.gif); }
ul#menu #aboutus { width:98px; background-image:url(../images/aboutus.gif); }
ul#menu #aboutus a:hover { background-image:url(../images/aboutus_hover.gif); }
ul#menu #ourservice { width:119px; background-image:url(../images/ourservice.gif); }
ul#menu #ourservice a:hover { background-image:url(../images/ourservice_hover.gif); }
ul#menu #portfolio { width:111px; background-image:url(../images/portfolio.gif); }
ul#menu #portfolio a:hover { background-image:url(../images/portfolio_hover.gif); }
ul#menu #blog { width:74px; background-image:url(../images/blog.gif); }
ul#menu #blog a:hover { background-image:url(../images/blog_hover.gif); }
ul#menu #contact { width:87px; background-image:url(../images/contact.gif); }
ul#menu #contact a:hover { background-image:url(../images/contact_hover.gif); }
/*Header end*/
/*Aside start*/
ul#aside li div.title { width:231px; height:28px; }
ul#aside li div.title a { width:100%; height:100%; display:block; }
ul#aside li ul.list { font-family: Verdana, Geneva, sans-serif; letter-spacing: 0.5pt; padding: 3px 2px 1px 35px; display:none; }
/*子目錄隱藏*/
ul#aside litd#current ul.list { display:none; }
ul#aside li ul.list li { display:block; height:18px; }
ul#aside li ul.list li div { position:relative; display:block; height:100%; width:100%; }
ul#aside li ul.list li div a { position:absolute; background-color:#FFF; line-height:18px; height:18px; }
/*雖然z-index相同，但是label覆蓋在a 上方，當滑鼠在移動到label時，a跟label都會產生hover事件，因為z-index都是同一層的關係。*/
/*同時發生的時候瞬間，將連結a移動在最上層，label移動到最下層，然後label又回到沒有hover的狀態*/
ul#aside li ul.list li div a:hover { z-index:1; }
ul#aside li ul.list li div a.surface:hover { z-index:-1; }
/*brand*/
ul#aside li#brand div.title { background-image:url(../images/nav/brand.gif); }
ul#aside li#brand.current div.title a { background-image:url(../images/nav/brand_current.gif); }
ul#aside li#brand div.title a:hover, body.brand ul#aside li#brand div.title a { background-image:url(../images/nav/brand_hover.gif); }

/*graphic*/
ul#aside li#graphic div.title { background-image:url(../images/nav/graphic.gif); }
ul#aside li#graphic.current div.title a{ background-image:url(../images/nav/graphic_current.gif); }
ul#aside li#graphic div.title a:hover, body.graphic ul#aside li#graphic div.title a { background-image:url(../images/nav/graphic_hover.gif); }
/*catalog*/
ul#aside li#catalog div.title { background-image:url(../images/nav/catalog.gif); }
ul#aside li#catalog.current div.title a{ background-image:url(../images/nav/catalog_current.gif); }
ul#aside li#catalog div.title a:hover, bodytd#atalog ul#aside li#catalog div.title a { background-image:url(../images/nav/catalog_hover.gif); }
/*packaging*/
ul#aside li#packaging div.title { background-image:url(../images/nav/packaging.gif); }
ul#aside li#packaging.current div.title a{ background-image:url(../images/nav/packaging_current.gif); }
ul#aside li#packaging div.title a:hover, body.packaging ul#aside li#packaging div.title a { background-image:url(../images/nav/packaging_hover.gif); }
/*programming*/
ul#aside li#programming div.title { background-image:url(../images/nav/programming.gif); }
ul#aside li#programming.current div.title a{ background-image:url(../images/nav/programming_current.gif); }
ul#aside li#programming div.title a:hover, body.programming ul#aside li#programming div.title a { background-image:url(../images/nav/programming_hover.gif); }
/*app*/
ul#aside li#app div.title { background-image:url(../images/nav/app.gif); }
ul#aside li#app.current div.title a{ background-image:url(../images/nav/app_current.gif); }
ul#aside li#app div.title a:hover, body.app ul#aside li#app div.title a { background-image:url(../images/nav/app_hover.gif); }
/*Aside end*/
/* position:relative時top, left, right, bottom才會有作用 */
#navigator { float:right; height: 19px; width: 595px; padding-right: 20px; padding-top:25px; }
#navigator a { border-left: 1px solid #FFFFFF; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: 0; line-height: 11px; outline: medium none; padding: 0 15px; text-decoration: none; }
#navigator a:hover { color: #000000; }
#navigator a.first { border-left-width: 0; padding: 0 13px 0 0; }
#addr { color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; letter-spacing: 0; line-height: 11px; float:left; padding-top:11px; padding-left:28px; }
#addr a { color:#FFFFFF; }
#addr .tel a, #addr .fax a { color:#FFFFFF; }
#main { padding-left:18px; width:695px; /*max-height:1359px;*/ }
#main li.album { float:left; width:217px; height:160px; background-color: #FFFFFF; }
/* Gallery */
.gallery { position:relative; width:650px; background-color:#FFFFFF; display:none; margin-bottom:36px; overflow:hidden; }
.gallery .stage { width:650px; height:440px; }
/*遮色片*/
.gallery .stage .masks { width:650px; height:423px; position:absolute; }
.gallery .stage .masks .mask { position:absolute; height:100%; width:100%; background-position:center center; }
/*app用 遮色片*/
.mask.app1 { background-image:url(../images/app/mask1.png); }
.mask.app2 { /*background-image:url(../images/app/mask2.png);*/ }
/*底片*/
.gallery .stage .bases { width:650px; height:423px; position:absolute; }
.gallery .stage .bases .base { position:absolute; height:100%; width:100%; background-position:center center; }
/*app用 底片*/
.base.app1 { background-image:url(../images/app/base1.png); }
.base.app2 { background-image:url(../images/app/base2.png); }
/* 膠片 */
.gallery .stage li.film { width:auto; height:auto; }
.gallery .stage li.film img, .gallery ul.slides li.film canvas { width:auto; height:auto; }
.gallery .stage .film img, .gallery .stage .film canvas { padding:101.5px 197.5px; background-image:url(../images/app/mask2.png); background-repeat:repeat-x; background-position:0px 80px; }

/*圖片載入時的圖片*/
.gallery .stage li.film img.imageLoading{ padding:101.5px 197.5px; background-image:url(../images/loadingAnimation.gif);background-repeat:no-repeat;  width:255px; height:220px; background-position: center center;}

/*Gallery*/
.gallery .stage .nav { height:100%; width:100%; position:absolute; visibility:hidden; }
.gallery:hover .nav { visibility:visible; }
.gallery .nav a.current { position:absolute; top:0; left:0; width:650px; height:423px; display:block; background-image:url(../images/gallery/Transparent.gif); }
.gallery .nav a.prev { background-image:url(../images/gallery/arrows.png); background-position:left top; width:32px; height:32px; position:absolute; left:16px; top:195px; }
.gallery .nav a.prev:hover { background-image:url(../images/gallery/arrows.png); background-position:left bottom; }
.gallery .nav a.next { background-image:url(../images/gallery/arrows.png); background-position:right top; width:32px; height:32px; position:absolute; right:16px; top:195px; }
.gallery .nav a.next:hover { background-image:url(../images/gallery/arrows.png); background-position:right bottom; }
/*針對IE6 hover要用jQuery另外做*/
.gallery .nav a.ctrl { background-image:url(../images/gallery/play_icon.gif); width:32px; height:32px; position:absolute; left:309px; top:195px; visibility:hidden; }
/*當開始播放的時候 目前狀態是 開始播放 所以顯示 暫停圖示 而目前暫停圖是沒有圖示*/
.gallery .nav.start a.ctrl { background-image:url(../images/gallery/stop_icon.gif); visibility:hidden; }
/*頁數按鈕*/
.gallery .nav ol { list-style: none outside none; position: absolute; left:50%; top:415px; }
.gallery .nav ol li { position:relative; float:left; left:-50%; }
.gallery .nav ol li a { background: url("../images/gallery/pagination.png") no-repeat scroll left top transparent; height: 16px; width: 18px; float:left; overflow:hidden; }
.gallery .nav ol li a:hover { background-position: left -16px; }
.gallery .nav ol li.current a { background-position: left -32px; }
/*社群按鈕*/
.gallery .social { right:0; bottom:0; width:650px; height:24px; margin-bottom: 16px; text-align:right; }
/*Facebook按讚之後隱藏comment */
.gallery .social .fb_edge_widget_with_comment span.fb_edge_comment_widget { display:none; }
/*原本是 height:423px; 440px剛好 */
.gallery ul.slides { width:100%; position:absolute; overflow-x:hidden; overflow-y:hidden; height: 440px; width: 650px; }
.gallery ul.slides li { float:left; display: inline; position:absolute; width:650px; height:423px; }
.gallery ul.slides li img, .gallery ul.slides li canvas { width:650px; height:423px; }
.album a img, .album a canvas { width:203px; height:139px; }
.album .thumbTitle, .gallery .thumbTitle { display:none; color: #050829; font-family: Verdana, Geneva, sans-serif; font-size: 11px; margin: 0 0 0 14px; text-align: left; width: 199x; font-weight:700; }
.album .slides, .album .masks, .album .bases { display:none; }
.album .description { display:none; }
.album a { display:block; }
/*圖片載入時的圖片*/
img.imageLoading{ background-image:url(../images/loadingAnimation.gif); background-position:center center; background-repeat:no-repeat;}