@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/tablet-pattern.jpg) repeat-y 50% 0% #1A1B1E;}
#loadInfo {display:none;}
#liulanqi, #woai, #qqhao, #dianhua {display:none;}

/*--- BACKGROUNDS ---*/
body#home #outer {background:url(../images/480/field.jpg) repeat-x 50% 0;}
#outer {background:url(../images/480/nav-bg.jpg) repeat-x 50% 0;}
#inner {background:none;}
#deeper {background:none;}
#container {width:98%;}
#prefooter {width:98%;}
#footwrap {width:93%;}
#services {width:95%;}

/*--- HEADER ---*/
header#masthead {height:70px;}
body#home header .logo {top:90px; width:174px; margin-left:-87px; background:none; left:50%; width:174px; margin-left:-87px; top:90px;}

/* --- INSIDE lOGO -- */
header .logo {top:95px; right:20px; width:130px;}
header .logo span{display:none;}
header .logo img{width:100%;}

/*--- INSIDE CONTAINER ---*/
#primary h1{font-size:5em; padding:25px 0 0 20px; text-align:left; margin-bottom:65px; line-height:0.7em; letter-spacing:-3px;}
#primary h1 strong{font-weight:100; letter-spacing:normal;}
body#serv #primary .cta {display:none;}

/*--- INSIDE SERVICES ---*/
body#serv section {width:90%; padding:15px 0;}
body#serv .mobi a{
	display:block;
	background:url(../images/480/innovate-mobile.png) no-repeat;
	width:200px;
	height:206px;
	text-indent:-999em;
	margin:25px auto;
}
body#serv .screens a{
	display:block;
	background:url(../images/480/innovate-screen.png) no-repeat;
	width:280px;
	height:185px;
	text-indent:-999em;
	margin:0 auto;
}

/*--- SEO ---*/
body#serv section[role='seo']{margin-bottom:25px;}

/* -- ECOMMERCE -- */
body#serv section[role='ecommerce'] .serv-icon {height:120px; top:-25px; position:relative;}

/* -- HOSTING --- */
body#serv section[role='hosting'] article{width:90%;}
body#serv section[role='hosting'] article p{margin-bottom:25px;}
body#serv #primary section[role='hosting'] article .cta {display:block; width:120px; margin:0 auto 15px auto; text-align:center;}
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;}
body#serv section[role='hosting'] h2 em{
	font-family:'Calligraffitti';
	color:#6CDFFF;
	font-size:1.8em;
	text-transform:lowercase;
	line-height:1.8em;
}

/* -- TWINS -- */
body#serv .twins a{
	display:block;
	background:url(../images/480/prepare-twins.png) no-repeat;
	width:200px;
	height:212px;
	position:inherit;
	text-indent:-999em;
	margin:0 auto;
}

/* -- SPACEBOY -- */
body#serv .spaceboy a{display:none;}
body#serv aside{width:80%; margin:0 auto;}

/*--- //// DETAIL ////  SERVICES & PAGES ---*/
body.details .trooper {display:none;}
body.details #primary section{padding:20px; width:90%; float:none;}
body.details #primary #secondary {width:90%; position:relative;}
body.details #primary #secondary .cta {float:none;}
body#serv.details #primary {height:auto;}

/*--- SERVICE caseS ---*/
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 #primary .marketing-post h1{
	font-size:2.2em;
	line-height:1.2em;
	margin-bottom:25px;
	font-weight:300;
	letter-spacing:normal;
}
body#marketing.full-post .logo {display:none;}
body#marketing.full-post h2{font-size:1.3em;}
body#marketing.full-post .marketing-post blockquote{border:1px solid #333; float:none; width:90%; margin-bottom:25px;}
body#marketing.full-post #inside-wrap {background:none;}
body#marketing.full-post .marketing-post .post {margin-bottom:25px;}
body#marketing.full-post .marketing-post img{float:none; width:100%; margin:0 25px 10px 0;}

/*--- POST LIST ---*/
body#marketing.full-post .marketing-post ul{margin: 0 0 35px 50px}
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 {width:90%; height:230px; position:relative; padding:50px 0 0 0; margin:0 auto;}
body.details #primary #service-list h3{font-size:1.3em; margin-bottom:30px;}
#service-list .col {width:45%; float:left; margin:0 2.5%;}
#service-list ul li{margin-bottom:15px;}
.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;
}

/*--- SUBNAV ---*/
body#contact #subnav, body#case #subnav {display:none;}
#subnav {position:absolute; top:150px; left:30px;}
#subnav li{float:left; margin-right:15px;}
#subnav li a {
	text-align:center;
	text-transform:uppercase;
	background:#000;
	display:block;
	padding:0 25px;
	line-height:2.5em;
	text-shadow:0 2px 2px rgba(0,0,0,0.6);
	margin-bottom:50px;
	font-size:1em;
	height:auto;
	font-weight:600;
	
	/* -- RADIUS -- */
	-webkit-border-radius:18px;
	-moz-border-radius:18px;
	-o-border-radius:18px;
	border-radius:18px;
	
	background:rgba(0,0,0,.5);
	color:#6CDFFF;
	-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);
	
	-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;
}
#subnav li a:hover,#subnav .active a{
	color:#fff;
	background:#14B1DE; 
	
	/* -- 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)));
}

/*--- PORTFOLIO ---*/
body#news #inner {background:none;}
body#news #primary {height:auto;}
body#news #primary h1{display:none;}
body#news .logo {display:none;}

/* Direction Nav */
body#news #next {
	width:50px;
	height:50px;
	display:block;
	background:url(../images/visual/mini-arrows.png) no-repeat -50px 0;
	position:absolute;
	top:200px;
	right:0;
	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/visual/mini-arrows.png) no-repeat 0 0;
	position:absolute;
	top:200px;
	left:0;
	cursor:pointer;
	text-indent:-9999px;
	z-index:999;
}
body#news #prev:hover {background-position:0 -50px;}

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

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

/*--- FOLIO THUMBS ---*/
.pthumbs {margin:20px auto 0 auto; width:90%; max-width:848px; background:none;}
.pthumbs li{float:none; height:auto;}
.pthumbs li.pA {display:none;}
.pthumbs li.pB {width:100%; margin:0 auto; max-width:480px;}
.pthumbs li.pC {display:none;}
.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:8% 0 0 0;}
.pinfo {width:90%; max-width:930px; color:#fff; margin:0 auto; padding-top:20px;}
.pinfo .col {float:left; width:50%;}
.pinfo .col:first-child {width:100%; float:none;}
.pinfo .col:first-child p {margin-bottom:20px; padding-right:50px;}
.pinfo h2{margin-bottom:0px; color:#fff; 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;
}

/*--- caseS ---*/
body#news aside blockquote p{background:url(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.75); border:none;}
body#team aside blockquote p{background:url(../images/visual/quote.png) no-repeat 5% 5% rgba(0,0,0,0.75); border:none;}

/*--- TROOPERS ---*/
body#team h1{margin-bottom:15px;}
body#team aside{display:none;}
body#team #subnav {display:none;}
body#team .team-wires {display:none;}
body#team .troopers_box {display: none;}

/*--- 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:70px;
	left:50%;
	margin-left:-144px;
}
#team-content section{width:90%; margin:0 auto 20px auto; border:1px solid #333; background-color:rgba(0,0,0,.4);}
#team-content .colB {margin:0 auto 420px auto;}
body#team .content {padding:25px;}
body#team .content h3{font-size:1em; margin-bottom:25px;}
body#team .content p{color:#B9B9B9; font-size:0.9em;}
 
/*--- FEATURED ---*/
#slidenav {display:none;}
#featured {height:410px; position:relative;}
#featured h1, #featured h2{margin:160px 0 70px 0;}
#featured h1 b, #featured h2 b{text-shadow:2px 2px 3px #000; font-weight:600;}
#featured h1 strong, #featured h2 strong{
	font-size:4em;
	letter-spacing:-1px;
	line-height:1.1em;
	color:#fff;
	text-shadow:6px 8px 0 rgba(0,0,0,.3);
}
#featured span{display:none;}
.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:30px 2% 0 0; width:98%;}
#services section{width:50%; float:left; text-align:left;}
#services p{margin-bottom:30px;}
#services section .serv-cta {display:none;}
#services figure{display:block; max-width:100%; background:none; position:inherit; top:0; left:0; margin-bottom:50px; float:left;}
#services h2{font-size:1.4em; font-weight:300}

/* --- //// INNNER MEDIA QUERY //// --- */
@media screen and (max-width: 600px) {
	#services section{width:100%; float:none;}
	#services figure{max-width:100%;}
}

/*--- HOME - CONTAINER ---*/
#midwrap {width:100%; background:url(../images/480/midfield.jpg) repeat-x 50% 0; }
#container {background:none; padding:20px 0;}
#container section{width:65%; padding-left:3%;}
#container .sub-aside {display:none;}
#container aside{display:none;}
#container .brand-logos {display:none;}
#container h2,#container h3{font-size:1.5em; letter-spacing:normal;}
#container .cta {font-size:0.8em; padding:0 20px;}

/*--- HOME - TABS ---*/
#tab-container {min-height:340px;}
aside .tabs li a{font-size:0.9em; line-height:1.3em;}
.folio-btn {position:absolute; bottom:-20px; left:0;}

/*--- marketing POSTS ---*/
body#marketing h1{font-size:4em; height:inherit; line-height:40px; margin-bottom:45px;}
body#marketing h1 span{font-size:0.3em;}
body#marketing h1 img{float:left; margin:12px 15px 0 0;}
body#marketing #primary {width:90%;}
body#marketing section{width:100%;}
body#marketing aside{display:none;}
.marketing-post img{width:35%; margin:0 1.5em 1.5em 0;}
#prefooter .news-post {display:none;}

/*--- SEARCH ---*/
#search {display:none;}

/*--- PREFOOTER ---*/
#prewrap {width:100%; background:none; border:none;}
#prefooter {width:100%;}
#prefooter aside{
	width:90%;
	float:none;
	margin:0 auto;
	padding:25px 0;
	border-top:1px solid #37383C;
	border-bottom:1px solid #37383C;
}
#prefooter aside blockquote{width:100%;}
#prefooter aside blockquote p{
	font-size:1.1em;
	text-indent:2.5em;
	padding:25px;
	background:url(../images/visual/quote.png) no-repeat 5% 20% rgba(0,0,0,1);
}
#prefooter aside blockquote .author {
	padding:40px 0 0 35px;
	font-size:13px;
	background:url(../images/visual/case-arrow.png) no-repeat 90px 0;
}

/*--- FOOT NAV ---*/
#foot-nav {display:none;}
footer {width:100%; height:200px; float:none; text-align:center; font-size:0.9em;}
footer .cta {margin-bottom:5px;}
footer .social {width:180px; margin:0 auto;}
footer .social li a{opacity:1;}
footer h2 .cta {
	font-size:1.1em;
	text-transform:uppercase;
	color:#fff; 
	background:#14B1DE;
	display:inline-block;
	padding:0 80px;
	line-height:2.2em;
	text-shadow:0 2px 2px rgba(0,0,0,0.6);
	margin-bottom:10px;
		
	/* -- 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;
}
footer h2 .cta:hover {
	padding:0 80px;
	color:#6CDFFF;
	background:rgba(0,0,0,.5);
	color:#6CDFFF;
	-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);
}

/*--- TOP NAVIGATION ---*/
nav{height:55px; background:url(../images/480/nav-bg.jpg) repeat-x 50% 0; z-index:999999999;}
nav ul{width:450px; height:60px; position:relative; margin:0 auto; padding-top: 8px;}
nav ul li{width:55px; position:inherit; top:0; left:0; float:left; background:none; margin:0 10px;}
nav ul li a{font-size:1em; background:url(../images/visual/mobile-nav.png) no-repeat 0 0;}
nav ul li a span{display:none;}
nav ul .n-services {left:0;}
nav ul .n-news {left:0;}
nav ul .n-team {left:0;}
nav ul .n-marketing {right:0;}
nav ul .n-contact {right:0;}
nav ul .n-case {right:0;}
nav ul li:hover{background:none;}
nav ul .n-services a{background-position:0 0;}
nav ul .n-services a:hover{background-position:-55px 0;}
nav ul .n-news a{background-position:0 -55px;}
nav ul .n-news a:hover{background-position:-55px -55px;}
nav ul .n-team a{background-position:0 -110px;}
nav ul .n-team a:hover{background-position:-55px -110px;}
nav ul .n-marketing a {background-position:0 -165px;}
nav ul .n-marketing a:hover{background-position:-55px -165px;}
nav ul .n-contact a{background-position:0 -275px;}
nav ul .n-contact a:hover{background-position:-55px -275px;}
nav ul .n-case a {background-position:0 -220px;}
nav ul .n-case a:hover{background-position:-55px -220px;}

/*--- ACTIVE MENU ITEMS ---*/
body#serv nav ul .n-services a{background-position:-55px 0;}
body#news nav ul .n-news a{background-position:-55px -55px;}
body#case nav ul .n-case a{background-position:-55px -220px;}
body#team nav ul .n-team a{background-position:-55px -110px;}
body#marketing nav ul .n-marketing a{background-position:-55px -165px;}
body#contact nav ul .n-contact a{background-position: -55px -275px;}

/*--- CONTACT ---*/
body#contact #primary {width:90%; margin-bottom:25px;}
body#contact h1{padding-top:25px;}
body#contact h2{font-size:0.9em; background:none; line-height:1.5em;}
body#contact h2 strong{font-size:1em;}
body#contact #info {width:50%;}
body#contact #form {width:45%;}
body#contact #info ul li {padding-left:40px}

/*--- case FORM ---*/

/*--- CUSTOM SELECT ---*/
#quote-form fieldset select{position:relative; top:0; right:0; z-index:9999; text-transform:none; width:100%;}
#quote-form .dropdown {display:none;}
footer {position:relative;}
.igd-icon {position:absolute; left:50%; right:auto; margin-left:-66px; top:140px;}
.pinfo .soon {display:none;}
#social_btn {display:none;}