.homepage .main-container .service-container {
    margin: 5.625rem 0 7.5rem;
}

.homepage .main-container .service-container .service-list-container {
    display: flex;
    margin-top: 3.375rem;
}

.homepage .main-container .service-container .service-list-container .service-box {
    width: 13rem;
    height: 21.25rem;
    padding: 2.5rem 1.25rem 0;
    text-align: center;
    transition: width .4s ease-out;
    border-radius: 1rem;
    cursor: pointer;
    background-position: right bottom;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-size: 100% 100%, 12.5rem 12.5rem;
}

.homepage .main-container .service-container .service-list-container .service-box:not(:last-child) {
    margin-right: 1rem;
}

.homepage .main-container .service-container .service-list-container .service-box.service-box-active {
    width: 19rem;
    padding: 2.5rem 1.875rem 0;
    text-align: start;
}

.homepage .main-container .service-container .service-list-container .service-box.service-box-active .service-img {
    width: 6rem;
    margin: -4.375rem 0 0 -0.875rem;
}

.homepage .main-container .service-container .service-list-container .service-box.service-box-active .service-title {
    font-size: 1.75rem;
}

.homepage .main-container .service-container .service-list-container .service-box.service-box-active .service-tip {
    opacity: 1;
    transition: opacity .4s ease-out .4s;
}

.homepage .main-container .service-container .service-list-container .service-box .service-img {
    width: 7.5rem;
    transition: margin .4s ease-out;
}

.homepage .main-container .service-container .service-list-container .service-box .service-title {
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
    color: #005598;
}

.homepage .main-container .service-container .service-list-container .service-box .service-tip {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #005598;
    text-align: start;
    opacity: 0;
}