/* application */
.page.application .application-box {
    margin-bottom: calc(100 * var(--px));
}
.page.application .application-box .layer-header {
    position: absolute;
    top: calc(var(--pt) * var(--px));
    left: 0;
}

.page.application .application-box .application-item {
    margin-bottom: calc(40 * var(--px));
    display: flex;
    justify-content: flex-end;
}

.page.application .application-box .application-item:nth-of-type(2n) {
    justify-content: flex-start;
}

.page.application .application-box .application-item:nth-of-type(2n) .application-item__img {
    order: 2;
}

.page.application .application-box .application-item:nth-of-type(2n) .application-item__container {
    order: 1;
}

.page.application .application-box .application-item:last-child {
    margin-bottom: 0;
}

.page.application .application-box .application-item .application-item__content {
    width: calc(100 / 3 * 2 * 1%);
    height: calc(400 * var(--px));
    background-color: #F4F3F3;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    transition: all .3s ease;
}

.page.application .application-box .application-item .application-item__content:hover {
    background-color: #fff;
    box-shadow: 0 4px 15px 0 rgba(106, 106, 106, 0.2);
}

.page.application .application-box .application-item__content .application-item__img {
    overflow: hidden;
}

.page.application .application-box .application-item__content .application-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page.application .application-box .application-item__content .application-item__container {
    text-align: justify;
    font-size: calc(20 * var(--px));
    line-height: 1.2;
    padding: calc(30 * var(--px)) calc(36 * var(--px));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page.application .application-box .application-item__content .application-item__container .title {
    font-size: calc(38 * var(--px));
    font-weight: 700;
    line-height: 1.5;
    text-align: left;
}

.page.application .application-box .application-item__content .application-item__container .link {
    align-self: flex-end;
}

@media screen and (max-width: 625px) {
    .page.application .application-box .layer-header {
        position: relative;
        top: 0;
    }
    .page.application .application-box>.layer-content {
        margin-top: calc(46 * var(--px));
    }
    .page.application .application-box .application-item .application-item__content {
        width: 100%;
    }
}