﻿.layout { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; }
img {
    object-fit: scale-down;
}
    .container {
        width: 1200px;
        height: auto;
    }

/*   头部    */
.header { padding: 150px 120px 98px 120px; width: 100%; height: 456px; /*            background: rgba(0,0,0,0.72);*/ background-size: 100% 456px; background-repeat: no-repeat; box-sizing: border-box; }
.bottom{
    padding: 0 24px;
}
.header .header-title {
    font-size: 40px;
    font-family: D-DINExp-Bold, D-DINExp;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 48px;
}

    .header .header-contant {
        margin-top: 24px;
        width: 100%;
        font-size: 18px;
        font-family: D-DINExp;
        font-weight: normal;
        color: rgba(255,255,255,0.8);
        line-height: 24px;
    }

.header .header-button { cursor: pointer; margin-top: 48px; border: none; outline: none; width: 120px; height: 40px; background: #E95506; border-radius: 8px; border: 1px solid #E95506; font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; line-height: 22px; }

/* 第二 */
.flex { display: flex; }

.justify-content { justify-content: center; }

.flex-direction-column { flex-direction: column; }

.align-items-center { align-items: center }


.second { padding: 0 120px; width: 100%; height: 320px; background: #fff; box-sizing: border-box; }

.second .second-img { position: relative; }


.second .second-img-main { position: relative; top: -44px; width: 434px; height: 364px; /*                background: rgba(221,221,221,0.56);*/ }

.second .second-content { margin-left: 64px; display: flex; flex-direction: column; justify-content: center; }

.second .second-title { font-size: 32px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #333333; line-height: 40px; }

.second .second-info { margin-top: 16px; width: 560px; font-size: 18px; font-family: D-DINExp, D; font-weight: normal; color: #666666; line-height: 24px; }

/* 第三 */

.third { padding: 45px 120px 56px 120px; width: 100%; height: 484px; background: rgba(0,0,0,0.08); box-sizing: border-box; }

.third .third-list { display: flex; }

.third .third-list .third-item { flex: 1; display: flex; flex-direction: column; align-items: center; }

.third .third-list .third-item:not(:nth-child(1)) { margin-left: 40px; }

.third .third-list .third-item-icon { }

.third .third-list .third-item-title { font-size: 24px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #333333; line-height: 40px; }

.third .third-list .third-item-content { margin-left: 16px; text-align: center; font-size: 16px; font-family: D-DINExp, D; font-weight: normal; color: #666666; line-height: 24px; }

.third .third-group { margin-top: 40px; display: flex; justify-content: center; }

.third .third-btn { width: 120px; height: 40px; cursor: pointer; background: #E95506; border-radius: 8px; border: 1px solid #E95506; font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; line-height: 22px; }

.fourth { height: 376px; width: 100%; background: rgba(255,255,255,0); border-radius: 16px; }

.fourth-left { flex: 1; padding: 100px 0 0 120px; box-sizing: border-box; }

.fourth-title { width: 560px; font-size: 32px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #333333; line-height: 40px; }

.fourth-content { margin-top: 16px; width: 560px; font-size: 18px; font-family: D-DINExp, D; font-weight: normal; color: #666666; line-height: 24px; }

.fourth-right { /*            width: 657px;
            height: 376px;*/ /*            background: #777777;*/ }

.fifth { padding: 0 120px 64px 120px; width: 100%; height: 522px; background-repeat: no-repeat; background-size: 100% 522px; box-sizing: border-box; }

.fifth .fifth-top { display: flex; flex-direction: column; align-items: center; }

.fifth .fifth-title { margin-top: 56px; font-size: 32px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #FFFFFF; line-height: 40px; }

.fifth .fifth-content { margin-top: 16px; font-size: 18px; font-family: D-DINExp, D; font-weight: normal; color: #FFFFFF; line-height: 24px; }

.fifth .fifth-list { margin-top: 60px; display: flex; }

.fifth .fifth-item { flex: 1; display: flex; flex-direction: column; align-items: center; }

.fifth .fifth-item:not(:nth-child(1)) { margin-left: 24px; }

.fifth .fifth-item-icon { }

.fifth .fifth-item-title { margin-top: 16px; font-size: 24px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #FFFFFF; line-height: 32px; }

.fifth .fifth-item-content { margin-top: 16px; text-align: center; font-size: 16px; font-family: D-DINExp, D; font-weight: normal; color: rgba(255,255,255,0.8); line-height: 24px; }

.fifth .fifth-item-btn { margin-top: 16px; outline: none; border: none; cursor: pointer; width: 209px; height: 40px; border-radius: 8px; background: transparent; font-size: 16px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #E95506; line-height: 22px; }

.sixth { padding: 0 120px 104px 120px; height: 400px; width: 100%; box-sizing: border-box; }

    .sixth .sixth-title { 
        padding-top: 176px;
        width: 100%;
        font-size: 32px;
        font-family: D-DINExp-Bold, D-DINExp;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 40px;
    }

.seventh { width: 100%; height: 432px; padding-bottom: 56px; }

.seventh .seventh-title { margin-top: 56px; font-size: 32px; font-family: D-DINExp-Bold, D-DINExp; font-weight: bold; color: #333333; line-height: 40px; }

.seventh .seventh-content { margin-top: 16px; font-size: 18px; font-family: D-DINExp, D; font-weight: normal; color: #666666; line-height: 24px; }

.seventh .seventh-btn { outline: none; border: none; cursor: pointer; margin-top: 40px; width: 232px; height: 40px; background: #E95506; border-radius: 8px; border: 1px solid #E95506; font-size: 16px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #FFFFFF; line-height: 22px; }

    .seventh .seventh-list {
        margin-top: 40px;
        width: 100%;
        height: 120px;
    }

.padding-left-120 { padding-left: 120px; }

.padding-right-120 { padding-right: 120px; }

.margin-top_16 { margin-top: 16px; }


@media screen and (max-width: 700px) {
    .fourth-list, .second, .container, .third-list {
        flex-direction: column;
    }
    .fourth-left{
        order:2
    }
    .fourth-content{
        order:1
    }

    .fourth, .second, .third, .bottom, .fifth, .sixth {
        height: auto !important;
    }


    .fourth-item:not(:nth-child(1)), .second-content, .third .third-list .third-item:not(:nth-child(1)) {
        margin-left: 0px !important;
    }
    .bottom-content, .fourth-left {
        padding: 24px !important;
    
    }
    .bottom-header{
        display:block !important;
        padding:24px !important;
    }
    .bottom-title {
        padding: 0 24px !important;
    }
    .bottom-menu-list {
        float: right !important;
        margin-top: 75px !important;
    }
    .bottom-icon-list {
        margin-bottom: 217px !important;
        width:0 !important
    }
    .second {
        margin: auto;
        text-align: center;
        margin-bottom: 24px;
    }
    .fifth {
        background-size: cover;
    }
    .seventh-list {
        background: url("../images/index/bottom2.png");
        background-size: 344px 128px;
        width: 344px !important
    }
}

.seventh-list{
    background:url("../images/index/pic_home_company@2x.png");
    background-size:100% 120px;
}
@media screen and (max-width: 1247px) {
    .fifth-item2 {
        width: 383px !important;
    }
    .second-info, .container, .fourth-title, .fourth-content {
        width: 100% !important;
    }

    .fifth-padding {
        padding: 56px 24px !important;
    }
    .header {
        padding: 150px 24px 98px 24px !important;
        height: auto !important;
        background-size: cover !important;
    }
    .third{
        height:auto !important
    }
    .fourth-left{
        padding:24px !important
    }
    .padding-left-120{
        padding-left:0px !important
    }
    .padding-left-120{
        padding-right:0px !important
    }
   

 
}
@media screen and (max-width: 768px) {
    .fifth-list {
        flex-direction: column;
    }
    .second-img-main {
        width: 285px !important;
        height: 226px !important;
    }

}
@media screen and (max-width: 1023px) {
    .second-img-main {
        width: 319px !important;
        height: 310px !important;
    }
    .second {
        padding: 0 24px !important;
    }
    .fifth{
        height:auto !important;
        background-size:cover
    }
    .fifth-list {
        flex-direction: column;
    }
    .fourth-right img{
        width:100% !important
    }
   
}
@media screen and (max-width: 620px) {
        .sixed-item {
            width: 100% !important;
            height: auto !important;
        }

        .fourth-padding, .third {
            padding: 45px 24px 56px 24px !important;
        }

        .seventh .conatiner {
            padding: 24px !important;
        }

        .sixed-padding {
            padding: 56px 24px !important;
        }

        .third-padding {
            padding: 32px 24px !important;
        }

        .seventh-content, .seventh-title {
            width: 100% !important;
        }
        .sixth {
            padding: 0 24px 104px 24px !important;
        }
    }
