/*将footer置于底部，即使页面内容只有一半*/
html, body {
    height: 100%;
    margin: 0;
}

body {
   display: flex;
   flex-direction: column;
   padding-top: 70px;
}

/* 固定顶部div样式 */
.fixed-top-div {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    /*background: linear-gradient(135deg, #ffaf5f 0%, #ff7f50 100%);*/
    background-color: #f8f9fa; /* 浅灰色 */
    color: black;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

ul {
  padding: 0 0;
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

.one {
    background-color: #ea444d;
    color: #fff;
    padding: 1px 3px;
    border-radius: 10px;
}
.two {
    background-color: #ed702d;
    color: #fff;
    padding: 1px 3px;
    border-radius: 10px;
}
.three {
    background-color: #eead3f;
    color: #fff;
    padding: 1px 3px;
    border-radius: 10px;
}

.num {
    background-color: #efeff5;
    padding: 1px 3px;
    border-radius: 10px;
    transition: all .3s;
}

.card {
  border: none;
  transition: transform 0.2s;
}
.card:hover {
  transform: scale(1.03);
}

/* 方案3：通用类（结合以上所有方案） */
.hide-scrollbar-complete {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
}
.hide-scrollbar-complete::-webkit-scrollbar {
    display: none;
}


.w-md-80 {
   width: 95%;
}


.w-md-75 {
   width: 95%;
}

.resp-font {
  font-size: 0.85rem; /* fs-7 */
}

@media (min-width: 576px) {
  .resp-font {
    font-size: 0.9rem; /* fs-6 */
  }
}


@media (min-width: 768px) {
    .w-md-80 {
       width: 80%;
    }
    .w-md-75 {
       width: 75%;
    }
    .resp-font {
    font-size: 1rem; /* fs-5 */
  }
}