:root {
  --base-color: #256de4;
  --hightlight-color: #cd1318;
  --btn-bg: linear-gradient(to bottom, #fadd80, #f2b95e);
  --btn-bg-hover: linear-gradient(to bottom, #f2b95e, #fadd80);
  --btn-color: #ce171c;
}

h3 {
  font-size: 2.5rem;
  letter-spacing: 0.2rem;
  line-height: 1;
}

h4 {
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
  line-height: 1;
}

.hightlight {
  color: var(--hightlight-color);
}

.btns a {
  background-image: var(--btn-bg);
  color: var(--btn-color);
  width: auto;
  height: 3.5rem;
  line-height: 3.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
}

.btns a:hover {
  background-image: var(--btn-bg-hover);
}

.biz {
  background-color: var(--base-color);
  color: #fff;
}

.biz .grid-item {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  line-height: 3.2rem;
  background-color: #fff;
  color: #000;
  border-radius: 0.5rem;
}

.advantage {
  background-color: #deebff;
}
.advantage h3 {
  line-height: 1.3;
  background-color: var(--base-color);
  color: #fff;
  padding: 1rem 0;
  position: relative;
}

.advantage h3::after {
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  border: 1rem solid transparent;
  border-top-color: var(--base-color);
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translate(-50%, 0);
}

.advantage .header span {
  display: inline-block;
  height: 4rem;
  line-height: 3rem;
  background: url(/static/images/gz_20250414/advantage-item.png) left top/cover no-repeat;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  color: var(--hightlight-color);
  padding-left: 2rem;
  padding-right: 5rem;
  position: relative;
}

.advantage .content {
  background-color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  border-radius: 0.5rem;
  box-shadow: 0 0 0.15rem rgba(50, 50, 50, 0.1),
    0 0.15rem 0.15rem rgba(50, 50, 50, 0.2);
  position: relative;
  top: -1rem;
}

.advantage .content-item {
  padding-left: 2rem;
  background: url(/static/images/gz_20250414/tick.png) left center/contain no-repeat;
}
.advantage .content-item span {
  color: var(--hightlight-color);
  font-style: italic;
  font-size: 1.3rem;
}

.authenticity {
  background: url(/static/images/gz_20250414/authenticity.png) right top/50vw auto no-repeat
    var(--base-color);
}

.authenticity h3 {
  line-height: 1.3;
  color: #fff;
  text-align: left;
  padding-left: 2rem;
}

.authenticity .grid-item {
  font-size: 1.4rem;
  line-height: 4rem;
  font-weight: bold;
  background-color: #fff;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
}

.authenticity .grid-item i {
  color: var(--base-color);
  font-size: 2.5rem;
  padding-right: 1rem;
  vertical-align: bottom;
}

.realcase h3 {
  color: var(--base-color);
}

.realcase .grid-item span {
  display: block;
  line-height: 2rem;
  height: 2rem;
  font-size: 1.2rem;
  font-weight: bold;
}

.nb {
  background: var(--base-color);
  color: #fff;
}

.nb h4 {
  line-height: 5rem;
}

.nb h4 span {
  color: #ffcc28;
  font-size: 2rem;
}

.nb h4 i {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background: url(/static/images/gz_20250414/like.png) center/cover no-repeat;
  vertical-align: sub;
  margin-right: 1rem;
}

.fixed-bottom {
  position: fixed;
}