ul,li {
  list-style: none;
  padding: 0;
}

.liner-big-box {
  padding-top: 80px;
  background: linear-gradient( 180deg, #F4FAFF 0%, rgba(232,243,254,0) 100%);
}
.liner-box { 
  margin:0 auto;
  width:1320px;
}
.liner-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  .title-box {
    font-size: 48px;
  }
  .title-tip{
    font-size: 24px;
  }
  .title-ul ul{
    display: flex;
    li{
      padding: 8px 0;
      margin:0 24px;
      font-weight: 500;
      cursor: pointer;
    }
    .active{
      color: #0D80EB;
      border-bottom: 3px solid #0D80EB;
    }
  }
}
.liner-list{
  margin: 36px 0 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  .list-item {
    flex: 0 0 calc(25% - 24px); /* 每行四个，减去间距 */
    box-sizing: border-box;
    text-align: center;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.05);
    border-radius: 14px;
    img{
      width: 312px;
      height: 320px;
    }
    .item-title{
      text-align:left;
      font-size: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-clamp: 2;
      box-orient: vertical;
      word-break: break-all; 
    }
    .item-info{
      padding: 18px;
    }
    .item-price{
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      color: #FA3131;
      font-size: 16px;
      span{
        font-size: 32px;
      }
      .item-book{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0px 24px;
        background: #FF8000;
        border-radius: 4px;
        color: #ffffff;
        font-size: 16px;
        img{
          display: block;
          width: 24px;
          height: 24px;
        }
      }
    }
  }

    /* 响应式：屏幕变小时一行变3个、2个、1个 */
    @media (max-width: 900px) {
      .list-item {
        flex: 0 0 calc(33.333% - 16px); /* 3个 */
      }
    }

    @media (max-width: 600px) {
      .list-item {
        flex: 0 0 calc(50% - 16px); /* 2个 */
      }
    }

    @media (max-width: 400px) {
      .list-item {
        flex: 0 0 100%; /* 1个 */
      }
    }
}

.footer-wrap{
  min-width:1320px;
  background:#066BAE;
  color:#ffffff;
}
.footer-inner{
  width:1320px;
  margin:0 auto;
  padding:40px 0 38px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid #408dc1;
}
.footer-colbox{
  display:flex;
  flex-wrap:wrap;
}
.footer-col{
  max-width:364px;
  min-width:174px;
  padding: 0 40px;
  border-right:1px solid #408dc1;
}
.footer-col:first-child{ 
  padding-left:0;
}
.footer-col:last-child{
  border-right:none;
}
.footer-col-any{
  flex:1;
  display:flex;
  justify-content:flex-end;
  h4{
    font-size:20px;
    color:#fff;
    margin-bottom:24px;
    font-weight:600;
  }
  ul{
    list-style:none;
      li{
        line-height:36px;
        font-size:14px;
        a{
        color:#ffffff;
        text-decoration:none;
        transition:.2s;
      }
    }
  }
  img{
    width: 116px;
    height: 116px;
  }
  .any-text{
    margin-top: 12px;
    text-align: center;
  }
}
.footer-col h4{
  font-size:20px;
  color:#fff;
  margin-bottom:24px;
  font-weight:600;
}
.footer-col ul{
  list-style:none;
  .contact-row {
    display: flex;
    margin-bottom: 8px;
    align-items: flex-start;
  }
  .contact-label {
    width: 5.5em;
    flex-shrink: 0;
    text-align: right;
    padding-right: .5em;
    white-space: nowrap;
  }
  .contact-value {
    flex: 1;
    word-break: break-word;
  }
}
.footer-new ul{
  column-count:2; 
  column-gap:52px;
}
.footer-col ul li{
  line-height:36px;
  font-size:14px;
}
.footer-col ul li a{
  color:#ffffff;
  text-decoration:none;
  transition:.2s;
}

/* 版权条 */
.footer-bar{
  width:1320px;
  margin:0 auto;
  text-align:center;
  padding: 20px 0 38px;
  font-size:14px;
  .bar-text{
    font-size:12px;
    margin-bottom: 8px;
    line-height: 24px;
  }
}
.login-footer{
  border-top: 1px solid #ffffff;
}

/* 右侧固定容器 */
.side-tools{
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .tools-box{
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 6px;
    background: #fff;
    box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.08), 0px 16px 24px 2px rgba(0,0,0,0.04), 0px 6px 30px 5px rgba(0,0,0,0.05);
    border-radius: 32px 32px 32px 32px;
    border: 1px solid #DCDCDC;
  }
}

/* 每一项 */
.side-item{
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 12px;
  text-decoration: none;
  transition: all .25s;
  position: relative;
  margin:0 auto;
  img{
    width: 24px;
    height: 24px;
  }
}
.side-item:hover{
  background: #F1F1F1;
  border-radius: 48px;
}

/* 图标占位 */
.side-item .icon{
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
.side-item:visited,
.side-item:hover,
.side-item:active,
.side-item:focus {
  text-decoration: none;   /* 去掉下划线 */
  color: inherit !important;          /* 继承父级颜色，防止点击后变色 */
  outline: none !important;           /* 去掉焦点虚线框 */
}

/* 文案（客服/公众号/设置） */
.side-item span{
  margin-top: 2px;
  font-size: 11px;
}

/* 返回顶部圆形、隐藏 */
.back-top{
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-top: 14px;
  background: #ffffff;
  box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.08), 0px 16px 24px 2px rgba(0,0,0,0.04), 0px 6px 30px 5px rgba(0,0,0,0.05);
  /* display: none; */
}

.back-top:hover{
  background: #ffffff;
  border-radius: 48px;
}

/* 公众号二维码 */
.side-item .qr{
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  display: none;
  width: 110px;
  text-align: center;
  font-size: 12px;
  color: #333;
}
.side-item:hover .qr{
  display: block;
}
.side-item .qr img{
  width: 90px;
  height: 90px;
  display: block;
  margin: 0 auto 4px;
}


.search-li{ margin-left: 15px; }
.search-form{ 
  display:flex; 
  align-items:center;
  padding: 20px 10px;
  width: 300px;
  height: 32px; 
  border: 1px solid #0d80eb;
  border-radius: 5px;
}
.search-form input{
  border-radius: 0 5px 5px 0;
  border:none; 
  outline:none; 
  font-size:14px;
  background:transparent;
}

.search-form button{
  width: 40px; 
  height: 20px;
  border-left:none; 
  border-radius: 5px 0 0 5px;
  color:#fff; 
  cursor:pointer;
  border:none;
  background:transparent;
}
@media(max-width:768px){
  .search-li{ width:100%; margin:8px 0 0 0; }
  .search-form{ width:100%; }
  .search-form input{ flex:1; }
}