:root {
  --brand:#095cd7;
  --accent:#0067fa;
  --teal:#14a1b5;
  --text:#303e65;
  --muted:#5d6c89;
  --section:#f7f9fc;
  --line:#d6e2f3;
  --font:"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  color:var(--text);
  font-family:var(--font);
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

a {
  color:inherit;
  text-decoration:none;
}

.section-container {
  width:min(1440px,calc(100% - 48px));
  max-width:none;
  margin-inline:auto;
  padding-right:0;
  padding-left:0;
}

.section-title {
  display:flex;
  position:relative;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 0 54px;
  color:#20365d;
  font-size:clamp(1.65rem,1.45rem + .8vw,2rem);
  line-height:1.35;
  font-weight:700;
  letter-spacing:.04em;
  text-align:center;
}

.section-title span {
  position:relative;
  z-index:0;
  padding:0 18px 3px;
}

.section-title span::before {
  position:absolute;
  z-index:-1;
  right:8px;
  bottom:2px;
  left:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(0,103,250,.05),rgba(65,196,207,.13),rgba(0,103,250,.05));
  content:"";
}

.section-title::before {
  content:none;
}

.section-title::after {
  width:58px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#1875ec,#62c7d1);
  content:"";
}

.stainer-hero {
  min-height:651px;
  padding:86px 0 50px;
  background:url("../assets/product-stainer/hero-background.webp") center/cover no-repeat;
}

.stainer-hero__grid {
  display:grid;
  grid-template-columns:minmax(420px,580px) minmax(0,1fr);
  gap:85px;
  align-items:center;
  padding-top:45px;
}

.stainer-hero figure {
  margin:0;
}

.stainer-hero__copy h1 {
  margin:0 0 26px;
  color:#1b1f25;
  font-size:clamp(2.25rem,2rem + 1.2vw,3.375rem);
  line-height:1.12;
  font-weight:700;
}

.stainer-hero__copy>p {
  max-width:690px;
  margin:16px 0;
  color:var(--text);
  font-size:18px;
  line-height:1.75;
  text-align:justify;
}

.stainer-model {
  display:flex;
  align-items:center;
  gap:12px!important;
  color:#596b80!important;
}

.stainer-model b {
  padding:4px 18px;
  border-radius:999px;
  color:#fff;
  background:var(--accent);
}

.stainer-tags {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  margin-top:32px;
}

.stainer-tags span {
  min-width:190px;
  padding:8px 22px;
  border:2px solid #a6bfed;
  border-radius:999px;
  color:var(--brand);
  font-size:20px;
  text-align:center;
}

.process {
  padding:72px 0 84px;
  background:#fff;
}

.process .section-title {
  margin-bottom:62px;
  line-height:28px;
}

.process-grid {
  display:grid;
  grid-template-columns:minmax(380px,520px) 204px minmax(390px,532px);
  gap:clamp(32px,4.583vw,88px);
  align-items:center;
  justify-content:center;
}

.process-step {
  position:relative;
  display:grid;
  grid-template-columns:120px minmax(150px,1fr) auto;
  align-items:center;
  min-height:120px;
  padding:0 20px 0 0;
  border:2px solid #ebeff6;
  border-radius:12px;
  background:#fff;
}

.process-step__number {
  width:120px;
  height:120px;
  margin-left:20px;
  transform:translateX(-12px);
}

.process-step h3 {
  margin:0 0 8px;
  color:#000;
  font-size:22px;
  font-weight:400;
}

.process-step p {
  margin:0;
  color:#81838d;
  font-size:16px;
}

.process-step strong {
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--accent);
  font-size:16px;
  font-weight:400;
  white-space:nowrap;
}

.process-step strong img {
  width:28px;
  height:28px;
}

.process-step strong b {
  font-size:24px;
}

.process-step--second strong {
  color:var(--teal);
}

.process-total {
  position:relative;
  width:204px;
  aspect-ratio:1;
  background:url("../assets/product-stainer/process-total.svg") center/100% 100% no-repeat;
}

.process-total>div {
  position:absolute;
  z-index:2;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  align-content:center;
  color:var(--accent);
}

.process-total b {
  font-size:60px;
  line-height:1;
}

.process-total span {
  margin-top:26px;
  font-size:18px;
}

.process-total small {
  flex-basis:100%;
  margin-top:6px;
  color:#81838d;
  font-size:16px;
  text-align:center;
}

@media(min-width:1440px) {
  .process-step {
    display:block;
    height:120px;
    padding:0;
  }

  .process-step::after {
    position:absolute;
    top:23px;
    left:350px;
    width:2px;
    height:73px;
    content:"";
    background:#ebeff6;
  }

  .process-step--second::after {
    left:362px;
  }

  .process-step__number {
    position:absolute;
    top:0;
    left:45px;
    width:120px;
    height:120px;
    margin:0;
    transform:none;
  }

  .process-step>div {
    position:absolute;
    top:27px;
    left:177px;
  }

  .process-step h3 {
    margin:0 0 11px;
    font-size:24px;
    line-height:28px;
  }

  .process-step p {
    font-size:18px;
    line-height:28px;
  }

  .process-step strong {
    position:absolute;
    top:43px;
    left:370px;
    gap:9px;
    font-size:18px;
    line-height:28px;
  }

  .process-step--second strong {
    left:382px;
  }
}

.stainer-content {
  padding:84px 0;
  background:var(--section);
}

.advantages {
  padding-top:56px;
  padding-bottom:82px;
}

.advantages .section-title {
  margin-bottom:41px;
  line-height:28px;
}

.advantage-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:35px 41px;
  margin:0;
  --bs-gutter-x:0;
  --bs-gutter-y:0;
}

.advantage-grid>[class*="col-"] {
  width:auto;
  padding:0;
}

.advantage-grid article {
  height:259px;
  padding:12px 24px 20px;
  border:2px solid #e9eff5;
  border-radius:16px;
  background:#fff;
  text-align:center;
}

.advantage-grid img {
  width:120px;
  height:120px;
  margin:0 auto;
}

.advantage-grid h3 {
  max-width:155px;
  margin:0 auto 19px;
  color:#303e65;
  font-size:18px;
  line-height:28px;
}

.advantage-grid p {
  max-width:202px;
  margin:0 auto;
  color:var(--muted);
  font-size:14px;
  line-height:24px;
}

.modules {
  padding-top:84px;
  padding-bottom:90px;
}

.modules .section-title {
  margin-bottom:73px;
  line-height:28px;
}

.modules-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:24px;
}

.modules-grid>[class*="col-"] {
  width:auto;
  padding:0;
}

.modules-grid article {
  overflow:hidden;
  height:375px;
  border:2px solid #e9eff5;
  border-radius:16px;
  background:#f7f9fc;
}

.module-visual {
  display:grid;
  height:236px;
  place-items:center;
  border-bottom:2px solid #e9eff5;
  background:linear-gradient(145deg,#fff,#f3f8ff);
}

.module-visual span {
  color:#b7c7de;
  font-size:18px;
  font-weight:700;
  letter-spacing:.08em;
}

.modules-grid h3 {
  margin:16px 18px 10px;
  color:#303e65;
  font-size:16px;
  line-height:1.5;
}

.modules-grid p {
  margin:0 18px 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.65;
}

.stainer-specs {
  padding-top:62px;
  padding-bottom:102px;
}

.stainer-specs .section-title {
  margin-bottom:41px;
  line-height:28px;
}

.stainer-specs__grid {
  display:grid;
  grid-template-columns:1.05fr .9fr 1.2fr;
  gap:30px;
}

.stainer-specs__grid>[class*="col-"] {
  width:auto;
  padding:0;
}

.stainer-specs dl {
  margin:0;
  box-shadow:2px 3px 6px rgba(210,215,221,.25);
}

.stainer-specs dl>div {
  display:grid;
  grid-template-columns:145px minmax(0,1fr);
  min-height:44px;
  border-bottom:1px solid var(--line);
}

.stainer-specs dt,.stainer-specs dd {
  display:flex;
  align-items:center;
  margin:0;
  padding:9px 14px;
  font-size:14px;
  line-height:1.5;
}

.stainer-specs dt {
  justify-content:center;
  color:#0081fa;
  background:var(--section);
  font-weight:400;
}

.stainer-specs dd {
  background:#fff;
}

@media(max-width:1180px) {
  .stainer-hero__grid {
    grid-template-columns:minmax(340px,.9fr) 1.1fr;
    gap:42px;
  }

  .process-grid {
    grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr);
    gap:22px;
  }

  .process-step {
    grid-template-columns:90px minmax(0,1fr);
  }

  .process-step__number {
    width:90px;
    height:90px;
  }

  .process-step strong {
    grid-column:2;
    margin:8px 0 12px;
  }

  .process-total {
    width:160px;
  }

  .process-total b {
    font-size:46px;
  }

  .advantage-grid,.modules-grid {
    grid-template-columns:repeat(3,1fr);
  }

  .stainer-specs__grid {
    grid-template-columns:1fr 1fr;
  }

  .stainer-specs__grid>div:last-child {
    grid-column:1/-1;
  }

}

@media(max-width:760px) {
  .section-container {
    width:calc(100% - 32px);
  }

  .section-title {
    margin-bottom:36px;
  }

  .section-title span {
    padding-right:12px;
    padding-left:12px;
  }

  .section-title::after {
    width:48px;
  }

  .stainer-hero {
    padding-top:20px;
    background-position:35% center;
  }

  .stainer-hero__grid {
    display:flex;
    flex-direction:column;
    gap:22px;
  }

  .stainer-hero figure {
    order:2;
  }

  .stainer-hero__copy {
    order:1;
  }

  .stainer-hero__copy>p {
    text-align:left;
  }

  .stainer-tags {
    gap:10px;
  }

  .stainer-tags span {
    min-width:0;
    flex:1 1 130px;
    font-size:16px;
  }

  .process-grid {
    display:flex;
    flex-direction:column;
  }

  .process-step {
    width:100%;
    grid-template-columns:82px minmax(0,1fr);
  }

  .process-step__number {
    width:82px;
    height:82px;
    margin-left:8px;
  }

  .process-total {
    order:2;
  }

  .process-step--second {
    order:3;
  }

  .advantage-grid,.modules-grid {
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .advantage-grid article {
    height:auto;
    min-height:240px;
    padding:14px 10px;
  }

  .modules-grid article {
    height:auto;
    min-height:330px;
  }

  .module-visual {
    height:180px;
  }

  .stainer-specs__grid {
    grid-template-columns:1fr;
  }

  .stainer-specs__grid>div:last-child {
    grid-column:auto;
  }

  .stainer-specs dl>div {
    grid-template-columns:112px minmax(0,1fr);
  }

  .stainer-specs dt,.stainer-specs dd {
    padding:9px 10px;
  }

}

@media(max-width:420px) {
  .advantage-grid,.modules-grid {
    grid-template-columns:1fr;
  }

  .process-step h3 {
    font-size:18px;
  }

  .process-step p {
    font-size:14px;
  }

}

@media(max-width:760px) {

  .stainer-hero {
    min-height:0;
    padding-bottom:64px;
  }

  .stainer-hero__grid {
    gap:20px;
  }

  .stainer-hero__copy {
    display:contents;
  }

  .stainer-hero__copy h1 {
    order:1;
    width:100%;
    margin-bottom:0;
    font-size:1.875rem;
    line-height:1.2;
  }

  .stainer-hero figure {
    order:2;
    width:100%;
    margin:4px 0;
  }

  .stainer-model {
    order:3;
    width:100%;
    gap:8px!important;
  }

  .stainer-hero__copy>p {
    order:4;
    width:100%;
    margin:11px 0;
    font-size:.9375rem;
    line-height:1.7;
  }

  .stainer-model b {
    padding:2px 14px;
    font-size:.9375rem;
  }

  .stainer-tags {
    order:5;
    width:100%;
    flex-wrap:nowrap;
    gap:6px;
    margin-top:4px;
  }

  .stainer-tags span {
    min-width:0;
    flex:1 1 0;
    padding:5px 2px;
    font-size:clamp(.625rem,3vw,.75rem);
    white-space:nowrap;
  }

  .process-step {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    min-height:250px;
    padding:18px 14px;
    text-align:center;
  }

  .process-step__number {
    width:82px;
    height:82px;
    margin:0 0 10px;
    transform:none;
  }

  .process-step>div {
    width:100%;
  }

  .process-step strong {
    grid-column:auto;
    justify-content:center;
    margin:12px 0 0;
  }

}

.advantages .advantage-grid h3 {
  font-weight:700;
}

.advantages .advantage-grid p {
  font-weight:400;
}

.modules-grid h3 {
  font-size:1.125rem;
  line-height:1.55;
  font-weight:700;
  text-align:center;
}

.modules-grid p {
  font-size:.875rem;
  line-height:1.7;
  font-weight:400;
}

.module-visual {
  height:auto;
  aspect-ratio:267/236;
}

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

.stainer-specs {
  background:#fff;
}

@media(max-width:760px) {

  .process-step {
    min-height:190px;
    padding:12px 10px;
  }

  .process-step__number {
    width:64px;
    height:64px;
    margin-bottom:6px;
  }

  .process-step h3 {
    margin-bottom:5px;
    font-size:1.125rem;
  }

  .process-step p {
    font-size:.875rem;
    line-height:1.45;
  }

  .process-step strong {
    gap:5px;
    margin-top:8px;
    font-size:.875rem;
  }

  .process-step strong img {
    width:22px;
    height:22px;
  }

  .process-step strong b {
    font-size:1.25rem;
  }

}