/*=== Sloths CSS */

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:red;text-decoration:none;}
a:active {color:#000;text-decoration:none;}

body {width:100%;margin:0;font-size:11px;background:#2A3640 url(../images/bg.gif) repeat-x;padding:22px 0 5px;color:#333;}

* {font-style:normal;font-size:11px;font-family:tahoma,sans-serif;padding:0;margin:0;}
img,a img {border:0;}
.clear {height:0;overflow:hidden;clear:both;}
.btn {cursor:pointer;}
ul,ol {list-style:none;}
.left {float:left;}
.right {float:right;}


/*=== logo */
h1 {width:890px;margin:0 auto -82px;padding:10px 30px 0;position:relative;}
h1 a {display:block;background:url(../images/logo.gif) no-repeat;width:201px;height:71px;text-indent:-1000px;overflow:hidden;}
h2.slogan {height:77px;text-align:right;padding:0 30px;font-size:28px;color:#999;line-height:77px;font-family:"Times New Roman",arial,sans-serif;font-weight:normal;}

/*=== out */
.out {background:#fff url(../images/top.gif) repeat-x;width:948px;margin:0 auto;overflow:hidden;}
.corner_top,
.corner_top p,
.corner_bot,
.corner_bot p {clear:both;height:10px;overflow:hidden;background:url(../images/corner.gif) no-repeat;text-indent:-1000px;}
.corner_top p {background-position:right -10px;}
.corner_bot {background-position:0 -20px;}
.corner_bot p {background-position:right -30px;}

/*=== nav */
#nav {height:32px;line-height:32px;position:relative;z-index:10;}
#nav li {position:absolute;}
#nav li.f1 {left:0;}
#nav li.f2 {left:86px;}
#nav li.f3 {left:181px;}
#nav li.f4 {left:262px;}
#nav li.f5 {left:353px;}
#nav li.f6 {left:445px;}
#nav li.f7 {left:524px;}
#nav li.f8 {left:603px;}
#nav li.f9 {left:676px;}
#nav li.f10 {left:750px;}

#nav a {display:block;color:#fff;padding:0 20px;float:left;background:url(../images/nav.gif) right 0 no-repeat;}
#nav a:hover,#nav a.sp {background:url(../images/nav.gif) 0 -32px repeat-x;}

#nav li p {clear:both;display:none;width:180px;background:#369;border:2px #014B72 solid;border-top:0;border-bottom-width:1px;}
#nav li p a {line-height:15px;float:none;background:none;display:block;padding:8px 20px;border-bottom:1px #014B72 solid;}
#nav li p a:hover {background:#69c;}

/*=== features */
#features {width:100%;background:#0A0E11 url(../images/featured.gif) 0 250px repeat-x;color:#fff;height:330px;overflow:hidden;border-bottom:4px #C1C1C1 solid}
#features h2 {overflow:hidden;width:25%;background:url(../images/featured.gif) right -80px no-repeat;float:left;height:80px;color:#fff;cursor:pointer;}
#features h2.hover {background:url(../images/featured.gif) right -160px;}
#features h2.sp {background:url(../images/featured.gif) right -240px;}

#features h2 em {background-position:25px;background-repeat:no-repeat;font-weight:normal;display:block;font-size:14px;text-indent:85px;height:80px;line-height:80px;}
#features h2 em.f1 {background-image:url(../images/soft.gif);}
#features h2 em.f2 {background-image:url(../images/design.gif);}
#features h2 em.f3 {background-image:url(../images/qa.gif);}
#features h2 em.f4 {background-image:url(../images/global.gif);}

#features #banner {-moz-user-select:none;width:100%;height:250px;position:relative;overflow:hidden;}
#features ul {width:3800px;height:250px;position:absolute;left:0;}
#features ul li {width:950px;height:250px;float:left;background-position:97%;background-repeat:no-repeat;}
#features ul li.f1 {background-image:url(../images/f1.gif);}
#features ul li.f2 {background-image:url(../images/f2.gif);}
#features ul li.f3 {background-image:url(../images/f3.gif);}
#features ul li.f4 {background-image:url(../images/f4.gif);}

#features h3 {padding:30px 30px 10px;font-size:25px;font-family:arial;line-height:30px;}
#features ol {padding:0 190px 40px 60px;list-style:square;}
#features ol li {font-size:16px;font-family:arial;float:none;width:auto;height:auto;color:#aaa;}
#features ol li h4 {display:inline;color:#fff;font:normal 22px "Times New Roman",tahoma,sans-serif;padding:0 5px;}

h2.title {border-bottom:3px #eee double;height:50px;line-height:50px;margin-bottom:15px;background:url(../images/h2_t.gif) 0 no-repeat;text-indent:50px;font-size:16px;}
h2.t0 {text-indent:0;background:none;padding:20px 0 15px;height:auto;line-height:13px;font-size:12px;}

/*=== info */
#info {height:280px;padding:0 20px;overflow:hidden;}
#info .contact {float:right;border-left:1px #ccc solid;width:220px;padding:20px 0 20px 20px;height:240px;margin-bottom:-10px;}
#info .contact a {color:#369;}
#info .contact a:hover {color:#000;}
.corner_bot {margin-top:-10px;}
#info .contact * {font-size:13px;}
#info .contact h2 {color:#578;padding-bottom:15px;}
#info .contact h2.n {padding-top:15px;}
#info .contact p {line-height:18px;text-indent:15px;}

#info .project,#info .contents {color:#000;float:left;width:640px;}
#info .project p {float:left;width:310px;}
#info .project p.n {float:right;display:none;}

#info .project p a.n {position:relative;margin-top:-170px;float:right;background:#f90;border:2px #fff solid;color:#fff;padding:5px;}
#info .project p a.n:hover {background:#f60;}

#info .project p a.s img {display:block;}
#info .project p a.s em.title {filter:alpha(opacity = 80);-moz-opacity:0.8;opacity:0.8;width:300px;position:absolute;margin-top:-50px;display:block;background:#fff;color:#930;font:bold 16px "Times New Roman",tahoma,sans-serif;}
#info .project p a.s:hover em.title span {display:none;}
#info .project p a.s em.title span {display:inline;position:static;}
#info .project p a.s span {height:0px;overflow:hidden;display:block;}
#info .project p a.s:hover span {position:absolute;height:auto;;z-index:100;cursor:pointer;display:block;width:300px;padding:5px 10px;filter:alpha(opacity = 90);-moz-opacity:0.9;opacity:0.9;background:#fff;color:#f60;margin-top:-135px;margin-left:85px;}
#info .project p a.s:hover span em {display:block;text-align:right;}

/*=== copyright */
#copyright {color:#fff;text-align:center;padding-top:10px;}
#copyright a {color:#fff;}
#copyright a:hover {color:#ccc;}

/*=== title */
#title {padding-top:18px;height:62px;background:#0A0E11;border-bottom:4px #ccc solid;overflow:hidden;
color:#999;font-size:22px;text-indent:50px;font-family:"Times New Roman",tahoma,sans-serif;}
#title h2 {padding-top:3px;font-size:13px;font-family:arial;font-weight:normal;}
#title.iphone {height:85px;background:#000 url(../images/iphone.jpg) 50% 19px no-repeat;}

/*=== detail */
#info.detail {height:auto;}
#info.detail .contact {height:auto;padding-bottom:281px;overflow:hidden;}
#info.detail #con.contact {padding-bottom:0;height:520px;}
#info.detail .contents {border-right:1px #ccc solid;padding-right:27px;padding-bottom:20px;margin-right:-1px;}
#info.detail .project ul.sitemap {width:260px;font-weight:bold;line-height:22px;padding-left:60px;float:left;}
#info.detail .project ul.sitemap li {text-indent:15px;background:url(../images/dot.gif) 0 8px no-repeat;}
#info.detail .project ul.sitemap ul {font-weight:normal;list-style:circle;padding-left:50px;}
#info.detail .project ul.sitemap ul li {background:none;}

#info.detail #infos {float:left;width:100%;padding-bottom:30px;}
#info.detail #infos .contact p {background:none;}

#info.detail #infos ul,
#info.detail #infos ol {float:left;}

#info.detail #infos ol {width:185px;padding-right:10px;}
#info.detail #infos ol li {overflow:hidden;background:url(../images/dot.gif) 3px no-repeat;cursor:pointer;margin-bottom:1px;}
#info.detail #infos ol li.hover,
#info.detail #infos ol li.sp {background-color:#eee;}
#info.detail #infos ol li.child {padding-bottom:10px;background:none;text-align:right;}
#info.detail #infos ol li.child p {padding-right:5px;font-size:10px;line-height:15px;}
#info.detail #infos ol li.child p.sp,
#info.detail #infos ol li.child p.hover{font-weight:bold;}
#info.detail #infos ol li h3 {padding:3px 0 3px 20px;}
#info.detail #infos ol li h3 a {color:#666;display:block;}
#info.detail #infos ol li.sp h3,
#info.detail #infos ol li.hover h3 {background:url(../images/li.gif) right 0 repeat-y;color:#000;}
#info.detail #infos ol li.sp h3 a,
#info.detail #infos ol li.hover h3 a {color:#000;}
#info.detail #infos ol li.case {padding:0 0 0 33px;line-height:20px;background:none;}
#info.detail #infos ol li.case h3 {background:none;}

#info.detail #infos ul {width:430px;overflow:hidden;float:right;}
#info.detail #infos ul li {display:none;}
#info.detail #infos ul li.sp {display:block;}

#info.detail #infos ul h3 {font-family:"Times New Roman",tahoma,sans-serif;font-size:20px;color:#036;padding:20px 0 5px;}
#info.detail #infos ul h3 a {font-size:20px;}
#info.detail #infos ul h4 {font-size:14px;font-family:"Times New Roman",tahoma,sans-serif;padding:15px 0 5px;color:#000;}
#info.detail #infos ul h4 a {font-size:14px;text-decoration:underline;}
#info.detail #infos ul p {padding:6px 0 6px 20px;line-height:15px;background:url(../images/dot.gif) 10px 12px no-repeat;}
#info.detail #infos ul p.s {padding:3px 0 3px 30px;background:url(../images/dot2.gif) 20px 8px no-repeat;color:#666;}
#info.detail #infos ul p.n {background:none;line-height:18px;padding:6px 0;}

#info.detail #infos ul h4.img {cursor:pointer;margin:15px 5px;overflow:hidden;width:202px;height:122px;float:left;text-align:right;position:relative;border:1px #f60 solid;padding:0;}
#info.detail #infos ul h4.img em {display:block;position:absolute;right:0;height:20px;line-height:20px;background:#f60;border-left:1px #fff solid;border-bottom:1px #fff solid;color:#fff;padding:0 10px;}
#info.detail #infos ul h4.img img {width:200px;height:120px;margin:1px;}
#info.detail #infos ul img.case_img {display:block;margin:10px 0;padding:1px;border:1px #ddd solid;}

#info.detail #infos ul p.prove {padding:5px;margin:5px 0;background:#cef;}
#info.detail #infos ul p.prove em {display:block;text-align:right;font-weight:bold;}

#info.detail .book {width:650px;overflow:hidden;float:left;}
#info.detail .book div {width:48%;overflow:hidden;}
#info.detail .book p,#info.detail .book h3 {font-size:16px;line-height:30px;background:none;padding-left:50px;}
#info.detail .book p a {font-size:16px;text-decoration:underline;}
#info.detail .book h3 {font-size:18px;padding:20px 30px;}
#info.detail .contact textarea {height:200px;width:98%;border:1px #369 solid;}
#info.detail .contact div {text-align:center;margin:10px 0;}
#info.detail .contact div.n {text-align:left;}
#info.detail .contact div .btn {background:#f90;color:#fff;padding:0 5px;margin:5px;border:1px #f60 solid;}
#info.detail .contact div .txt {width:120px;float:right;margin-top:-18px;border:1px #369 solid;}

img.m {display:block;margin:10px auto;}


.red {color:#c00;}
.center {text-align:center;}
.bold {font-weight:bold;}


#info.detail #infos ul.ip {float:left;width:290px;padding:0 5px;}
#info.detail h3.ti {text-align:center;font-family:"Times New Roman",tahoma,sans-serif;font-size:20px;color:#036;padding:5px 0;}
#info.detail #infos ul.ip h3 {padding:5px 0;margin-bottom:0;text-align:center;border-bottom:1px #666 solid;}

#fe {height:306px;padding:20px;}
#fe img {float:left;padding-right:10px;}
#fe img.sp {float:right;padding-left:10px;}
#fe a {float:left;width:450px;height:100px;padding-bottom:2px;overflow:hidden;}
#fe a span {font-weight:bold;line-height:18px;}

#info.detail #infos ul.ip li.sp {background:none;padding:0;height:35px;overflow:hidden;}
#info.detail #infos ul.ip li {background:#f6f6f6;border:1px #ccc solid;border-top-color:#eee;display:block;height:42px;padding:0;}

#info.detail #infos ul.ip a.m {float:left;padding:5px;}
#info.detail #infos ul.ip a.n {width:167px;float:left;padding:5px;font-weight:bold;background:url(../images/dot2.gif) 98% no-repeat;}
#info.detail #infos ul.ip a.n img {padding-right:5px;}
#info.detail #infos ul.ip a.n * {float:left;display:block;}
#info.detail #infos ul.ip a.n var {padding-top:3px;cursor:pointer;float:left;}
#info.detail #infos ul.ip a.n:hover {background-color:#ddd;background-image:url(../images/dot.gif)}
#info.detail #infos ul.ip var {float:right;font-weight:bold;}

#info.detail #infos ul.ip a.ns {padding:5px 0;float:left;width:286px;background:url(../images/dot2.gif) 98% no-repeat;}
#info.detail #infos ul.ip a.ns:hover {background-color:#ddd;background-image:url(../images/dot.gif)}
#info.detail #infos ul.ip a.ns img {float:left;padding:0 5px;}
#info.detail #infos ul.ip a.ns var {padding-top:3px;float:left;width:220px;}
#info.detail #infos ul.ip a.ns span {float:left;width:220px;font-size:9px;}

#info.detail #infos .contents {float:left;width:400px;font-size:12px;height:824px;overflow:hidden;}
#info.detail #infos .contents h4 {clear:both;font-size:14px;padding:10px 0;}
#info.detail #infos .contents p {padding-left:20px;background:url(../images/dot.gif) 0 no-repeat;}
#info.detail #infos .contents p.n {padding:0;background:none;font-size:12px;}
#info.detail #infos .contents a {display:block;text-align:center;width:200px;margin-left:100px;height:40px;}

#fe.ok {height:844px;overflow:hidden;}

#info.detail #infos #fe.ok p {background-position:0 4px;}

#imgs {position:relative;width:320px;margin:10px;float:right;height:480px;background:url(../iphone/back.png) 0 no-repeat;padding:120px 36px 225px;}
#imgs img {display:block;position:absolute;top:121px;}
#imgs.s img {top:161px;}
#imgs.s {padding:160px 36px 225px;}
#control {width:12px;position:absolute;z-index:10000;left:-15px;}
#control a {margin-bottom:2px;background:#9ce;color:#fff;display:block;height:12px;width:12px;text-align:center;line-height:12px;}
#control a.curr {background:#f60;}