/* CSS Document */ body{font-family:"Microsoft JhengHei", arial, helvetica; overflow-x:hidden} .fl{ float:left} .container{ width:960px; margin:auto auto; position:relative} .footer{ width:750px; color:#999; font-size:11px; position: absolute; z-index:100; text-align:center; top:720px; left:100px; line-height:14px } .footer a{ text-decoration:none; color:#999} .footer a:hover{ text-decoration:underline} .footer p{ display:block; margin-bottom:10px} .footer strong{ display:block; margin-bottom:5px;line-height:10px; font-weight:bold;} #step{ display:block; position:absolute; top:400px} #maincover{ background:url(../images/cover-bg.jpg) 50% 0 repeat-x fixed; height:960px} #maincover .iphone{ margin:160px 0px 0px 80px; z-index:99; background-image:url(../images/iphone.png) ; width:300px; height:700px;background-repeat:no-repeat; position: absolute} #maincover .iphone img{ display:block; -moz-margin:120px 45px 0px 45px; margin:100px 45px 0px 45px} #maincover .covertext{ width:500px;margin:190px 0px 0px 420px; position:absolute; } #maincover .ctext{position:absolute; width:482px; height:230px; background-image:url(../images/cover2.png); background-repeat:no-repeat; margin:350px 0px 0px 370px; } #maincover .ctext span{ display:block; margin:100px 50px 20px 170px; line-height:22px; font-size:14px} #maincover .covertext h1{ font-size:70px; color:#FFF; display:block; text-shadow: 0 -2px 2px #333; letter-spacing:-3px; font-size-adjust:0.58} #maincover .covertext h1 span{ font-size:55px; display:inline} #maincover .covertext span{ display:block} #maincover .covertext span.s1{ color:#EEE; font-size:23px; margin:10px 0px 0px; line-height:28px; font-weight:bold} #maincover .covertext span.s2{color:#66ccff; font-size:23px; line-height:36px; font-weight:bold} #aboutus{ background:url(../images/aboutus-bg.jpg) 50% 0 fixed;height:960px; z-index:99px} #aboutus .taboutus{ color:#FFF; font-size:40px; position:absolute; -webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg);-ms-transform:rotate(-12deg);text-shadow: -1px 0px 2px #333; font-weight:bold; top:220px; left:50px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9781476007338058, M12=0.2079116908177585, M21=-0.2079116908177585, M22=0.9781476007338058, SizingMethod='auto expand')"; top:180px \9} #aboutus .ipad{ background-image:url(../images/ipad.png); width:780px; height:900px; background-repeat:no-repeat; position:absolute} #aboutus .ipad #tt{-webkit-transform: rotate(-12deg); -moz-transform: rotate(-12deg); -o-transform: rotate(-12deg); -ms-transform:rotate(-12deg); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9781476007338058, M12=0.2079116908177585, M21=-0.2079116908177585, M22=0.9781476007338058, SizingMethod='auto expand')"; width:430px; line-height:25px; position:absolute; top:350px; left:160px;display:block; top:300px \9; left: 130px \9 } #aboutus .tea{ background-image:url(../images/tea.png); background-repeat:no-repeat; position:absolute; width:447px; height:447px; top:300px; left:550px} #product{height:960px; background: #91b6a9; /* Old browsers */ background: -moz-linear-gradient(top, #91b6a9 0%, #859992 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91b6a9), color-stop(100%,#859992)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #91b6a9 0%,#859992 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #91b6a9 0%,#859992 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #91b6a9 0%,#859992 100%); /* IE10+ */ background: linear-gradient(top, #91b6a9 0%,#859992 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b6a9', endColorstr='#859992',GradientType=0 ); /* IE6-9 */} #product .iphone1{ background-image:url(../images/ip1.png); background-repeat:no-repeat; position:absolute;width:333px; height:399px; z-index:60; top:350px; left:-10px} #product .iphone2{background-image:url(../images/ip2.png); background-repeat:no-repeat; position:absolute;width:288px; height:368px;z-index:59; top:200px; left:-60px} #product .iphone3{background-image:url(../images/ip3.png); background-repeat:no-repeat; position:absolute;width:256px; height:500px;z-index:58;top:50px; left:-10px} #product .pen{ background-image:url(../images/PAN.png); background-repeat:no-repeat; position:absolute;width:620px; height:750px;top:-90px; left:450px;z-index:80;} #product .re{ background-image:url(../images/ER.png); background-repeat:no-repeat; position:absolute;width:400px; height:750px;top:400px; left:450px;z-index:81;} #product .titleproduct{ color:#FFF; font-size:40px; position:absolute;text-shadow: -1px 0px 2px #333; font-weight:bold; top:220px; left:420px; top:170px} #service{ background:url(../images/services-bg.jpg) 50% 0 fixed repeat-x #332443;height:960px; } #service .icon1{ background-image:url(../images/icon1.png); background-repeat:no-repeat; position:absolute;width:400px; height:450px;top:70px;left:-100px;z-index:80;z-index:99;filter:alpha(opacity=60); opacity: 0.6; -moz-opacity:0.6; } #service .icon2{ background-image:url(../images/icon2.png); background-repeat:no-repeat; position:absolute;width:400px; height:450px;top:-50px; left:750px;z-index:99} #service .slog{ font-size:25px; color:#FFF; font-weight:bold; width:700px ; top:100px; text-align:center; left:180px; position:relative; line-height:30px; text-shadow: 0 -1px 1px #333;} #service .slog2{ font-size:12px; line-height:16px; color:#f39ac2; text-shadow:none} #contact{ background:url(../images/contactus-bg.jpg) 50% 0 fixed;height:960px; } #contact .notebook{ background-image: url(../images/notebook.png);background-repeat:no-repeat; position:absolute;width:700px; height:900px;} #contact .notebook .tt2{-webkit-transform: rotate(-13deg); -moz-transform: rotate(-13deg); -o-transform: rotate(-13deg);-ms-transform:rotate(-13deg); width:430px; line-height:25px; position:absolute; top:350px; left:160px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9743700647852352, M12=0.22495105434386484, M21=-0.22495105434386484, M22=0.9743700647852352, SizingMethod='auto expand')";} #menu{ width:740px; margin:auto auto; z-index:100;} #menu #nav{ display:block; position:fixed; top:30px; z-index:100;} #menu #nav li{ float:left; height:50px; } #menu #nav li.selected{background-image:url(../images/menu-bg.png); background-position:left -50px; color:#333} #menu #nav li a{background-image:url(../images/menu-bg.png); width:116px; display:block; line-height:49px; text-decoration:none; text-align:center; color:#666;text-shadow: 0 -1px 0 #FFF;} #menu #nav li a:hover, #menu #nav li a.selected{background-image:url(../images/menu-bg.png); background-position:left -50px; color:#333} #menu #nav li.mu-left{ background-image:url(../images/menu-left.png); display:block; width:28px } #menu #nav li.mu-right{ background-image:url(../images/bu-right.png); display:block; width:25px; background-repeat:no-repeat} #menu #nav li a#logo{ background-image:url(../images/logo.png); background-repeat:no-repeat; display:block; width:180px; height:65px; margin:0px 20px 0px 0px; position:relative; top:-10px; z-index:100} #menu #nav li a#logo:hover{background-image:url(../images/logo.png); background-repeat:no-repeat; display:block; width:180px; height:65px; margin:0px 20px 0px 0px; position:relative; top:-9px; background-position:left 0px;; z-index:100} .story .float-left, .story .float-right { padding: 100px 0 0; position: relative; width: 350px; } .slides{ position:absolute; z-index:99; left:500px} .slides_container {width:470px;display:none;z-index:99; left:280px; top:300px; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; background:url(../images/bg2.png) repeat-x; border:1px solid #FFF} .slides_container div { width:400px; height:170px; display:block; margin: 10px 16px} .slides_container div h1{ font-size:28px; color:#000; display:block; margin-bottom:10px} .slides_container div li{ line-height:20px; list-style-type: square; margin-left:15px} .pagination {list-style:none; display:block; margin:0;padding:0;z-index:99; left:400px; top:210px; float:left; position:absolute;} .pagination li{ display:block; float:left;} .pagination li a{ display:block; text-decoration:none; font-size:25px; color:#FFF; margin:15px; font-family:Arial, Helvetica, sans-serif; font-weight:bold; background:url(../images/dot.png) no-repeat bottom center; height:50px; text-align:center;width:20px;float:left;} .pagination .current a {color:#000;background:url(../images/dot2.png) no-repeat bottom;} .paginations{list-style:none; display:block; margin:0;padding:0;z-index:99; left:200px; top:210px; float:left; position:absolute; width:648px; z-index:100} .paginations li{display:block; float:left; margin:0px 2px} .paginations li a{ display:block;height:98px; text-decoration:none;text-align:center;width:88px; float:left; filter:alpha(opacity=90); opacity: 0.9; -moz-opacity:0.9;} .paginations .current a{filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; top:-10px; position:relative} .paginations li b{ display:block; font-family:Arial, Helvetica, sans-serif; float:left; color:#CCCCCC; font-weight:normal; font-size:11px ;text-align:center; width:100% } .slides_containers{ width:700px ; height:500px; position:relative; margin: 250px 0px 0px 160px} .slides_containers .ptest{ width:690px; color:#FFF; line-height:22px; float:left} .slides_containers .ptest .price img{ display:block} .slides_containers .ptest .price span{ display:block; width:170px; font-size:20px; text-align:center; margin-top:10px} .slides_containers .ptest .price, .slides_containers .ptest .con{ float:left; display:block} .slides_containers .ptest .con{ width:500px; margin:0px 0px 0px 20px} .slides_containers .ptest .con p{ font-weight:bold; font-size:18px; margin-top:10px} .slides_containers .ptest .con li{ list-style:square inside; padding-left:4px; font-size:14px; color:#CCC } .slides_containers .ptest h5{ font-size:30px; line-height:44px}