.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; } }