* {
    padding:0;
    margin:0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #212121;
}

body {
    font-size:12px;
}
p {
    line-height: 24px;
    margin-bottom: 15px;
}
.main-wrap {
    padding-bottom:30px;
}
.pc-header {
    width: 100%;
    height: 60px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    background: #f8f8f8;
    padding: 0 5%;
    box-sizing: border-box;
}
.header .nav ul {
    display: flex;
    align-items: center;
}

    .header .nav ul li {
        float: left;
        margin-left: 50px;
        cursor: pointer;
    }

        .header .nav ul li:first-child {
            margin-left: 0;
        }
        .header .nav ul li img {
            height:28px;
            width:auto;
        }
        .header .nav ul li a:hover {
            opacity: 0.7;
        }
        .nav-right ul li {
            float: left;
            margin-left: 20px;
            cursor: pointer;
        }

.about-us {
    height: 594px;
    width: 100%;
    background: url(../images/about-banner.jpg);
    background-size:cover;
    background-position:center center;
}
.main-content {
    width:80%;
    height:100%;
    margin:0 auto;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.main-text {
    width:60%;
    color:#fff;
}
.title {
    font-size:36px;
    font-weight:lighter;  
    margin-bottom:30px;
}
.about-text p{
    line-height:24px;
    margin-bottom:15px;
}
.nav .current {
    color: #337ab7;
    font-weight:bold;
}
.block-head {
    margin: 110px 0 65px 0;
    text-align: center;
    font-weight: lighter;
}
    .block-head .en-name {
        font-size: 50px;
        margin-bottom: 10px;
        text-transform: uppercase;
       
    }
    .block-head .cn-name {
        font-size:24px;
    }
.product-main {
    display: flex;
    align-items: center;
    width: 90%;
    margin: 0 auto;
}
.product-info {
    background: #f8f8f8;
    height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 67%;
    padding: 0 260px 0 100px;
    box-sizing:border-box;
}
.product-pic {
    margin-left: -15%;
    width: 48%;
}
    .product-pic img {
        width:100%;
        height:auto;
    }

.project-main {
    display:flex;
    justify-content:space-between;
    width:70%;
    margin:0 auto;
}
.project-item {
    background: #f8f8f8;
    padding: 45px 30px;
    box-sizing: border-box;
    font-weight: lighter;
    text-align: center;
    width: 30%;
    background-image: url(../images/project-bg.png);
    background-repeat: no-repeat;
    background-size:210px;
position:relative;
}
.data-make {
    background-position: 200% 114px;
}
.data-check {
    background-position: 200% -270px;
}
.data-visual {
    background-position: 200% -730px;
}
.project-item .name {
    font-size: 24px;
}
    .project-item .fuwu {
        color: #ff5722;
        margin:35px 0;
        font-weight:bold;
    }
.contact-main {
    display: flex;
    justify-content: space-between;
    padding: 50px 15%;
    background: #f8f8f8;
}
.contact-item {
    width: 23%;
    height: 365px;
    text-align: center;
    background: #fff;
    box-shadow: 0 0 15px rgb(0, 0, 0, 0.08);
    border-radius: 10px;
    font-weight:lighter;
    font-size:18px;
}
.contact-icon {
    margin:75px auto 60px auto;
    width:95px;
    height:95px;
}
    .contact-icon img {
        width:100%;
        height:auto;
    }
    .contact-type {
        margin-bottom: 20px;
    }
.contact-num {
    color:#666;
}
.copyright {
    margin-top:30px;
    text-align:center;
    color:#666;
}
.philosophy-main, .product-banner, .case-banner {
    height: 480px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.philosophy-main {
    background: url(../images/philosophy-bg.jpg) no-repeat;
}
.product-banner {
    background: url(../images/product-banner.jpg) no-repeat;
}
.case-banner {
    background: url(../images/case-banner.jpg) no-repeat;
}
.philosophy-big {
    font-size: 48px;
    margin-bottom: 15px;
}
.philosophy-small {
    font-size:22px;
}

/*产品介绍*/
.product-nav {
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    background: #f8f8f8;
    display:flex;
    justify-content:center;
    position:sticky;
    top:0;
}
        .product-nav ul li {
            margin-left:35px;
            float:left;
            cursor:pointer;
        }
.product-introduce {
    width:70%;
    margin:0 auto;
}
.product-item {
    margin-top:70px;
}
    .product-item .content-title {
        text-align:center;
        font-size:30px;
        margin-bottom:25px;
        font-weight:lighter;
    }
    .product-item .content-text {
        color:#666;
    }
h5 {
    font-weight:bold;
    font-size:12px;
    color:#000;
}

#floor1, #floor2, #floor3, #floor4, #floor5, #floor6, #floor7 {
    scroll-margin-top: 100px; /* 设置一个适当的偏移量以避免遮挡 */
}
/*案例分析*/
.case-list {
    width: 90%;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
}

    .case-list .case-item {
        width: 30%;
    }
.case-item .case-pic {
    width: 100%;
    border-radius: 10px;
    background: #f8f8f8;
    overflow: hidden;
}
    .case-item .case-pic img {
        width: 100%;
        height: auto;
    }
.case-item .case-info {
    margin-top: 10px;
}
.mobile-header {
    display:none;
}
.img-center, .text-center {
    text-align:center;
}
    .img-center img {
        transform: scale(0.8);
    }

    @media screen and (max-width: 768px) {
        .pc-header {
        display:none;
    }
    .mobile-header, .mobile-main-content {
        display: block;
    }

/*    .mobile-header {
        position:sticky;
    }*/

    .mobile-main-content {
        margin-top: 20px;
    }

    .features-wrap .main {
        min-height: 190px;
    }

    .mobile-header .nav {
       display:flex;
       justify-content:space-between;
       align-items:center;
       padding:0 20px;
       height:60px;

    }
        .mobile-header .nav .logo {
            width:30px;
            display:flex;
            align-items:center;
        }
    .company-name {
        font-size:18px;
        margin-left:10px;
    }
    .mobile-header .nav .logo img {
        width: 100%;
        height: auto;
    }
    .nav-bottom {
        position: absolute;
        bottom: 20px;
        left: 5%;
        text-align: center;
        width: 90%;
        border-top: 1px solid #e9e9e9;
        padding-top: 20px;
    }
        .nav-bottom ul {
            display:flex;
            justify-content:center;
        }
        .nav-bottom ul li{
            margin-left:20px;
        }
    .mobile-header .nav-left {
        border-bottom: 1px solid #f1f1f1;
        margin-bottom: 30px;
    }
    .mobile-header .nav-left .logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .mobile-header .nav-left .logo img {
            width:45px;
            height:auto;
            margin-bottom:15px;
        }
        .mobile-header .nav-content {
            position: absolute;
            top: 0;
            width: 70%;
            background: #fff;
            padding: 20px;
            height: 100vh;
            z-index: 99;
            left: -500px;
            box-sizing: border-box;
        }
    .nav-icon {
        width: 30px;
        height: 21px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .header__button-bar {
        height: 2px;
        width: 100%;
        background-color: #2e2e2e;
        display:inline-block;
    }

    .mask {
        background: rgba(0,0,0,0.3);
        position: fixed;
        height: 100vh;
        width: 100%;
        top: 0;
        display: none;
    }
    .mobile-header .nav-item {
        padding-left:20px;
    }
    .mobile-header .nav-item li {
        line-height: 50px;
    }
    .about-us {
        min-height:680px;
    }
    .main-content, .main-text {
        width: 100%;
    }
    .main-text {
        padding:0 20px;
    }
    .block-head .en-name {
        font-size:36px;
    }
    .block-head .cn-name {
        font-size:18px;
    }
    .block-head {
        margin: 60px 0 40px 0;
    }
    .product-main {
        flex-direction: column-reverse;
        padding: 0 8%;
        box-sizing: border-box;
    }
    .product-main, .product-info, .product-pic, .project-item {
        width: 100%;
    }
    .product-info {
        height: auto;
        padding:30px 20px;
    }
    .product-pic {
        margin:0;
        margin-bottom:20px;
    }
    .title {
        font-size:24px;
        margin-bottom:15px;
    }
    .project-main {
        width:100%;
        padding:0 8%;
        flex-direction:column;
        box-sizing:border-box;
    }
    .project-item {
        margin-bottom:20px;
    }
        .project-item:last-child {
            margin-bottom:0;
        }
        .contact-main {
            flex-wrap: wrap;
            padding:50px 8%;
        }
    .contact-item {
        width: 48%;
        height: auto;
        padding: 0 0 40px 0;
        margin-bottom:20px;
        font-size:16px;
    }
    .contact-icon {
        margin: 40px auto 20px auto;
        width:75px;
        height:75px;
    }
    .project-item .name {
        font-size:18px;
    }
    .philosophy-big {
        font-size:32px;
    }
    .philosophy-small {
        font-size:16px;
    }
    .philosophy-main, .product-banner, .case-banner {
        height: 280px;
        padding: 0 30px;
        box-sizing: border-box;
        text-align: center;
    }
    .product-nav {
        width: 100%;
        overflow-x: auto;
    }
        .product-nav ul {
            display: flex;
            justify-content: flex-start;
            flex-wrap: nowrap;
        }
            .product-nav ul li {
                float: none;
                flex-shrink: 0;
            }
    .product-introduce {
        width:80%;
    }
    .case-list {
        flex-wrap:wrap;
    }
        .case-list .case-item {
            width: 100%;
            margin-bottom: 30px;
        }
    }