/* Product case page. Keep every rule scoped to this page's own modules. */
.banner:has(> .back) {
  position: relative;
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: #f5f7ff;
}

.banner:has(> .back) > .back {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top;
}

#app .banner:has(> .back) > .content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.banner:has(> .back) > .content > .title {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 9%;
  text-align: center;
}

.banner:has(> .back) > .content > .title > h2 {
  margin: 0;
  color: transparent;
  background: linear-gradient(90deg, #2c52ff00 0%, #2c52ff 51.44%, #2c52ff00 100%);
  background-clip: text;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  font-family: Phudu, Chonburi, OPPOSans, sans-serif;
  font-weight: 400;
  font-size: 200px;
  line-height: 245px;
  white-space: nowrap;
}

.banner:has(> .back) > .content > .banner-pro {
  position: absolute;
  left: 50%;
  z-index: 1;
  display: block;
  width: min(38.5vw, 722px);
  height: auto;
  max-width: none;
  margin: 0;
  object-fit: contain;
  transform: translateX(-50%);
  bottom: 44%;
  z-index: 5;
}

.catalog {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  margin-top: -350px;
  padding: 0 0 92px;
  scroll-margin-top: var(--header-stack-height, 80px);
}

.catalog > .inner {
  display: grid;
  grid-template-columns: minmax(250px, 28%) minmax(0, 1fr);
  align-items: start;
  width: 84%;
  margin: 0 auto;
  gap: 24px;
}

.catalog > .inner > .section1 {
  position: sticky;
  top: var(--header-stack-height, 80px);
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.catalog > .inner > .section1 > .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.catalog > .inner > .section1 > .item > .menu1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 32px;
  gap: 16px;
  cursor: default;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #ffffff99;
  box-sizing: border-box;
  background: #dddddd4d;
  backdrop-filter: blur(47px);
  margin-bottom: 3px;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 {
  display: flex;
  min-width: 0;
  transition: color 0.35s ease, transform 0.35s ease;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 > p {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 2px;
  transition: color 0.35s ease;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 > p::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #2c52ff;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:hover > .text1,
.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:focus-visible > .text1,
.catalog > .inner > .section1 > .item.item-active > .menu1 > .menu1-link > .text1 {
  transform: translateX(4px);
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:hover > .text1 > p,
.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:focus-visible > .text1 > p,
.catalog > .inner > .section1 > .item.item-active > .menu1 > .menu1-link > .text1 > p {
  color: #2c52ff;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:hover > .text1 > p::after,
.catalog > .inner > .section1 > .item > .menu1 > .menu1-link:focus-visible > .text1 > p::after,
.catalog > .inner > .section1 > .item.item-active > .menu1 > .menu1-link > .text1 > p::after {
  transform: scaleX(1);
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 > p {
  overflow: hidden;
  color: #000000;
  font-family: OPPOSans;
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-toggle {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-toggle:focus-visible {
  outline: 2px solid #2c52ff;
  outline-offset: 2px;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-toggle > .icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-toggle > .icon > svg {
  display: none;
}

.catalog > .inner > .section1 > .item:not(.item-open) > .menu1 > .menu1-toggle > .icon > .icon-add,
.catalog > .inner > .section1 > .item.item-open > .menu1 > .menu1-toggle > .icon > .icon-sub {
  display: block;
}

.catalog > .inner > .section1 > .item > .menu2 {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #ffffff99;
  box-sizing: border-box;
  background: #dddddd4d;
  backdrop-filter: blur(47px);
}

.catalog > .inner > .section1 > .item.item-open > .menu2 {
  display: flex;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 13px 0;
  gap: 12px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .text2 {
  display: flex;
  min-width: 0;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .text2 > p {
  overflow: hidden;
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 21px;
  line-height: 28px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.5s ease;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .icon {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one.menu2-one-active > .text2 > p {
  color: #2c52ff;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one:hover > .text2 > p,
.catalog > .inner > .section1 > .item > .menu2 > .menu2-one:focus-visible > .text2 > p {
  color: #2c52ff;
  transform: translateX(4px);
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one:hover > .icon,
.catalog > .inner > .section1 > .item > .menu2 > .menu2-one:focus-visible > .icon,
.catalog > .inner > .section1 > .item > .menu2 > .menu2-one.menu2-one-active > .icon {
  display: flex;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .text2 > p,
.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .icon {
  transition: color 0.35s ease, transform 0.35s ease;
}

.catalog > .inner > .section2 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.catalog > .inner > .section2 > .section2-top {
  display: flex;
  width: 100%;
  padding: 24px 40px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff7a 0%, #f5f7ff7a 100%);
  backdrop-filter: blur(7px);
}

.catalog > .inner > .section2 > .section2-top > p {
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 22px;
  line-height: 39px;
}

.catalog > .inner > .section2 > .section2-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  width: 100%;
  gap: 26px;
}

.catalog > .inner > .section2 > .section2-bottom > .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 16px 18px 20px;
  border-radius: 10px;
  background: #ffffff;
  transition: box-shadow 0.5s ease;
}

.catalog > .inner > .section2 > .section2-bottom > a.item {
  color: inherit;
  text-decoration: none;
}

.catalog > .inner > .section2 > .section2-bottom > .item[hidden] {
  display: none;
}

.catalog > .inner > .section2 > .section2-bottom > .item:hover {
  box-shadow: 0 23px 48px #ccced86e;
}

.catalog > .inner > .section2 > .section2-bottom > .item > .img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 0.88;
}

.catalog > .inner > .section2 > .section2-bottom > .item > .img > img {
  display: block;
  width: 80%;
  height: 80%;
  object-fit: contain;
  transition: transform 0.5s ease;
}

.catalog > .inner > .section2 > .section2-bottom > .item:hover > .img > img {
  transform: scale(1.05);
}

.catalog > .inner > .section2 > .section2-bottom > .item > .title {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  text-align: center;
}

.catalog > .inner > .section2 > .section2-bottom > .item > .title > p {
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 22px;
  line-height: 29px;
}

.catalog > .inner > .section2 > .section2-bottom > .item > .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

.catalog > .inner > .section2 > .section2-bottom > .item > .icon > svg {
  display: block;
}

.catalog > .inner > .section2 > .section2-bottom > .item:hover > .icon > svg path {
  stroke: #2c52ff;
}

.catalog > .inner > .section2 > .page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
}

.catalog > .inner > .section2 > .page[hidden] { display: none; }

.catalog > .inner > .section2 > .page > .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 130px;
  transform: translateY(-10px);
}

.catalog > .inner > .section2 > .page > .current > .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 30px;
  padding: 0 4px;
  color: #333333;
  font: inherit;
  line-height: 30px;
  text-decoration: none;
  cursor: pointer;
}

.catalog > .inner > .section2 > .page > .current > .num:hover,
.catalog > .inner > .section2 > .page > .current > .num:focus-visible {
  color: #2c52ff;
}

.catalog > .inner > .section2 > .page > .current > .num.num-activer {
  color: #2c52ff;
  font-weight: 500;
  cursor: default;
}

.catalog > .inner > .section2 > .page > .current > .pagination-ellipsis {
  cursor: default;
  pointer-events: none;
}

.catalog > .inner > .section2 > .page > .prev,
.catalog > .inner > .section2 > .page > .next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
}

.catalog > .inner > .section2 > .page > .prev.is-disabled,
.catalog > .inner > .section2 > .page > .next.is-disabled {
  cursor: default;
  opacity: 0.35;
}

.solution {
  display: flex;
  width: 100%;
  padding: 44px 0;
  background: #2c52ff;
  box-shadow: 0 20px 20px #00000005;
  margin-top: 70px;
}

.solution > .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 84%;
  margin: 0 auto;
  gap: 24px;
}

.solution > .inner > .title {
  display: flex;
  min-width: 0;
}

.solution > .inner > .title > p {
  color: #ffffff;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 34px;
  line-height: 45px;
}

.solution > .inner > .btn {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 14px 40px;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  gap: 10px;
}

.solution > .inner > .btn > p {
  color: #2c52ff;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: clamp(14px, calc(0.2217vw + 13.1685px), 17px);
  line-height: 24px;
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.solution > .inner > .btn > svg {
  display: block;
  transition: transform 0.5s cubic-bezier(.16, 1, .3, 1);
}

.solution > .inner > .btn:hover > svg,
.solution > .inner > .btn:focus-visible > svg {
  transform: translateX(6px) scale(.9);
}

.solution > .inner > .btn > p { position: relative; display: grid; place-items: center; overflow: hidden; transform: none !important; }
.solution > .inner > .btn > p > .cta-label,
.solution > .inner > .btn > p > .cta-label-hover { display: block; grid-area: 1 / 1; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.solution > .inner > .btn > p > .cta-label-hover { position: static; transform: translateY(100%) scale(.9); }
.solution > .inner > .btn:hover > p > .cta-label,
.solution > .inner > .btn:focus-visible > p > .cta-label { transform: translateY(-100%) scale(.7); }
.solution > .inner > .btn:hover > p > .cta-label-hover,
.solution > .inner > .btn:focus-visible > p > .cta-label-hover { transform: translateY(0) scale(1); }

.supply {
  display: flex;
  width: 100%;
  padding: 92px 0 112px;
  background: #f5f7ff;
}

.supply > .inner {
  display: flex;
  flex-direction: column;
  width: 84%;
  margin: 0 auto;
}

.supply > .inner > .section1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.supply > .inner > .section1 > .title {
  display: flex;
  justify-content: center;
}

.supply > .inner > .section1 > .title > p {
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 42px;
  line-height: 55px;
}

.supply > .inner > .section1 > .desc {
  display: flex;
  justify-content: center;
  margin-top: 17px;
}

.supply > .inner > .section1 > .desc > p {
  color: #666666;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 22px;
  line-height: 29px;
}

.supply > .inner > .section2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin-top: 75px;
  gap: 26px;
}

.supply > .inner > .section2 > .item {
  position: relative;
  display: flex;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 1.03 / 1;
  border-radius: 10px;
  background: #ffffff;
}

.supply > .inner > .section2 > .item::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 52%;
  content: "";
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.94) 72%);
  pointer-events: none;
}

.supply > .inner > .section2 > .item > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.supply > .inner > .section2 > .item:hover > img {
  transform: scale(1.05);
}

#app .supply > .inner > .section2 > .item > .content {
  position: absolute;
  right: 26px;
  bottom: 24px;
  left: 26px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.supply > .inner > .section2 > .item > .content > .text1 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.supply > .inner > .section2 > .item > .content > .text1 > img {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.5s ease;
}

.supply > .inner > .section2 > .item:hover > .content > .text1 > img {
  transform: rotateY(360deg);
}

.supply > .inner > .section2 > .item > .content > .text1 > p {
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
}

.supply > .inner > .section2 > .item > .content > .text2 {
  display: flex;
  width: 100%;
}

.supply > .inner > .section2 > .item > .content > .text2 > p {
  color: #000000;
  font-family: OPPOSans;
  font-weight: 400;
  font-size: clamp(14px, calc(0.4435vw + 12.3370px), 20px);
  line-height: 26px;
}

/* Responsive system aligned with index.css and about.css. */
.banner:has(> .back),
.catalog,
.solution,
.supply {
  --pros-space: clamp(40px, calc(3.0381944444vw + 16.6666666667px), 75px);
}

.banner:has(> .back) > .content > .title > h2 {
  font-size: clamp(52px, 11.574vw, 200px);
  line-height: 1.225;
}

.banner:has(> .back) > .content > .banner-pro {
  width: min(38.5vw, 722px);
}

@media (max-width: 1280px) {

}

.catalog > .inner,
.solution > .inner,
.supply > .inner {
  width: 82%;
}

.catalog > .inner > .section1 > .item > .menu1,
.catalog > .inner > .section1 > .item > .menu2 {
  padding: clamp(18px, 1.736vw, 30px);
}

.catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 > p {
  font-size: clamp(18px, 1.389vw, 24px);
  line-height: 1.34;
}

.catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .text2 > p {
  font-size: clamp(16px, 1.215vw, 21px);
  line-height: 1.34;
}

.catalog > .inner > .section2 > .section2-top {
  padding: clamp(18px, 1.389vw, 24px) clamp(22px, 2.315vw, 40px);
}

.catalog > .inner > .section2 > .section2-top > p {
  font-size: clamp(17px, 1.273vw, 22px);
  line-height: 1.77;
}

.catalog > .inner > .section2 > .section2-bottom {
  gap: clamp(16px, 1.505vw, 26px);
}

.catalog > .inner > .section2 > .section2-bottom > .item > .title > p {
  font-size: clamp(17px, 1.273vw, 22px);
  line-height: 1.32;
}

.solution,
.supply {
  padding-top: var(--pros-space);
  padding-bottom: var(--pros-space);
}

.solution > .inner > .title > p {
  font-size: clamp(24px, 1.968vw, 34px);
  line-height: 1.32;
}

.supply > .inner > .section1 > .title > p {
  font-size: clamp(28px, 2.431vw, 42px);
  line-height: 1.31;
}

.supply > .inner > .section1 > .desc > p {
  font-size: clamp(16px, 1.273vw, 22px);
  line-height: 1.32;
}

.supply > .inner > .section2 {
  margin-top: clamp(36px, 4.34vw, 75px);
  gap: clamp(16px, 1.505vw, 26px);
}

#app .supply > .inner > .section2 > .item > .content {
  right: clamp(14px, 1.505vw, 26px);
  bottom: clamp(14px, 1.389vw, 24px);
  left: clamp(14px, 1.505vw, 26px);
}

.supply > .inner > .section2 > .item > .content > .text1 > p {
  font-size: clamp(18px, 1.389vw, 24px);
  line-height: 1.34;
}

.supply > .inner > .section2 > .item > .content > .text2 > p {
  font-size: clamp(15px, 1.157vw, 20px);
  line-height: 1.3;
}
@media (max-width: 1440px) {
.catalog{
  margin-top: -250px;  
}
}
@media (max-width: 1280px) {
  
.catalog{
  margin-top: -150px;  
}
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 86%; }

  .catalog > .inner { grid-template-columns: minmax(230px, 28%) minmax(0, 1fr); }
}

@media (max-width: 1280px) {
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 90%; }

  .catalog > .inner > .section2 > .section2-top > p { line-height: 1.62; }
}

@media (max-width: 1280px) {
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 92%; }

  .catalog > .inner { gap: 20px; grid-template-columns: minmax(210px, 28%) minmax(0, 1fr); }
  .catalog > .inner > .section1 > .item > .menu1,
  .catalog > .inner > .section1 > .item > .menu2 { padding: 22px; }
  .catalog > .inner > .section2 > .section2-top { padding: 20px 28px; }
  .catalog > .inner > .section2 > .section2-bottom { margin-top: 28px; }
  .supply > .inner > .section2 { gap: 20px; }
}

@media (max-width: 1024px) {
  .banner:has(> .back) > .content > .title { margin-top: 9%; }
  .banner:has(> .back) > .content > .title > h2 { font-size: clamp(64px, 12.5vw, 128px); }
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 92%; }
  .catalog > .inner { grid-template-columns: minmax(190px, 27%) minmax(0, 1fr); gap: 18px; }
  .catalog > .inner > .section1 > .item > .menu1,
  .catalog > .inner > .section1 > .item > .menu2 { padding: 18px; }
  .catalog > .inner > .section2 > .section2-top { padding: 18px 22px; }
  .catalog > .inner > .section2 > .section2-top > p { font-size: clamp(14px, calc(0.2217vw + 13.1685px), 17px); line-height: 1.55; }
  .catalog > .inner > .section2 > .section2-bottom { gap: 14px; margin-top: 22px; }
  .catalog > .inner > .section2 > .section2-bottom > .item { padding: 12px 12px 16px; }
  .solution > .inner > .title > p { font-size: 26px; }
  .supply > .inner > .section2 { gap: 16px; }
}

@media (max-width: 820px) {
  .banner:has(> .back) > .content > .title > h2 { font-size: clamp(58px, 13vw, 106px); }
  .catalog > .inner { grid-template-columns: 1fr; gap: 24px; }
  .catalog > .inner > .section1 { position: static; }
  .catalog > .inner > .section1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .catalog > .inner > .section1 > .item > .menu1,
  .catalog > .inner > .section1 > .item > .menu2 { padding: 14px; }
  .catalog > .inner > .section1 > .item > .menu1 > .menu1-link > .text1 > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); line-height: 1.35; }
  .catalog > .inner > .section1 > .item > .menu2 > .menu2-one > .text2 > p { font-size: 14px; line-height: 1.4; }
  .catalog > .inner > .section2 > .section2-top { padding: 18px 22px; }
  .catalog > .inner > .section2 > .section2-bottom { gap: 12px; }
  .solution > .inner > .title > p { font-size: 24px; }
  .supply > .inner > .section2 { gap: 14px; }
}

@media (max-width: 768px) {
  .banner:has(> .back) > .content > .title { margin-top: 12%; }
  .banner:has(> .back) > .content > .title > h2 { font-size: clamp(52px, 14.3vw, 110px); }
  .catalog { margin-top: clamp(-76px, -10vw, -42px); padding-top: 0; }
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 94%; }
  .catalog, .supply { padding-top: var(--pros-space); padding-bottom: var(--pros-space); }
  .catalog > .inner > .section2 > .section2-top > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); line-height: 1.6; }
  .solution > .inner > .title > p { font-size: 22px; line-height: 1.35; }
  .solution > .inner > .btn { padding: 11px 24px; }
  .supply > .inner > .section1 > .title > p { font-size: 30px; }
  .supply > .inner > .section1 > .desc > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); }
  .supply > .inner > .section2 { margin-top: 32px; }
  #app .supply > .inner > .section2 > .item > .content { right: 14px; bottom: 14px; left: 14px; }
  .supply > .inner > .section2 > .item > .content > .text1 > p { font-size: clamp(14px, calc(0.2956vw + 12.8914px), 18px); }
  .supply > .inner > .section2 > .item > .content > .text2 > p { font-size: clamp(14px, calc(0.0739vw + 13.7228px), 15px); }
  .solution{
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  .banner:has(> .back) > .content > .title > h2 { font-size: clamp(44px, 14vw, 88px); }
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 94%; }
  .catalog > .inner > .section1 { grid-template-columns: 1fr; }
  .catalog > .inner > .section1 > .item > .menu1 { padding: 14px 16px; }
  .catalog > .inner > .section2 > .section2-top { padding: 16px 18px; }
  .catalog > .inner > .section2 > .section2-top > p { font-size: clamp(14px, calc(0.0739vw + 13.7228px), 15px); line-height: 1.6; }
  .catalog > .inner > .section2 > .section2-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog > .inner > .section2 > .section2-bottom > .item > .title > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); }
  .solution > .inner { align-items: flex-start; flex-direction: column; gap: 14px; }
  .solution > .inner > .title > p { font-size: clamp(14px, calc(0.4435vw + 12.3370px), 20px); }
  .supply > .inner > .section1 > .title > p { font-size: 26px; }
  .supply > .inner > .section2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .supply > .inner > .section2 > .item > .content > .text1 > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); }
  .supply > .inner > .section2 > .item > .content > .text2 > p { font-size: 14px; }
}

@media (max-width: 414px) {
  .banner:has(> .back) > .content > .title > h2 { font-size: 42px; line-height: 1.2; }
  .catalog, .supply { padding-top: 40px; padding-bottom: 48px; }
  .catalog { margin-top: -34px; }
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 94%; }
  .catalog > .inner > .section2 > .section2-bottom { grid-template-columns: 1fr; }
  .catalog > .inner > .section2 > .section2-top > p { font-size: 14px; }
  .solution { padding: 28px 0; }
  .solution > .inner > .title > p { font-size: clamp(14px, calc(0.3695vw + 12.6142px), 19px); }
  .supply > .inner > .section1 > .title > p { font-size: 23px; }
  .supply > .inner > .section1 > .desc > p { font-size: 14px; }
  .supply > .inner > .section2 { grid-template-columns: 1fr; gap: 14px; }
  .supply > .inner > .section2 > .item > .content > .text1 > p { font-size: clamp(14px, calc(0.1478vw + 13.4457px), 16px); }
  .supply > .inner > .section2 > .item > .content > .text2 > p { font-size: clamp(14px, calc(0.0739vw + 13.7228px), 15px); }
  body #app>.page-header-offset,
  body .app>.page-header-offset {
    margin-top: var(--header-stack-height, 64px) !important;
  }
}

@media (max-width: 375px) {
  .banner:has(> .back) > .content > .title > h2 { font-size: 38px; }
  .catalog { margin-top: -30px; }
  .catalog > .inner,
  .solution > .inner,
  .supply > .inner { width: 95%; }
  .catalog > .inner > .section2 > .section2-top > p { font-size: 14px; }
  .solution > .inner > .title > p { font-size: clamp(14px, calc(0.2956vw + 12.8914px), 18px); }
  .supply > .inner > .section1 > .title > p { font-size: 21px; }
}

.catalog > .inner > .section2 > .section2-bottom > .item,
.catalog > .inner > .section2 > .section2-bottom > .item > .img > img,
.solution > .inner > .btn > svg,
.supply > .inner > .section2 > .item > img,
.supply > .inner > .section2 > .item > .content > .text1 > img {
  transition-duration: 0.5s;
}