html, body {
    min-width: 1240px
}

.main {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative
}

.pages {
    width: 100%;
    height: 36px;
    display: inline-flex;
    justify-content: center;
    align-items: center
}

    .pages .num {
        min-width: 36px;
        height: 36px;
        display: inline-block;
        font-size: 14px;
        text-align: center;
        line-height: 36px;
        margin: 0 4px;
        padding: 0 4px;
        transition: all 0.3s;
        background-color: #f4f5fa
    }

        .pages .num:hover, .pages .num.active {
            border-color: #157fd0;
            background-color: #157fd0;
            color: #fff
        }

    .pages .prev, .pages .next {
        width: auto;
        display: inline-block;
        padding: 0 10px;
        font-size: 13px;
        line-height: 36px;
        height: 36px;
        transition: all 0.3s;
        margin: 0 1px;
        background-color: #f4f5fa
    }

        .pages .prev:hover, .pages .next:hover {
            border-color: #157fd0;
            background-color: #157fd0;
            color: #fff
        }

.footer {
    width: 100%;
    background-color: #323232
}

    .footer .foot-top {
        display: flex;
        justify-content: space-between;
        padding: 55px 0 60px
    }

        .footer .foot-top .left .logo {
            font-size: 28px;
            font-weight: bold;
            color: #fff;
            line-height: 28px
        }

        .footer .foot-top .left .foot-nav {
            display: flex;
            margin-top: 30px
        }

            .footer .foot-top .left .foot-nav a {
                font-size: 16px;
                display: inline-block;
                margin-right: 20px;
                color: #fff
            }

        .footer .foot-top .tel {
            color: #fff
        }

            .footer .foot-top .tel .label {
                font-size: 18px;
                line-height: 18px
            }

            .footer .foot-top .tel .num {
                font-size: 32px;
                font-weight: bold;
                font-family: 'din';
                margin-top: 5px
            }

    .footer .foot-bot {
        display: flex;
        align-items: center;
        height: 50px
    }

        .footer .foot-bot a, .footer .foot-bot p {
            font-size: 14px;
            color: #999;
            margin-right: 20px
        }

input[type='radio'] + label {
    cursor: pointer
}

    input[type='radio'] + label::before {
        content: '';
        display: block;
        float: left;
        width: 18px;
        height: 18px;
        background-image: url("../img/06.png");
        background-size: 100% 100%
    }

    input[type='radio'] + label span {
        display: block;
        float: left;
        height: 18px;
        margin-left: 4px;
        line-height: 18px;
        font-size: 14px;
        user-select: none
    }

input[type='radio']:checked + label::before {
    background-image: url("../img/07.png")
}

input[type='checkbox'] + label {
    cursor: pointer
}

    input[type='checkbox'] + label::before {
        content: '';
        display: block;
        float: left;
        width: 18px;
        height: 18px;
        background-image: url("../img/107.png");
        background-size: 100% 100%
    }

    input[type='checkbox'] + label span {
        display: block;
        float: left;
        height: 18px;
        margin-left: 4px;
        line-height: 18px;
        font-size: 14px;
        user-select: none
    }

input[type='checkbox']:checked + label::before {
    background-image: url("../img/108.png")
}

input[type='radio'], input[type='checkbox'] {
    display: none;
    opacity: 0
}

.com-layer {
    padding: 70px 60px
}

    .com-layer .title {
        text-align: center;
        font-size: 30px
    }

    .com-layer .desc {
        margin-top: 30px;
        font-size: 20px;
        line-height: 38px
    }