/* 根盒子 */
main {
  width: 100vw;
  height: 100vh;
  /* 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
  overflow: auto;
  position: relative;
}

/*质保单头部 */
.zb-header {
  height: 0.96rem;
  width: 100%;
  border-bottom: 1px solid #dddddd;
  background-color: #eeeeee;
  position: absolute;
  left: 0;
  top: 0;
}

.zb-body {
  width: 100vw;
  height: calc(100vh - 1.92rem);
  margin-top: 0.96rem;
  overflow: auto;
  font-size: 16px;
  background-color: #dddddd;
}
.zb-footer {
  font-size: 16px;
  height: 0.96rem;
  width: 100%;
  border-top: 1px solid #dddddd;
  position: absolute;
  bottom: 0;
  left: 0;
}

.zb-header,
.zb-footer {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.header-left {
  width: 0.8rem;
  text-align: center;
}
.header-left img {
  width: 0.3rem;
}
.header-body {
  flex-basis: 60%;
  flex-grow: 1;
  text-align: center;
  font-size: 0.4rem;
}
.header-right {
  width: 0.8rem;
  text-align: center;
}
.footer-left {
  flex-basis: 40%;
  flex-grow: 1;
  height: calc(0.96rem - 1px);
  line-height: 0.96rem;
  text-align: center;
  border-top: 1px solid #f5f5f5;
}
.footer-right {
  flex-basis: 40%;
  flex-grow: 1;
  height: calc(0.96rem - 1px);
  line-height: 0.96rem;
  border-top: 1px solid #f5f5f5;
  text-align: center;
  background-color: #f5f5f5;
}

#zbd-details {
  width: 24rem;
  height: 15rem;
  background-color: white;
  transform: scale(0.5);
  transform-origin: 0 0;
}