@charset "utf-8";
/* banner */
#banner{width:100%;height:560px;background:url(../images/nbg.jpg) repeat-x #fff;overflow:hidden;}
#banner .changeBox_a1{width:1200px; height:100%;position:relative;margin:0px auto;}
#banner .changeBox_a1 .changeDiv{ position:absolute; top:0px; left:-350px; display:none;width:1920px; overflow:hidden;background:url(../images/loader.gif) no-repeat 927px 215px;}
#banner .ul_change_a1{position:absolute;right:500px;bottom:18px;height:17px;overflow:hidden;z-index:100;width:200px; text-align:center;padding:0px;vertical-align:top}
#banner .ul_change_a1 li{position:relative;margin:0px 3.5px;height:14px;overflow:hidden; clear:left;vertical-align:top}
#banner .ul_change_a1 li{display:inline-block;zoom:1;*display:inline;}
#banner .ul_change_a1 span{display:block;width:14px; height:14px;text-indent:-9999em;background-color:#fff;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;opacity:0.9; border-radius:14px; cursor:pointer;box-shadow: 2px 1px 3px #ccc inset;}
#banner .ul_change_a1 span.on{background-color:#ff9900;width:28px;box-shadow: 2px 1px 3px #CC7A00 inset;}

/* wodo */
.we_do,.cases,.news,.customer{text-align:center; overflow:hidden; background:#fff;}
.we_do .tit,.news .tit,.customer .tit{text-align:center;margin:40px 0px 70px;}
.we_do .tit span,.news .tit span,.customer .tit span{ font-size:22px; color:#ddd; font-family:"Times New Roman", Times, serif}
.we_do .tit h2,.news .tit h2,.customer .tit h2{ font-size:36px;margin:5px 0px 15px; color:#555; letter-spacing:1px}
.we_do .tit p,.news .tit p,.customer .tit p{ font-size:14px;color:#999}
.we_do{width:1248px;}
.do_list{width:100%; height:300px;}
.do_list .do_box{width:208px;height:100%; overflow:hidden; float:left; text-align:center}
.do_list .do_box div{background:url(../images/wdbg.png) no-repeat 0px 0px;width:154px;height:154px;margin:0px auto; overflow:hidden; display:block;position:relative}
.do_list .do_box div span{position:absolute;left:0px;top:0px;z-index:9;width:154px;height:154px; overflow:hidden;}
.do_list .do_box div span.ibox{z-index:8;width:148px;height:148px;margin:3px;border-radius:100px;filter:alpha(opacity=60); -moz-opacity:0.6;opacity:0.6;-webkit-transition: all 1s ease;  /* Saf3.2+, Chrome */-moz-transition: all 1s ease;  /* FF4+ */-o-transition: all 1s ease;  /* Opera 10.5+ */transition: all 1s ease;}
.do_list .do_box div span.left,.do_list .do_box div span.right{background:url(../images/wdbg.png) no-repeat -154px 0px;-webkit-transition: All 0.5s ease-in-out;-moz-transition: All 0.5s ease-in-out;-o-transition: All 0.5s ease-in-out;transition: All 0.5s ease-in-out;}
.do_list .do_box div span.left{clip: rect(0,78px,0,0);}
.do_list .do_box div span.right{clip: rect(154px,154px,154px,78px);}
.do_list .do_box:hover div span.ibox{-webkit-transform:rotate(360deg);-moz-transform: rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
.do_list .do_box:hover div span.left{clip: rect(0,78px,154px,0);}
.do_list .do_box:hover div span.right{clip: rect(0,154px,154px,78px);}
.do_list .do_box a:hover h3{color:#EA5504}
.do_list .do_box h3{margin-top:40px;font-size:18px; color:#000; font-weight:normal}
.do_list .do_box p{font-size:14px; color:#aaa;margin:20px auto 0px;width:150px; line-height:140%}

/* works */
.works{height:940px;background:url(../images/work_bg.jpg) no-repeat center top #222;}
.works .tit{text-align:center;padding:50px 0px 30px;color:#fff; }
.works .tit h2{font-size:43px;margin:0px 0px 0px;  letter-spacing:1px;font-weight:normal;}
.works .tit p{ font-size:18px; color:#eee}
.works .worklist{}
.works li{ float:left;width:380px;margin:10px;background-color:rgba(255,255,255,0.1);}
.works li a{ display:block; cursor:pointer}
.works li .ibox{width:380px;height:260px; overflow:hidden; background:#000; position:relative}
.works li .ibox img{width:100%;height:260px;-webkit-transition: all 1s  ease-out 0s;  /* Saf3.2+, Chrome */-moz-transition: all 1s  ease-out 0s;  /* FF4+ */-o-transition: all 1s  ease-out 0s;  /* Opera 10.5+ */transition: all 1s  ease-out 0s;opacity:0.6;}
.works li:hover .ibox img{-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: scale(1.1);opacity:1.0}
.works li .ibox i{position:absolute; display:none;width:42px;height:42px;background:url(../images/icon_f.png) no-repeat center;left:50%;top:50%;margin:-21px 0px 0px -21px; z-index:100;filter:Alpha(Opacity=70); -moz-opacity:0.7; -khtml-opacity: 0.7; opacity: 0.7;}
.works li:hover .ibox i{display:block}
.works li p{ dis play:none;width:100%;height:38px;padding:12px 0px 0px; color:#ddd; text-align:center;margin:0px; position:relative; overflow:hidden}
.wor ks li:hover p{ bac kground:#EA5504}
.works li p span{ position:absolute;width:100%;height:100%; display:block; z-index:10;left:0px;top:0px;-webkit-transition: all 0.5s ease;  /* Saf3.2+, Chrome */-moz-transition: all 0.5s ease;  /* FF4+ */-o-transition: all 0.5s ease;  /* Opera 10.5+ */transition: all 0.5s ease;padding-top:11px;}
.works li p .bg2{top:50px;}
.works li:hover p .bg1{top:-50px;}
.works li:hover p .bg2{top:0px;background:#C95313}
.works .more{width:260px;backgr ound:#EA5504; margin:25px auto 0px; text-align:center; font-size:18px;}
.works .more a{border:1px dotted #999;display:block;color:#999;padding:8px;border-radius:100px;}
.works .more a:hover{color:#ff7700;border-color:#ff7700}

/* customer */
.customer{}
.customer .tit{margin-bottom:36px}
.ctlist{ padding-bottom:50px; overflow: hidden}
.ctlist .ct_box{width:220px;height:124px;margin:10px 9px;cursor:pointer;float:left;overflow:hidden; display:block;position:relative;text-align:center;border:1px dotted #ddd; border-radius:5px}
.ctlist .ct_box img{width:220px;margin-top:5px}
.ctlist .ct_box span{position:absolute;left:0px;top:0px;z-index:9;-webkit-transition: all 1s ease;  /* Saf3.2+, Chrome */-moz-transition: all 1s ease;  /* FF4+ */-o-transition: all 1s ease;  /* Opera 10.5+ */transition: all 1s ease;width:220px;height:154px;}
.ctlist .ct_box span.ct_on{top:150px}
.ctlist .ct_box:hover span{top:-150px; background:#f6f6f6}
.ctlist .ct_box:hover span.ct_on{top:0px;}

/* sitepg */
.sitepg{width:100%; background:url(../images/sitepgbg.jpg) no-repeat center top;height:640px;}
.sitepg .tit{text-align:center;padding:50px 0px 30px;color:#fff; }
.sitepg .tit h2{font-size:43px;margin:0px 0px 0px;  letter-spacing:1px;font-weight:normal;}
.sitepg .tit p{ font-size:18px; color:#eee}
.splist{height:356px;}
.site_box{width:176px;float:left;margin:15px 10px 0px; border:1px solid #555; border-radius:5px;height:316px; padding:10px 21px 0px;position:relative;-webkit-transition: all 0.4s ease;  /* Saf3.2+, Chrome */-moz-transition: all 0.4s ease;  /* FF4+ */-o-transition: all 0.4s ease;  /* Opera 10.5+ */transition: all 0.4s ease;}
.site_box:hover{border-color:#777; background:#444;margin-top:5px;height:336px;}
.site_box div{text-align:center;padding:20px; }
.site_box div img{width:120px;}
.site_box h3{ font-size:18px; color:#fff; font-weight:normal;margin-bottom:10px; position:absolute;top:72px;left:80px}
.site_box p{ font-size:12px;color:#888; line-height:170%}
.site_box div a{display:block}
.sitepg .more{width:260px;backgr ound:#EA5504; margin:25px auto 0px; text-align:center; font-size:18px;}
.sitepg .more a{border:1px dotted #999;display:block;color:#999;padding:8px;border-radius:100px;}
.sitepg .more a:hover{color:#ff7700;border-color:#ff7700}

/* news */
.news{height:750px; overflow:hidden}
.news .tit{text-align:center;margin:40px 0px 40px;}
.news .tit a{margin:0px 4px; color:#999}
.news .tit a:hover{color:#444}
.newslist{text-align:left; backgrou nd:#f2f2f2; display:block;width:100%;height:100%}
.newslist ul{width:600px;text-align:left;float:left}
.newslist li{width:580px;height:100px;overflow:hidden;margin:20px auto 0px;border-bottom:1px solid #eee}
.newslist li .idate{width:72px;height:56px; float:left; font-family:Arial; background:#f2f2f2; font-size:14px; overflow:hidden; text-align:center;padding:12px 0px; color:#999;}
.newslist li .idate span{ display:block; font-size:20px; font-weight:bold; color:#EA5504;margin-bottom:5px;}
.newslist li .text{float:left;margin:0px 0px 0px 20px;width:440px;}
.newslist li .text h3{ font-size:16px; font-weight:normal; color:#333;}
.newslist li .text p{ color:#aaa; font-size:12px;margin-top:15px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.newslist li a:hover .text h3{color:#EA5504;}