#content-container {
    background-color: #FAFAFA;
}

#header-banner {
    height: calc(56.1 * 0.53vw);
    width: 100%;
    position: relative;

    .img1 {
        width: 100%;
        height: 100%;
    }

    .img2 {
        position: absolute;
        top: calc(0 * 0.53vw);
        left: 0vw;

        width: 100%;
        height: 100%;
        z-index: 9;
    }

    color: #ffffff;

    .banner-title {
        z-index: 8;
        position: absolute;
        bottom: calc(28.8 * 0.53vw);
        left: 19.75vw;
        font-size: 2.5rem;
    }

    .banner-navigation {
        z-index: 8;
        position: absolute;
        bottom: calc(20.9 * 0.53vw);
        left: 19.75vw;
        font-size: 1.3rem;
    }

    .banner-logos {
        z-index: 8;
        position: absolute;
        top: calc(7.8 * 0.53vw);
        right: 6.6vw;
        overflow: hidden;
        height: calc(46 * 0.53vw);


        .img {
            width: 6.5vw;
            height: calc(6.95 * 0.53vw);
            margin-top: calc(1.2 * 0.53vw);
        }

        display: flex;
        flex-direction: row-reverse;

        .banner-logos-box-t {
            animation: roll 16s linear infinite;
            display: flex;
            flex-direction: column;
            margin-right: 0.78vw;
        }

        .banner-logos-box-b {
            animation: roll 20s linear infinite;
            display: flex;
            flex-direction: column;
            margin-right: 0.78vw;
        }
    }
}

#selected {
    padding: 0 18.75vw;

    .title {
        text-align: center;
        font-size: 1.8rem;
        color: #333;
        margin-top: calc(7.6 * 0.53vw);
    }

    > ul {
        margin-top: calc(4.4 * 0.53vw);
        display: flex;

        > li {

            background-color: #fff;
            width: 19.8vw;
            height: calc(42.3 * 0.53vw);
            margin-right: 1vw;
            position: relative;

            .a1 div {
                height: calc(19.2 * 0.53vw);
                margin-bottom: calc(2.22 * 0.53vw);
                background-size: 100% 100%;
                line-height: calc(19.2 * 0.53vw);
                text-align: center;
                font-size: 1.6rem;
                color: #fff;
            }

            >div> span {
                margin-left: 1.5vw;
                margin-right: 1vw;
                background-color: #016BCA;
                color: #fff;
                font-size: 0.7rem;
                padding: calc(0.64 * 0.53vw) 0.46vw;
            }

            > p {
                margin-left: 1.5vw;
                margin-right: 1vw;
                margin-top: calc(2.7 * 0.53vw);
                font-size: 1rem;
                color: #333333;
                line-height: 1.4rem;
                margin-bottom: calc(3.6 * 0.53vw);
                height: calc(4.9 * 0.53vw);

                /*overflow: hidden;*/
                /*text-overflow: ellipsis;*/
                /*display: -webkit-box;*/
                /*!*限制文本行数*!*/
                /*-webkit-line-clamp: 2;*/
                /*!*子元素的排列方式*!*/
                /*-webkit-box-orient: vertical;*/
            }

            .a2 {
                /*margin-left: 1vw;*/
                padding: 8px 14px;
                border: 1px solid #000;
                display: inline;
                font-size: 0.8rem;
                position: absolute;
                bottom: calc(2.5 * 0.53vw);
                left: 1.5vw;

            }

            .a2:hover {
                background-color: #016BCA;
                border: 1px solid #016BCA;
                color: #fff;
                transition: all 0.3s ease;

            }
        }
    }
}


#custom {
    padding: 0 18.75vw;
    margin-top: calc(7.6 * 0.53vw);
    background-color: #FAFAFA;

    position: relative;
    #customt{
        margin-top: calc(7.6 * 0.53vw);
        position: absolute;
        top: -8vw;
        left: 0;
    }
    .title {
        text-align: center;
        font-size: 1.8rem;
        color: #333;
    }

    .custom-type {
        padding-top: calc(5.65 * 0.53vw);
        display: flex;

        > li {
            cursor: pointer;
            margin-right: 4vw;
            /*text-align: center;*/
            /*width: 8.65vw;*/
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            > img {
                width: 2.34vw;
                height: calc(4.17 * 0.53vw);
                margin-bottom: calc(1 * 0.53vw);
            }

            > span {
                font-size: 0.9rem;
            }

            /*.img1 {*/
            /*    display: none;*/
            /*}*/
            /*.img2{*/
            /*    display: block;*/
            /*}*/
        }

        /*.is_li{*/
        /*    .img1{*/
        /*        display: block;*/
        /*    }*/
        /*    .img2{*/
        /*        display: none;*/
        /*    }*/
        /*}*/
    }

    .custom-list {
        margin-top: calc(3.13 * 0.53vw);
        display: flex;
        flex-flow: wrap;
        /* 项目在主轴上的对齐方式 */
        /*justify-content: space-between;*/

        > li {
            margin-right: 0.5vw;
            margin-top: calc(2.7 * 0.53vw);
            background-color: #ffffff;
            width: 20vw;
            height: calc(39.81 * 0.53vw);

            .customcase-l-t {
                >div{
                    width: 20vw;
                    height: calc(21.5 * 0.53vw);
                    overflow: hidden;
                    > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

            }

            .customcase-l-b {
                height: calc(20.61 * 0.53vw);
                padding-left: 1.2vw;
                padding-right: 1.03vw;
                position: relative;
                display: flex;
                flex-direction: column;

                .p1 {
                    font-size: 1.1rem;
                    line-height: 1.6rem;
                    margin-top: calc(2 * 0.53vw);
                    /*font-size: 1.3rem;*/
                    /*line-height: 2rem;*/
                    color: #333333;
                }

                .a1 {
                    font-size: 0.8rem;
                    padding: 8px 14px;
                    border: 1px solid #000000;
                    display: inline;
                    /* 固定定位的盒子也必须写边偏移 */
                    position: absolute;
                    bottom: calc(5 * 0.53vw);
                    left: 1.5vw;
                }

                .a1:hover {
                    background-color: #016BCA;
                    border: 1px solid #016BCA;
                    color: #fff;
                    transition: all 0.3s ease;
                }
            }
        }
    }

    #page {
        background-color: #FAFAFA;
        padding-top: calc(7.6 * 0.53vw);
        padding-bottom: calc(3.13 * 0.53vw);
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        line-height: calc(4.54 * 0.53vw);

        .page-up, .page-on {
            cursor: pointer;
            margin: 0 1vw;
            line-height: calc(4.54 * 0.53vw);
            width: 2.55vw;
            height: calc(4.54 * 0.53vw);
            border-radius: 50%;
            border: 1px solid #000000;
        }

        .page-no {
            cursor: default;
            color: #cccccc;
            border: 1px solid #cccccc;
        }

        > a {
            color: #333333;
            margin: 0 1vw;
            cursor: pointer;
        }

        .is_a {
            color: #0b69be;
        }
    }
}


@keyframes roll {
    100% {
        transform: translate(0, calc(-41 * 0.53vw));
    }
}