html {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url(../images/cherryBgPc.jpg?t=2025030401) top center/cover
    no-repeat;
}

/* =========================================
   PC 端元素样式 (基于 1920x1080)
   ========================================= */
.cherryIndex {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  position: relative;
  width: 65.5vw;
  height: fit-content;
  margin-top: 10.7vw;
}

.logoIndex {
  height: 4.6vw;
  width: 65.5vw;
  background: url(../images/logoPc.png?t=2025030401) center/100% auto no-repeat;
  margin-bottom: 4.5vw;
}
.indexCon {
  display: grid;
  row-gap: 8.2vw;
  grid-template-columns: 1fr 1fr;
  padding: 0 7.1vw;
}
.indexCon .alumnusBtn {
  display: block;
  width: 16.7vw;
  height: 3.9vw;
  background: url(../images/alumnusBtnPc.png?t=2025030401) center/100% auto
    no-repeat;
}
.indexCon .publicBtn {
  display: block;
  width: 16.7vw;
  height: 3.9vw;
  justify-self: right;
  background: url(../images/publicBtnPc.png?t=2025030401) center/100% auto
    no-repeat;
}

.indexCon .recordBtn {
  display: block;
  justify-self: center;
  width: 15.8vw;
  height: 3.2vw;
  grid-column: 1 / -1;
  background: url(../images/myappointpcbtn.png?t=2025030401) center/100% auto
    no-repeat;
}

/* =========================================
   iPad / 平板端适配 (768px - 1024px)
   移动端适配 (iPhone / Android)
   ========================================= */
@media screen and (max-width: 1024px) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: url(../images/cherryConBg.jpg?t=2025030401) top center/cover;
  }

  .cherryIndex {
    margin-top: 3.1rem;
    width: 6.22rem;
  }
  .logoIndex {
    background: url(../images/logoTop.png?t=2025030401) center/100% auto
      no-repeat;
    width: 6.22rem;
    height: 2.16rem;
    margin-bottom: 0.88rem;
  }
  .indexCon {
    grid-template-columns: 1fr;
    row-gap: 0.58rem
  }

  .indexCon .alumnusBtn,
  .indexCon .publicBtn {
    width: 4.6rem;
    height: 0.8rem;
    justify-self: center;
  }
   .indexCon .alumnusBtn {
      background: url(../images/alumnusBtn.png?t=2025030401) center/100% auto
    no-repeat;
   }
   .indexCon .publicBtn  {
      background: url(../images/publicBtn.png?t=2025030401) center/100% auto
    no-repeat;
   }


  .indexCon .recordBtn {
    width: 3.8rem;
    height: 0.76rem;
    margin-top: 0.58rem;
  }
}