app {
  background-color: #eff4f3;
}

.certificate-container {
  display: flex;
  flex-direction: column;
}

.certificate-wrapper {
  width: 100%;
  height: 580px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #9ee08b, #2cbe7b)
}

.energy-img {
  width: 48px;
  height: 48px;
}

.energy-wrapper {
  display: flex;
  align-items: center;
  margin-top: 24px;
  margin-left: 31px;
}

.enerty-title {
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
  margin-left: 10px;
}

.energy-right-img {
  width: 260px;
  height: 260px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
}

.cert-no {
  font-size: 24px;
  font-weight: 400;
  color: #FFFFFF;
  margin-left: auto;
  margin-right: auto;
  margin-top: 27px;
}

.cert-truth {
  /* width: 528px; */
  height: 72px;
  background: linear-gradient(89deg, #FF9D7C 0%, #FF7256 100%);
  border-radius: 36px;
  margin-left: 111px;
  margin-right: 111px;
  font-size: 28px;
  font-weight: 400;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.gc-wrapper {
  height: 230px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 23px 30px 26px 30px;
  display: flex;
  justify-content: center;
}

.date-wrapper {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  margin-bottom: auto;
  align-items: center;
}

.date-img {
  width: 72px;
  height: 72px;
}

.date-title {
  font-size: 28px;
  font-weight: 500;
  color: #333333;
  margin-top: 21px;
}

.date-no {
  font-size: 24px;
  font-weight: 400;
  color: #666666;
  margin-top: 21px;
}

.date-dvider {
  width: 120px;
  height: 6px;
  background: linear-gradient(to right, #9ee08b, #2cbe7b);
  border-radius: 36px;
  margin-top: 65px;
}

.buyer-wrapper {
  margin: 22px 30px 0px 30px;
  background: #FFFFFF;
  border-radius: 20px;
  padding-bottom: 44px;
  display: flex;
  flex-direction: column;
}

.seller-wrapper {
  margin: 20px 30px 0px 30px;
  background: #FFFFFF;
  border-radius: 20px;
  padding-bottom: 44px;
  display: flex;
  flex-direction: column;
}


.name-wrapper {
  margin-top: 28px;
  width: 100%;
  height: 96px;
  background: linear-gradient(86deg, #EAFFE9 0%, #F6FFFD 47%, #FFFFFF 100%);
  border-radius: 20px 20px 0px 0px;
  display: flex;
  align-items: center;
}

.name {
  font-size: 32px;
  font-weight: 500;
  color: #333333;
  margin-left: 28px;
}

.id-wrapper {
  display: flex;
  margin-top: 47px;
  align-items: center;
}

.id-wrapper1 {
  display: flex;
  margin-top: 47px;
  align-items: center;
  height: 317px;
}


.id-wrapper+.id-wrapper {
  margin-top: 61px;
}

.point-img {
  width: 12px;
  height: 12px;
  margin-left: 28px;
}

.archive-title {
  font-size: 28px;
  font-weight: 400;
  color: #666666;
  margin-left: 18px;
}

.archive-value {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  position: absolute;
  left: 50%;
  right: 50px;
}

.number-segment-wrapper {
  height: 200px;
  background: #FFFFFF;
  border-radius: 20px;
  margin: 20px 30px;
  display: flex;
  flex-direction: column;
}

.segment {
  font-size: 32px;
  font-weight: 500;
  color: #333333;
  margin-left: 28px;
}

.number-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.number {
  font-size: 28px;
  font-weight: 600;
  color: #333333;
  margin-left: 33px;
}