.download-content{
  > .banner2{
    position: relative;
    background-image: url(../img/202505091057042.png);
  }

  .download-sec{
    padding-top: 100px;
    padding-bottom: 80px;
    .file-items{
      display: flex;
      flex-wrap: wrap;
      gap: 30px;

      .item{
        position: relative;
        flex: 0 0 calc((100% - 60px) / 3);
        border-radius: 6px;
        aspect-ratio: 1/1;
        overflow: hidden;
        background-size: cover;
        background-position: center center;

        &::before{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          display: block;
          width: 100%;
          height: 100%;
          background: linear-gradient(180deg, rgba(#000, .1) 0%, rgba(#000, 0.3) 50%, rgba(#000, .8) 100%);
        }

        > .tag{
          position: absolute;
          top: 20px;
          left: 20px;
          z-index: 3;
          font-size: 14px;
          color: #fff;
          background-color: $themeColor;
          padding: 8px 16px;
          border-radius: 16px;
          line-height: 1;
        }
        > .bottom-info{
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 3;
          width: 100%;
          padding: 20px 20px;
          color: #fff;

          h3{
            font-size: 18px;
            line-height: 1.35em;
            margin-bottom: 10px;
            @include textOver1(2)
          }
          p{
            font-size: 14px;
            margin-bottom: 10px;
            line-height: 1.35em;
            @include textOver1(2)
          }

          .small-line{
            display: flex;
            justify-content: space-between;

            a{
              display: inline-block;
              border-bottom: 1px solid #fff;
              
            }

            box-icon{
              position: relative;
              top: -2px;
              font-size: 20px;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
  .information-sec{
    padding-bottom: 80px;
    h2{
      font-size: 46px;
      margin-bottom: 30px;
      text-transform: uppercase;
    }

    .top-list{
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 40px;
      a:hover{
        color: $themeColor;
      }
      li{
        flex: 0 0 calc((100% - 60px) / 4);
        border-radius: 5px;
        overflow: hidden;
        background-color: #fff;
        box-shadow: 0px 4px 4px 0px rgba(240, 240, 240, 1);
        .cover{
          aspect-ratio: 16/9;
          position: relative;
          .tag{
            position: absolute;
            background-color: rgba(41, 83, 199, 0.62);
            color: #fff;
            width: 80px;
            > p{
              border-bottom: 1px solid rgba(#fff, .57);
              padding: 8px 12px;
              font-size: 18px;
              font-weight: bold;
              line-height: 1em;
            }
            span{
              display: block;
              padding: 2px 12px;
            }
          }
          img{
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
          }
        }
        .info{
          background-color: #fff;
          padding: 10px 15px;
          > .title{
            font-size: 16px;
            font-weight: bold;
            @include textOver
          }
          span{
            font-size: 14px;
            // color: #333;
            @include textOver1(2)
          }
        }
      }
    }
    .default-list{
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      > li{
        flex: 0 0 calc((100% - 40px) / 2);
        > a{
          display: flex;

          &:hover{
            color: $themeColor;
          }
        }
        .cover .tag{
          background-color: #2953c7;
          color: #fff;
          width: 80px;
          border-radius: 3px;
          text-align: center;
          > p{
            border-bottom: 1px solid rgba(#fff, .57);
            padding: 8px 12px;
            font-size: 18px;
            font-weight: bold;
            line-height: 1em;
          }
          span{
            display: block;
            padding: 5px 12px;
          }
        }
        .info{
          width: calc(100% - 80px);
          padding-left: 20px;

          > .title{
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
          }
          span{
            font-size: 14px;
            // color: #333;
          }
        }
      }
    }
  }
}


@media (max-width: 900px){
  .download-content .download-sec .file-items .item{
    flex: 0 0 calc((100% - 40px) / 2);
  }
  .download-content .information-sec .top-list li{
    flex: 0 0 calc((100% - 40px) / 2);
  }
  .download-content .information-sec .default-list>li{
    flex: 0 0 100%;
  }
}
@media (max-width: 850px){
  .download-content .download-sec{
    padding-top: 50px;
    padding-bottom: 30px;
  }
  
  .download-content .information-sec .top-list li{
    flex: 0 0 100%;
  }
}
@media (max-width: 750px){
  .download-content .download-sec .file-items .item{
    flex: 100%;
  }
}
@media (max-width: 650px){
  .download-content>.banner2 .numbers>.items{
    flex-wrap: wrap;
  }
  .download-content>.banner2 .numbers>.items>.item{
    flex: 0 0 50%;
  }
  .download-content .download-sec .file-items .item{
    flex: 100%;
  }
  .download-content>.banner2 .numbers>.items>.item span{
    font-size: 20px;
  }
  .download-content>.banner2 .numbers>.items>.item p{
    font-size: 12px;
  }
}