:root { --layout-unit: 1vw; --header-unit: 1vw; --site-header-height: 72px; --site-font: "Noto Sans SC", "Noto Sans", sans-serif; }
/* Each value shares one neutral style; emphasis is a hover state only. */
.desktop .value-item,
.home-content .value-item {
  position: absolute;
  left: 12.135417vw;
  left: calc(12.13542vw);
  left: calc(12.13542 * var(--layout-unit));
  width: 31.25vw;
  width: calc(31.25vw);
  width: calc(31.25 * var(--layout-unit));
  height: 4.6875vw;
  height: calc(4.6875vw);
  height: calc(4.6875 * var(--layout-unit));
}

.value-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #eaf1f3;
  transition: background-color 280ms ease;
}

.value-icon img {
  display: block;
  width: 56%;
  height: 56%;
  object-fit: contain;
  -webkit-filter: brightness(0) invert(0.67);
          filter: brightness(0) invert(0.67);
  transition: -webkit-filter 280ms ease;
  transition: filter 280ms ease;
  transition: filter 280ms ease, -webkit-filter 280ms ease;
}

.desktop .value-icon,
.home-content .value-icon {
  width: 4.6875vw;
  width: calc(4.6875vw);
  width: calc(4.6875 * var(--layout-unit));
  height: 4.6875vw;
  height: calc(4.6875vw);
  height: calc(4.6875 * var(--layout-unit));
  border-radius: 0.3125vw;
  border-radius: calc(.3125vw);
  border-radius: calc(.3125 * var(--layout-unit));
}

.desktop .value-item .live-text,
.home-content .value-item .live-text,

.mobile .value-item h3,

.mobile .value-item p {
  color: #333;
  transition: color 280ms ease;
}

.mobile .value-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}

@media (hover: hover) and (pointer: fine) {
  .value-item:hover .value-icon {
    background-color: #023b80;
  }

  .value-item:hover .value-icon img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }

  .desktop .value-item:hover .live-text,
.home-content .value-item:hover .live-text,

  .mobile .value-item:hover h3,

  .mobile .value-item:hover p {
    color: #023b80;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value-icon,

  .value-icon img,

  .desktop .value-item .live-text,

  .home-content .value-item .live-text,

  .mobile .value-item h3,

  .mobile .value-item p {
    transition: none;
  }
}

.desktop .value-item-1,
.home-content .value-item-1 {
  top: 12.916667vw;
  top: calc(12.91667vw);
  top: calc(12.91667 * var(--layout-unit));
}

.desktop .value-item-2,
.home-content .value-item-2 {
  top: 19.531250vw;
  top: calc(19.53125vw);
  top: calc(19.53125 * var(--layout-unit));
}

.desktop .value-item-3,
.home-content .value-item-3 {
  top: 26.354167vw;
  top: calc(26.35417vw);
  top: calc(26.35417 * var(--layout-unit));
}

.desktop .value-item-4,
.home-content .value-item-4 {
  top: 32.968750vw;
  top: calc(32.96875vw);
  top: calc(32.96875 * var(--layout-unit));
}

/* Enlarge the photo slowly inside its fixed frame; the caption stays still. */
.values-visual {
  position: relative;
}

.values-photo-frame {
  margin: 0;
  overflow: hidden;
}

.values-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
  transform: scale(1);
  transition: transform 1600ms cubic-bezier(0.2, 0.65, 0.35, 1);
}

.desktop .values-visual,
.home-content .values-visual {
  position: absolute;
  top: 6.145833vw;
  top: calc(6.14583vw);
  top: calc(6.14583 * var(--layout-unit));
  left: 50.729167vw;
  left: calc(50.72917vw);
  left: calc(50.72917 * var(--layout-unit));
  width: 36.666667vw;
  width: calc(36.66667vw);
  width: calc(36.66667 * var(--layout-unit));
  height: 32.395833vw;
  height: calc(32.39583vw);
  height: calc(32.39583 * var(--layout-unit));
}

.desktop .values-photo-frame,
.home-content .values-photo-frame {
  width: 34.0625vw;
  width: calc(34.0625vw);
  width: calc(34.0625 * var(--layout-unit));
  height: 100%;
}

.values-caption {
  position: absolute;
  background: #023b80;
  color: #fff;
}

.desktop .values-caption,
.home-content .values-caption {
  top: 15.833333vw;
  top: calc(15.83333vw);
  top: calc(15.83333 * var(--layout-unit));
  left: 14.947917vw;
  left: calc(14.94792vw);
  left: calc(14.94792 * var(--layout-unit));
  width: 21.71875vw;
  width: calc(21.71875vw);
  width: calc(21.71875 * var(--layout-unit));
  height: 10.78125vw;
  height: calc(10.78125vw);
  height: calc(10.78125 * var(--layout-unit));
  border-radius: 1.354167vw;
  border-radius: calc(1.35417vw);
  border-radius: calc(1.35417 * var(--layout-unit));
}

.mobile .values-visual {
  margin-bottom: 24px;
}

.mobile .values-photo-frame {
  border-radius: 16px;
}

.mobile .values-photo-frame img {
  height: auto;
  max-height: 480px;
}

.mobile .values-caption {
  right: 0;
  bottom: 24px;
  max-width: 85%;
  padding: 16px;
  border-radius: 12px 0 0 12px;
}

.mobile .values-caption p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.8;
}

@media (hover: hover) and (pointer: fine) {
  .values-visual:hover .values-photo-frame img {
    transform: scale(1.045);
  }
}

@media (prefers-reduced-motion: reduce) {
  .values-photo-frame img {
    transition: none;
  }

  .values-visual:hover .values-photo-frame img {
    transform: none;
  }
}
  html.legacy-browser .value-item:hover .value-icon {
    background-color: #023b80;
  }

  html.legacy-browser .value-item:hover .value-icon img {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }

  html.legacy-browser .desktop .value-item:hover .live-text,
html.legacy-browser .home-content .value-item:hover .live-text,
html.legacy-browser .mobile .value-item:hover h3,
html.legacy-browser .mobile .value-item:hover p {
    color: #023b80;
  }
  html.legacy-browser .values-visual:hover .values-photo-frame img {
    transform: scale(1.045);
  }