YD-WEB/public/site/assets/sections/solution/read/index.css

.yuedong_solution_read {
    padding: 1.9688rem 0 3rem;
}

.yuedong_solution_read_top {
    background: #3BC6F9;
    padding: 2.1875rem 1.875rem 3.125rem;
}

.yuedong_solution_read_title {
    color: #FFF;
    font-family: var(--font-family);
    font-size: var(--font-size-30);
    font-weight: 700;
    line-height: 1;
}

.yuedong_solution_read_line {
    width: 100%;
    height: 1px;
    background: #EDEDED;
    margin: 1.5rem 0 2.6563rem;
}

.yuedong_solution_read_info {
    display: flex;
}

.yuedong_solution_read_info_item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.7188rem;
}

.yuedong_solution_read_info_item_icon {
    width: 17.8%;
    flex-shrink: 0;
    aspect-ratio: 1;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yuedong_solution_read_info_item_icon img {
    width: 45.45%;
    aspect-ratio: 1;
    object-fit: cover;
}

.yuedong_solution_read_info_item_text {
    flex: 1;
}

.yuedong_solution_read_info_item_title {
    color: #FFF;
    font-family: var(--font-family);
    font-size: var(--font-size-24);
    font-weight: 700;
    line-height: 1;
}

.yuedong_solution_read_info_item_desc {
    color: #FFF;
    font-family: var(--font-family);
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0.3438rem;
}

.yuedong_solution_read_img {
    margin-top: 2.9688rem;
    display: flex;
    gap: 0.625rem;
}

.yuedong_solution_read_img_item {
    flex: 1;
}

.yuedong_solution_read_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yuedong_solution_read_content {
    margin-top: 3.125rem;
    display: flex;
    flex-direction: column;
    gap: 2.75rem;
}

.yuedong_solution_read_content_item_title {
    color: var(--color-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-30);
    font-weight: 700;
    line-height: 1;
}

.yuedong_solution_read_content_item_content {
    margin-top: 0.9375rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    color: #373737;
    font-size: var(--font-size-20);
    font-weight: 400;
    line-height: 2.1;
}

.yuedong_solution_read_content_item_content p {
    color: #373737;
    font-size: var(--font-size-20);
    font-style: normal;
    font-weight: 400;
    line-height: 2.1;
}

.yuedong_solution_read_content_item_users {
    margin-top: 1.0938rem;
}

.yuedong_solution_read_content_item_user {
    background: #FAFAFA;
    padding: 1.25rem;
}

.yuedong_solution_read_content_item_user_info {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.yuedong_solution_read_content_item_user_info img {
    width: 1.625rem;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.yuedong_solution_read_content_item_user_name {
    color: var(--title-text-color);
    font-size: var(--font-size-24);
    font-weight: 400;
    line-height: 1.1667;
}

.yuedong_solution_read_content_item_user_line {
    width: 1px;
    height: 0.625rem;
    background: var(--title-text-color);
}

.yuedong_solution_read_content_item_user_desc {
    color: var(--title-text-color);
    font-size: var(--font-size-24);
    font-weight: 400;
    line-height: 1.1667;
}

.yuedong_solution_read_content_item_user_content {
    margin-top: 0.625rem;
    color: #373737;
    font-size: var(--font-size-16);
    font-weight: 400;
    line-height: 1.75;
}

.yuedong_solution_read_footer {
    margin-top: 3.125rem;
    height: 2.5625rem;
    display: grid;
    grid-template-columns: 18.36% 1fr 1fr;
    gap: 2px;
}

.yuedong_solution_read_footer_back {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #383838;
    font-size: var(--font-size-16);
    font-style: normal;
    font-weight: 350;
    line-height: 1.7;
    padding: 0 1.3438rem;
}

.yuedong_solution_read_footer_back svg {
    width: 0.625rem;
    height: 0.625rem;
    flex-shrink: 0;
}

.yuedong_solution_read_footer_back:hover svg path {
    stroke: var(--color-primary);
}

.yuedong_solution_read_footer_prev,
.yuedong_solution_read_footer_next {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 1.625rem;
    color: #5C5C5C;
    font-size: var(--font-size-16);
    font-weight: 350;
    line-height: 1.7;
}

.yuedong_solution_read_footer_prev p,
.yuedong_solution_read_footer_next p {
    max-width: calc(100% - 3.25rem);
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yuedong_solution_read_footer .foot-item:nth-child(even) {
    background: #F2F2F2;
}

.yuedong_solution_read_footer .foot-item:nth-child(odd) {
    background: #FAFAFA;
}

@media (max-width: 992px) {
    .yuedong_solution_read_footer {
        grid-template-columns: 150px 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .yuedong_solution_read_info {
        flex-direction: column;
        gap: 0.75rem;
    }

    .yuedong_solution_read_footer .foot-item {
        padding: 0;
        justify-content: center;
    }

    .yuedong_solution_read_top {
        padding: 1.5rem 1rem 2rem;
    }

    .yuedong_solution_read_line {
        margin: 1rem 0 1.5rem;
    }

    .yuedong_solution_read_img {
        flex-direction: column;
    }
}