@charset "utf-8";
@font-face {
  font-family: Helvetica Condensed Bold;
  src: url(../fonts/Helvetica Condensed Bold.ttf) format('truetype'); font-weight:900;
}
@font-face {
  font-family: Diavlo;
  src: url(../fonts/Diavlo_BLACK_II_37.otf) format('opentype'); font-weight:900;
}

/*--------------- 全局布局开始 ---------------*/
.Container {width: 980px; margin: 0 auto; position:relative;}

.bgIndex{background: url(../images/2011bg.gif) repeat-x;}

/* 头部 */
.slHeader {width: 980px;  margin: 0 auto; }
.slHeaderbg {background: url(../images/2013homepage02.jpg) no-repeat; height: 577px;}
.slHeader .slLogo {
	float: left;
	font-family:Helvetica Condensed Bold;
	font-size:51px;
	font-weight:bolder;
	text-shadow: 2px 2px 0px #dededf;
	top: 40px; line-height:50px;
	left:24px;
	position:absolute;
}
.slHeader .slLogo b{ color:#C00;}
.shNav {width:200px;height:40px;left: 160px; position:absolute; top:120px;}
.shNav li {text-align: left; margin-right: 20px; border-bottom: 2px dotted #cccccc;}
.shNav li a { height: 40px; line-height: 40px; margin-top: 2px; text-align: left; font-family: "Helvetica"; font-size: 18px; font-weight: bold; text-decoration: none; display: block;}
.shNav li a:hover{ height: 40px; line-height: 40px; margin-top: 2px; text-align: right; font-family: "Helvetica"; font-size: 18px; font-weight: bold; text-decoration: none; display: block; color: #e80476;}
.shNav li a.now { color:#e80476; display: block; text-align:left;}

.slNav {width: 500px;height: 40px;left: 28px; position:absolute; top:90px;}
.slNav li {float: left; text-align: left; margin-right: 20px; }
.slNav li a { height: 40px; line-height: 40px; margin-top: 2px; text-align: left; font-family: "Helvetica"; font-size: 18px; font-weight: bold; text-decoration: none; display: block;}
.slNav li a.now { color:#e80476; display: block;}
.slContent {float:left;left: 25px; width:600px; position:absolute;top:470px; font-family: "Helvetica"; font-size: 22px; color:#999; line-height:1.1em;}
.slContent a { color:#C00; font-size:18px;font-family: "Helvetica"; text-decoration:underline;}
.slContent a:hover { color:#333; }
/* 底部 */
.slFooter {width:100%; border-top: 1px solid #d9d9d9;background-color:#000;margin: 0 auto;}
.slFooter .copyright {width:920px; margin: 0 auto;font-size: 12px; color: #666; padding: 30px 30px;}
.slFooter .copyright span {font-family:Helvetica Condensed Bold; font-size: 16px;color: #fff;}
.slFooter b{ color:#e80476;}

/* 作品 */
.bgPortfolio{ background-color:#f3f3f3;}

.slPortfolio h1 {padding-top: 120px;}
.slPortfolio p {clear: both; display: block; margin: 0 0 46px 144px; font-size: 20px; color: #a7a7a7;}
.slPortfolio .contact-link {right: 0;}

.slPortfolio {width:980px; margin: 0 auto;top:160px; left:40px;position:absolute;}
.slPortfolio ul {float: left; width: 180px; margin: 0 0 18px -1px; border: solid #fff; border-width: 0 1px;}
.slPortfolio ul li {display: inline; line-height: 1.65em;}
.slPortfolio ul li:first-child a {margin-top: 3px;}

.slPortfolio ul li a {display: block; margin: 7px 6px; font-size: 14px; border: 1px solid #e4e4e4; overflow: hidden; outline: none;}
.slPortfolio ul li a em {display: block; padding: 6px 9px 0; font-size: 11px; font-style: normal; color: #222; background-color: #fcfcfc;}
.slPortfolio ul li a span {display: block; padding: 0 9px 5px; font-size: 10px; text-transform: uppercase; color: #c5c5c5; background-color: #fcfcfc; border-bottom: 1px solid #f0f0f0;}
.slPortfolio ul li a img {display: block; width:150px; height:120px; background-color: #fff; border: 8px solid #fff;}

.slPortfolio ul li a:hover {border-color: #bbb;}
.slPortfolio ul li a:hover em {color: #000; background-color: #f0f0f0;}
.slPortfolio ul li a:hover span {color: #999; background-color: #f0f0f0; border-bottom-color: #ddd;}
.slPortfolio ul li a:hover img {border-color: #f0f0f0;}

.slPortfolio ul li a:active {border-color: #000;}
.slPortfolio ul li a:active em {color: #fff; background-color: #000;}
.slPortfolio ul li a:active span {color: #ddd; background-color: #000; border-bottom-color: #000;}
.slPortfolio ul li a:active img {border-color: #000;}

.slPortfolio ul li h2 a {display: block; height: 58px; padding: 10px 7px 0; line-height: 25px; font-size: 16px; font-weight: bold; color: #555; border: 1px solid transparent;}
.slPortfolio ul li h2 a em {background-color: transparent;}
.slPortfolio ul li h2 a:hover {color: #2e2e2e; background-color: #e3e3e3; border-color: transparent;}
.slPortfolio ul li h2 a:active {color: #fff; background-color: #221922; border-color: transparent;}

/* 作品website*/
.slWebsite{width:980px; margin: 0 auto;left:0px;top:140px;position:absolute;}
.slTitle { font-family:Helvetica Condensed Bold; font-size:40px;float:right;color:#fff;text-shadow: 0px 1px 3px #e7e8ea; padding-top:100px; line-height:40px;}
.slWebsite a{float:left;left:0px; width: 980px; background-color: #fff; border: 5px solid #ebebeb;}
.slWebsite a img{display: block; }
.slWebsite a:hover{ border: 5px solid #ccc;}
.slWebsite ul{ float:left;border-bottom:6px solid #ccc;padding-bottom:40px;padding-top:30px;}
.slWebsite ul li {display: inline; line-height: 1.65em; padding:10px; max-width:780px;float:left;}
.slWebsite ul li.first{border-right: 1px solid #ccc; font-size:16px; font-weight:bold; color:#333;}
.slWebsite ul li h2 {font-size:12px;font-weight:normal;border-top: 1px dashed #ccc;}
.slWebsite ul li b {padding-left:10px;font-size:12px;font-weight:bold;}

/* contact*/
.bgcontact{background: url(../images/bg_contact.jpg) no-repeat right top ;height:566px;}
.slContact{width:980px; margin: 0 auto;left:30px;top:180px;position:absolute;}
.slContact ul{float:left; font-size:18px;width:300px;}
.slContact ul li{border-bottom:1px dashed #ccc;padding-bottom:20px;padding-top:10px;}
.slContact ul li b{ display: block;line-height: 1.65em; font-size:24px;}