body {
	font-family: '微软雅黑','Open Sans', Arial, helvetica, sans-serif;
}

/*-------------------------------------------    
  PRELOAD BAR
-------------------------------------------*/
#loadInfo {display: none; position: absolute; width: 100%; height: 100%; background: #000; text-align: center; z-index: 99999; padding: 100px 0 0 0;}
#statusBar {border: 1px solid #444; width: 300px; background: #000; margin: 0 auto 25px auto}
#status {background: url(img/preloader-bar.png) 0 50% no-repeat; height: 8px; }

#textStatus { font-weight: 300; color: #6CDFFF;  }
#textStatus .numLoaded {font-family: '微软雅黑', 'Open Sans', Arial, helvetica, sans-serif; color: #fff; font-size: 12px;}

/*-------------------------------------------    
  HEADER
-------------------------------------------*/
header .logo {
	display: block; position: absolute; top: 0; z-index: 999; 
	-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:hover, header .on {padding-top: 50px;}
header .logo img {display: block; margin: 0 auto; max-width: 100%:}
header .logo b {display: none; }
header .logo span {display: block; text-align: center; text-transform: uppercase; font-size: 16px; color: #6CDFFF}


/*-------------------------------------------    
   INSIDE CONTAINER
-------------------------------------------*/
#inside-wrap {width: 100%; background: url(img/inside-wrap-bg.png) repeat-x}
body.expand #outer {margin: 0 0 30px 0;}

#primary {
	position: relative;width: 100%; max-width: 960px; margin: 0 auto;
}
#primary h1 {
	height: 117px; font-family:  '微软雅黑', 'Open Sans', Arial, helvetica, sans-serif; color: #fff; text-shadow: 6px 8px 0 rgba(0,0,0,.3); 
	color: #fff; font-size: 5em; letter-spacing: normal; padding: 15px 0 0 0; 
	text-shadow: none;text-align: right;
}
#primary h1 span {font-weight: 300; display: block; color: #6CDFFF; font-size: .3em; letter-spacing: normal;}
#primary h1 span strong {font-weight: 300; text-transform: none}

#primary h1 i {font-style: normal; text-transform: none; font-size: .9em; font-weight: 800;}

body#serv.details #primary h1 {line-height: 1em;}
body#serv.details #primary h1 span {margin: 0; line-height: 20px}

#primary h2 {font-weight: 300; font-size: 1.6em}
body.details #primary h2 {font-size: 1.9em}
#primary h2 a {color: #fff;}


/* --- case --- */
body#case #quote-form {padding: 25px 0; margin: 0 0 50px 0}


/*-------------------------------------------    
   INSIDE SERVICES
-------------------------------------------*/
body#serv section h2 {margin: 0 0 20px 0; text-shadow: 2px 2px 0 rgba(0,0,0,.5);}
body#serv section h3 {font-size: 1.1em; margin: 0 0 5px; text-shadow: 1px 1px 0 #000; font-weight: 400}
body#serv section figure {display: block; width: 20%; float: left;}
body#serv section article { width: 80%; float: right; display: block; padding: 20px 0 0 0}
body#serv section article img {float: right; margin-left: 15px; max-width: 100%;}

/*-------------------------------------------    
   Marketing Junww.com
-------------------------------------------*/
body#marketing section h2 {margin: 0 0 20px 0; text-shadow: 2px 2px 0 rgba(0,0,0,.5);}
body#marketing section h3 {font-size: 1.1em; margin: 0 0 5px; text-shadow: 1px 1px 0 #000; font-weight: 400}
body#marketing section figure {display: block; width: 20%; float: left;}
body#marketing section article { width: 80%; float: right; display: block; padding: 20px 0 0 0}
body#marketing section article img {float: right; margin-left: 15px; max-width: 100%;}



/*-------------------------------------------    
   FEATURED
-------------------------------------------*/
#featured {text-align: center;}
#featured h1, #featured h2 {
	font-family:  '微软雅黑', 'Open Sans'; 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-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;}



.designSlide {display: block}

.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;	font-size: 1.1em; padding: 0 40px; line-height: 2.8em;
		
	/* -- 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);
}

.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}


/* --- /// DETAILS CTA //// ----- */
body.details .cta.big {position: absolute; top: 575px; right: 0; font-size: 1.1em; z-index: 999}




/* 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(img/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;}



/*-------------------------------------------    
  PORTFOLIO ICONS
-------------------------------------------*/
body#news .pinfo .cta {font-size: .9em; padding: 0 20px}
body#news .col ul {background: url(img/folio-icons.png) no-repeat 0 0;}



/*-------------------------------------------    
  PORTFOLIO BULLETS 
-------------------------------------------*/
body#news #case-spots {display: none; width: 350px; position: absolute; top: 80px; left: 50%; margin-left: -175px; z-index: 9999;}
body#news #case-spots li {display: block; width: 15px; height: 15px; float: left; margin: 0 5px; }
body#news #case-spots li a {
	cursor: pointer;
	display: block; background: #000; width: 100%; height: 100%; text-indent: -999em; border: 1px solid #555;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	-0-border-radius: 50px;
	border-radius: 50px;
}
body#news #case-spots li a:hover,body#news #case-spots li.active a {background: #65D1F0}


/* -- FOLIO PANEL -- */
.folio-panel {width: 100%; position: relative; left: 2000px;}


/* Direction Nav */
#next {width: 52px; height: 101px; margin: 0; display: block; background: url(img/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; margin: 0; display: block; background: url(img/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 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;}

body#home .serv-icon {
	width: 93px; height: 93px; 
}

.serv-icon {
	width: 93px; height: 93px; 
	background:none; float: left;
}

.serv-icon a {

	display: block; height: 75px; width: 75px; text-indent: -999em;
	margin: 7px auto 0 auto;
	background: url(img/icons.png) no-repeat; padding: 0; 
	-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;
	
}
.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(img/cta-arrow.png) no-repeat 0 50%; text-transform: uppercase; 
	padding: 0 0 0 15px; letter-spacing: 1px;
}





/*-------------------------------------------    
   CONTENT STYLES
-------------------------------------------*/
.content h2 {font-size: 1.9em}
.content h3 {color: #6CDFFF; font-weight: 300;}

.content p {margin: 0 0 30px 0; line-height: 2em}
body#serv .content p {line-height: 1.7em;}
body#marketing .content p {line-height: 1.7em;}

.content .cta {margin: 0 0 85px 0}






/*-------------------------------------------    
   HOME - CONTAINER
-------------------------------------------*/
#midwrap {
	width: 100%; 
    border-bottom: 1px solid #175A7F; 
	margin: 0;
	-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);
}
#container {
	padding: 35px 0 0 0;
	width: 100%; max-width: 960px; margin: 0 auto;
	color: #fff;
	position: relative;
}
#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;
	-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; margin: 0}
aside .tabs li a span {display: block;}
aside .tabs li a span b {display: block; clear: both;}




/*-------------------------------------------    
  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}


aside blockquote .author {display: block; padding: 40px 0 0 0; font-size: 12px;background: url(img/case-arrow.png) no-repeat 25px 0; position: relative; top: -1px}
aside blockquote p {background: url(img/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 POSTS
-------------------------------------------*/
.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}

body#news .news-post h2 {font-family: '微软雅黑', 'Ubuntu Condensed', 'Open Sans', Arial, helvetica, sans-serif; font-size: 2.0em;}
body#news .news-post h2 a {color: #6BDFFF}
body#news .news-post h2 a:hover {color: #fff}

body.details .news-post img { margin: 0 25px 20px 0 }


/* ---- FULL POST STYLES ----- */
body#news.full-post section {padding: 30px 0 0 0}
body#news.full-post .news-post img {margin: 0 0 45px 0; border: 1px solid #666; max-width: 100%; float: none;}


body#news.full-post .news-post .result-img {float: left; margin: 0 25px 40px 0;}

body#news.full-post .news-post h1 {
	font-family: '微软雅黑', 'Ubuntu Condensed', Arial, helvetica, sans-serif; text-align: left; 
	line-height: 1.1em; font-size: 2.0em; font-weight: normal; text-transform: none; color: #fff; text-align:center
}
body#news.full-post .news-post h2 {
	font-family: '微软雅黑', 'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; font-size: 2em; 
	background: url(img/h2-bg.png) repeat-x 0 100%; padding: 0 0 15px 0; 
	text-transform: uppercase; color: #6BDFFF
}
body#news.full-post .news-post h3 {
	font-family: '微软雅黑',  'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; font-size: 1.6em; color: #6BDFFF; 
	margin: 0; 
}
body#news.full-post .news-post h4 {
	font-family: '微软雅黑',  'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; color: #fff; margin: 0; 
	text-transform: none; font-size: 1.3em; font-weight: normal;
}
body#news.full-post .news-post h5 {
	font-family: '微软雅黑',  'Open Sans', Arial, sans-serif; color: #6BDFFF; margin: 0; 
	text-transform: normal;  font-size: 1em;
}

body#news.full-post .news-post blockquote {
	float: right; width: 25%; background: #000; padding: 25px; 
	margin: 0 0 25px 25px; font-style: italic; font-size: 1.2em; line-height: 1.8em; color: #fff;
}
body#news.full-post .news-post blockquote p {margin: 0}



/* --- POST LIST --- */
body#news.full-post .news-post ul {margin: 0 0 35px 50px}
body#news.full-post .news-post  ul li {font-size: 1.1em; color: #fff; margin: 0 0 20px 0; background: url(img/cta-arrow.png) no-repeat 0 5px; padding: 0 0 0 20px; line-height: 1.7em}
body#news.full-post .news-post  ul li strong {color: #6BDFFF;}
body#news.full-post .post {margin: 0 0 55px;}
body#news.full-post #search {left: auto; right: 0;width: 230px;}
body#news.full-post aside {padding: 140px 0 0 0}
body#news.full-post .news-post {padding: 20px 40px 30px 40px }


/* --- SOCIAL SHARE ---  */
#social_btn {margin: 0 0 10px}
body#news.full-post .news-post #social_btn .share {margin: 0}
body#news.full-post .news-post #social_btn .share li {list-style: none; padding: 0; margin: 0; float: left; width: 100px; background: none;}

*/

/* -- SEARCH RESULTS ---  */
body#news.results .post {margin: 0 0 10px 0}
body#news.results .news-post {background: #000;}

/* -- NO RESULTS ---  */
body#news.noresult #search {width: 100%; position: relative; top: -20px; left: 0; right: auto; margin: 0 0 20px;}
body#news.noresult .news-post {text-align: center;}
body#news.noresult .news-post h1 {text-align: center; font-size: 4em; margin: 0 0 10px}
	
body#news .feed_sub {line-height: 1em; margin: 0 0 25px 0;  padding: 0 0 25px; border-bottom: 1px solid #333;}
body#news .feed_sub a {color: #fff; display: block;}	
body#news .feed_sub span {display: block; font-size: .5em; text-transform: uppercase; color: #6BDFFF}
body#news .feed_sub img {margin: 0 10px 0 0; float: left;}


/* ---- SUMMARY POST STYLES -----  */
.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; margin: 0;}


/*-------------------------------------------    
   CASE POSTS
-------------------------------------------*/
.case-post img {float: left; border: 1px solid #666; margin: 0 25px 0 0;}
.case-post h2 {font-size: 1.8em; line-height: 1.2em; margin: 0 0 20px; font-weight: 300}

body#case .case-post h2 {font-family: '微软雅黑', 'Ubuntu Condensed', 'Open Sans', Arial, helvetica, sans-serif; font-size: 2.0em;}
body#case .case-post h2 a {color: #6BDFFF}
body#case .case-post h2 a:hover {color: #fff}

body.details .case-post img { margin: 0 25px 20px 0 }


/* ---- FULL POST STYLES ----- */
body#case.full-post section {padding: 30px 0 0 0}
body#case.full-post .case-post img {margin: 0 0 45px 0; border: 1px solid #666; max-width: 100%; float: none;}


body#case.full-post .case-post .result-img {float: left; margin: 0 25px 40px 0;}

body#case.full-post .case-post h1 {
	font-family: '微软雅黑', 'Ubuntu Condensed', Arial, helvetica, sans-serif; text-align: left; 
	line-height: 1.1em; font-size: 2.0em; font-weight: normal; text-transform: none; color: #fff; text-align:center
}
body#case.full-post .case-post h2 {
	font-family: '微软雅黑', 'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; font-size: 2em; 
	background: url(img/h2-bg.png) repeat-x 0 100%; padding: 0 0 15px 0; 
	text-transform: uppercase; color: #6BDFFF
}
body#case.full-post .case-post h3 {
	font-family: '微软雅黑',  'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; font-size: 1.6em; color: #6BDFFF; 
	margin: 0; 
}
body#case.full-post .case-post h4 {
	font-family: '微软雅黑',  'Ubuntu Condensed', 'Open Sans', Arial, sans-serif; color: #fff; margin: 0; 
	text-transform: none; font-size: 1.3em; font-weight: normal;
}
body#case.full-post .case-post h5 {
	font-family: '微软雅黑',  'Open Sans', Arial, sans-serif; color: #6BDFFF; margin: 0; 
	text-transform: normal;  font-size: 1em;
}

body#case.full-post .case-post blockquote {
	float: right; width: 25%; background: #000; padding: 25px; 
	margin: 0 0 25px 25px; font-style: italic; font-size: 1.2em; line-height: 1.8em; color: #fff;
}
body#case.full-post .case-post blockquote p {margin: 0}



/* --- POST LIST --- */
body#case.full-post .case-post ul {margin: 0 0 35px 50px}
body#case.full-post .case-post  ul li {font-size: 1.1em; color: #fff; margin: 0 0 20px 0; background: url(img/cta-arrow.png) no-repeat 0 5px; padding: 0 0 0 20px; line-height: 1.7em}
body#case.full-post .case-post  ul li strong {color: #6BDFFF;}
body#case.full-post .post {margin: 0 0 55px;}
body#case.full-post #search {left: auto; right: 0;width: 230px;}
body#case.full-post aside {padding: 140px 0 0 0}
body#case.full-post .case-post {padding: 20px 40px 30px 40px }


/* --- SOCIAL SHARE ---  */
#social_btn {margin: 0 0 10px}
body#case.full-post .case-post #social_btn .share {margin: 0}
body#case.full-post .case-post #social_btn .share li {list-style: none; padding: 0; margin: 0; float: left; width: 100px; background: none;}

*/

/* -- SEARCH RESULTS ---  */
body#case.results .post {margin: 0 0 10px 0}
body#case.results .case-post {background: #000;}

/* -- NO RESULTS ---  */
body#case.noresult #search {width: 100%; position: relative; top: -20px; left: 0; right: auto; margin: 0 0 20px;}
body#case.noresult .case-post {text-align: center;}
body#case.noresult .case-post h1 {text-align: center; font-size: 4em; margin: 0 0 10px}
	
body#case .feed_sub {line-height: 1em; margin: 0 0 25px 0;  padding: 0 0 25px; border-bottom: 1px solid #333;}
body#case .feed_sub a {color: #fff; display: block;}	
body#case .feed_sub span {display: block; font-size: .5em; text-transform: uppercase; color: #6BDFFF}
body#case .feed_sub img {margin: 0 10px 0 0; float: left;}


/* ---- SUMMARY POST STYLES -----  */
.case-post p {line-height: 1.8em; margin: 0 0 10px 0}
.case-post .post {color: #fff;}
.case-post .post i {padding: 0 1.5%;}
.case-post .post {text-transform: uppercase; font-size: 12px; display: block; margin: 0 0 10px;}
.case-post .post .cta {margin: 0 25px 0 0; font-size: 1.2em;}
.case-post .cta {line-height: 2em; font-size: 12px; margin: 0;}



/*-------------------------------------------    
  FOOTER NAVIGATION
-------------------------------------------*/
#foot-nav dt {margin: 0 0 15px 0; font-size: 16px; font-weight: 400}
#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
-------------------------------------------*/
#footwrap {width: 100%; max-width: 960px; margin: 0 auto;}
footer p {margin: 0 0 10px}

.social li {display: inline-block; float: left; width: 36px; height: 20px;}
.social li a {
	display: block; text-indent: -999em; width: 100%; height: 100%; 
	background: url(img/social.png) no-repeat; opacity: 0.6;
	
	-webkit-transition: opacity .2s ease-in;
	-moz-transition: opacity .2s ease-in;
	-o-transition: opacity .2s ease-in;
	transition: opacity .2s ease-in;
}
.social li a:hover {opacity: 1.0;}
.social .twitter a {background-position: 0 -60px;}
.social .facebook a {background-position: 0 -90px;}
.social .rss a {background-position: 0 -30px;}


body#contact footer h2 {display: none;}

.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;}

/*-------------------------------------------    
  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;
	-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 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 strong, nav ul li a b {display: block; font-size: 0.7em; letter-spacing: 1px; color: #6BDFFF; font-weight: 300} 
nav ul li a span {display: block; padding: 95px 0 0 0;
	-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;
}





/*-------------------------------------------    
  REQUEST case FORM
-------------------------------------------*/
#quote-form .col {float: left; width: 270px; margin: 0 0 0 16px;}
#quote-form .col.info {width: 200px; margin: 0;}
#quote-form button {font-family: '微软雅黑', 'Open Sans';  width: 210px; margin: 0; float: right;}


/* -- case PAGE --- */
body#case #quote-form .col {float: left; width: 28.125%; margin: 0 0 0 16px;}
body#case #quote-form .col.info {width: 30%; margin: 0;}
body#case #quote-form .submit {width: 35%; margin: 0; float: right;}

@media screen and (max-width: 768px) {

	body#case h1 {margin: 0 0 35px 0}
	body#case footer h2 {display: none;}

	body#case #quote-form {width: 80%; margin: 0 auto 45px auto;}
	body#case #quote-form .col {float: none; width: 100%; margin: 0}
	body#case #quote-form .col.info {float: none; width: 100%; margin: 0;}
	body#case #quote-form .submit {float: none; width: 100%; margin: 0;}
	body#case #quote-form textarea, body#case #quote-form input {width: 95%;}
	body#case button {margin: 0 auto; float: none;}
}


#quote-form fieldset {margin: 0 0 25px}
#quote-form fieldset label {
	font-size: .9em; display: block;
	margin: 0 0 10px 0; text-transform: uppercase;
}
#quote-form input, #quote-form textarea {
	width: 85%; background: rgba(0,0,0,1); background: #000; border: 1px solid #333; padding: 12px 10px;
	font-size: 1em; color: #fff;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px;
}
#quote-form textarea {height: 100px;}

/* -- CUSTOM SELECT --- */
#quote-form fieldset select {width: 50%; position: absolute; top: -550px; right: 0; z-index: 9999; text-transform: none}
.type-select {left: 0;}


/*-------------------------------------------    
  SELECT DROP DOWNS
-------------------------------------------*/
.dropdown {width: 100%;}
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
.dropdown a, .dropdown a:visited { color: #fff; text-decoration:none; outline:none; }
.dropdown a:hover { }
.dropdown dt a:hover { border: 1px solid #555;}
.dropdown dt a {
	background: url(img/drop-arrow.gif) no-repeat 98% 50% #000; 
	display:block; border:1px solid #333; width: 100%; padding: 0; height: 40px;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px; line-height: 42px; 
	font-size: 12px; text-indent: 10px; text-transform: none;color: #555;
	font-weight: 300;
}
.dropdown dt a span {cursor:pointer; display:block;}
.dropdown dd ul { 
	background: #000 none repeat scroll 0 0; color: #555; display:none; top: -10px; left: 0; padding:5px 0px; position:absolute; width: 100%; text-transform: none;
    list-style:none; border-left: 1px solid #333; border-right: 1px solid #333; border-bottom: 1px solid #333;
    z-index: 99999;
}
.dropdown span.value { display:none;}
.dropdown dd ul li:first-child {display: none;}
.dropdown dd ul li a { padding:5px 15px; display:block; font-size: 12px;color: #555;}
.dropdown dd ul li a:hover { background: #222; color: #fff}
.dropdown img.flag { border:none; vertical-align:middle; margin-left:10px; }
.flagvisibility { display:none;}



#quote-form button {
	float: left;
	width: 200px; font-size: 1.1em; 
	text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block; padding: 0; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
		
	/* -- 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;

}
#quote-form button:hover {
	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);
}


/* these are the various classes used to style the demo error fields */
	.errorField {
	  background-color: #990000;
	  color: white;
	}
	.errorFieldDemo2 {
	  background-color: #ffffcc;
	  color: #990000;
	}
	.errorFieldDemo5 {
	  background-color: #ffffcc;
	  border: 1px solid #aa0000;
	  color: #aa0000;
	}
	.errorFieldDemo6 {
	  background-color: green;
	  color: #yellow;
	}


/*-------------------------------------------    
  NEWS
-------------------------------------------*/
body#news #primary {padding: 25px 0}
body#news section {width: 100%; float: left;}
body#news aside {width: 23.9583333%; float: right;}

body#news section #featPost1 {padding: 10px;}
body#news section #featPost1 .special {
	color: #fff;
	padding: 25px 25px 35px 25px;
	
	/* -- GRADIENT -- */
	background-image: linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -o-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -moz-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -webkit-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -ms-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.02, rgb(8,47,82)),
		color-stop(0.92, rgb(44,120,158))
	);
	
}
body#news section #featPost1 .special h2 a {color: #fff;text-shadow: 1px 1px 0px #000}
body#news section #featPost1 .special img {border: 6px solid #000;}


body#news section .news-post {
	padding: 30px;
	background-color: rgba(0,0,0,0.30); margin: 0 0 25px; border: 1px solid #333;
	 
}


body#news aside h3 {margin: 0 0 25px 0; font-size: 1.5em; font-weight: 300;}
body#news aside ul {margin: 0 0 45px}
body#news aside ul li {margin: 0 0 10px; background: url(img/cta-arrow.png) no-repeat 0 3px; padding: 0 0 0 15px}
body#news aside ul li a {color: #999}
body#news aside ul li a:hover {color: #fff;}

body#news aside ol {margin: 0 0 45px}
body#news aside ol li {margin: 0 0 30px}
body#news aside ol li time {font-size: 11px; display: block; margin:0 0 5px}
body#news aside ol li a {font-size: 1.1em; color: #fff;}
body#news aside ol li a:hover {color: #6CDFFF;}


/*-------------------------------------------    
  case
-------------------------------------------*/
body#case #primary {padding: 25px 0}
body#case section {width: 100%; float: left;}
body#case aside {width: 23.9583333%; float: right;}

body#case section #featPost1 {padding: 10px;}
body#case section #featPost1 .special {
	color: #fff;
	padding: 25px 25px 35px 25px;
	
	/* -- GRADIENT -- */
	background-image: linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -o-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -moz-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -webkit-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	background-image: -ms-linear-gradient(bottom, rgb(8,47,82) 2%, rgb(44,120,158) 92%);
	
	background-image: -webkit-gradient(
		linear,
		left bottom,
		left top,
		color-stop(0.02, rgb(8,47,82)),
		color-stop(0.92, rgb(44,120,158))
	);
	
}
body#case section #featPost1 .special h2 a {color: #fff;text-shadow: 1px 1px 0px #000}
body#case section #featPost1 .special img {border: 6px solid #000;}


body#case section .case-post {
	padding: 30px;
	background-color: rgba(0,0,0,0.30); margin: 0 0 25px; border: 1px solid #333;
	 
}


body#case aside h3 {margin: 0 0 25px 0; font-size: 1.5em; font-weight: 300;}
body#case aside ul {margin: 0 0 45px}
body#case aside ul li {margin: 0 0 10px; background: url(img/cta-arrow.png) no-repeat 0 3px; padding: 0 0 0 15px}
body#case aside ul li a {color: #999}
body#case aside ul li a:hover {color: #fff;}

body#case aside ol {margin: 0 0 45px}
body#case aside ol li {margin: 0 0 30px}
body#case aside ol li time {font-size: 11px; display: block; margin:0 0 5px}
body#case aside ol li a {font-size: 1.1em; color: #fff;}
body#case aside ol li a:hover {color: #6CDFFF;}


/*-------------------------------------------    
  SEARCH
-------------------------------------------*/
#search {position: absolute; top: 50px; left: 0; height: 36px; width: 250px; }
#search form {width: 100%; position: relative; margin: 0; padding: 0;}
#search label {position: absolute; top: 0; left: 0; height: 36px; line-height: 36px; z-index: 999; text-indent: 10px}
#search input {
	width: 90%; height: 36px;
	margin: 0; padding: 0 10px;
	background: #000; border: 1px solid #333;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	position: relative; top: 0; left: 0;
	color: #fff;
}
#search button {
	position: absolute; right: -1px; top: 1px; display: block; height: 36px; width: 45px;
	border: none;

	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	-o-border-radius-topright: 10px;
	border-top-right-radius: 10px;
	
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-o-border-radius-bottomright: 10px;
	border-bottom-right-radius: 10px;
	
	/* -- GRADIENT -- */
	background: #139BC3;
	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))
	);
	
}
#search button span {display: block; width: 33px; height: 32px; background: url(img/search-icon.png) no-repeat 0 0; text-indent: -999em; margin: 0 auto;}


/*-------------------------------------------    
  MAP
-------------------------------------------*/
body#contact h1 {margin: 0 0 50px 0}

#map {height: 340px; background: rgba(0,0,0,.5); padding: 15px; margin: 0 0 50px}
#map #gmap {
        margin: 0 auto;
        border: 1px dashed #C0C0C0;
        width: 100%;
        height: 340px;
}



#info {width: 36.4583333%; float: left;}
body#contact #primary h2 {font-size: 1.1em; margin: 0 0 30px}
body#contact #primary h2 strong {display: block; font-size: 1.6em}


#info ul li {display: block; height: 42px; margin: 0 0 25px; padding: 0 0 0 60px; color: #fff; background: url(img/side-social.png) no-repeat 0 0}
#info ul .email-icon {background-position: 0 0}
#info ul .QQ-icon {background-position: 0 -42px}
#info ul .credit-icon {background-position: 0 -84px}
#info ul .znncnn-icon {background-position: 0 -126px}



#form {width: 34%; float: right;}


#form fieldset {margin: 0 0 15px; position: relative;}
#form fieldset label {
	font-size: 1em; display: block;
	margin: 0; position: absolute; top: 10px; left: 10px;
}
#form input, #form textarea {
	width: 95%; background: rgba(0,0,0,0.5); 
	border: none; padding: 12px 10px;
	font-size: 1em; color: #fff;
	-moz-border-radius: 10px; -webkit-border-radius: 10px; 
	border-radius: 10px;
	
	-webkit-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	-moz-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	-o-box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	box-shadow: 1px 1px 0 rgba(255,255,255,0.2);
	
}
#form textarea {height: 100px;}


#form button {
	font-family: '微软雅黑', 'Open Sans'; 
	float: right; font-size: 1em; 
	text-transform: uppercase; color: #fff; border: none; cursor: pointer; background: #14B1DE; display: inline-block; padding: 0 25px; line-height: 2.2em; text-shadow: 0 2px 2px rgba(0,0,0,0.6); display: block; 
		
	/* -- 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;

}
#form button:hover {
	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);
}


/* ---- VALIDATE FORM ------ */
body#case .pop {
	background: none;
	font-size: 2em;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.pop {
	text-align: left;
	padding: 10px;
	font-size: 1em;
	color: #6CDFFF;
	position: absolute;
	display: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: -1px 1px 2px #000;
	-moz-box-shadow: -1px 1px 2px #000;
	box-shadow: -1px 1px 2px #000;
}

.error {
	background: black;
	border: 0;

}

.correct {
	background: #1A1B1E;
	border: 0; color: #fff; font-size: 1em; padding: 0 0 20px 0
}

.wrong {
	font-weight: bold;
	color: #e90000;
}

.normal {
	font-weight: normal;
	color: #222;
}



/*-------------------------------------------    
  IGD ICON
-------------------------------------------*/
.igd-icon {
	position: absolute; right: 0;	
	display: block; width: 112px; height: 23px; background: url(img/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(img/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(img/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(img/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(img/dianhua.png) no-repeat 0 0; 
	position: fixed; top: 30px; right: 0; z-index: 99999;
}