.banner {
    min-height: 960px;
    background: url("/images/bg-lsjufb883vk5finl.jpg") no-repeat center top;
    background-size: 100% 40%;
    padding-top: 210px;
    text-align: center;
}

    .banner > .title > h1 {
        font-size: 3.8rem;
        font-weight: bold;
        color: #314068;
    }

    .banner > .title > p {
        font-size: 1.5rem;
        color: #626f90;
        padding-top: 20px;
    }

.services-container {
    max-width: 1450px;
    margin: 120px auto;
    border-radius: 24px;
    background-color: #fff;
    display: grid;
    grid-template-columns: 376px 376px 376px;
    justify-content: space-around;
    box-shadow: rgba(23, 25, 29, 0.2) 0px 16px 16px -16px, rgb(23 25 29 / 3%) 0px 14px 20px 0px, rgb(23 25 29 / 4%) 0px 0px 0px 1px;
}

.service-item {
    width: 376px;
    padding: 58px 5px;
    text-align: left;
}

    .service-item > h2 {
        color: #0084ff;
        font-size: 1.12rem;
        font-weight: bold;
    }

    .service-item > h1 {
        color: #243042;
        font-size: 2rem;
        font-weight: bold;
    }

    .service-item > h3 {
        color: #626f90;
        font-size: 1rem;
        display: inline-block;
        height: 80px;
        border-top: solid 2px #010920;
        margin-top: 30px;
        padding-top: 10px;
    }

    .service-item > a {
        display: inline-block;
        width: 100%;
        padding: 13px 0;
        color: #fff;
        font-weight: bold;
        border-radius: 8px;
        text-align: center;
        transition: 0.35s;
        background-color: #009dff;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 6px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    }

        .service-item > a:hover {
            background-color: #008cff;
            box-shadow: rgba(23, 25, 29, 0.2) 0px 16px 16px -16px, rgb(23 25 29 / 3%) 0px 14px 20px 0px, rgb(23 25 29 / 4%) 0px 0px 0px 1px;
        }

        .service-item > a:active {
            transform: scale3d(0.94, 0.94, 0.94);
        }

        .service-item > a.dark {
            background-color: #343f52;
        }

            .service-item > a.dark:hover {
                background-color: #222b3a;
                box-shadow: rgba(23, 25, 29, 0.2) 0px 16px 16px -16px, rgb(23 25 29 / 3%) 0px 14px 20px 0px, rgb(23 25 29 / 4%) 0px 0px 0px 1px;
            }

.service-details {
    display: inline-block;
    width: 100%;
    margin-top: 30px;
}

    .function-list > li,
    .service-details > li {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 12px 6px;
        margin: 9px 5px 0;
        font-size: 15px;
        border-radius: 8px;
        transition: 0.35s;
        position: relative;
    }

        .function-list > li::after,
        .service-details > li::after {
            position: absolute;
            bottom: -5px;
            left: 0;
            content: "";
            width: 100%;
            height: 1px;
            background-color: #dadde8;
        }

        .service-details > li:hover {
            background-color: aliceblue;
        }

        .service-details > li > span {
            color: #4f525b;
        }

        .service-details > li > i {
            color: #2a2c30;
            font-style: normal;
            font-weight: bold;
        }

.functions-container {
    max-width: 1225px;
    margin: 0 auto 30px;
}

.function-header {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 240px 240px 240px;
}

    .function-header > h1 {
        font-size: 3rem;
        font-weight: bold;
        color: #243042;
        text-align: left;
    }

.function-tab {
    text-align: left;
    background-color: #009dff;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 24px;
}

    .function-tab > h2 {
        color: #fff;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .function-tab > h4 {
        color: #d7efff;
        font-size: 0.9rem;
        font-weight: bold;
        display: inline-block;
        height: 5rem;
        margin-top: 4px;
        line-height: 1.4;
    }

    .function-tab > a {
        background-color: #fff;
        display: inline-block;
        width: 100%;
        text-align: center;
        padding: 12px 0;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
        transition: 0.35s;
        color: #243042;
        font-size: 1.1rem;
        font-weight: bold;
    }

        .function-tab > a:hover {
            box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
        }

    .function-tab.dark {
        background-color: #343f52;
    }

.function-list {
    margin-top: 50px;
}

    .function-list > li {
        display: flex;
        justify-content: space-between;
    }

        .function-list > li:hover {
            background-color: aliceblue;
        }

.function-state {
    width: 780px;
    display: flex;
    justify-content: space-around;
}

    .function-state > i {
        line-height: normal;
    }

        .function-state > i::after,
        .function-state > i::before {
            font-family: "FADuotone";
            font-weight: 900;
            position: absolute;
            font-style: normal;
            font-size: 22px;
        }

        .function-state > i.c::before {
            content: "\f058";
            color: rgb(0, 151, 0);
        }

        .function-state > i.c::after {
            content: "\f058\f058";
            color: rgba(0, 187, 78, 0.12);
        }

        .function-state > i.t::before {
            content: "\f06a";
            color: rgb(255, 145, 0);
        }

        .function-state > i.t::after {
            content: "\f06a\f06a";
            color: rgba(255, 174, 0, 0.2);
        }