html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight: inherit; font-style: inherit; font-family: "Century Gothic", "微軟正黑體", "Microsoft JhengHei"; vertical-align: baseline; color: #FFF; -webkit-text-size-adjust: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; }
section { clear: both; }
::selection { background: #333333; /* Safari */ }
::-moz-selection { background: #333333; }
:required { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; -ms-box-shadow: none; box-shadow: none;}

* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { line-height: 1; background-color: #030304; }
ol, ul { list-style-type: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption { text-align: left; font-weight: normal; }
input, textarea { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; }
button, input[type="button"] { background: none; }

em, i { font-style: italic; }
strong, b { font-weight: bold; }
u { text-decoration: underline; }
pre, code { font-family: Monaco, Courier, monospace; }
pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
blockquote, q { quotes: "" ""; }
blockquote:before, blockquote:after, q:before, q:after, { content: ""; }
a, input[type="submit"], input[type="button"], button, label[for] { cursor: pointer; }
img { -ms-interpolation-mode: bicubic; }

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
a { -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; text-decoration: none; color: #f7941d; }
a:hover { color: #FFF; }
a:active { color: #FFF; }
a:visited { color: #f7941d; }
button { cursor: pointer; }
caption, th, td { vertical-align: middle; }
p { margin: 0 0 1.5em 0; line-height: 1.5em; }
table { border: 0; border-spacing: 0; empty-cells: show; }
textarea { resize: none; }

/* Custom styles*/
div.loading-invisible { display: none; }
div.loading-visible { display: block; position: fixed; width: 100%; text-align: center; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; }
.clear { clear: both; }
.desktop { display: block; }
.mobile { display: none; }

header { position: fixed; background-color: #000; width: 100%; height: 60px; z-index: 50; top: -60px; }
header ul { width: 960px; margin: 0px auto; padding: 5px 20px; height: 50px; }
header li { float: left; line-height: 50px; padding: 0px 20px; font-size: 14px; }
header li.nav_logo { margin-left: 10px; margin-right: 430px; margin-top: 10px; padding: 0px; }
header li#nav_contact { padding-right: 0px; }
header li a:link, header li a:visited { color: #666a6b; }
header li.selected a:link, header li.selected a:visited, header li.selected a:hover, header li.selected a:active, header li a:hover, header li a:active { color: #f7941d; }

footer { width: 100%; height: 30px; float: none; clear: both; position: fixed; bottom: 0px; background-color: #000; }
footer article { width: 960px; padding: 5px 20px 0px; margin: 0px auto; font-family: "微軟正黑體", "Microsoft JhengHei", "Century Gothic"; font-size: 11px; line-height: 21px; }
footer .line { color: #666a6b; margin: 0px 10px 0px 15px; }
footer .copyright { float: left; color: #666a6b; }
footer .copy { color: #666a6b; }
footer .facebook { float: right; position: relative; }
footer .facebook a:link, footer .facebook a:visited, footer .lang a:link, footer .lang a:visited { color: #666a6b; }
footer .facebook a:hover, footer .facebook a:active, footer .lang a:hover, footer .lang a:active { color: #f7941d; }
footer .facebook img { margin-left: 5px; vertical-align: middle; }
footer .facebook #barcode { display: none; position: absolute; top: -133px; left: -3px; }

#home, #about, #works, #services, #clients, #contact { margin: 0px auto; float: none; clear: both; }
#about, #works, #services, #clients, #contact { width: 950px; padding: 0px 25px; padding-top: 100px; }
#wrap { position: relative; background: url(../images/bg.jpg) top center repeat-y #030304 fixed; }

#home { width: 1000px; height: 600px; }
#home .logo { text-align: center; padding-top: 230px; }
#home .menu { color: #666a6b; height: 20px; margin-top: 30px; }
#home .menu ul { width: 345px; margin: 0px auto; }
#home .menu li { float: left; margin: 0px 20px; font-size: 14px; }
#home .menu a:link, #home .menu a:visited { color: #666a6b; }
#home .menu a:hover, #home .menu a:active { color: #f7941d; }

.title { font-size: 24px; margin-bottom: 25px; }
.corner_l { background: url(../images/corner_l.png) no-repeat top left; font-size: 13px; margin-bottom: 40px; }
.corner_r, .corner_r3 { background: url(../images/corner_r.png) no-repeat bottom right; }
.corner_r { padding: 30px; }
.corner_r2 { padding: 30px 30px 130px; background: url(../images/corner_r2.png) no-repeat bottom right; }
.corner_r3 { padding: 30px; width: 425px; height: 290px;  *width:365px;
 *height:240px;
}
.work_cor { margin-bottom: 25px; }
.ser_left { float: left; margin-right: 13px; margin-bottom: 13px; width: 400px; }
.ser_right { float: left; margin-bottom: 13px; }
.ser_left p, .ser_right p { padding-bottom: 10px; }
.highlight { color: #f7941d; font-size: 14px; margin-bottom: 10px; }
.highlight2 { color: #f7941d; }
.clientlist { margin-left: 0px; }
.clientlist li { float: left; width: 115px; height: 58px; margin-right: 5px; margin-bottom: 5px; position: relative; overflow: hidden; }
.clientlist li img { position: absolute; top: 0px; left: 0px; width: 115px; }

#work_cat { padding-bottom: 30px; position: relative; }
#work_cat ul { height: 154px; }
#work_cat li { float: left; width: 154px; height: 154px; display: table; margin: 0px 10px;  *display:block; }
#work_cat li a:link, #work_cat li a:visited, #work_cat li#s_client a:link, #work_cat li#s_client a:visited { background: url(../images/circle.png) no-repeat; height: 154px; padding: 0px 20px; display: block; font-size: 16px; text-align: center; display: table-cell; vertical-align: middle; color: #FFF;  *display:block; *padding-top:65px; *height:122px;}
#work_cat li a:hover, #work_cat li a:active, #work_cat li a.on:link, #work_cat li a.on:visited { color: #f7941d; }
#work_cat li.s_client a:link, #work_cat li.s_client a:visited { background: url(../images/circle_off.png) no-repeat; }
#work_cat li.s_client a:hover, #work_cat li.s_client a:active, #work_cat li.s_client a.on { color: #f7941d; background: url(../images/circle_on.png) no-repeat; }
#work_cat #work_clientlist { filter: alpha(opacity=0); opacity: 0; top: 80px; display: none; background-color: #000; border: 4px solid #10100f; position: absolute; right: 0px; width: 900px; padding: 15px 0px; z-index: 2; }
#work_cat #work_clientlist ul { height: auto; }
#work_cat #work_clientlist li { float: left; width: 33%; height: auto; padding-left: 0.33333%; margin:0 0 5px; }
#work_cat #work_clientlist li a:link, #work_cat #work_clientlist li a:visited { background: none; width: auto; height: auto; padding: 0px; font-size: 12px; text-align: left; color: #FFF; }
#work_cat #work_clientlist li a:hover, #work_cat #work_clientlist li a:active { color: #f7941d; }
#work_list ul { margin-left: 0px; }
#work_list li { float: left; width: 270px; height: 195px; margin: 0px 5px 20px; }
#work_list li #list_img { width: 270px; height: 140px; overflow: hidden; position: relative; }
#work_list li #list_brand { font-size: 14px; color: #f79422; padding-top: 10px; }
#work_list li #list_name, #work_list li #list_day { font-size: 12px; padding-top: 3px; }
#work_list li #list_img img { width: 270px; position: absolute; }

.showhide { clear: both; text-align: center; border-top: 1px solid #333; margin-top: 15px; padding-top: 15px; height: 30px; }
.showhide a { -webkit-transition: none; -moz-transition: none; transition: none; padding-top: 0px; margin: 0px auto; display: block; width: 138px; height: 23px; background: url(../images/btn_showhide.png); }
.showhide a.showproject { float: left; background-position: 0px 0px; }
.showhide a.showproject:hover { background-position: 0px -23px; }
.showhide a.hideproject { float: right; background-position: 0px -46px; }
.showhide a.hideproject:hover { background-position: 0px -69px; }

#page { height: 70px; position: relative; clear: both; }
#page ul { position: absolute; left: 50%; }
#page li { float: left; margin: 0px 8px; color: #999; }

#brandlist { border-top: 1px solid #1e1e1e; height: 400px; margin-bottom: 100px; }
#brandlist ul { float: left; width: 260px; padding-top: 20px; margin-left: 35px; }
#brandlist li { margin-bottom: 6px; }

#page li, #page li a, #brandlist li, #brandlist li a { font-size: 12px; }
#page li a:link, #page li a:visited, #brandlist li a:link, #brandlist li a:visited { color: #FFF; }
#page li#current, #page li a:hover, #page li a:active, #brandlist li a:hover, #brandlist li a:active { color: #f79422; }
#page li#current { line-height: 35px; text-decoration: underline; }
#page li a:link, #page li a:visited { display: block; line-height: 35px; }
#page li a.first, #page li a.last { -webkit-transition: none; -moz-transition: none; transition: none; padding-top: 0px; display: block; width: 35px; height: 35px; }
#page li a.first { background: url(../images/btn_page.png) 0px 0px; margin-right: 8px; }
#page li a.first:hover { background: url(../images/btn_page.png) 0px -35px; }
#page li a.last { background: url(../images/btn_page.png) -35px 0px; margin-left: 8px; }
#page li a.last:hover { background: url(../images/btn_page.png) -35px -35px; }

#address td { vertical-align: top; }
#address h1 { font-size: 18px; font-weight: normal; padding-bottom: 15px; }
#address .line { border-bottom: 1px solid #333; margin: 15px 0; }
#address .add_left { float: left; width: 370px; }
#address .add_right { float: left; width: 470px; text-align: right; }
#map_canvas { float: left; width: 450px; height: 300px; }

/* ================================================================== */
/* === Responsive styles ============================================ */
/* ================================================================== */

@media only screen and (max-width: 1000px) {
.desktop { display: none; }
.mobile { display: block; }

header ul { width: 100%; padding: 5px 0px; }
header li { padding: 0px; }
header li.nav_logo { float: left; margin-right: 0px; }
header li#nav_btn { float: right; }
header li#nav_btn a.btn { display: block; height: 40px; width: 40px; margin-right: 10px; margin-top: 5px; background: url(../images/mobile/menu.png) no-repeat; }
header li#nav_btn ul { display: none; position: absolute; top: 60px; left: 0px; width: 100%; height: auto; z-index: 49; padding: 0px; border-bottom: 1px solid #333333; }
header li#nav_btn ul li { float: none; }
header li#nav_btn ul li a:link, header li#nav_btn ul li a:visited { display: block; width: 100%; background-color: #000000; text-align: center; border-top: 1px solid #333333; }

footer article { width: 100%; padding-left: 10px; }
footer .facebook { margin-right: 30px; }

#about, #works, #services, #clients, #contact { width: 96%; padding: 0px; padding-top: 100px; }
#home { width: 96%; }
#home .menu ul { width: 100%; }
#home .menu li { width: 20%; text-align: center; margin: 0px; }

.ser_left { float: left; width: 100%; margin-right: 0px; margin-bottom: 0px; }
.ser_right { float: left; width: 100%; margin-right: 0px; margin-bottom: 0px; }
.clientlist li { float: left; width: 23%; margin-right: 5px; margin-bottom: 5px; position: inherit; height: auto; }
.clientlist li img { position: inherit; width: 100%; }

#work_cat ul { width: 100%; height: auto; }
#work_cat li { float: none; width: 100%; height: auto; display: block; margin: 0px 0px 5px; }
#work_cat li a:link, #work_cat li a:visited, #work_cat li#s_client a:link, #work_cat li#s_client a:visited { background-image: none; width: 100%; height: 37px; padding: 0px; line-height: 30px; border: 4px solid #10100f; background-color: #000; display: block; font-size: 16px; text-align: center; color: #FFF; }
#work_cat li.s_client a:link, #work_cat li.s_client a:visited { background: url(../images/mobile/menu_client_arrow_off.png) right no-repeat #000; }
#work_cat li.s_client a:hover, #work_cat li.s_client a:active, #work_cat li.s_client a.on { background: url(../images/mobile/menu_client_arrow_on.png) right no-repeat #000; }
#work_cat #work_clientlist { top: 170px; width: 100%; }
#work_cat #work_clientlist ul { float: none; width: 100%; }
#work_cat #work_clientlist li { float: left; width: 50%; }
#work_cat #work_clientlist li a:link, #work_cat #work_clientlist li a:visited { border: 0px; line-height: 18px; }

.showhide { height: 72px; }
.showhide a { width: 64px; height: 62px; background: url(../images/mobile/btn_showhide.png); }
.showhide a.showproject:hover { background-position: 0px -62px; }
.showhide a.hideproject { background-position: -64px 0px; }
.showhide a.hideproject:hover { background-position: -64px -62px; }

#address .add_left { float: none; width: 100%; }
#address .add_right { float: none; width: 100%; text-align: left; }
#address .add_right img { width: 100%; }
}

@media only screen and (max-width: 480px) {
#work_list ul { width:300px; margin:0 auto; }
#work_list li { width:300px; height:220px; }
#work_list li #list_img { width:300px; height:156px; }
#work_list li #list_img img { width:100%; }
}

@media only screen and (max-width: 360px) {
.corner_r { padding:20px 15px; }
#work_list ul { width:270px; margin:0 auto; }
#work_list li { width:270px; height:195px; }
#work_list li #list_img { width:270px; height:140px; }
}