*{
    margin: 0;
    padding: 0;
}
#container{
    width: 100%;
    height:537px;
    overflow: hidden;
    position: relative;

}
.pc{
    width: 870px;
    height: 537px;
    position: absolute;
    top:0;
    left: 50%;
    z-index: 5;
    margin-left: -435px;
}
.center{
    width: 670px;
    height: 420px;
    position: absolute;
    z-index: 10;
    top:30px;
    left: 50%;
    margin-left: -335px;
    overflow: hidden;
}
.center .project-detail{
    height: 100%;
}
.center .project-detail .project{
    width: 670px;
    height: 420px;
    float: left;
}
.center .project-detail .project a{
    width: 670px;
    height: 420px;
    display: block;
}
.center .project-detail .project img{
    width: 670px;
    height: 420px;
    display: block;
}
.bg{
    background: #fff;
    height: 335px;
    margin-top: 70px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.bg .project-strip{
    opacity: 0.7;
    filter:alpha(opacity=70);
    height: 100%;
    width: 50%;
    float: left;
    overflow: hidden;
    -webkit-filter: blur(2px); /* Chrome, Opera */
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    filter: blur(2px);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
}
.bg .project-strip .strip-l{
    height: 100%;
    float: right;
}
.bg .project-strip .strip-r{
    height: 100%;
    float: left;
}
.bg .project-strip .project{
    width: 535px;
    height: 100%;
    float: left;
}
.bg .project-strip .project a{
    display: block;
    width: 535px;
    height: 100%;
}
.bg .project-strip .project img{
    width: 535px;
    height: 100%;
    display: block;
    border: none;
}
@media only screen and (max-width: 1366px) {
    #container{
        width: 100%;
        height:450px;
        overflow: hidden;
        position: relative;
    }
    .pc{
        width: 768px;
        height: 450px;
        position: absolute;
        top:0;
        left: 50%;
        z-index: 5;
        margin-left: -384px;
    }
    .center{
        width: 580px;
        height: 360px;
        position: absolute;
        z-index: 10;
        top:20px;
        left: 50%;
        margin-left: -290px;
        overflow: hidden;
    }
    .center .project-detail{
        height: 100%;
    }
    .center .project-detail .project{
        width: 580px;
        height: 100%;
        float: left;
    }
    .center .project-detail .project a{
        width: 100%;
        height: 100%;
        display: block;
    }
    .center .project-detail .project img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .bg{
        background: #fff;
        height: 320px;
        margin-top: 40px;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    .bg .project-strip{
        opacity: 0.7;
        filter:alpha(opacity=70);
        height: 100%;
        width: 50%;
        float: left;
        overflow: hidden;
        -webkit-filter: blur(2px); /* Chrome, Opera */
        -moz-filter: blur(2px);
        -ms-filter: blur(2px);
        filter: blur(2px);
        filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false); /* IE6~IE9 */
    }
    .bg .project-strip .strip-l{
        height: 100%;
        float: right;
    }
    .bg .project-strip .strip-r{
        height: 100%;
        float: left;
    }
    .bg .project-strip .project{
        width: 515px;
        height: 100%;
        float: left;
    }
    .bg .project-strip .project a{
        width: 515px;
        height: 100%;
        display: block;
    }
    .bg .project-strip .project img{
        width: 515px;
        height: 100%;
        display: block;
        border: none;
    }
}