@charset "utf-8";
/* CSS Document */
body{ font-family:微软雅黑,"HelveticaNeue", "Helvetica Neue", Helvetica, Arial , sans-serif; font-size:12px; margin:0px; padding:0px; text-align:center;}
div,ul,li{margin:0px;padding:0px; list-style:none;}
img{border:none;}
h1{}

#wrap{width:100%; height:auto; overflow:hidden; text-align:center;}

#header{width:100%; height:auto;overflow:hidden; border-bottom:5px solid #28c832;background-color:#fff; position:fixed;}
#header .menu{height:60px; width:1000px;overflow:hidden;margin:0px auto; position:relative;}
#header .logo{ width:196px;height:60px;overflow:hidden;background-image:url(../images/logo.jpg); background-position:left center; float:left;}
#header .menu ul{ width:auto; height:100%; float:right;overflow:hidden;}
#header .menu ul li{ width:100px; height:100%; float:left;overflow:hidden; line-height:60px;}
#header .menu ul li a{ width:100%; height:100%;display:block; font-size:16px; color:#333; font-weight:bold; text-decoration:none; background-color:#fff;}
#header .menu ul li a:hover{background-color:#eee;}

.main{width:1000px;height:auto; margin:0px auto;overflow:hidden;}
#sy_one{width:100%;height:auto;overflow:hidden;text-align:center;background: url(../images/header.jpg) no-repeat; background-position:top center;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/header.jpg',sizingMethod='scale');background-size:100% auto;-moz-background-size:100% 100%;}
.sy_one-img{ float:right; margin-top:80px; margin-bottom:50px;}
.header-wrapper{color:#fff;width:740px; height:auto;float:left; margin-top:120px;text-align:left;}
.header-wrapper h1{font-size:50px;}
.header-wrapper p{font-size:24px;line-height:44px;}
.buttons-wrapper{width:100%;height:auto;}
.buttons-wrapper a{width:auto;height:50px;border:2px solid #fff;border-radius:5px; color:#fff;font-size:24px;text-decoration:none;line-height:50px;display:inline-block;padding-left:15px;padding-right:15px; margin-right:15px;}
.buttons-wrapper a:hover{background:#fff;color:#000;}

#sy_two{width:100%; height:auto;}
.portfolio-sortlist{width:100%; height:auto; text-align:center;margin-top:80px;*margin-left:180px;_margin-left:188px;}
.portfolio-sortlist ul li{width:150px;height:50px;line-height:50px;border:2px solid #28c832;display:inline-block;border-radius:5px;text-align:center;margin:0px 3px;_float:left;*float:left;}
.portfolio-sortlist ul li a{width:100%; height:100%;display:inline-block;background:#fff;color:#28c832;text-decoration:none;font-size:20px;font-weight:bold;}
.portfolio-sortlist ul li .active{background:#28c832;color:#fff;}
.portfolio-sortlist ul li a:hover{background:#28c832;color:#fff; cursor:pointer;}

.portfolio-page{margin-top:40px;}
.portfolio-page .portfolio-item{width:293px;height:auto; overflow:hidden; float:left;margin:0px 20px 40px 20px; position:relative;}
.portfolio-page .portfolio-item .image{display:block;}
.portfolio-page .portfolio-item .image img{width:100%;height:auto;}
.portfolio-page .portfolio-item .title{}
.portfolio-page .portfolio-item .icon{}

/*----------------transition------------------------*/
.portfolio-page .portfolio-item,.portfolio-page
{
    -webkit-transition-duration:0.8s;
      -moz-transition-duration: 0.8s;
       -ms-transition-duration: 0.8s;
        -o-transition-duration: 0.8s;
           transition-duration: 0.8s;
}
.portfolio-page
{
    -webkit-transition-property:height, width;
      -moz-transition-property: height, width;
       -ms-transition-property: height, width;
        -o-transition-property: height, width;
           transition-property: height, width;
}
.portfolio-page .portfolio-item,.portfolio-page
{
    -webkit-transition-property: -webkit-transform, opacity;
       -moz-transition-property:    -moz-transform, opacity;
        -ms-transition-property:     -ms-transform, opacity;
         -o-transition-property:      -o-transform, opacity;
            transition-property:         transform, opacity;
}


#foot{width:100%;height:auto;overflow:hidden;text-align:center;background:#333;color:#fff; line-height:30px;}