.design{
    width: 100%;
    max-width:1900px;
    min-width: 1100px;
    margin: 0 auto;
}
.design-content{
    width: 1100px;
    height: 100%;
    margin: 75px auto;
    position: relative;
}
.design h1{
    font-size: 67px;
    color: #000;
    text-align: center;
}
.design h2{
    font-size: 33px;
    color: #000;
    font-weight: normal;
    text-align: center;
}
.design h3{
    font-size: 33px;
    color: #000;
    line-height: 38px;
    text-align: left;
}
.design h4{
    font-size: 22px;
    line-height: 27px;
    color: #000;
    font-weight: normal;
    text-align: left;
}
.design h1 b{
    font-size: 87px;
}
/*清除默认样式*/
ul,li{
    list-style: none;
}
a,a:hover,a:active,a:visited{
    text-decoration: none;
    color: #000;
}

/*上面三张图片*/
.design .design-content .design-sort ul{
    width: 100%;
    height: 225px;
}
.design .design-content .design-sort ul li{
    float: left;
    position: relative;
    width: 360px;
    height: 100%;
}
.design .design-content .design-sort ul li:nth-child(2){
    margin: 0 10px 0;
}
.design .design-content .design-sort ul li img{
    width: 100%;
    height: 100%;
}
.design .design-content .design-sort ul li a{
    position: absolute;
    display: block;
    bottom: 0px;
    width: 100%;
    height: 54px;
    background-color: rgba(63,62,69,0.6);
}
.design .design-content .design-sort ul li a p{
    width: 100%;
    height: 100%;
    line-height: 54px;
    text-align: center;
    color: #fff;
    font-family: 'Arial Normal', 'Arial';
    font-size: 24px;
}
/*中间按钮*/
.design .design-content .design-menu{
    width: 100%;
    height: 50px;
    font-size: 20px;
}
.design .design-content .design-menu p{
    float: left;
    /*height: 100%;*/
    width: 90%;
}
.design .design-content .design-menu>a{
    display: block;
    float: right;
    line-height: 50px;
}
.design .design-content .design-menu>a:hover{
    font-weight: 900;
}
.design .design-content .design-menu p>a{
    margin: 0 10px;
    line-height: 50px;
    font-size: 17px;
    display: block;
    float: left;
}
.design .design-content .design-menu p>a:hover{
    font-weight: 900;
}
/*.design .design-content .design-menu p>a:nth-child(1){*/
    /*margin-left: 0px;*/
/*}*/
/*下面瀑布流*/
.design-main{
    overflow:hidden;
}
.design-main ul{
    position:relative;
}
.design-main ul li{
    display:none;
    width: 200px;
    padding: 0px;
    box-shadow: 3px 3px 7px #dedede;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    /*opacity:0;*/
    opacity:0;
    -webkit-transition:all 0.8s ease;
    -moz-transition:all 0.8s ease;
    -o-transition:all 0.8s ease;
    transition:all 0.8s ease;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.design-main ul li a{
    display: inline-block;
    width: 100%;
    height: 100%;
}
.design-main ul li a img{
    width:100%;
    height:auto;
}
/*.design-main ul li.move{
    display:none;
    width: 200px;
    padding: 4px;
    border: 1px solid #dedede;
    border-radius: 2px;
    background-color: #fff;
    cursor: pointer;
    -webkit-transition:all 0.2s ease-out;
    -moz-transition:all 0.2s ease-out;
    -o-transition:all 0.2s ease-out;
    transition:all 0.2s ease-out;
}*/
.design-main ul li p{
    text-align: center;
}
.design-main ul li.inactive{
    visibility:visible;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
    -webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s; /* Safari */
}
.wookmark-placeholder{
    background-color: #eee;
    border: 1px solid #dedede;
    border-radius: 2px;
    z-index: -1;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.move{
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
#main{position:relative;}

/**
 * Grid container
 */
#tiles{position:relative;margin:0;padding:0;list-style-type:none;}

/**
 * Grid items
 */
#tiles li{display:none;width:200px;padding:4px;border:1px solid #dedede;border-radius:2px;background-color:#fff;cursor:pointer;}
#tiles li.inactive{visibility:hidden;opacity:0;}
#tiles li img{display:block;}

/**
 * Grid item text
 */
#tiles li p{margin:6px;color:#666;font:12px/20px Arial;text-align:center;}


/**
 * Loader
 */
#loader{margin:20px 0;}
#loaderCircle{display:block;width:16px;height:16px;background:url(../img/loader.gif) no-repeat;}



/**
 * Progress bar for imagesLoaded
 */
.progress-bar{position:absolute;top:0;left:0;right:0;width:0;height:2px;background-color:#0BC20B;box-shadow:0 1px 3px rgba(11, 194, 11, 0.2);
    -webkit-transition:width 0.3s ease-out;
    -moz-transition:width 0.3s ease-out;
    -o-transition:width 0.3s ease-out;
    transition:width 0.3s ease-out;
}

/**
 * Placerholder css
 */
.wookmark-placeholder{background-color:#eee;border:1px solid #dedede;border-radius:2px;z-index:-1;}


.example-tiles{position:relative;margin:0;padding:0;}
.example-tiles li{display:block;float:left;margin:5px;list-style-type:none;
    -webkit-transition:all 0.3s ease-out;
    -moz-transition:all 0.3s ease-out;
    -o-transition:all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.example-tiles a,
.example-tiles a:hover{display:table-cell;width:200px;height:200px;padding:5px 8px;border:1px solid #ddd;border-radius:3px;background-color:#eee;box-shadow:0 1px 3px rgba(0, 0, 0, 0.4);color:#555;font-size:2em;font-weight:bold;text-decoration:none;text-align:center;vertical-align:middle;}
.example-tiles a:hover{background-color:#ddd;}

.button.active{opacity:0.6;}
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
@media (max-width: 850px) {
    .design-content {
        width: 1060px;
    }
    .design .design-content .design-menu p {
        width: 850px;}
    .design .design-content .design-menu p>a {
        margin: 0 8px 0;}
    .design .design-content .design-menu>a {
        display: block;
        float: right;
        line-height: 50px;
        margin-right: 323px;
        position: relative;
        top: -51px;
    }
    #main {
        width: 850px;
    }
    }

@media (max-width: 490px) {
    .design-content {
        width: 1060px;
    }
    .design .design-content .design-menu p {
        width: 361px;
        position: relative;
        left: -361px;
        top: 233px;
    }
    .design .design-content .design-menu p>a {
        font-size: 10px;
        margin: 0 1px 0;
    }
    .design .design-content .design-menu>a {
        display: block;
        float: right;
        line-height: 50px;
        margin-right: 323px;
        position: relative;
        top: -51px;
    }
    .design .design-content .design-sort ul li:nth-child(2) {
        margin: 0;
    }
    #main {
        width: 250px;
        position: relative;
        top: 245px;
        left: -323px;
    }
    .design .design-content .design-sort ul {
        width: 500px;
        height: 225px;
    }
    .design .design-content .design-sort ul li {
        margin: 5px 0 0 0;
        float: left;
        position: relative;
        width: 450px;
        height: 100%;
    }
    .design .design-content .design-sort ul li {
        float: left;
        position: relative;
        width: 360px;
        height: 100%;
        margin: 8px 0 0 46px;
    }
    .design .design-content .design-sort ul li:nth-child(2) {
        margin: 8px 0 0 46px;
    }

}
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*视频播放样式*/
.mfp-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



/*点击图片后弹出的窗口*/
.bg {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
}
.bg .load {
    display: block;
    background: url(../../images/loading.gif);
    width: 124px;
    height: 124px;
    position: fixed;
    left: 50%;
    margin-left: -62px;
    top: 50%;
    margin-top: -62px;
    z-index: 80;
}
#popup-window {
    position: absolute;
    z-index: 100;
    margin: 0 auto;
    overflow: hidden;
    transition: all .5s ease;
    top: -50px;
    width: 1828px;
}
.pre-popup {
    height: 0;
}
.popup {
    height: 828px;
}
#original-img-container {
    width: 1800px;
    height: 800px;
    background-color: #eee;
    border-radius: 3px;
    overflow: scroll;
    clear: right;
}
#original-img-container img {
    margin: 0 auto;
}
#close-btn {
    width: 20px;
    height: 20px;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    float: right;
}
/*点击图片后弹出的窗口*/
/*
.design {
    width: 880px;
    margin: 15px auto;
    overflow: hidden;
    */
/*background-image: url("../../images/service/design/0.jpg");*//*

}
.design .design-banner {
    background: url("../../images/service/design/banner.jpg") no-repeat;
    height: 347px;
    position: relative;
}
.design .design-banner .btn1{
    position: absolute;
    bottom: 18px;
    left: 292px;
}
.design .block-tit {
    letter-spacing: 2px;
    color: #FDFDFD;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    position: relative;
    top: 11px
}
.design .block-1 {
    background: url("../../images/service/design/problem.jpg");
    height: 436px;
    color: #0A427D;
    font-size: 18px;
}
.design .block-1 .block-tit {
    top: 71px;
}
.design .block-1 p{
    color: #FDFDFD;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    text-align: center;
}
.design .block-2 {
    background: url("../../images/service/design/solve.jpg");
    height: 721px;

}
.design .block-2-con {
    position: relative;
    top: 368px;
    left: 37px;
}
.design .block-2-con ul li {
    float: left;
}
.design .block-2-con ul li h2 {
    line-height: 40px;
    font-size: 20px;
}
.design .block-2-con ul li p {

    font-size: 18px;
    line-height: 26px;
}
.design .block-2-con ul li div {
    color: #343434;
    font-size: 15px;
    line-height: 29px;
}
.design .block-2-con ul li .con-1 {
    width: 195px;
    padding: 29px 1px 5px 1px;
    margin-right: 77px;
}
.design .block-2-con ul li .con-2 {
    width: 244px;
    padding: 29px 1px 5px 9px;
    margin-right: 64px;
}
.design .block-2-con ul li .con-3 {
    width: 225px;
    padding: 29px 1px 5px 7px;
}
.design .block-3 {
    background: url("../../images/service/design/advantage.jpg");
    height: 636px;
}
.design .block-4 {
    background: url("../../images/service/design/service.jpg");
    height: 1243px;
}
.design .block-4 ul li {
    float: left;
    position: relative;
    top: 289px;
    */
/*margin: auto 90px;*//*

}
.design .block-4 ul li h2 {
    letter-spacing: 1px;
    font-size: 20px;
}
.design .block-4 p {
    float: left;
    line-height: 27px;
    position: relative;
    font-size: 15px;
}
.design .block-4 p b {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 37px;
}

.design .block-5{
    background: url("../../images/service/design/footer.jpg");
    height: 148px;
}
.design .block-5 .btn2{
    position: relative;
    top: 78px;
    left: 321px;
}*/