/* Reset 清除樣式 ------------------------------------------------------------------------------*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;font-size: 12px;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;} /* 兩邊等高-li*/ html[xmlns] .clearfix_ul { display: block;} .clearfix_ul li:after{ content: "."; display: block; clear: both; line-height: 0; height: 0; visibility: hidden; } .clearfix_ul li { display: inline-block;} * html .clearfix_ul { height: 1%;} /*自動100%撐開*/ .aut100 { overflow: hidden; } .aut100 .left { float: left; } .aut100 .right { overflow: hidden; } /*文字設定*/ .t_num{ font-family: Verdana, Geneva, sans-serif; font-size: 18px; } .t_date{ font-family: Verdana, Geneva, sans-serif; font-size: 10px; } .t_red{ color: #C00; } .t_green{ color: #360; } .t_blue{ color: #0757d0; } .t_grey{ color: #999; } .t_qrange{ color: #ED5700; } .clear { clear: both; } /*頁碼*/ .page { text-align: center; margin-top: 10px; margin-bottom: 10px; clear: both; color: #666; width: 100%; } .page a { display: block; float: left; padding-top: 1px; padding-bottom: 1px; margin-right: 5px; margin-left: 5px; border: 1px solid #E6E6E6; color: #333; text-decoration: none; height: 20px; width: 20px; text-align: center; } .page a:hover { color: #ff881f; text-decoration: underline; } /* Layout 排版 ------------------------------------------------------------------------------*/ body /*網頁主體*/{ background-image: url(../images/bg.jpg); color: #333; line-height: 150%; font-size: 12px; font-family: Arial, Helvetica, sans-serif; } #warp /*網頁寬度*/{ width: 990px; margin-right: auto; margin-left: auto; background-image: url(../images/contbg.jpg); background-repeat: repeat-y; } #cont/*中間區塊*/{/*自動100%*/overflow: hidden;} #main/*主欄*/{ min-height:500px; width: 745px; float: left; } #sidebar/*側欄*/{ float: right; width: 227px; padding-right: 9px; padding-left: 9px; color: #CCC; } #sidebar a { color: #FC3; } #footer .b a{ color: #666; text-decoration: none; } #footer a{ color: #CCC; text-decoration: underline; } #footer { clear: both; width: 990px; margin-right: auto; margin-left: auto; margin-top: 10px; color: #CCC; padding-bottom: 6px; line-height: 1em; position: relative; font-family: Verdana, Geneva, sans-serif; text-align: center; } #footer .left { position: absolute; left: 0px; top: 5px; text-align: left; } #footer .right { position: absolute; top: 15px; right: 0px; text-align: right; } #footer p{ margin-bottom: 5px; } #footer p.b{ color: #FFF; } #main_box { background-image: url(../images/contbg2.jpg); background-repeat: repeat-x; padding-top: 35px; padding-right: 30px; padding-bottom: 35px; padding-left: 30px; } #portfolio_box { background-image: url(../images/por_hd.jpg); background-repeat: repeat-x; padding-top: 35px; padding-right: 30px; padding-left: 30px; padding-bottom: 0px; margin-bottom: 0px; } .box .hd { background-repeat: no-repeat; color: #000; padding-bottom: 30px; padding-top: 10px; } .box .hd h1 { font-size: 26px; font-weight: normal; } .box .hd h1 em { font-size: 13px; color: #FFF; } .box h2 { font-size: 15px; color: #ED5700; margin-bottom: 10px; } .box p{ margin-bottom: 15px; line-height: 1.8em; } .btn { margin-bottom: 10px; text-align: center; clear: both; margin-top: 10px; } .btn input,.btn a{ margin-right: 7px; margin-left: 7px; } .button { border: 1px solid #ADADAD; color: #333; font-size: 11px; font-weight: bold; line-height: 20px; background-image: url(images/button.jpg); background-repeat: repeat-x; background-position: left top; } #banner{ background-image: url(../images/banner.jpg); height: 391px; width: 100%; background-repeat: no-repeat; } #banner ul { visibility: hidden; } #header { height: 37px; background-image: url(../images/navigation_bg.jpg); background-repeat: repeat-x; position: relative; } #header #menu { position: absolute; left: 0px; top: 0px; } #header #menu li { display: inline; } #header #menu a{ float: left; height: 37px; background-repeat: no-repeat; display: block; text-decoration: none; } #header #menu a span { visibility: hidden; } #header #menu .m1 a{ background-image: url(../images/navigation_1.jpg); width: 125px; } #header #menu .m2 a{ background-image: url(../images/navigation_2.jpg); width: 105px; } #header #menu .m3 a{ background-image: url(../images/navigation_3.jpg); width: 108px; } #header #menu .m4 a{ background-image: url(../images/navigation_4.jpg); width: 93px; } #header #menu .m5 a{ background-image: url(../images/navigation_5.jpg); width: 94px; } #header #menu .m6 a{ background-image: url(../images/navigation_6.jpg); width: 80px; } #header #menu .m7 a{ background-image: url(../images/navigation_7.jpg); width: 86px; } #header #menu .m1:hover a{ background-image: url(../images/navigation_1a.jpg); } #header #menu .m2:hover a{ background-image: url(../images/navigation_2a.jpg); } #header #menu .m3:hover a{ background-image: url(../images/navigation_3a.jpg);} #header #menu .m4:hover a{ background-image: url(../images/navigation_4a.jpg); } #header #menu .m5:hover a{ background-image:url(../images/navigation_5a.jpg); } #header #menu .m6:hover a{ background-image: url(../images/navigation_6a.jpg); } #header #menu .m7:hover a{ background-image: url(../images/navigation_7a.jpg);} /*語系連結*/ #header #lang{ float: right; position: absolute; top: 0px; right: 0px; } #header #lang li { float: right; } #header #lang a span { visibility: hidden; text-decoration: none; } #header #lang a{ display: block; height: 37px; float: right; text-decoration: none; } #header #lang .tw a{ background-image: url(../images/languages_1.jpg); width: 41px; text-decoration: none; } #header #lang .cn a{ background-image: url(../images/languages_2.jpg); width: 48px; text-decoration: none; } #header #lang .en a{ background-image: url(../images/languages_3.jpg); width: 71px; text-decoration: none; } #header #lang .home a{ background-image: url(../images/home.jpg); width: 71px; text-decoration: none; } .logo{ margin-top: 7px; text-align: center; } .logo a{ background-image: url(../images/logo.jpg); background-repeat: no-repeat; display: block; height: 59px; width: 215px; } #index .left { width: 285px; margin-left: 5px; } #index .right { float: right; width: 350px; margin: 0px; } /*作品選單*/ #submenu{ width: 227px; margin-right: auto; margin-left: auto; margin-top: 15px; } #submenu li{ list-style-type: none; list-style-position: outside; } #submenu a span{ text-decoration: none; visibility: hidden; } #submenu a{ display: block; height: 34px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #4d4c4c; text-decoration: none; } #submenu .seohot{ background-image: url(../images/p_menu1.jpg); padding-top: 29px; background-repeat: no-repeat; } #submenu .m1{ background-image: url(../images/p_menu3.jpg); } #submenu .m2{background-image: url(../images/p_menu5.jpg);} #submenu .m3{background-image: url(../images/p_menu6.jpg);} #submenu .m4{background-image: url(../images/p_menu4.jpg);} #submenu .m5{background-image: url(../images/p_menu10.jpg);} #submenu .m6{background-image: url(../images/p_menu7.jpg);} #newswork { background-image: url(../images/newswork.jpg); background-repeat: no-repeat; padding-top: 30px; margin-top: 20px; } #newswork ul .left { margin-right: 0px; margin-left: 5px; width: 90px; float: left; } #newswork ul .right { background-image: url(../images/newsbtn.jpg); background-repeat: no-repeat; padding-top: 15px; float: right; margin-right: 5px; } #newswork ul .name a{ color: #FFF; font-family: Verdana, Geneva, sans-serif; margin-bottom: 4px; display: block; } #ad { margin-top: 20px; } #newslist ul .m1 { background-image: url(../images/new1.jpg); padding-top: 90px; background-repeat: no-repeat; } #newslist { background-image: url(../images/h2_1.jpg); background-repeat: no-repeat; padding-top: 50px; } #newslist ul .m2 { background-image: url(../images/new2.jpg); padding-top: 90px; background-repeat: no-repeat; } #newslist ul .title a { color: #0e63b6; font-weight: bold; margin-bottom: 10px; display: block; } #newsp { background-image: url(../images/h2_2.jpg); background-repeat: no-repeat; padding-top: 50px; } #newsp ul li img { height: 60px; width: 60px; border: 3px solid #f0f0f0; } #newsp ul li { float: left; margin-right: 20px; margin-bottom: 15px; } #msn { background-image: url(../images/hd5.jpg); background-repeat: no-repeat; padding-top: 40px; } #about { background-image: url(../images/aboutus_bg.jpg); background-repeat: no-repeat; background-position: right top; text-align: justify; } #about .text .col1 { width: 298px; } #services { background-image: url(../images/service_bg.jpg); background-repeat: no-repeat; background-position: right top; } #services .text .col1 { width: 324px; margin-bottom: 30px; } #services .text ul li { background-image: url(../images/service_it.jpg); background-repeat: no-repeat; background-position: left 8px; padding-left: 25px; color: #999; float: left; width: 46%; display: block; margin-bottom: 20px; } #services .text ul li h3 { color: #596a69; font-size: 15px; } #contact .text .right { } #contact .text.aut100 .right table td { padding: 5px; } #contact .text.aut100 .left { margin-right: 30px; } #contact .text.aut100 .right ul li { background-image: url(../images/2_Category.gif); background-repeat: no-repeat; background-position: left 5px; padding-left: 20px; } #contact .text.aut100 .right ul { margin-bottom: 15px; } #contact .text.aut100 .right ul li a { color: #949303; } #contact .text.aut100 .right .btn { text-align: left; } #news { background-image: url(../images/newidea_bg.jpg); background-repeat: no-repeat; padding-bottom: 45px; } #news ul { padding-top: 20px; } #news .hd h1 { margin-bottom: 20px; } #news .hd { height: 75px; } #news ul li .date{ position: absolute; right: 10px; float: left; width: 30%; } #news .left{ width: 20%; } #news .text { padding-left: 15px; } #news .right{ } #news ul li{ padding-top: 10px; padding-bottom: 10px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #CCC; } #news .text .hd2 .left { color: #FFF; } #news .text .hd2 .right { color: #FFF; } #news ul li .left{ right: 10px; float: left; } #news ul li .info{ color: #666; clear: both; margin-top: 7px; } #news ul li .right a ,#news ul li .right{ font-size: 13px; color: #ED5700; font-weight: bold; } #news_dia .left{ right: 10px; float: left; } #news_dia { margin-top: 15px; } #news_dia .info{ color: #666; clear: both; margin-top: 7px; } #news_dia .right a ,#news_dia .right{ font-size: 13px; color: #ED5700; font-weight: bold; } #link .text ul li .title a{ font-size: 15px; color: #67972D; text-decoration: none; margin-bottom: 7px; padding-left: 20px; } #link .text ul li p { padding-left: 20px; } #link .text ul li { background-image: url(../images/link_03.jpg); background-repeat: no-repeat; background-position: left 3px; float: left; width: 50%; color: #505050; } #link .text ul { clear: both; padding-bottom: 40px; } #link .text .clear { clear: both; margin-bottom: 20px; } #portfolio_box .box #portfolio .hd h1 { margin-bottom: 30px; } #portfolio_box .box .hd { line-height: 2em; padding-top: 0px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } #portfolio_box .btn { margin-top: 0px; } /*作品類別列表*/ #gallery{ margin-bottom: 10px; } #gallery li{ float: left; width: 49%; overflow: hidden; font-size: 12px; height: 125px; line-height: 1.5em; } #gallery img.ngg-singlepic{ float: left; height: 95px; width: 100px; margin-right: 10px; border: 1px solid #CCC; padding: 0px; } #gallery .exc a{ display: block; padding-bottom: 0px; color: #666; text-decoration: underline; color: #ee5700; } #gallery .tag a{ color: #656565; } #gallery p { margin-bottom: 0px; margin-top: 0px; } #gallery a.title{ font-size: 13px; color: #656565; font-weight: bold; display: block; margin-top: 3px; } /*網頁設計的上面標籤*/ #tagp{ margin-top: 50px; } #tagp li{ display: inline; } #tagp a{ display: block; float: left; padding-top: 2px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border: 1px solid #E0E0E0; background-color: #F3F3F3; margin-right: 7px; text-decoration: none; color: #393A3C; } #header #lang ul a { text-decoration: none; } .portfolio #tagp .portfolio a { color: #FFF; background-color: #ED5700; } .portfolio_activity #tagp .portfolio_activity a { color: #FFF; background-color: #ED5700; } .portfolio_b2b #tagp .portfolio_b2b a { color: #FFF; background-color: #ED5700; } .portfolio_blog #tagp .portfolio_blog a { color: #FFF; background-color: #ED5700; } .portfolio_cart #tagp .portfolio_cart a { color: #FFF; background-color: #ED5700; } .portfolio_image #tagp .portfolio_image a { color: #FFF; background-color: #ED5700; } .portfolio_organ #tagp .portfolio_organ a { color: #FFF; background-color: #ED5700; } .portfolio_portal #tagp .portfolio_portal a { color: #FFF; background-color: #ED5700; } .msn .left{ width: 47%; float: left; margin: 0px; padding: 0px; } .msn .right{ width: 47%; float: right; margin: 0px; padding: 0px; }