@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("fonts/IBMPlexMono-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --zyang-background: #ffffff;
    --zyang-text: #000000;
    --zyang-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --zyang-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", monospace;
}

html,
body,
body *,
input,
textarea,
select,
button {
    font-family: var(--zyang-sans) !important;
    letter-spacing: 0 !important;
    font-kerning: normal !important;
    font-feature-settings: "kern" 1 !important;
}

.logo,
.main_menu,
.main_menu *,
.filters_container,
.filters_container *,
.grid_item_title,
.project_title,
.project_credit_title,
.related_projects_title,
.value_item_title,
.contact_details_main_title,
#colophon,
#colophon *,
button,
input[type="button"],
input[type="submit"],
.mobile_accordion_header,
.mobile_accordion_header *,
.select_arrow {
    font-family: var(--zyang-mono) !important;
}

.main_title,
.project_big_text,
.project_main_text,
.project_main_text *,
.grid_item_excerpt,
.value_item_text,
.value_item_text *,
.contact_details_text,
.contact_details_text *,
.contact_details_column,
.contact_details_column *,
textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"] {
    font-family: var(--zyang-sans) !important;
}

body,
#masthead,
#page,
#content,
.site_container,
#site_container,
.page_content_container,
.page_content_container_wrapper,
.filters_container .filters_container_selector,
.filters_container .filter_options .filter_labels_container,
.filters_container .filter_options .filter_labels_container .categories_filters_option,
.newsletter_module .newsletter_form_container,
.newsletter_module .newsletter_form_container .newsletter_form_content,
footer#colophon,
#colophon {
    background-color: var(--zyang-background) !important;
    color: var(--zyang-text) !important;
}

body,
body *,
a,
label,
input,
textarea,
select,
button {
    color: var(--zyang-text) !important;
}

#masthead,
#colophon,
.news_slider_container,
.filters_container .filters_container_selector,
.filters_container .filters_container_selector .filter_item,
.filters_container .filter_options .filter_labels_container,
.filters_container .filter_options .filter_labels_container .categories_filters_option,
.newsletter_module .newsletter_form_container .newsletter_form_content form .newsletter_content .newsletter_form_inputs,
.project_image,
.project_hero_container,
.main_grid_container .main_grid .grid_item a .grid_item_image {
    border-color: var(--zyang-text) !important;
}

.underline:after,
.inverted_underline.underline:after,
.filters_container .filter_options .filter_labels_container .categories_filters_option.active,
.filters_container .filter_options .filter_labels_container .categories_filters_option:hover {
    background-color: var(--zyang-text) !important;
}

.filters_container .filter_options .filter_labels_container .categories_filters_option.active,
.filters_container .filter_options .filter_labels_container .categories_filters_option:hover {
    color: var(--zyang-background) !important;
}

svg path,
svg circle,
.filters_container .filters_container_selector .filter_item .select_arrow svg circle,
.swiper-button-next svg path,
.swiper-button-prev svg path {
    stroke: var(--zyang-text) !important;
}

svg rect,
svg polygon {
    fill: var(--zyang-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(0, 0, 0, .55) !important;
}

.news_slider_container {
    display: none !important;
}

.hide_news #masthead,
#masthead {
    border-bottom-color: var(--zyang-text) !important;
}

#body_cursor,
#body_cursor .cursor_inner,
#body_cursor .cursor_inner span {
    border-color: var(--zyang-text) !important;
}

#body_cursor .cursor_inner span {
    background-color: var(--zyang-text) !important;
}

.change_colors_js,
.section_color,
.value_item_title {
    color: var(--zyang-text) !important;
}

.project_credit_item {
    margin-bottom: clamp(24px, 1.85vw, 36px) !important;
}

.project_credit_item .project_credit_title:first-child {
    display: block !important;
    margin-bottom: 7px !important;
    font-family: var(--zyang-mono) !important;
    font-size: clamp(13px, .86vw, 16px) !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
}

.project_credit_item .project_credit_title:not(:first-child),
.project_credit_item .project_credit_title:not(:first-child) a {
    font-family: var(--zyang-sans) !important;
    font-size: clamp(16px, 1.03vw, 19px) !important;
    line-height: 1.24 !important;
    font-weight: 400 !important;
}

#values .value_item_text,
#values .value_item_text p {
    font-family: var(--zyang-sans) !important;
    font-size: clamp(20px, 1.55vw, 30px) !important;
    line-height: 1.25 !important;
    font-weight: 400 !important;
}

#values .value_item_text {
    padding-top: clamp(8px, .7vw, 14px) !important;
}

#contact .contact_details_main_title {
    font-family: var(--zyang-sans) !important;
    font-weight: 400 !important;
}

#contact .contact_details_column,
#contact .contact_details_column p,
#contact .contact_details_column a {
    font-family: var(--zyang-sans) !important;
    font-weight: 400 !important;
}

#contact .contact_details_column strong {
    display: inline-block !important;
    margin-bottom: .12em !important;
    font-family: var(--zyang-mono) !important;
    font-weight: 500 !important;
}

#contact .contact_details_column a {
    text-decoration: underline !important;
    text-underline-offset: .08em !important;
}

.project_images > .project_two_images:nth-child(2) .project_image_container:first-child {
    width: 33.33% !important;
    padding-right: 1.379310344827585vw !important;
    padding-left: 0 !important;
}

.project_images > .project_two_images:nth-child(2) .project_image_container:last-child {
    width: 66.67% !important;
    padding-left: .6896551724137927vw !important;
    padding-right: 0 !important;
}

.project_images > .project_two_images:nth-child(4) .project_image_container:first-child {
    width: 25.42% !important;
}

.project_images > .project_two_images:nth-child(4) .project_image_container:last-child {
    width: 74.58% !important;
}

.project_images .project_two_images:has(img[src*="fushi-creek-detail-09"]):has(img[src*="fushi-creek-detail-10"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2.068965517241379vw !important;
}

.project_images .project_two_images:has(img[src*="fushi-creek-detail-09"]):has(img[src*="fushi-creek-detail-10"])::after {
    display: none !important;
}

.project_images .project_two_images:has(img[src*="fushi-creek-detail-09"]):has(img[src*="fushi-creek-detail-10"]) .project_image_container {
    float: none !important;
    padding: 0 !important;
}

.project_images .project_two_images:has(img[src*="fushi-creek-detail-09"]):has(img[src*="fushi-creek-detail-10"]) .project_image_container:first-child {
    width: calc((100% - 2.068965517241379vw) * .617) !important;
}

.project_images .project_two_images:has(img[src*="fushi-creek-detail-09"]):has(img[src*="fushi-creek-detail-10"]) .project_image_container:last-child {
    width: calc((100% - 2.068965517241379vw) * .383) !important;
}

.project_images .project_two_images:has(img[src*="chinese-medicine-packaging-detail-05"]):has(img[src*="chinese-medicine-packaging-detail-06"]) {
    display: flex !important;
    align-items: flex-start !important;
    gap: 2.068965517241379vw !important;
}

.project_images .project_two_images:has(img[src*="chinese-medicine-packaging-detail-05"]):has(img[src*="chinese-medicine-packaging-detail-06"])::after {
    display: none !important;
}

.project_images .project_two_images:has(img[src*="chinese-medicine-packaging-detail-05"]):has(img[src*="chinese-medicine-packaging-detail-06"]) .project_image_container {
    float: none !important;
    width: calc((100% - 2.068965517241379vw) / 2) !important;
    padding: 0 !important;
}