/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

html {
	margin: 0px;
	padding: 0px;
	color:#000;
	display: block;
	width:100%;
	height:100%;
	border:none;
	-webkit-user-select:none;
	-moz-user-select:none;
}

body {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
	-webkit-text-size-adjust: 100%;
	width:100%;
	font-size: 100%;
	color: #fff;
	font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;
	min-width: 960px;
}

li { list-style:none; }

a {
    }

a:link {
    color:#000;
    text-decoration:none;
}

a:visited {
    color:#000;
    text-decoration:none;
}

a:hover {
    color:#000;
    text-decoration:none;
}
section { padding:0; }
p { color:#000; font-size: 90%; line-height: 17px;}
h2 { color:#e14504; font-weight: bold; font-size: 32px; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
h3 { color:#e14504; font-weight: bold; font-size: 24px; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
h4 { color:#e14504; font-weight: bold; font-size: 22px; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
.lang {font-size: 12px; font-weight: bold; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
.subTitle { font-size: 100%; }
.blue { background-color:#0f206c!important; }
.orange {color:#e7632c!important;}
.justify {text-align: justify;}
.eng {font-family: "Tahoma", "Geneva", sans-serif;}
.langBtn a{color:white!important; line-height: 22px; vertical-align: top;}


.center {text-align: center;}
.btn { cursor: pointer; position: absolute; display: block; z-index: 11;}
.leftBtn { width: 50px; height: 100%; top:30px; margin-top: -30px; background:url(../images/projectMenu/leftFade.png) no-repeat;}
.leftBtn::before {  content: ""; display: inline-block; position: absolute; left: -5px; top: 114px; border-width: 0; background: #e14504; width:42px; height: 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
.leftBtn::after {  content: ""; display: inline-block; position: absolute; left: -5px; top: 141px; border-width: 0; background: #e14504; width: 42px; height: 4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

.rightBtn { width: 50px; height: 100%; top:30px; margin-top: -30px; right:-15px; background:url(../images/projectMenu/rightFade.png) no-repeat;}
.rightBtn::before {  content: ""; display: inline-block; position: absolute; left: -5px; top: 141px; border-width: 0; background: #e14504; width:42px; height: 4px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
.rightBtn::after {  content: ""; display: inline-block; position: absolute; left: -5px; top: 114px; border-width: 0; background: #e14504; width: 42px; height: 4px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }


.contentCon { display: block; width: 960px; height: 100%; margin: 0 auto; position: relative;}
.tag { display: block; position: absolute;font-weight: bold; font-size: 18px; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif; letter-spacing: 1px;}
.last { border: none!important; }

/*------------top container------------*/
#topCon { display: block; width: 100%; height: 430px; background-color: #191f6c; border-bottom: 6px solid #e14504; position: relative;}
#logo { display: block; position: absolute; width: 271px; height: 100px; background:url(../images/top/logo.png) no-repeat; left: 50px; top:100px;}
.subLogo { display: block; position: absolute; width: 349px; height: 72px; left: 50px; top:200px;}
#top1 {background:url(../images/sc/top/top1.png) no-repeat;}
#top2 {background:url(../images/sc/top/top2.png) no-repeat; display: none;}
#top3 {background:url(../images/sc/top/top3.png) no-repeat; display: none;}
#tagline1 {  top:285px; left:50px; width: 271px;}
#tagline2 {  top:250px; left:50px; width: 271px; display: none;}
#tagline3 {  top:250px; left:50px; width: 271px; display: none; font-size: 16px;}
.flag { display: block; position: absolute; top:0; right:-30px; }
.flag img {position: absolute; top:0; right:0;}
#flag1 {}
#flag2 {display: none;}
#flag3 {display: none;}
#shieldBtn { display: table; position: absolute; left:610px; top:400px;}
#shieldBtn .shieldBtnCon { display: inline-block; position: relative; margin-right: 10px; cursor: pointer;}
#shieldBtn .shieldBtnCon .orangeShield { position: absolute; left:0; display: none;}
.contactBtn { cursor: pointer; position: absolute; display: block; right:30px; top:20px; }
.langBtn { position: absolute; display: block; right:130px; top:18px; }

/*-----------------------------logo-------------------------------*/

/*-----------------------------menu-------------------------------*/
#subMenu { display: block; background-color: #e7632c; width: 100%; height: 50px; font-size: 75%;}
#subMenu .contentCon { padding-top: 12px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#subMenu ul {display: table; margin: 5px auto; }
#subMenu li {display: inline-block; cursor: pointer; width: 260px; text-align: center;  border-right:1px solid white; line-height: 10px;font-weight: bold; font-size: 16px; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif; letter-spacing: 1px;}
#subMenu li.last { margin-left: -20px; }

#projectMenuContent { display: block; background-color: white; width: 100%; height:470px; border-bottom: 4px solid #acacac; padding-top: 30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#projectMenuCon { display: block; width: 100%; height: 258px; margin: 0 auto; position: relative; overflow: hidden; }
.projectMenuMask { display: none; width: 100%; height: 258px; position: absolute; top:80px; left: 0; }
#projectMenu { display: block; width: 852px; height: 258px; background-color: white; margin:0 auto; overflow: hidden;}
#projectMenu ul { white-space: nowrap;}
#projectMenu li { display: none; width: 210px; height: 258; margin: 0; position: absolute; top:0;}

.projectOver { display: none; width: 100%; height: 100%; position: absolute; top:0; left: 0;}
#pigOver { background:url(../images/sc/projectMenu/pigOver.png) no-repeat; }
#lawOver { background:url(../images/sc/projectMenu/lawOver.png) no-repeat; }
#boxOver { background:url(../images/sc/projectMenu/boxOver.png) no-repeat; }
#doorOver { background:url(../images/sc/projectMenu/doorOver.png) no-repeat; }
#hatOver { background:url(../images/sc/projectMenu/hatOver.png) no-repeat; }
#computerOver { background:url(../images/sc/projectMenu/computerOver.png) no-repeat; }
#folderOver { background:url(../images/sc/projectMenu/folderOver.png) no-repeat; }

/* #Page Styles
================================================== */
/*-----------------------------submenu content container-------------------------------*/
#subMenuContent { display: block; background-color: #ebebeb; width: 100%; height:360px; border-bottom: 4px solid #acacac;}
#aboutCon { display: block; position: absolute; top:0; left:0; width: 100%; background-color: #ebebeb; height: 96%; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#aboutCon #aboutMenuCon { width: 180px; display: inline-block; }
#aboutCon #aboutMenuCon li { position: relative; cursor: pointer; z-index: 9; box-shadow: 2px 2px 5px 2px #abadc1; width: 100%; height: 60px; margin-bottom: 0; background-color: white; color:#191f6c; font-size: 17px; padding-left: 20px; padding-top: 20px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;font-weight: bold; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
#aboutCon #aboutMenuCon li.focus { z-index: 10; color:#e14504; box-shadow: -3px 1px 5px 0px #abadc1;}
#aboutCon #aboutMenuCon li.adjustTop { padding-top: 20px;}
#aboutCon #aboutMenuCon li:hover { color:#e14504; }
#aboutCon #aboutContentCon { width: 775px; z-index: 9; display: inline-block; position: relative; height: 100%; box-shadow: 2px 2px 5px 2px #abadc1; background-color: white; margin-left: -5px; vertical-align: top; padding-left: 35px; padding-right: 35px; padding-top: 23px; text-align: justify; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#aboutCon #aboutContentCon #ourBusiness{ display: block; }
#aboutCon #aboutContentCon #ourStrategy{ display: none; }
#aboutCon #aboutContentCon #ourTeam{ display: none; }
#aboutCon #aboutContentCon #different{ display: none; }
#serviceCon { display: none; width: 100%; position: absolute; top:0; left:0; background-color: white; height: 96%; box-shadow: 2px 2px 5px 2px #abadc1; padding: 20px 50px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#serviceCon li { font-size: 14px; color:black; margin-bottom: 0; }
#talentCon { display: none; position: absolute; top:0; left:0; width: 100%; background-color: #ebebeb; height: 96%; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#talentCon #talentMenuCon { width: 180px; display: inline-block; }
#talentCon #talentMenuCon li { position: relative; cursor: pointer; z-index: 9; box-shadow: 2px 2px 5px 2px #abadc1; width: 100%; height: 60px; margin-bottom: 0; background-color: white; color:#191f6c; font-size: 17px; padding-left: 20px; padding-top: 23px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;font-weight: bold; font-family: "Simhei" ,"Heiti SC", "Hei", Helvetica, Arial, Verdana, sans-serif;}
#talentCon #talentMenuCon li.focus { z-index: 10; color:#e14504; box-shadow: -3px 1px 5px 0px #abadc1;}
#talentCon #talentMenuCon li.adjustTop { padding-top: 20px;}
#talentCon #talentMenuCon li:hover { color:#e14504; }
#talentCon #talentContentCon { width: 775px; color:black; z-index: 9; display: inline-block; position: relative; height: 100%; box-shadow: 2px 2px 5px 2px #abadc1; background-color: white; margin-left: -5px; vertical-align: top; padding-left: 35px; padding-right: 35px; padding-top: 23px; text-align: justify; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#talentCon #talentContentCon .expertiseList {display: inline-block; width: 370px; vertical-align: top;}
#talentCon #talentContentCon .expertiseList p{ font-weight: bold; }
#talentCon #talentContentCon .expertiseList.shorter {width: 310px; text-align: left; margin-left: 10px;}
#talentCon #talentContentCon li { font-size: 14px; color:black; margin-bottom: 0; }
#talentCon #talentContentCon #ourApproach{ display: block; }
#talentCon #talentContentCon #managment{ display: none; }
#talentCon #talentContentCon #ourExpertise{ display: none; }

.indicator { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid white; left:220px; position: absolute; top:40px; z-index: 11;}

/*-----------------------------project container-------------------------------*/
#projectCon { display: none; width: 100%; height: 0; background-color: #ebebeb; border-bottom: 4px solid #acacac; }
#projectCon .contentCon {display: none;}
#projectPhoto { width: 475px; display: inline-block; background-color: white; height: 500px; margin-left: -5px;}
#projectContent { display: inline-block; width: 480px;  height:500px; background-color: #e14504; color: white; padding-top: 50px; padding-left: 30px; padding-right: 30px; vertical-align: top; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#projectContent h2 { font-size: 30px; color: white;}
#projectContent p { font-size: 14px; color: white; line-height: 19px; text-align: justify;}
.smaller { font-size: 28px!important;}

/*-----------------------------contact container-------------------------------*/
#contactCon { display: block; background-color: white; width: 100%; height:380px; }
#contactCon .contentCon { background: url(../images/contactBG.jpg) no-repeat -40px 40px; }
#contact { display: block; width: 100%; height: 380px; background-color: white;}
.officeCon { display: block; margin-left:160px; }
.office {text-align: left; display: inline-table; padding-right: 40px; padding-top: 30px;}
.office p {color:#191f6c; white-space:pre-line;  font-size: 12px; padding-top: 20px;}
.office a { color:#191f6c; }
.office a:link { color:#191f6c; }
.middleOffice { padding-left: 40px;}
.lastOffice { padding-left: 40px; padding-right: 0; }

/*-----------------------------contact container-------------------------------*/
footer { display: block; width: 100%; height: 55px; background-color: #191f6c; position: relative;}
footer img { display: block; position: absolute; right:10px; top:16px;}
footer img.copyright { left:10px; top:24px; }



/* #Media Queries
================================================== */
@media screen and (max-width: 960px) {
    .contentCon {overflow: hidden;}
}


	


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
        
        @font-face /* the bebas font is created by Bagel & Co. and you go to http://d.hatena.ne.jp/banbino2/ */
		{
			
		}