@charset "utf-8";


html, body { background-color:#ffffff;}
.container {}

/* ==========================================================================
   
   #header

   ========================================================================== */
   
#header { position: fixed !important; top: 0; margin: 0; padding: 0; width: 100%; height: 100px; border: none; z-index: 999; background: #c92536; position: relative; }
#header .logoArea { position: absolute; top: 0; left: 50%; margin-left: -150px; z-index: 2; }
#header h1.logo { width: 300px; height: 60px; margin: 0; }
#header h1.logo a { background: url(../images/logoHeaderL.png) top center no-repeat; background-size: 100% auto; display: block; width: 300px; height: 60px; text-indent: -9999px; }
#header h1.logo a:hover { background: url(../images/logoHeaderL.png) bottom center no-repeat; background-size: 100% auto; }
#header .navArea { width: 90%; height: 32px; margin: 0 auto; text-align: center; font-size: 0; margin-top: 62px;}
#header .navArea ul { list-style: none; }
#header .navArea ul li { display: inline-block; *display: inline; *zoom: 1; letter-spacing: normal; }
#header .navArea ul li a { color: #ffffff; display: block; margin: 0 20px; padding: 0; position: relative; overflow: hidden; font-size: 14px; font-family: "brandon-grotesque", sans-serif; font-weight: 700; text-decoration: none; text-transform: uppercase; line-height: 30px; letter-spacing: .125em; border-bottom: #ffffff 0px solid; }
#header .navArea ul li a:hover { color: #ffffff; border-bottom: #ffffff 2px solid; -webkit-transform: translate(0px, -3px); -moz-transform: translate(0px, -3px); -o-transform: translate(0px, -3px); -ms-transform: translate(0px, -3px); transform: translate(0px, -3px); }

/* ==========================================================================
   
   #header.autofix_sb.fixed

   ========================================================================== */

#header.autofix_sb.fixed { height: 50px; background: #c92536;box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
#header.autofix_sb.fixed h1.logo { display: none;}
/*#header.autofix_sb.fixed h1.logo a { background: url(../images/logoHeaderFix.png) top center no-repeat #fefefe; height: 50px; }
#header.autofix_sb.fixed h1.logo a:hover { background: url(../images/logoHeaderFix.png) bottom center no-repeat #12cfa7; }*/
#header.autofix_sb.fixed .navArea { top: 0px; margin-top: 10px;}

/* ==========================================================================
   
   #headerSP

   ========================================================================== */
   
#headerSp { display: none; }
#navSp { display: none; }


 /* ==============================   

   heroBox

   ============================== */  

.heroBox { height: 660px; width: 100%; position: relative;; background-image: url(../images/aboutus_bg.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 2;
	background: #000;
	opacity: 0.5;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);	
}
.heroBoxInner { width: 860px; margin: 0 auto; color: #ffffff; line-height: 1.8em; font-size: 12px; z-index: 3; position: relative; top: 30%;}
.heroBox-title { font-size: 26px; line-height: 1.6em; margin-bottom: 30px; text-align: center;}
.heroBox-text { font-size: 17px; line-height: 1.6em; margin-bottom: 30px; text-align: center;}
.heroBox-text2 { font-size: 20px; line-height: 1.6em; text-align: center;}

 /* ==============================   

   page

   ============================== */  

.page-wrap { padding-top: 100px; width: 960px; margin: 0 auto; min-height: 500px;}
.page-title { font-size: 26px; font-weight: bold; text-align: center; padding: 40px 0 20px; width: 500px; margin: 0 auto 10px; border-bottom: #c92536 1px solid; color: #c92536; } 
.page-subtext { margin-bottom: 50px; text-align: center; color: #00638f; font-size: 14px;}

 /* ==============================   

   feature

   ============================== */  

.featureBox { height: 660px; width: 100%; position: relative;; background-image: url(../images/portfolioBg.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.featureBoxInner { width: 860px; margin: 0 auto; color: #ffffff; line-height: 1.8em; font-size: 12px; z-index: 3; position: relative; top: 30%;}
.featureBox .page-title { color: #ffffff; font-size: 26px;}
.featureBox .page-subtext { color: #ffffff; font-size: 18px; line-height: 1.6em;}

 /* ==============================   

   service

   ============================== */  

.serviceBox { height: 660px; width: 100%; position: relative;; background-image: url(../images/portfolioBg.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;}
.serviceBoxInner { width: 860px; margin: 0 auto; color: #ffffff; line-height: 1.8em; font-size: 12px; z-index: 3; position: relative; top: 30%;}
.serviceBox .page-title { color: #ffffff; font-size: 26px;}
.serviceBox .page-subtext { color: #ffffff; font-size: 18px; line-height: 1.6em;}

 /* ==============================   

   about

   ============================== */  
.aboutBox { width: 90%; margin: 0 auto;}
.aboutBox .title { font-size: 22px; margin-bottom: 10px;}
.aboutBox .context { margin-bottom: 30px;}


.contactBox { width: 90%; margin: 0 auto 50px; max-width: 600px;}
.contactBox .title { font-size: 16px; margin-bottom: 10px;}
.contactBox .context { margin-bottom: 10px;}
.contactBox .context input { border: #d8d8d8 1px solid; padding: 5px; background: #ffffff; border-radius: 4px; width: 100%;}
a.sendBtn { background: #c92536; border-radius: 4px; padding: 8px 20px; color: #ffffff; text-align: center;}

 /* ==============================   

   portfolio

   ============================== */  


.portfolio-wrap { background-image: url(../images/portfolioBg.jpg); background-size: 100% auto; background-repeat: no-repeat; background-position: top center;}
.portfolio-wrap .page-title { color: #ffffff;}
.portfolio-wrap .page-subtext { color: #ffffff;}
.portfolioNav { margin: 150px 0 10px; text-align: center; min-width: 960px;  }
.portfolioNav a { position: relative;  color: #000000; text-align: center; width: 150px; background-color: rgba(255,255,255,.6); display: inline-block; margin: 0 10px; font-size: 13px; }
.portfolioNav a:hover,.portfolioNav a.active { background-color: rgba(255,255,255,1);}
.nav_location.active:after, .nav_category.active:after { position: absolute; top: 42px; left: 50%; content: ""; width: 10px; height: 10px; background-color: #ebebeb; transform:rotate(45deg) translateX(-70%)}

.subNav { height: 0; overflow: hidden; text-align: center; padding: 0; width: 100%; min-width: 960px; background-color: #ebebeb;}
.subNav a { color: #000000; text-align: center; width: 150px; display: none; margin: 0 5px; border: 1px solid #cacaca; font-size: 13px; }
.subNav a:hover,.subNav a.active { background-color: rgba(255,255,255,1);}
.subNav.active { height: auto; padding: 10px 0;}
.subNav.active a { display: inline-block;}

.portfolio-box { width: 960px; margin: -240px auto 40px;}
.portfolio-list {}
.portfolio-item { position: relative; float: left; background-color: #ffffff; padding: 20px; width: 29%; margin: 0 2% 20px; box-shadow: 0 1px 2px rgba(0,0,0,.5)}
.portfolio-logo { width: 250px; height: 130px; background-size: auto 60%; background-position: 50% 50%; background-repeat: no-repeat;}
.portfolio-name { text-align: center; font-weight: bold; margin-bottom: 5px;}
.portfolio-location { text-align: center; color: #00779f; font-size: 10px; margin-bottom: 10px; line-height: 1.6em;}
.portfolio-detail {line-height: 1.6em; font-size: 12px;}
.portfolio-type { line-height: 1.5em; position: absolute; left: 0; top: 102%; font-size: 12px; text-align: center; width: 100%; color: #00779f; font-weight: bold;}

 /* ==============================   

   team

   ============================== */  

.team-list {}
.team-list li { float: left; width: 25%; margin: 0 0px 10px; padding: 0 10px;}
.member-pic { width: 200px; height: 200px; display: block; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    margin:0 auto 20px;
}
.member-name { text-align: center; margin-bottom: 5px; line-height: 1.6em; font-weight: bold;}
.member-title { text-align: center; color: #00779f; font-size: 10px; margin-bottom: 15px; line-height: 1.6em;}
.member-describe { line-height: 1.6em; font-size: 12px;}

 /* ==============================   

   founders

   ============================== */  

.founders-list {}
.founders-list li { float: left; width: 220px; height: 340px; margin: 0 10px 20px; padding: 0 0 10px; box-shadow: 0 1px 2px rgba(0,0,0,.5);}
.founders-member-pic { width: 220px; height: 220px; display: block; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;margin:0 auto 20px;}
.founders-member-name { text-align: center; margin-bottom: 5px; line-height: 1.6em; font-weight: bold;}
.founders-member-title { text-align: center; color: #00779f; font-size: 10px; line-height: 1.6em;}
.founders-member-describe { text-align: center; color: #00779f; font-size: 10px; }

/* ==============================   

   news

   ============================== */ 

.news-box {}
ul.news-list {}
li.news-item { float: left; width: 29%; margin: 0 2% 30px; padding: 0 0 10px;}
.news-title { margin-bottom: 5px; line-height: 1.6em; font-weight: bold;}
.news-subtitle { color: #00779f; font-size: 10px; line-height: 1.6em; margin-bottom: 5px;}
.news-pic { display: block; margin:0 auto 10px;}
.news-pic img { width: 100%;}
.news-time { color: #00779f; font-size: 10px; line-height: 1.6em; margin-bottom: 5px; }
.news-describe { font-size: 10px; line-height: 1.6em; }
a.readmore { color: #00779f;}

 /* ==============================   

   footer

   ============================== */  

#footer { text-align: center; padding: 20px 20px 50px;}
#footer .title { 
	margin-bottom: 10px;
	color: #666666;
	font-size: .9em;
	font-weight: 700;
	letter-spacing: .2em;
}
#footer .location { 
	margin-bottom: 10px;
	color: #666666;
	font-size: .7em;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.6em;
}
#footer .contect { 
	margin-bottom: 10px;
	color: #666666;
	font-size: .7em;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.6em;
}
#footer .copyright { 
	margin-bottom: 10px;
	color: #666666;
	font-size: .7em;
	font-weight: 400;
	letter-spacing: .1em;
	line-height: 1.6em;
}
#footer .footerLink { margin-top: 30px;}
.icon_fb { display: inline-block; margin: 0 5px; width: 40px; height: 40px; background-image: url(../images/icon_fb.png); background-size: 40px 40px; background-position: 50% 50%;}
.icon_tw { display: inline-block; margin: 0 5px; width: 40px; height: 40px; background-image: url(../images/icon_tw.png); background-size: 40px 40px; background-position: 50% 50%;}
.icon_email { display: inline-block; margin: 0 5px; width: 40px; height: 40px; background-image: url(../images/icon_email.png); background-size: 40px 40px; background-position: 50% 50%;}


@media screen and (max-width: 950px) {
	#header .navArea ul li a {margin: 0 10px;}

	 /* ==============================   

	   page

	   ============================== */  
	.page-wrap { width: 100%;}

	 /* ==============================   

	   portfolio

	   ============================== */  
	.portfolioNav { margin: 150px auto 10px; min-width: inherit; width: 90%;}
	.subNav { width: 100%; min-width: inherit; }
	.portfolio-box { width: 100%; margin: -280px auto 10px;}
	.portfolio-item { width: 31%; margin: 0 1% 55px;}
	.portfolio-logo { width: 100%;}

	 /* ==============================   

	   founders

	   ============================== */  
	.founders-list { margin: 0 auto; width: 720px;}
}


@media screen and (max-width: 768px) {
	/* ==========================================================================
	   
	   #header

	   ========================================================================== */

	#header { display: none; }
	/* ==========================================================================
	   
	   #navSp, #headerSP

	   ========================================================================== */

	#navSp { display: none; }
	#headerSp { margin: 0; padding: 0; display: block; width: 100%; position: fixed; z-index: 1002; }
	.headerSpInner { margin: 0; padding: 0; display: block; width: 100%; position: relative; text-align: center; }
	#headerSp .logoArea { position: absolute; top: 6px; left: 50%; width: 250px; height: 50px; margin-left: -125px; }
	#headerSp h1.logo { width: 250px; height: 50px; margin: 0; }
	#headerSp h1.logo a { background: url(../images/logoSp.png) no-repeat; background-size: cover; display: block; width: 250px; height: 50px; text-indent: -9999px; }

	 /* ==============================  

	   slicknav

	   ============================== */  

	.slicknav_menu { display: block; position: fixed; top: 0; padding: 0; width: 100%; z-index: 1001; overflow: hidden; }
	.slicknav_btn { position: relative; display: block; vertical-align: middle; float: left; padding: 1.25em; line-height: 1.125em; cursor: pointer; }
	.slicknav_menu .slicknav_icon-bar { display: block; width: 1.25em; height: 0.125em; }
	.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.3em }
	.slicknav_nav { clear: both }
	.slicknav_nav ul,
	.slicknav_nav li { display: block; position: relative; }
	.slicknav_nav .slicknav_item { display: block; cursor: pointer; }
	.slicknav_nav a { display: block }
	.slicknav_nav .slicknav_item a { display: inline }
	.slicknav_menu:before,
	.slicknav_menu:after { content: " "; display: table; }
	.slicknav_menu:after { clear: both }
	/* IE6/7 support */
	.slicknav_menu { *zoom: 1}
	.slicknav_menu { font-size: 1em; }
	.slicknav_btn { margin: 0; text-decoration: none; }
	.slicknav_menu .slicknav_icon-bar { background-color: #222; }
	.slicknav_menu { background: #fefefe; border-bottom: #f0f0f0 1px solid; }
	.slicknav_nav { margin: 0; padding: 0; }
	.slicknav_nav,
	.slicknav_nav ul { list-style: none; overflow: hidden; text-align: center; }
	.slicknav_nav ul { padding: 0; margin: 0; }
	.slicknav_nav a { padding: 8px 15px; text-decoration: none; color: #222; font-size: 13px; font-family: "brandon-grotesque", sans-serif; font-weight: 500; letter-spacing: .125em; border-top: #f0f0f0 1px dotted; text-transform: uppercase; }
	.slicknav_nav a:hover { background: #ccc; color: #222; }
	.slicknav_nav .slicknav_txtnode { margin-left: 15px; }
	.slicknav_nav i { padding-right: 5px; }

	 /* ==============================  

	   heroBox

	   ============================== */  

	.heroBox { height: 560px; }
	.heroBoxInner { width: 90%; }

	 /* ==============================   

	   page

	   ============================== */  
	.page-wrap { padding-top: 55px; width: 100%;}
	.page-title { padding: 10px 0 10px; width: 100%; margin: 0 auto 10px; } 
	.page-subtext { margin-bottom: 20px; text-align: center; color: #00638f; line-height: 1.6em; font-size: 13px;}
	
	 /* ==============================   

	   feature

	   ============================== */  

	.featureBox { height: 560px; }
	.featureBoxInner { width: 90%;}

	
	/* ==============================   

	   service

	   ============================== */  

	.serviceBox { height: 560px; }
	.serviceBoxInner { width: 90%;}

	
	  /* ==============================   

	   portfolio

	   ============================== */  
	.page-subtext { margin-bottom: 5px;}
	.portfolioNav { margin: 0px auto 10px;}
	.portfolioNav a { width: 30%; margin: 0;}
	.portfolio-item { width: 94%; margin: 0 3% 20px; min-height: inherit;}
	.subNav a { margin: 4px 0;}
	.portfolio-box { margin: -280px auto 10px;}

	 /* ==============================   

	   team

	   ============================== */  
	.team-list li { float: none; width: 90%; margin: 0 auto 10px; padding: 0 10px;}
	.member-pic { float: left; width: 100px; height: 100px; display: block; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
		-webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    -ms-border-radius: 50%;
	    border-radius: 50%;
	    margin:0 20px 10px 0;
	}
	.member-name { float: left; width: 50%; padding-top: 25px; text-align: left; margin-bottom: 5px; line-height: 1.6em; font-weight: bold;}
	.member-title { float: left; width: 50%; text-align: left; color: #00779f; font-size: 10px; margin-bottom: 15px; line-height: 1.6em;}
	.member-describe { line-height: 1.6em; font-size: 12px; clear: both; margin-bottom: 20px;}

	/* ==============================   

	   news

	   ============================== */ 

	li.news-item { float: none; width: 90%; margin: 0 5% 30px; border-bottom: solid #cccccc 1px; padding-bottom: 20px;}


	 /* ==============================   

	   founders

	   ============================== */  
	.founders-list { margin: 0 auto; width: 90%;}
	.founders-list li { float: none; width: 100%; height: auto; margin: 0 0 10px; padding: 0; box-shadow: none; clear: both;}
	

	.founders-list li:after { content:""; display:block; height:0!importment; clear:both; visibility: hidden;}  
	.founders-list li { display:inline-block;}  
	* html 	.founders-list li { height:1%;}  

	.founders-member-pic { float: left; width: 100px; height: 100px; display: block; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;
		-webkit-border-radius: 50%;
	    -moz-border-radius: 50%;
	    -ms-border-radius: 50%;
	    border-radius: 50%;
	    margin:0 20px 10px 0;
	}
	.founders-member-name { float: left; width: 50%; padding-top: 15px; text-align: left; margin-bottom: 5px; line-height: 1.6em; font-weight: bold;}
	.founders-member-title { float: left; width: 50%; text-align: left; color: #00779f; font-size: 10px; margin-bottom: 5px; line-height: 1.6em;}
	.founders-member-describe { float: left; width: 50%; text-align: left; line-height: 1.6em; font-size: 12px; }

}