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

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

*************************************************
*/
*{margin:0; padding:0;}
body{
	font-size:13px;
	color:#aaa;
	font-family:'微软雅黑','Open Sans', Arial, helvetica, sans-serif;
	background:url(../images/dpattern.jpg) repeat 50% 0% #141318;
}
p{
	border:0;
	outline:0;
	line-height:1.6em;
	font-weight:inherit;
	font-style:inherit;
	font-family:inherit;
	vertical-align:baseline;
}
a{color:#6BDFFF; text-decoration:none; outline:none;}
a:hover{color:#fff;}
a:focus{outline:none;}
a:hover, a:active{outline:none;}
nav ul, nav ol{list-style:none; list-style-image:none;}

#outer {background:url(../images/field1.jpg) repeat-x 50% 0}
#inner {background:url(../images/field2.jpg) repeat-x 50% 154px}
#deeper {background:url(../images/field3.jpg) repeat-x 50% 386px}
#wrapper {
	width:100%;
	max-width:960px;
	margin:0 auto;
	height:625px;
}
/*-------------------------------------------    
   HEADER
-------------------------------------------*/
header#masthead {
	height:160px;
	position:relative;
} 
header .logo {
	display:block;
	position:absolute;
	top:0;
	z-index:999;
	width:260px;
	left:50%; 
	margin-left:-130px; 
	background:url(../images/logo-ribbon.png) no-repeat 50% 100%; 
	padding:10px 0 70px 0;
	-webkit-transition: padding-top .1s ease-in-out;
	-moz-transition: padding-top .1s ease-in-out;
	-0-transition: padding-top .1s ease-in-out;
	transition: padding-top .1s ease-in-out;
}
header .logo span{
	display:block;
	text-align:center;
	text-transform:uppercase;
	font-size:16px;
	color:#6CDFFF;
	letter-spacing:1px;
	padding: 0 0 0 8px;
}
header .logo:hover{padding-top:50px;}
header .logo img{display:block; margin:0 auto; max-width:100%;}

/* Control Nav */
#slidenav {width:80px; position:absolute; top:220px; text-align:center; left:50%; margin-left:-40px; z-index:99}
#slidenav a:first-child{margin: 0;}
#slidenav a{
	width:13px;
	height:13px;
	background:url(../images/bg_control_nav.png) no-repeat 0 0;
	cursor:pointer;
	text-indent:-9999px;
	margin:0 0 0 5px;
	display:inline-block;
	zoom:1;
}
#slidenav a:hover{background-position:0 -13px;}
#slidenav .activeSlide{background-position:0 -26px; cursor:default;}

#loading {display:block; width:30px; height:30px; position:absolute; top:60px; left:50%; margin-left:-10px;}


/*-------------------------------------------    
  TOP NAVIGATION
-------------------------------------------*/
nav{
	width:100%;
	height:190px;
	position:absolute;
	top:0;
	left:0;
	z-index:99
} 
nav ul{
	width:100%;
	height:100%;
	position:relative;
}
nav ul li{
	width:120px;
	height:100%;
	position:absolute;
	top:0;
	cursor:pointer;
	background:url(../images/nav-ribbon.png) no-repeat; 
	background-position:50% -190px;
	-webkit-transition:background-position .3s ease-in-out;	
 	-moz-transition:background-position .3s ease-in-out;	
 	-o-transition:background-position .3s ease-in-out;
 	transition:background-position .3s ease-in-out;
}
nav ul li:hover{
	background:url(../images/nav-ribbon.png) no-repeat;
	background-position:50% -5px; 
}
nav ul li a{
	line-height:1.1em;
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	color:#fff; 
	font-size:1.2em;
	text-transform:uppercase;
	font-weight:300;
}
nav ul li a span{
	display:block;
	padding:95px 0 0 0;
	background:url(../images/nav-icons.png) no-repeat 0 -15px;
	-webkit-transition: background-position .3s ease-in-out .2s;	
 	-moz-transition: background-position .3s ease-in-out .2s;	
 	-o-transition: background-position .3s ease-in-out .2s;
 	transition: background-position .3s ease-in-out .2s;
}
nav ul li a strong, nav ul li a b{display:block; font-size:0.7em; letter-spacing:1px; color:#6BDFFF; font-weight:300} 
nav ul .n-services {left:0;}
nav ul .n-news {left:120px;}
nav ul .n-team {left:240px;}
nav ul .n-marketing {right:240px;}
nav ul .n-contact {right:0;}
nav ul .n-case {right:120px;}
nav ul .n-services a span{background-position:0 -15px;}
nav ul .n-news a span{background-position:0 -145px;}
nav ul .n-team a span{background-position:0 -275px;}
nav ul .n-marketing a span{background-position:0 -405px;}
nav ul .n-contact a span{background-position:0 -663px;}
nav ul .n-case a span{background-position:0 -530px;}
nav ul .n-services:hover span{background-position:-120px -15px;}
nav ul .n-news:hover span{background-position:-120px -145px;}
nav ul .n-team:hover span{background-position:-120px -275px;}
nav ul .n-marketing:hover span{background-position:-120px -405px;}
nav ul .n-contact:hover span{background-position:-120px -663px;}
nav ul .n-case:hover span{background-position:-120px -530px;}

/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#featured {
	text-align:center;
	width:100%; 
	height:465px;
	position:absolute;
	top:160px;
	left:0;
}
#featured h1, #featured h2{
	text-indent:-9999em;
	margin:100px 0 55px 0;
	height:180px;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	font-size:1em;
}
#featured h1 b,#featured h2 b{font-size:1.1em; color:#fff; font-weight:400}
#featured h1 strong,#featured h2 strong{
	font-size:8em;
	letter-spacing:-1px;
	line-height:1.1em;
	color: #fff;
	font-weight:800;
	display:block;
	margin:0 0 10px 0;
	text-shadow:6px 8px 0 rgba(0,0,0,.3);
}
#featured span{
	font-size:0.9em;
	display:block;
	color:#6CDFFF;
	font-weight:400;
	letter-spacing:1px;
}
.panel {width:100%; height:100%; position:relative;}
.panel a, .cta {
	font-weight:600;
	font-size:1.1em;
	text-transform:uppercase;
	color: #fff; 
	background:#14B1DE;
	display:inline-block;
	padding:0 40px;
	line-height:2.8em;
	text-shadow:0 2px 2px rgba(0,0,0,0.6);
	margin:0 0 50px 0;
		
	/* -- RADIUS -- */
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	-o-border-radius:18px;
	border-radius:18px;
	
	/* -- SHADOW -- */
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,0);
	
	/* -- GRADIENT -- */
	
	background-image:linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image:-o-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image:-moz-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image:-webkit-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image:-ms-linear-gradient(bottom, rgb(16,167,213) 100%, rgb(13,121,164) 0%);
	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(1, rgb(16,167,213)), color-stop(0, rgb(13,121,164)));
	
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
}
.panel a:hover {
	color:#6CDFFF;
	background:#25242A;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
	box-shadow:inset 1px 1px 0 rgba(255,255,255, .6), 1px 1px 0 rgba(0,0,0,.8), 0 0 20px 5px rgba(255,255,255,1);
}
#featured .designSlide h1{background:url(../images/home-slidetxt-1.png) no-repeat 50% 25px;}
#featured .devSlide h2{background:url(../images/home-slidetxt-2.png) no-repeat 50% 25px;}
#featured .mobileSlide h2{background:url(../images/home-slidetxt-3.png) no-repeat 50% 25px;}
#featured .mediaSlide h2{background:url(../images/home-slidetxt-4.png) no-repeat 50% 25px;}
.designSlide {display:block}
.cta {
	font-size:.85em;
	padding:0 15px;
	font-weight:600;
	-webkit-transition:all .2s ease-in;
}
.cta:hover {
	background:rgba(0,0,0,.5);
	color #6CDFFF;
	padding:0 25px;
	-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	-o-box-shadow:inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
	box-shadow:inset 1px 1px 0 rgba(255,255,255, .2), 1px 1px 0 rgba(255,255,255,.3);
}

.cta.big {font-size:1.2em; padding:0 25px; font-weight:600}

/* Direction Nav */
#next {
	width:52px;
	height:101px;
	display:block;
	background:url(../images/bg_direction_nav.png) no-repeat -52px 0;
	position:absolute;
	top:300px;
	right:10px;
	cursor:pointer;
	text-indent:-9999px;
	z-index:999;
}
#next:hover {background-position:-52px -101px}
#prev {
	width:52px;
	height:101px;
	display:block;
	background:url(../images/bg_direction_nav.png) no-repeat 0 0;
	position:absolute;
	top:300px;
	left:10px;
	cursor:pointer;
	text-indent:-9999px;
	z-index:999;
}
#prev:hover {background-position: 0 -101px}

/*-------------------------------------------    
   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;
}
.serv-icon {
	float:left;
	width:93px;
	height:93px;
	background:url(../images/icon-shine.png) no-repeat 0 0;
	position:absolute;
	top:-120px; 
	left:50%;
	margin-left:-46px;
}
.serv-icon a{
	display:block;
	height:75px;
	width:75px;
	text-indent:-999em;
	margin:7px auto 0 auto;
	background:url(../images/icons.png) no-repeat;
	-webkit-transition:background-position .2s ease-in;
	-moz-transition:background-position .2s ease-in;
	-o-transition:background-position .2s ease-in;
	transition:background-position .2s ease-in;
	
}
body#home .serv-icon.on {background-position: 0 -94px;}

#services h2{font-size:1.3em; font-weight:300}
#services h2 strong{font-weight:400}
.clearfix:before, .clearfix:after {content:""; display:table;}
.clearfix:after {clear:both;}
.clearfix {zoom:1;}
#services p{padding:0 .5em; margin:0 0 15px 0;}
#services h2{font-size: 1.1em; color: #fff; margin: 0 0 18px; font-weight: 300; }
#services h2 strong{color: #6AE1FF}
#services h2 a{color: #fff;}
.serv-icon .icon-web-design {background-position:0 0;}
.serv-icon .icon-web-design:hover {background-position:0 -75px;}
.serv-icon .icon-web-dev {background-position:-76px 0;}
.serv-icon .icon-web-dev:hover {background-position:-76px -75px;}
.serv-icon .icon-mobile {background-position:-150px 2px;}
.serv-icon .icon-mobile:hover {background-position:-150px -73px;}
.serv-icon .icon-multi {background-position:-225px 3px;}
.serv-icon .icon-multi:hover {background-position:-225px -72px;}
.serv-icon .icon-cms {background-position:-300px 3px;}
.serv-icon .icon-cms:hover {background-position:-300px -72px;}
.serv-icon .icon-seo {background-position:-375px 3px;}
.serv-icon .icon-seo:hover {background-position:-375px -72px;}
.serv-icon .icon-stats {background-position:-450px 3px;}
.serv-icon .icon-stats:hover {background-position:-450px -72px;}
.serv-icon .icon-ecommerce {background-position:-525px 3px;}
.serv-icon .icon-ecommerce:hover {background-position:-525px -72px;}
.serv-cta {
	font-size:12px;
	background:url(../images/cta-arrow.png) no-repeat 0 50%;
	text-transform:uppercase; 
	padding:0 0 0 15px;
	letter-spacing:1px;
}

/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	width:100%; 
    border-bottom:1px solid #175A7F; 
	-webkit-box-shadow:0 0 25px 5px rgba(0,0,0,0.8);
	-moz-box-shadow:0 0 25px 5px rgba(0,0,0,0.8);
	-o-box-shadow:0 0 25px 5px rgba(0,0,0,0.8);
	box-shadow:0 0 25px 5px rgba(0,0,0,0.8);
	background:url(../images/home-midfield.jpg) repeat-x 50% 0; 
}
#container {
	padding:35px 0 0 0;
	width:100%;
	max-width:960px;
	margin:0 auto;
	color:#fff;
	position:relative;
	background:url(../images/tab-shadow.png) no-repeat 95% 115px;}
#container #midglow {background:url(../images/home-responsive.png) no-repeat 0 100%;}
#container section {
	width:39.5833333%;
	float:left;
	padding: 0 0 0 1%;	
}

#tab-container {height: 380px;}
#tab-container article {padding: 0 25px 0 90px; }
#tab-container .launch_last p {padding: 0 30px 0 0 }

#container aside {
	width: 53.125%;
	float: right;
	padding: 125px 0 0 0;
}
.check-list {margin:0 0 25px 25px}
.check-list li{
	font-size:1.1em;
	margin: 0 0 10px 0;
	background:url(../images/check-bullet.png) no-repeat 0 0;
	padding:0 0 0 30px;
}

body.details .check-list li {font-size: 1em; margin: 0 0 5px 0;}

#tab-container article .cta {margin: 0 0 0 25px}


#container .cta {margin: 0;}
#container img{max-width: 100%;}


/* --- STYLES --- */
#container h2,#container h3{
	font-size:1.8em;
	margin:0 0 18px;
	text-shadow:3px 3px 2px rgba(0,0,0,.3);
	letter-spacing:-1px;
	font-weight:600;
}

h2 strong, h3 strong{color:#6CDFFF; font-weight:600}
#container h2 b, #container h3 b{font-weight: 600}
#container h4{margin:0 0 5px 0; font-size:1.1em; color:#66DFFF; font-weight:300;}
#container p{
	font-size:1em;
	line-height:1.8em;
	margin:0 0 25px 0;
	color:rgba(255,255,255,1);
}
#about .trooper {position:absolute; bottom:-6px; right:0; z-index:999; max-width:100%;}

/*-------------------------------------------    
   HOME - TABS
-------------------------------------------*/
#tab-container {width: 100%; margin: 0; min-height: 320px; border: 1px; padding: 0;}

aside .tabs {width:53.125%; position:absolute; top:0; right:0;}
aside .tabs li{display:block; float:left; width:30.1960784%;}
aside .tabs li a{
	font-weight:400;
	display:block;
	height:147px;
	width:100%;
	text-align:center;
	text-transform:uppercase; 
	color:#fff;
	font-size:1.1em;
	background:url(../images/tab-ribbon.png) no-repeat;
	background-position:50% -147px;
	-webkit-transition:background-position .3s ease-in-out;	
 	-moz-transition:background-position .3s ease-in-out;	
 	-o-transition:background-position .3s ease-in-out;
 	transition:background-position .3s ease-in-out;
}
aside .tabs li a:hover, aside .tabs li.on a {background-position: 50% 0;}
aside .tabs li a img{padding:12px 0 0 0;}
aside .tabs li a span{display:block;}
aside .tabs li a span b{display:block; clear:both; font-size:.8em}

/*-------------------------------------------    
  PREFOOTER
-------------------------------------------*/
#prewrap {
	width:100%;
	background:rgba(0,0,0,.3);
	border-bottom:1px solid #4D4E52;
	margin:0 0 25px;
}
#prefooter {width:100%; max-width:960px; margin:0 auto; padding:35px 0;}
#prefooter article{width:64.5833333%; float:left; margin:0 1.0416667%;}
#prefooter aside{width:31.25%; float:right; margin:0 1.0416667%}
aside blockquote .author {
	display:block;
	padding:40px 0 0 0;
	font-size:12px;
	background:url(../images/case-arrow.png) no-repeat 25px 0; 
	position:relative;
	top:-1px;
}
aside blockquote p{
	background:url(../images/quote.png) no-repeat 5% 5% rgba(0,0,0,0.5);
	border:1px solid #444;
	padding:15px 25px;
	font-size:1.1em;
	color:#fff;
	line-height:1.8em;
	text-indent:2em;	
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
}
.news-post img{float:left; border:1px solid #666; margin:0 25px 0 0;}
.news-post h2{font-size:1.8em; line-height:1.2em; margin:0 0 20px; font-weight:300}
.news-post p {line-height:1.8em; margin:0 0 10px 0}
.news-post .post {color:#fff;}
.news-post .post i{padding:0 1.5%;}
.news-post .post {text-transform:uppercase; font-size:12px; display:block; margin:0 0 10px;}
.news-post .post .cta {margin:0 25px 0 0; font-size:1.2em;}
.news-post .cta {line-height:2em; font-size:12px;}
#footwrap {width:100%; max-width:960px; margin:0 auto; position:relative;}
#zjaic { position:absolute; top:125px; right:0;}
/*-------------------------------------------    
  BRANDS
-------------------------------------------*/
.brands {
	width:100%;
	margin:0 0 40px 0;
	height:124px;
	background:url(../images/brands-bg.png) no-repeat 50% 0;
	overflow:hidden;
}
.brands-item-1 {
	display:block;
	width:100%;
	height:100%;
	background:url(../images/brands-1.png) no-repeat 50% 15px;
	display:none;
}
.brands-item-2 {
	display:block;
	width:100%;
	height:100%;
	background:url(../images/brands-2.png) no-repeat 50% 15px;
	display:none;
}
/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav {
	width:68%;
	float:left;
	height:150px;
}
#foot-nav dl{
	width:31.33%;
	margin:0 1%;
	float:left;
}
#foot-nav dt{margin:0 0 15px 0; font-size:16px; font-weight:400; color:#FFF;}
#foot-nav dd{margin:0 0 7px 0;}

#foot-nav dd a{
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
#foot-nav dd a:hover{padding:0 0 0 10px;}

#footer{
	width:31%;
	float:right;
	font-size:11px;
	color:#999;
	position:relative;
}
#footer h2{
	margin-bottom:15px;
	height:20px;
}
#footer h2 a{
	font-size:15px;
	text-align:left;
	line-height:16px;
	color:#FFF;
}
#footer h2 a:hover{
	color:#6BDFFF;
}
#footer p{margin:0 0 10px 0;}
#footer p b{color:#6BDFFF;}
.footerlink {
	width:100%;
	max-width:958px;
	margin:auto auto 20px auto;
	height:100%;
	overflow:hidden;
	font-size:12px;
	color:#666;
}
.footerlink ul{margin:0 0 0 3px;}
.footerlink ul a{color:#666;}
.footerlink ul a:hover{color:#FFF;}

/*-------------------------------------------    
  IGD ICON
-------------------------------------------*/
.igd-icon {
	position:absolute;
	right:0;	
	display:block;
	width:112px;
	height:23px;
	background:url(../images/igd-icon.png) no-repeat 0 0;
	opacity:0.5;
	text-indent:-999em;
	-webkit-transition:opacity .2s ease-in;
	-moz-transition:opacity .2s ease-in;
	-o-transition:opacity .2s ease-in;
	transition:opacity .2s ease-in;
}
.igd-icon:hover {opacity:1.0;}
/*-------------------------------------------    
  NOMINATION
-------------------------------------------*/
#liulanqi {
	display:block;
	width:69px;
	height:105px;
	text-indent:-9999em;
	background:url(../images/liulanqi.png) no-repeat 0 0; 
	position:fixed;
	top:750px;
	left:0;
	z-index:99999;
}
#woai {
	display:block;
	width:69px;
	height:164px;
	text-indent:-9999em;
	background:url(../images/woai.png) no-repeat 0 0; 
	position:fixed;
	top:700px;
	right:0;
	z-index:99999;
}
#qqhao {
	display:block;
	width:115px;
	height:115px;
	text-indent:-9999em;
	background:url(../images/qqhao.png) no-repeat 0 0; 
	position:fixed;
	top:0;
	left:0;
	z-index:99999;
}
#dianhua {
	display:block;
	width:181px;
	height:59px;
	text-indent:-9999em;
	background:url(../images/dianhua.png) no-repeat 0 0; 
	position:fixed;
	top:30px;
	right:0;
	z-index:99999;
}