body {
    background: #fff;
}

.index-banner {
    position: relative;
}

    .index-banner .video-box {
        bottom: 0;
        overflow: hidden;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: opacity 200ms ease, visibility 200ms ease, -webkit-transform 2s ease;
        transition: opacity 200ms ease, visibility 200ms ease, -webkit-transform 2s ease;
        -o-transition: opacity 200ms ease, visibility 200ms ease, transform 2s ease;
        transition: opacity 200ms ease, visibility 200ms ease, transform 2s ease;
        transition: opacity 200ms ease, visibility 200ms ease, transform 2s ease, -webkit-transform 2s ease;
        visibility: hidden;
        z-index: 2;
        cursor: pointer;
    }

        .index-banner .video-box video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

    .index-banner .swiper-button-next,
    .index-banner .swiper-button-prev {
        top: 0;
        bottom: 0;
        margin-top: 0;
        height: auto;
    }

    .index-banner .swiper-button-next,
    .footer-banner .swiper-button-next {
        background-image: url("../images/arrow-right.svg");
    }

    .index-banner .swiper-button-prev,
    .footer-banner .swiper-button-prev {
        background-image: url("../images/arrow-left.svg");
    }

    .index-banner .banner {
        position: relative;
    }

    .index-banner .banner-img {
        width: 100%;
    }

    .index-banner .swiper-pagination-bullet-active {
        background: #32c9be;
    }

    .index-banner .banner-text {
        position: absolute;
        top: 50%;
        margin-top: -45px;
        font-size: 64px;
        color: #32c9be;
        width: 100%;
        text-align: center;
        font-family: "Noto Sans SC", "思源黑体", "PingFangSC", "PingFang", "Microsoft YaHei";
        font-weight: 400;
    }

.video-playing .video-box {
    opacity: 1;
    visibility: visible;
}

.brand-story {
    color: #32c9be;
    padding: 30px 0;
    font-size: 16px;
    text-align: center;
    margin-top: 50px;
}

    .brand-story .title {
        font-size: 34px;
    }

        .brand-story .title p {
            font-size: 18px;
            margin-top: 5px;
            margin-bottom: 0;
        }

    .brand-story .story-text {
        padding: 20px 0;
        line-height: 200%;
    }

.sec-03 {
    background: #4c4d4f;
    margin-top: 40px;
    padding-bottom: 20px;
}

    .sec-03 .sec-img {
        position: relative;
    }

        .sec-03 .sec-img ul {
            margin-top: -20px;
            overflow: hidden;
        }

        .sec-03 .sec-img li {
            padding: 0;
            transition: all .6s;
            -webkit-transition: all .6s;
        }

            .sec-03 .sec-img li:nth-child(2n) {
                padding-top: 20px;
            }

        .sec-03 .sec-img a {
            background-position: center;
            background-repeat: no-repeat;
            background-size: auto 100%;
            display: block;
            height: 430px;
            border-bottom: 4px solid transparent;
        }

            .sec-03 .sec-img a:hover {
                border-bottom: 4px solid #32c9be;
            }

    .sec-03 .aimg01 {
        background-image: url("../images/img04.jpg");
    }

    .sec-03 .aimg02 {
        background-image: url("../images/img05.jpg");
    }

    .sec-03 .aimg03 {
        background-image: url("../images/img06.jpg");
    }

    .sec-03 .aimg04 {
        background-image: url("../images/img07.jpg");
    }

.sec-04 {
    margin-top: 10px;
}

    .sec-04 .swiper-slide {
        position: relative;
    }

    .sec-04 .banner-layer {
        position: absolute;
        text-align: right;
        padding-top: 100px;
        /*display: none;*/
    }

.swiper-pagination-bullet-active {
    background: #32c9be;
}

/*20180803修改Start*/
/*产品大家族*/
.family-section {
    height: 100%;
}

.family-box {
    padding-top: 40px;
    position: relative;
    overflow: hidden;
}

.family-content {
    padding-top: 20px;
    position: relative;
    cursor: pointer;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -o-transition: all 0.6s;
    transition: all 0.6s;
    padding-bottom: 60px;
}

    .family-content.active {
        padding-top: 0;
    }

    .family-content .family-txt, .family-content .family-img {
        -webkit-transition: all 0.6s;
        -moz-transition: all 0.6s;
        -ms-transition: all 0.6s;
        -o-transition: all 0.6s;
        transition: all 0.6s;
    }

    .family-content.active .family-txt, .family-content.active .family-img {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
    }

.family-txt {
    text-align: center;
    font-size: 20px;
    padding-bottom: 30px;
}

.family-content.active .family-txt {
    color: #32c9be;
    padding-bottom: 60px;
}

.family-content.active:after {
    content: '';
    position: absolute;
    bottom: 10%;
    width: 100%;
    height: 6px;
    background-color: #32c9be;
    border-top: 2px solid #8ad7d5;
}

/*20180803修改End*/

/***************************** 屏幕小于992********************************/
@media (max-width: 992px) {
    .index-banner {
        overflow: hidden;
        text-align: center;
    }

        .index-banner .banner-img {
            overflow: hidden;
        }

        .index-banner img {
            width: 100%;
            margin-left: 0;
            max-width: initial;
        }

        .index-banner .banner-text {
            position: absolute;
            top: 50%;
            margin-top: -45px;
            font-size: 44px;
            color: #32c9be;
            width: 100%;
            text-align: center;
        }

        .index-banner .top-banner-txt img {
            width: 70%;
            margin-left: 0;
        }
}

/***************************** max-width: 767px ********************************/
@media (max-width: 767px) {
    .index-banner .top-banner-txt img {
        width: 100%;
    }

    .index-banner .banner-img {
        overflow: hidden;
    }

    .index-banner img {
        /*width: 140%;*/
        /*transform: translateX(-20%);*/
        /*margin-left: -20%;*/
        max-width: initial;
    }

    .index-banner .banner-text {
        margin-top: -27px;
        font-size: 24px;
    }

    .sec-03 .sec-img ul {
        margin-top: -20px;
        overflow: inherit;
    }

    .sec-03 .sec-img li {
        margin-right: 10px;
    }

        .sec-03 .sec-img li:nth-child(2n) {
            padding-top: 0px !important;
        }

    .sec-03 .sec-img a {
        height: 230px;
        background-size: cover;
        background-position: top;
    }

    .sec-03 .aimg01 {
        background-image: url("../images/aimg01-mc.jpg");
    }

    .sec-03 .aimg02 {
        background-image: url("../images/aimg02-mc.jpg");
    }

    .sec-03 .aimg03 {
        background-image: url("../images/aimg03-mc.jpg");
    }

    .sec-03 .aimg04 {
        background-image: url("../images/aimg04-mc.jpg");
    }

    .sec-04 {
        margin-top: 0px;
    }

        .sec-04 .swiper-slide {
            position: relative;
        }

        .sec-04 .banner-layer {
            position: absolute;
            text-align: right;
            padding-top: 40px;
            width: 100%;
        }

            .sec-04 .banner-layer img {
                width: 80px;
            }
}

.carsflow .mainContent {
    height: 100%;
}

.carsflow .swiper-container {
    padding-top: 50px;
    height: 100%;
}

.carsflow .swiper-slide {
    width: 20%;
    text-align: center;
    cursor: pointer;
}

    .carsflow .swiper-slide .swiper-box {
        transition: all .6s;
        -webkit-transition: all .6s;
        padding-bottom: 60px;
    }

        .carsflow .swiper-slide .swiper-box::after {
            content: '';
            position: absolute;
            left: 10%;
            bottom: 15%;
            width: 80%;
            height: 6px;
            background: #32c9be;
            border-top: 2px solid #8ad7d5;
            opacity: 0;
            transition: all .6s .2s;
            -webkit-transition: all .6s .2s;
        }

    .carsflow .swiper-slide h3 {
        margin: 0;
    }

    .carsflow .swiper-slide p {
        margin: 0;
        font-size: .07rem;
        line-height: .16rem;
        opacity: 0;
    }

    .carsflow .swiper-slide.active .swiper-box {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }

    .carsflow .swiper-slide.active #djz-qemjt {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }

    .carsflow .swiper-slide.active .swiper-box::after {
        opacity: 1;
    }

    .carsflow .swiper-slide.active h3 {
        font-size: 16px;
        color: #32c9be;
        padding-bottom: 10px;
    }

    .carsflow .swiper-slide.active p {
        opacity: 1;
    }

    .carsflow .swiper-slide img {
        display: block;
        margin: 0 auto;
        width: auto;
    }

.title {
    padding: 50px 0 10px 0;
    text-align: center;
    font-size: 28px;
    /*font-weight:bold*/;
}

.sec-02 .title {
    padding: 40px 0 10px 0;
}


.sec-04 .title {
    padding-bottom: 40px;
}

.sec-02 {
    background: url(../images/index-s02bg.jpg) bottom center no-repeat;
    background-size: 100% 100%;
}

    .sec-02 .swiper-sec02 .swiper-slide {
        text-align: center;
    }

    .sec-02 .name {
        color: #4c4d4f;
        padding-bottom: 30px;
        font-size: 16px;
    }

.pc-banne {
    display: block;
}

.mc-banne {
    display: none;
}

@media (max-width: 768px) {
    .pc-banne {
        display: none;
    }

    .mc-banne {
        display: block;
    }

    .title {
        padding: 30px 15px;
        text-align: center;
        font-size: 16px;
    }

    .sec-02 .title {
        padding: 15px 0 0 0;
    }

    .sec-04 .title {
        padding-bottom: 20px;
    }

    .carsflow .swiper-slide.swiper-slide-active .swiper-box::after {
        opacity: 1;
    }

    .sec-02 .name {
        font-size: 12px;
    }

    .carsflow .swiper-slide.swiper-slide-active h3 {
        font-size: 12px;
        color: #32c9be;
        padding-bottom: 10px;
    }

    .carsflow .swiper-slide.swiper-slide-active p {
        opacity: 1;
    }

    .carsflow .swiper-slide {
        width: 40%;
        padding: 0;
    }

        .carsflow .swiper-slide.swiper-slide-active .swiper-box {
            transform: scale(1.4);
            -webkit-transform: scale(1.4);
        }

    .carsflow .swiper-container {
        padding-top: 40px;
    }

    .carsflow .swiper-slide .swiper-box {
        padding-bottom: 30px;
    }

    .sec-03 {
        margin-top: 0;
        background: url("../images/ppbg.jpg") bottom no-repeat;
        background-size: 100% 100%;
    }

        .sec-03 .sec-mm03 {
            overflow: hidden;
            padding-top: 20px;
        }

    .sec-04 img {
        width: 100%;
    }
}

/***************************** 屏幕在415~768之间 ********************************/
@media screen and (min-width: 415px) and (max-width: 768px) {
    .carsflow .swiper-container {
        padding-top: 65px;
    }

    .carsflow .swiper-slide .swiper-box::after {
        bottom: 10%;
    }
}