@charset "utf-8";
/*
*********************************

Created by 温岭帅大利网络科技有限公司
         www.sdl888.cn

*********************************
*/
@import url('reset.css');
@import url('visual.css');

*{margin:0; padding:0;}
body{background:url(../images/visual/dpattern.jpg) repeat-y 50% 0% #141318;}
#quote-form {width:100%;}
#quote-form .info {padding-left:20px;}
#loadInfo {display:none;}

/*--- TITLES ---*/
#primary h1{padding-top:25px;}
body#serv.prepare h1{line-height:0.5em;}
body#serv.prepare h1 strong{
	text-indent:-999em;
	display:block;
	width:100%;
	height:60px;
	background:url(../images/visual/title-prepare.png) no-repeat 100% 0;
	text-align:left;
}
body#serv.innovate h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:50px; 
	background:url(../images/visual/title-ino.png) no-repeat 100% 0;
	text-align:left;
}
body#news h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:60px; 
	background:url(../images/visual/title-folio.png) no-repeat 100% 0;
	text-align:left;
}
body#news h1 span{display:none;}
body#team h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:50px; 
	background:url(../images/visual/title-team.png) no-repeat 100% 0;
	text-align:left;
}
body#marketing h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:60px; 
	background:url(../images/visual/title-marketing.png) no-repeat 100% 0;
	text-align:left;
}
body#marketing h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:63px; 
	background:url(../images/visual/title-marketing.png) no-repeat 93% 0;
	text-align:left;
}
body#marketing h1 span{top:-10px; position:relative;}
body#contact h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:63px; 
	background:url(../images/visual/title-contact.png) no-repeat 100% 0;
	text-align:left;
}
body#case h1 i{
	text-indent:-999em;
	display:block;
	width:100%;
	height:63px; 
	background:url(../images/visual/title-request.png) no-repeat 100% 0;
	text-align:left;
}

/*--- BACKGROUNDS ---*/
body#home #outer {background:url(../images/768/field1.jpg) repeat-x 50% 0;}
body#home #inner {background:url(../images/768/field2.jpg) repeat-x 50% 130px;}
body#home #deeper {background:url(../images/768/field3.jpg) repeat-x 50% 294px;}
#container {width:98%;}
#prefooter {width:98%;}
#footwrap {width:93%;}
#services {width:95%;}

/*--- HEADER ---*/
header#masthead {height:130px; position:relative;}
header .logo {
	width:174px;
	left:50%;
	margin-left:-87px;
	background:url(../images/768/logo-ribbon.png) no-repeat 50% 100%; 
	padding:10px 0 55px 0;
}
header .logo span {font-size:12px; letter-spacing:0;}
header .logo:hover {padding:30px 0 55px 0;}
header .logo img{width:80%;}

/*--- INSIDE CONTAINER ---*/
body#serv #primary {background:none; height:780px;}
#outer {background:url(../images/768/field1.jpg) repeat-x 50% 0;}
body.expand header#masthead {height:130px;}
body.expand #inner {background:url(../images/visual/home-midfield.jpg) repeat-x 50% 230%; border-bottom:1px solid #015F92;}
#primary h1 {font-size:4.3em; padding:35px 25px 0 0; height:107px; line-height:0.7em;}
#primary h1 strong {font-weight:800;}
body#serv.prepare #primary {height:910px;}
body.prepare #inner {background-position:50% 170%;}

/*--- SUBNAV ---*/
#subnav {left:25px;}
#subnav {position:absolute; top:55px;}
#subnav li{float:left; margin-right:15px;}
#subnav li a{
	display:block;
	width:147px;
	height:56px;
	text-align:center;
	font-size:1em;
	color:#fff;
	background:url(../images/visual/subnav-btn.png) no-repeat 0 -56px;
	line-height:40px;
	text-shadow:2px 2px 0 #000;
	text-transform:uppercase;
	letter-spacing:normal;
}
#subnav li a:hover, #subnav .active a{background-position:0 0;}

/*--- INSIDE SERVICES ---*/
body#serv section{width:48%; position:absolute; z-index:999;}
body#serv section h3{font-size:1em;}
body#serv section[role='design']{top:155px; left:0;}
body#serv section[role='multi']{top:135px; right:10px;}
body#serv section[role='mobile']{top:340px; left:120px;}
body#serv section[role='dev']{bottom:20px; right:0; width:64%; color:#fff;}
body#serv section[role='cms']{top:145px; left:0; width:50%;}
body#serv section[role='seo']{top:340px; left:0; width:40%;}
body#serv section[role='stats']{top:150px; right:0; width:48%; }
body#serv section[role='ecommerce']{top:380px; right:0; width:28%;}
body#serv section[role='hosting']{top:640px; right:0; width:50%; color:#fff;}
body#serv section[role='dev'] .serv-icon a{background-position:-76px -93px;}
body#serv section[role='ecommerce'] .serv-icon {height:45px; left:-10px; position:relative;}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce {
	margin:0 auto;
	height:45px;
	width:45px;
	background-position:-545px -15px;
	left:0;
	top:0;
}
body#serv section[role='ecommerce'] .serv-icon .icon-ecommerce:hover {background-position:-545px -95px;}
body#serv section[role='ecommerce'] h2 strong{display:block;}
body#serv section[role='seo'] p{padding-right:30px;}
body#serv section[role='hosting'] p{padding-right:30px; margin-bottom:15px;}
body#serv section[role='hosting'] h2{text-transform:uppercase; font-size:1.2em; line-height:2em; margin-bottom:10px;}
body#serv section[role='hosting'] h2 strong{
	display:block;
	font-size:3.5em;
	letter-spacing:-2px;
	color:#fff;
	font-weight:800;
	margin-bottom:25px;
}

/*--- MOBI ---*/
body#serv .mobi a{
	display:block;
	background:url(../images/768/innovate-mobile.png) no-repeat;
	width:280px;
	height:290px;
	position:absolute;
	top:440px;
	left:15px;
	text-indent:-999em;
}

/*--- SCREENS ---*/
body#serv .screens a{
	display:block;
	background:url(../images/768/innovate-screen.png) no-repeat;
	width:380px;
	height:271px;
	position:absolute;
	top:320px;
	right:0;
	text-indent:-999em;
}

/*--- TWINS ---*/
body#serv .twins a{
	display:block;
	background:url(../images/768/prepare-twins.png) no-repeat;
	width:280px;
	height:297px;
	position:absolute;
	top:360px;
	left:50%;
	margin-left:-110px;
	text-indent:-999em;
}

/*--- SPACEBOY ---*/
body#serv .spaceboy a{
	display:block;
	background:url(../images/visual/design-trooper.png) no-repeat;
	width:160px;
	height:290px;
	position:absolute;
	bottom:0;
	left:20px;
	text-indent:-999em;
}

/*--- BIG CTA ---*/
body#serv .cta.big {position:absolute; bottom:0; left:140px;}
body#serv .cta.big:hover {background:rgba(0,0,0,1);}

/*--- //// DETAIL ////  SERVICES & PAGES ---*/
body.expand.details #outer {margin-bottom:25px;}

/*--- CHANGE VALUE = 0 WHEN ADDING marketingS ---*/
body.expand.details #inner {background-position:50% 180%;}
body.expand.details #primary {background:none;}
body.details #primary section{padding:20px; width:45%;}
body.details #primary #secondary {width:45%; position:absolute; right:0;}
body#serv.details #primary {height:870px;}

/*--- ANALYTICS ---*/
body.details #primary.analytics section{width:95%;}
body#serv.details #primary.analytics .cta.big {top:450px; left:20px; right:auto;}

/*--- case LINK ---*/
body#serv.details #primary .big {
	max-width:150px;
	height:40px; 
	text-align:center;
	position:absolute;
	top:auto;
	bottom:220px;
	right:25px;
	left:auto;
	font-size:1em;
	line-height:40px;
}

/*--- SERVICE caseS ---*/
body#serv.details #primary aside{display:none;}
body#serv.details aside h3{margin-bottom:25px;}
body#serv.details aside p{font-size:1em;}

/*--- SERVICE marketing POSTS ---*/
body#serv.details .marketing-post {width:45%; float:left; margin:0 2.5%;}
body#serv.details .brands {width:100%;}

/*---- FULL marketing POST ---*/
body#marketing.full-post #search {width:180px;}
body#marketing.full-post .marketing-post img {border:1px solid #666; margin-bottom:25px; width:100%;}
body#marketing.details .icon-multi {width:100%; height:100%; background:url(../images/768/multi-logo.png) no-repeat 0 0;}
body#serv.details .trooper {position:absolute; bottom:-5px; left:0;}

/*--- /////  SERVICE LOGOS  ///// ----*/
body#serv.details #primary .serv-icon {position:relative; width:100px; height:100px; margin:0 20px 10px 0;}
body#serv.details .serv-icon a{width:100%; height:100%; right:0; position:relative;}
body#serv.details .icon-web-design {width:100%; height:100%; background:url(../images/768/web-design-logo.png) no-repeat 0 0;}
body#serv.details .icon-multi {width:100%; height:100%; background:url(../images/768/multi-logo.png) no-repeat 0 0;}
body#serv.details .icon-dev {width:100%; height:100%; background:url(../images/768/web-dev-logo.png) no-repeat 0 0;}
body#serv.details .icon-mobile {width:100%; height:100%; background:url(../images/768/mobile-logo.png) no-repeat 0 0;}
body#serv.details .icon-cms {width:100%; height:100%; background:url(../images/768/cms-logo.png) no-repeat 0 0;}
body#serv.details .icon-stats {width:100%; height:100%; background:url(../images/768/analytics-logo.png) no-repeat 0 0;}
body#serv.details .icon-seo {width:100%; height:100%; background:url(../images/768/search-logo.png) no-repeat 0 0;}
body#serv.details .icon-ecommerce {width:100%; height:100%; background:url(../images/768/commerce-logo.png) no-repeat 0 0;}

/*--- /// SERVICE FOOT LINKS //// ---*/
body.details #primary #service-list {position:absolute; bottom:0; width:75%; right:0; padding-bottom:35px;}
body.details #primary #service-list h3 {font-size:1.3em; margin-bottom:30px;}
#service-list .col {width:50%; float:left;}
#service-list ul li{margin-bottom:15px;}

/*--- caseS ---*/
body#news aside, body#serv aside{width:30%; position:absolute; bottom:30px; left:200px;}
body.expand aside blockquote .author {color:#fff;}
body.expand aside blockquote p{font-size:1.1em; background:url(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.9); border:none;}
body#news aside {position:inherit; width:100%;}

/*--- PORTFOLIO ---*/
body#news #inside-wrap {background-position:0 -35px;}
body#news #inner {background:url(../images/visual/home-midfield.jpg) repeat-x 50% 100%; border-bottom:1px solid #015F92;}
body#news #primary {height:920px;}
body#news #primary h1{padding:18px 20px 0 0; font-size:4.2em;}

/*--- FOLIO SLIDER ---*/
.folioslider {width:100%; position:absolute; top:155px; left:0; background:url(../images/visual/folio-shine.png) no-repeat 50% 236px;}

/*--- FOLIO PANEL ---*/
.folio-panel {width:100%;}

/*--- Direction Nav ---*/
body#news #next {
	width:50px;
	height:50px;
	display:block;
	background:url(../images/768/mini-arrows.png) no-repeat -50px 0;
	position:absolute;
	top:10px;
	left:50%;
	cursor:pointer;
	text-indent:-9999px;
	z-index:999;
}
body#news #next:hover {background-position:-50px -50px;}
body#news #prev {
	width:50px;
	height:50px;
	display:block;
	background:url(../images/768/mini-arrows.png) no-repeat 0 0;
	position:absolute;
	top:10px;
	left:50%;
	cursor:pointer;
	text-indent:-9999px;
	z-index:999;
	margin-left:-50px;
}
body#news #prev:hover {background-position:0 -50px;}

/*--- FOLIO THUMBS ---*/
.pthumbs {
	margin:80px auto 0 auto;
	width:90%;
	max-width:848px; 
	background:url(../images/visual/folio-shadow.png) no-repeat 50% 100%; 
	padding-bottom:50px;
}
.pthumbs li{float:left; height:auto;}
.pthumbs li.pA {width:22.2877358%;}
.pthumbs li.pB {width:54.4245283%;}
.pthumbs li.pC {width:22.2877358%; float:right;}
.pthumbs li img{padding:5px; background:#000; max-width:100%;}
.pthumbs li:first-child img{padding:5px 0 5px 5px;}
.pthumbs li:last-child img{padding:5px 5px 5px 0;}
.pthumbs li:first-child, .pthumbs li:last-child{margin-top:6%;}
.pinfo {width:90%; max-width:930px; color:#fff; margin:0 auto; padding-top:20px;}
.pinfo .col {float:left; width:33.3333333%;}
.pinfo .col:first-child p{margin-bottom:20px; padding-right:20px;}
.pinfo h2{margin-bottom:20px; font-weight:300;}
.pinfo ul li{height:37px; line-height:30px; font-size:1em; padding-left:50px; margin-bottom:10px; font-weight:normal; text-shadow:1px 1px 0 #000;}
.pinfo .cta {position:absolute; top:-60px; left:10px; font-size:.85em; padding:0 20px}

/*--- TROOPERS ---*/
body#team #inner {background:url(../images/visual/team_midfield.jpg) repeat-x 50% 100%; border-bottom:1px solid #015F92;}
body#team .shine {width:100%; height:970px; background:none;}

/*--- TEAM WIRES ---*/
body#team .team-wires {
	width:432px;
	height:101px;
	position:absolute;
	top:357px; left:50%;
	margin-left:-216px;
	background:url(../images/visual/team-wires.png) no-repeat 0 0;
	text-indent:-999em;
}

/*--- IGD LINK ---*/
body#team #igd_btn {
	display:block;
	width:289px;
	height:326px;
	text-indent:-999em;
	background:url(../images/visual/igd-hologram.png) no-repeat 0 0;
	position:absolute;
	bottom:-100px;
	left:50%;
	margin-left:-144px;
}

/*--- TEAM DARK BOX ---*/
body#team .troopers_box {
	width:100%;
	height:368px;
	background:url(../images/visual/trooper-dudes.png) no-repeat 50% 0;
	position:absolute;
	top:65px;
	left:0;
}

/*--- TEAM CONTENT ---*/
#team-content {width:90%; margin:0 auto; padding-top:315px;}
#team-content .colA {float:left; width:48.125%; background:rgba(0,0,0,0.7);}
#team-content .colB {float:right; width:48.125%; background:rgba(0,0,0,0.7);}
#team-content section{-webkit-border-radius:15px; -moz-border-radius:15px; -o-border-radius:15px; border-radius:15px;}
#team-content .colA .content {padding:20px 100px 20px 40px;}
#team-content .colB .content {padding:20px 30px 20px 120px;}
body#team .content h3{font-size:1em; margin-bottom:25px;}
body#team .content p{color:#B9B9B9; font-size:0.9em;}

/*--- TWEETS ---*/
body#team aside{display:none;}

/*--- CONTACT ---*/
body#contact #primary {width:95%}
body#contact #inner {background-position:50% 100%;}
body#contact #primary {height:1000px;}
body#contact .shine {width:100%; background:url(../images/visual/folio-shine.png) no-repeat 50% 342px;}
body#contact #primary {background:url(../images/visual/c-hologram.png) no-repeat 45% 95%}
body#contact #info h2 {height:52px; background:url(../images/visual/contact-icons.png) no-repeat 0 0; padding-left:60px;}
body#contact #form h2 {height:52px; background:url(../images/visual/contact-icons.png) no-repeat 0 -52px; padding-left:60px;}

/*--- FEATURED ---*/
#slidenav {top:180px}
#featured {height:408px; position:relative;}
#featured h1, #featured h2{text-indent:-9999em; margin:70px 0 55px 0; height:180px}
#featured h1 strong, #featured h2 strong{font-size:8em; letter-spacing:-1px; line-height:1.1em; color:#fff;}
#featured .designSlide h1{background:url(../images/visual/home-slidetxt-1.png) no-repeat 50% 25px;}
#featured .devSlide h2{background:url(../images/visual/home-slidetxt-2.png) no-repeat 50% 25px;}
#featured .mobileSlide h2{background:url(../images/visual/home-slidetxt-3.png) no-repeat 50% 25px;}
#featured .mediaSlide h2{background:url(../images/visual/home-slidetxt-4.png) no-repeat 50% 25px;}
.panel a, .cta {font-size:1em;  padding:0 30px; line-height:2.5em; text-shadow:0 2px 2px rgba(0,0,0,0.6);}

/*--- HOME - SERVICES ---*/
#services {padding:75px 0 40px 0; width:100%; max-width:960px; margin:0 auto;}
#services section{width:22.9166667%; margin:0 1.0416667%; float:left; text-align:center; position:relative;}
body#home .serv-icon {
	background:url(../images/visual/icon-shine.png) no-repeat 0 0;
	position:absolute;
	top:-120px; 
	left:50%;
	margin-left:-46px;
}
#services h2 {font-size:1.2em; font-weight:300;}

/*--- HOME - CONTAINER ---*/
#midwrap {background:url(../images/visual/home-midfield.jpg) repeat-x 50% 0;}
#container {background:url(../images/visual/tab-shadow.png) no-repeat 130% 115px;}
#container #midglow {background:url(../images/768/home-responsive.png) no-repeat 0 100%;}
#container section{width:39.5833333%; float:left; padding-left:3%;}
#container aside{width:53.125%; float:right; padding-top:125px;}
#container h2,#container h3{font-size:1.4em; letter-spacing:normal;}
#container .cta {font-size:.8em; padding:0 20px;}
.check-list {margin-bottom:15px;}
.check-list li{font-size:1em; margin-bottom:5px; background:url(../images/visual/check-bullet.png) no-repeat 0 0; padding-left:30px;}
body#home blockquote p{font-size:1em;}

/* --- ABOUT --- */
#about .brands {padding-top:25px;}
#about .cta {margin-bottom:35px;}

/*--- HOME - TABS ---*/
#tab-container {min-height:340px;}
aside .tabs li a {font-size:1em; line-height:1.3em; background:url(../images/visual/tab-ribbon.png) no-repeat 50% -147px;}
.folio-btn {position:absolute; bottom:-20px; left:0;}
aside .tabs li a span b{font-size:.8em;}

/*--- marketing POSTS ---*/
body#marketing h1{height:inherit; line-height:44px; margin-bottom:45px;}
body#marketing h1 img{float:right; margin:12px 0 0 15px;}
body#marketing #primary {width:95%}
.marketing-post figure img{display:block;}
.marketing-post h2{font-size:1.4em;}
.marketing-post .cta {padding:0 20px;}
.marketing-post img{width:35%; margin:0 1.5em 1.5em 0;}
.marketing-post .post {text-transform:none; font-size:12px;}

/*--- TOP NAVIGATION ---*/
nav{height:160px;}
nav ul{width:100%; height:100%; position:relative;}
nav ul li{width:95px; background:url(../images/768/nav-ribbon.png) no-repeat 50% -174px;}
nav ul li a{font-size:1em;}
nav ul li a span{padding-top:85px; background:url(../images/visual/nav-icons.png) no-repeat 0 -15px;}
nav ul .n-services {left:0;}
nav ul .n-news {left:95px;}
nav ul .n-team {left:190px;}
nav ul .n-marketing {right:190px;}
nav ul .n-contact {right:0;}
nav ul .n-case {right:95px;}
nav ul li:hover {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0;}
nav ul .n-services a span{background-position:-10px -20px;}
nav ul .n-news a span{background-position:-10px -150px;}
nav ul .n-team a span{background-position:-15px -280px;}
nav ul .n-marketing a span{background-position:-10px -410px;}
nav ul .n-contact a span{background-position:-10px -668px;}
nav ul .n-case a span{background-position:-10px -535px;}
nav ul .n-services:hover span{background-position:-130px -20px;}
nav ul .n-news:hover span{background-position:-130px -150px;}
nav ul .n-team:hover span{background-position:-135px -280px;}
nav ul .n-marketing:hover span{background-position:-130px -410px;}
nav ul .n-contact:hover span{background-position:-130px -668px;}
nav ul .n-case:hover span{background-position:-130px -535px;}

/*--- ACTIVE MENU ITEMS ---*/
body#serv nav ul .n-services {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0;}
body#serv nav ul .n-services span{background-position:-130px -20px;}
body#news nav ul .n-news{background:url(../images/768/nav-ribbon.png) no-repeat 50% 0; }
body#news nav ul .n-news span{background-position:-130px -150px;}
body#team nav ul .n-team {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0; }
body#team nav ul .n-team span{background-position:-130px -280px;}
body#marketing nav ul .n-marketing {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0;}
body#marketing nav ul .n-marketing span{background-position:-130px -410px;}
body#contact nav ul .n-contact {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0;}
body#contact nav ul .n-contact span{background-position:-130px -668px;}
body#case nav ul .n-case {background:url(../images/768/nav-ribbon.png) no-repeat 50% 0; }
body#case nav ul .n-case span {background-position:-130px -535px;}

/*--- PREFOOTER ---*/
#prefooter article{width:60%; margin:0 3%; float:left; }
#prefooter aside {width:30%; margin:0 2%; float:right;}

/*--- FOOTER NAVIGATION ---*/
#foot-nav {width:68.75%; float:left; height:150px;}
#foot-nav dt{font-size:1.1em;}
#foot-nav dl{width:31.25%; margin:0 1%; float:left;}
footer{position:relative; width:30.2083333%; float:right; font-size:12px; color:#999; margin-bottom:65px;}
footer h2 .cta {margin-bottom:20px; font-size:13px;}
.igd-icon {left:0; right:auto; bottom:-40px;}
.pinfo .soon {display:none;}
#liulanqi, #woai, #qqhao, #dianhua {display:none}