@charset "utf-8";


body {margin: 0px auto;padding: 0px; font-family:"GothamLightRegular";font-size:13px;color:#5b4f4f; background-color:#f7f7f7; max-width:1422px; min-width:960px; line-height:20px;}
td {font-size: 12px;}
img {border:none;}
form,input,select,button {vertical-align:middle; margin: 0px;padding: 0px; font-size:13px;font-family:"GothamLightRegular"; color:#cacaca;}
p,ul,li,h1,h2,h3,h4,h5,dl,dt,dd,em,div,i,b {margin: 0px;padding: 0px; font-style:normal; list-style:none; text-indent:0px;}
a:active{star:expression(this.onFocus=this.blur());} 
:focus{outline:none;}
a:focus,button:focus{outline:none; -moz-outline:none;}
::-moz-focus-inner{border:0px;outline:none;}
h1,h2,h3{font-family: "GothamMedium"; font-weight:normal;}

.clear {margin:0px; padding:0px; clear:both;}
.fl{ float:left;}.fr{ float:right;}
.imgb{ display:block;}

/* ----- Links ----- */
a {text-decoration:none; color:#5b4f4f;transition:all 0.2s linear; -webkit-transition:all 0.2s linear;}
a:hover {text-decoration:underline;color:#8a8a8a; text-decoration:none;}
*:hover{transition:all 0.2s linear; -webkit-transition:all 0.2s linear;}

/* ----- top css ----- */

#head{ padding-top:53px; height:232px; position:relative;}
#head .top{ height:68px;}
/*#head .logo{ width:116px; height:51px; float:left; background-image:url(../images/logo.gif);}*/
#head .logo a{ display:block; height:51px;}
#head .version{ float:right; line-height:59px;font-family: "GothamBook";}
#head .version a.on{ color:#8a8a8a;}

/* ----- Navigation ----- */
#nav { float:left; width:85%; text-transform:uppercase;font-family:'GothamLightRegular';font-size:14px;}
#nav li{ float:left; width:20%; line-height:29px;}
#nav li .aon a{ padding-top:46px;}
#nav li .aon a:hover{ color:#636262;}
#nav li .aon .sele{color:#636262; font-family: "GothamMedium";}
.subnav{ line-height:16px;}
.subnav a{ color:#5b4f4f}.subnav a:hover{ color:#636262;}
.subnav a.current{ color:#636262; font-family: "GothamMedium";}
#rightnav { position:absolute; right:0px;}
#rightnav #zoom{ background:url(../images/zoom.png) 0px 0px no-repeat; display:inline-block; cursor:pointer; width:26px; height:25px;}
#rightnav #search{ float:left; vertical-align:middle; position:relative; overflow:hidden; background-image:url(../images/inputbg.gif); text-align:right;  width:26px; padding-left:0px; height:25px; margin-right:15px;}
#rightnav #search form{ display:none;}
#rightnav #search .input{ border:0px; color:#8f8f8f; color:#dadada; background:transparent; height:25px; line-height:25px; width:127px;}
#rightnav #search .searchbtn{ position:absolute; right:0px; top:0px;}
#rightnav a{ display:block; float:left; vertical-align:middle; margin-left:12px; width:26px; display:inline; height:25px;}
#rightnav a.sian{ background-image:url(../images/icont1.png); margin-left:-7px;}
#rightnav a:hover.sian{ background-image:url(../images/icont01.png);}
#rightnav a.wx{ background-image:url(../images/icont2.png); position:relative; z-index:100;}
#rightnav a:hover.wx{ background-image:url(../images/icont02.png);}
#rightnav a.wx img{ position:absolute; top:30px; left:-35px; display:none;}
#rightnav a.in{ background-image:url(../images/icont3.png);}
#rightnav a:hover.in{ background-image:url(../images/icont03.png);}

.worklist{ margin:0px auto; padding: 0px 0px 25px 0px; position:relative;}
.worklist li .ltx, .worklist li .lbx, .worklist li .rtx, .worklist li .rbx{width:14px; height:14px; display:block; position:absolute; background: url(../images/wlistb.png) no-repeat;}
.worklist li .ltx{left:-8px; top:-8px;}
.worklist li .rtx{right:-8px; top:-8px; background-position:right top;}
.worklist li .lbx{left:-8px; bottom:-9px; background-position:left bottom;}
.worklist li .rbx{right:-8px; bottom:-9px; background-position:right bottom;}

.worklist ul{ margin-left:-15px;}
.worklist li{ position:relative; line-height:16px; margin:0px 0px 16px 15px;border-radius:1px; float:left; width:224px; display:inline;}
.worklist li .img{ overflow:hidden; padding:2px; background-color:#fff; position:relative;}
.worklist li .img img{ display:block; width:220px; position:; top:0px; left:0px;}
.worklist li object{ width:220px; height:220px; display:block;}
.worklist li .tit{ font-size:11px; padding:9px 0px 0px 11px; color:#8a8181; height:55px; background-color:#fff;}
.worklist li .tit span{font-family: "GothamMedium"; display:block; line-height:18px; font-size:13px;color:#5b4f4f; text-transform:uppercase;}
.worklist li:hover .tit{ font-weight:bold;}
.worklist li a:hover{ font-weight:bold;}
.worklist li:hover img{ font-weight:bold;}
.worklist li .play{ cursor:pointer; display:block; position:absolute; z-index:100; background-image:url(../images/play.png); width:56px; height:20px; left:12px; top:80%;}
.worklist li a{ cursor:pointer;}
#loadmore{ text-align:center; color:#333; font-size:14px; margin-bottom:15px; display:; background:url(../images/bg_loading.gif) repeat-x; height:28px; line-height:28px;}
#loadmore a{color:#666;}

.effect-img {overflow: hidden;text-align: center;cursor: pointer; zoom:1; overflow: hidden;}
.effect-img img {opacity: 1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}
.effect-img:hover img {opacity: 1;-webkit-transform: scale3d(1.2,1.2,1);transform: scale3d(1.2,1.2,1); top:0px; left:0px;}


.warp{max-width:965px; min-width:955px; margin:0px auto; height:auto !important; height:450px; min-height:450px;}	
.warp .titles{ font-size:16px; line-height:65px; color:#5b4f4f; text-transform:uppercase;}	
.warp .hrcon{ font-size:13px; line-height:21px; padding-bottom:53px;}	
.warp .hrcon .tit{font-family:'GothamLightRegular'; font-weight:bold; line-height:46px; color:#636262; font-size:14px;}	
.warp .hrcon a.apply{ width:170px; clear:both; text-align:center; display:block; color:#fff; margin-top:10px; background-color:#575556; line-height:26px;}	
.warp .hrcon a:hover.apply{color:#ffcc00;}	
.warp .content{ font-size:13px;line-height:20px; padding-bottom:53px;}	
.warp .content .tit{ line-height:46px; color:#636262; font-size:14px; text-transform:uppercase;}	
.warp .content .tit2{ text-transform:uppercase; font-size:12px; line-height:33px; padding-top:18px;}	
.warp .contact{ font-size:13px;line-height:20px; padding:0px 123px 53px 123px;}	
.warp .contact .tit1{ border-bottom:2px solid #e9e9e9; line-height:32px; font-size:14px; background:url(../images/icont1.gif) 0px center no-repeat; padding-left:34px; margin:53px 0px 19px 0px;}	
.warp .contact .tit2{ border-bottom:2px solid #e9e9e9; line-height:34px; font-size:14px; background:url(../images/icont2.gif) 0px center no-repeat; padding-left:34px; margin:60px 0px 0px 0px;}	
.warp .contact .please{ text-align:center; font-size:12px; line-height:61px; padding-top:20px;}	
.warp .contact .txt{ width:193px; padding:29px 63px 0px 0px; height:103px;}	
.warp .contact .wx2{ clear:both; padding-top:81px; height:138px; margin-left:-10px;}	
.warp .contact .wx2 li{ text-align:center; width:118px; float:left; padding-right:30px; line-height:36px;}	
.warp .contact .wx2 li img{ margin:0px auto; display:block; background-color:#fff; border:1px solid #d9d9d9; width:83px; height:82px;}	
.warp .contact .message dd{ line-height:27px; position:relative; padding-bottom:19px;}.warp .contact .message dd .fl{ display:inline;}	
.warp .contact .message .box{ height:70px; overflow:hidden;}
.warp .contact .message dd .input{ border:1px solid #dadada; width:687px; height:25px; line-height:25px; padding-left:11px; color:#cacaca; background:transparent;}	
.warp .contact .message dd .input_1{width:326px; height:25px; line-height:25px;}
.warp .contact .message dd .input_2{height:68px;}	
.warp .contact .message dd label{ position:absolute; left:12px; top:0px;}
.warp .contact .message dd .btn{ font-size:14px; width:90px; height:27px; cursor:pointer; border:0px; background:#575556;}
.warp .content .imgbox{ background:url(../images/pt2.gif) center top no-repeat; padding-top:11px; margin-right:1px;}	
.warp .content .imgbox ul{background:url(../images/pb2.gif) center bottom no-repeat; padding-bottom:11px;}	
.warp .content .imgbox li{ background:url(../images/pc2.gif) center bottom no-repeat; padding-bottom:29px;}	
.warp .content .imgbox li img{ display:block; margin:0px auto;}	
.warp .contact .map{ position:relative; width:700px;}	
.warp .contact .map a.mapbtn{ width:45px; height:45px; display:block; position:absolute; right:16px; bottom:11px;background:url(../images/mapbg1.png);}	
.warp .contact .map a:hover.mapbtn{ bottom:11px;background:url(../images/mapbg2.png);}	




.warp .workdetail{ background:url(../images/pt.gif) center top no-repeat; padding:14px 0px; position:relative; width:718px; margin:54px auto 0px;}	
.warp .workdetail ul{ background:url(../images/pb.gif) center bottom no-repeat;}	

.warp .workdetail ul img{ width:699px; margin:0px auto; display:block;padding:0px 10px 29px 10px; background:url(../images/pc.gif) center bottom no-repeat;}	
.warp .workdetail ul img:last-child{ padding:0px 10px 15px 10px;background:none}

.warp .workdetail li{ padding:0px 10px 29px 10px; background:url(../images/pc.gif) center bottom no-repeat;}	
.warp .workdetail li img{ width:699px; margin:0px auto; display:block;padding:0;}	
.warp .workdetail ul li img:last-child{ padding:0px;}
.warp .workdetail ul li:first-child{padding:0px 10px 29px 10px;}
.warp .workdetail ul li:last-child{padding:0px 10px 10px 10px;}




.warp .teamlist{ padding-top:22px;}	
.warp .teamlist li{ padding-top:33px;}	
.warp .teamlist li .img{ display:block; float:left;}	
.warp .teamlist li .txt{ width:737px; float:right;}	
.warp .teamlist li .txt h2{ font-size:14px; text-transform:uppercase; color:#636262; padding-bottom:11px; line-height:18px;}	
.warp .teamlist li .txt h2 span{ font-size:13px; margin-left:13px; color:#cacaca;font-family:'GothamLightRegular';}	

.clientlist{ margin:0px auto; padding: 0px 0px 25px 0px; position:relative;}
.clientlist li .ltx, .clientlist li .lbx, .clientlist li .rtx, .clientlist li .rbx{width:14px; height:14px; display:block; position:absolute; background: url(../images/wlistb.png) no-repeat;}
.clientlist li .ltx{left:-8px; top:-8px;}
.clientlist li .rtx{right:-8px; top:-8px; background-position:right top;}
.clientlist li .lbx{left:-8px; bottom:-9px; background-position:left bottom;}
.clientlist li .rbx{right:-8px; bottom:-9px; background-position:right bottom;}

.clientlist ul{ margin-left:-15px;}
.clientlist li{ position:relative; line-height:16px; margin:0px 0px 16px 15px;border-radius:1px; float:left; display:inline;}
.clientlist li .box{ padding:2px; background-color:#fff;}
.clientlist li .img img{ display:block; width:220px; height:220px;clip: rect(13px,auto,161px,30px);}
.clientlist li .tit{ padding:11px 0px 0px 11px; color:#5b4f4f; font-size:12px; height:55px;}

.project_title{ font-size:16px; color:#5b4f4f;line-height:88px; height:102px; text-transform:uppercase;}
.h42{ height:42px;}

.applypop{ border:1px solid #9f9f9f; background-color:#fff; position:fixed; width:510px; top:50%; left:50%; margin:-242px 0px 0px -254px; padding-bottom:50px;font-family:'GothamLightRegular'; color:#999999; display:none;}
.applypop .tit{ color:#fff; font-size:14px; padding:0px 10px 0px 14px; line-height:36px; height:36px; background-color:#575556; margin-bottom:10px;}
.applypop dd{ height:27px; padding-top:10px; line-height:27px;}
.applypop dd .ftxt{ display:inline-block; text-align:right; width:140px; padding-right:6px; color:#636262;}
.applypop dd .input{ color:#636262;font-family:'GothamLightRegular'; padding-left:10px; width:237px; height:25px; line-height:25px; border:1px solid #b2b2b2;}
.applypop dd .btn{ border:0px; cursor:pointer; width:150px; height:27px; background:#575556; font-size:14px;font-family:'GothamLightRegular'; color:#fff;}
.applypop dd .btn2{ border:0px; cursor:pointer; width:150px; height:27px; background:#2f2f2f; font-size:14px;font-family:'GothamLightRegular'; color:#fff;}
.applypop dd .browse{ margin-left:-4px; border:0px; cursor:pointer; width:50px; height:27px; background:#d7d7d7;font-family:'GothamLightRegular'; color:#636262; border:1px solid #b2b2b2; border-left:0px;}
.applypop dd .browse{ margin-left:-4px; border:0px; cursor:pointer; width:50px; height:27px; background:#d7d7d7;font-family:'GothamLightRegular'; color:#636262; border:1px solid #b2b2b2; border-left:0px;}
.applypop .file{ position:absolute; top:8px; left:146px; height:26px; line-height:24px;filter:alpha(opacity:0);opacity: 0;width:255px; cursor:pointer;}
.applypop a.close{ display:block; width:13px; height:36px; float:right;background:url(../images/close.png) center center no-repeat;}

/* ----- footer ----- */
#footer{ clear:both; border-top: 1px solid #cfcfcf; height:44px; line-height:44px;}
#footer a:hover{ color:#5b4f4f;}
#footer .fl{ font-family: "GothamBook";}
#footer .fr a{ margin-left:58px; text-transform:uppercase;}

/*returnTop*/
p#back-to-top{position:fixed;display:none;bottom:100px;right:1%;}
p#back-to-top a {background:url(../images/top.png);display:block;height:25px;width:25px;}
#back-to-top a:hover{background:url(../images/topon.png);}

@media only screen and (max-width:1440px){.worklist li{ width:18.8%;}.worklist li .img img{ width:100%;}.worklist li object{ width:100%; height:220px;}.clientlist li{ width:18.8%;}.clientlist li .img img{ width:100%;}#nav { float:left; width:95%;}#nav li{width:21%;} #nav .last{width:5%; margin-left:-70px;}}
@media only screen and (max-width:1280px){.worklist li{ width:18.6%}.worklist li .img img{ width:100%;}.worklist li object{ width:100%;}.clientlist li{ width:18.6%;}.clientlist li .img img{ width:100%;}}
@media only screen and (max-width:1088px){.worklist li{ width:18.5%;}.worklist li .img img{ width:100%;}.clientlist li{ width:18.5%;}.clientlist li .img img{ width:100%;}}
@media only screen and (max-width:1000px){.worklist li{ width:23.4%;}.worklist li .img img{ }.worklist li object{ width:220px; height:220px;}.clientlist li{ width:23.4%;}.clientlist li .img img{}}
@media only screen and (max-width:1422px){body{ padding:0px 15px;}}