@charset "utf-8";


.slide-box {
    position: relative;
    margin: 0;
    width: 100%;
    height: 680px;
    text-align: center;
    overflow: hidden;
}

.case-type {
    width: 100%;
    background-color: #FFFFFF;
}

    .case-type .case-type-tab {
        width: 100%;
        box-shadow: 0 1px 0 0 #E0E0E0;
        padding-left: 10%;
        padding-right: 10%;
        height: 80px;
    }

        .case-type .case-type-tab ul {
            width: 100%;
            height: 80px;
        }

        .case-type .case-type-tab li {
            float: left;
            width: 12.5%;
            font-family: PingFangSC-Regular;
            font-size: 20px;
            color: #333333;
            letter-spacing: 0;
            line-height: 80px;
            text-align: center;
            align-items: center;
            height: 80px;
            cursor: pointer;
        }
            .case-type .case-type-tab li a {
                line-height: 80px;
            }

            .case-type .case-type-tab li.active {
                border-bottom: solid 4px #005B34;
            }

    .case-type .case-type-content-tab {
        width: 100%;
        box-shadow: 0 1px 0 0 #E0E0E0;
        padding-left: 10%;
        padding-right: 10%;
        margin-top: 60px;
    }

        .case-type .case-type-content-tab .case-type-content-tab-item {
            width: 100%;
            display: none;
        }

            .case-type .case-type-content-tab .case-type-content-tab-item.active {
                display: block;
            }

            .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content {
                width: 100%;
            }

                .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item {
                    width: 20%;
                    float: left;
                    height:275px;
                    padding-left: 2%;
                    padding-right: 2%;
                    opacity: 1;
                }

                    .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item img {
                        width: 180px;
                        height: auto;
                    }

                    .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item p {
                        width: 180px;
                        color: #000;
                        font-size: 18px;
                        text-align: center;
                    }

                    .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item.active {
                        opacity: 1;
                    }

@media screen and (min-width: 2400px) and (max-width: 2560px) {
    .slide-box {
        position: relative;
        margin: 0;
        width: 100%;
        height: 900px;
        text-align: center;
        overflow: hidden;
    }
}
@media( max-width:1440px) {
    .slide-box {
        position: relative;
        margin: 0;
        width: 100%;
        height: 508px;
        text-align: center;
        overflow: hidden;
    }
}

@media( max-width:1360px) {
    .slide-box {
        position: relative;
        margin: 0;
        width: 100%;
        height: 480px;
        text-align: center;
        overflow: hidden;
    }
}

    @media( max-width:640px) {
        .slide-box {
            position: relative;
            margin: 0;
            width: 100%;
            height: 214px;
            text-align: center;
            overflow: hidden;
        }

        .case-type {
            width: 100%;
            background-color: #FFFFFF;
        }

            .case-type .case-type-tab {
                width: 100%;
                box-shadow: 0 1px 0 0 #E0E0E0;
                padding-left: 1%;
                padding-right: 1%;
                height: 36px;
            }

                .case-type .case-type-tab ul {
                    width: 100%;
                    height: 36px;
                }

                .case-type .case-type-tab li {
                    float: left;
                    width: 20%;
                    font-family: PingFangSC-Regular;
                    font-size: 12px;
                    color: #333333;
                    letter-spacing: 0;
                    line-height: 20px;
                    text-align: center;
                    align-items: center;
                    height: 36px;
                    cursor: pointer;
                }

                    .case-type .case-type-tab li a {
                        line-height: 20px;
                    }

                    .case-type .case-type-tab li.active {
                        border-bottom: solid 4px #005B34;
                    }

            .case-type .case-type-content-tab {
                width: 100%;
                box-shadow: 0 1px 0 0 #E0E0E0;
                padding-left: 1%;
                padding-right: 1%;
                margin-top: 2rem;
            }

                .case-type .case-type-content-tab .case-type-content-tab-item {
                    width: 100%;
                    display: none;
                }

                    .case-type .case-type-content-tab .case-type-content-tab-item.active {
                        display: block;
                    }

                    .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content {
                        width: 100%;
                    }

                        .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item {
                            width: 100%;
                            float: left;
                            padding-left: 0;
                            padding-right: 0;
                            height: auto;
                            opacity: 1;
                            margin-bottom: 10px;
                        }

                            .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item img {
                                width: 100%;
                                height: auto;
                            }

                            .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item p {
                                width: 100%;
                                color: #000;
                                font-size: 18px;
                                text-align: center;
                            }

                            .case-type .case-type-content-tab .case-type-content-tab-item .case-type-content .case-type-content-item.active {
                                opacity: 1;
                            }
    }