@media screen and (max-width: 800px) {
  body {
    background: none;
  }

  .wap_nav {
    display: flex;
  }

  .wap_nav img {
    width: 100%;
  }

  .w {
    width: 100%;
  }

  h2.tit {
    padding: 1.5rem 1rem;
    font-size: 2rem;
    text-align: left;
  }

  .top_box {
    margin-top: 0;
    flex-direction: column;
    padding: 2rem 1rem;
    background: #699deb;
    gap: 1rem;
  }

  .swiper {
    width: 100%;
  }

  .swiper .swiper-slide {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .top_box a {
    color: #fff !important;
  }

  .top_box .imgBox {
    width: 100%;
    padding: 1rem;
    background-color: #7fb2ff;
  }

  .top_box .imgBox a {
    font-size: 1.4rem;
  }

  .top_box .imgBox > a {
    display: none;
  }

  .top_box .imgBox h3 {
    margin: 0;
    display: flex;
  }

  .top_box .listBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .top_box .listBox li {
    padding: 1rem !important;
    background-color: #7fb2ff;
    border: none;
  }

  .top_box .listBox li a {
    font-size: 1.4rem;
  }

  .box1 {
    margin-top: 0;
    height: auto;
    background: #9ebae7;
  }

  .box1 .content {
    flex-direction: column;
    padding: 0 1rem 2.5rem 1rem;
  }

  .box1 .left,
  .box1 .mid,
  .box1 .right {
    width: 100%;
  }

  .box1 .left {
    background-color: #274ea1;
  }

  .box1 .left .imgBox h3 a {
    color: #fff;
  }

  .box1 .imgBox {
    display: flex;
    flex-direction: row;
  }

  .box1 .imgBox > a {
    display: inline-flex !important;
    flex-shrink: 0;
    width: 40%;
    aspect-ratio: 3 / 2;
  }

  .box1 .imgBox h3 {
    padding: 0.5rem 1rem !important;
  }

  .box1 .imgBox h3 a {
    font-size: 1rem !important;
  }

  .box1 .mid .imgBox img {
    width: 100%;
  }

  .box2 {
    margin-top: 0;
  }

  .box2 .content {
    flex-direction: column;
    padding: 0 1rem 1rem;
    gap: 1rem;
  }

  .box2 .imgBox {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: #0000000d;
  }

  .box2 .imgBox > a {
    display: inline-flex !important;
    flex-shrink: 0;
    width: 40%;
    aspect-ratio: 3 / 2;
  }

  .box2 .imgBox h3 {
    padding: 0.5rem 1rem !important;
  }

  .box3 {
    margin-top: 0;
  }

  .box3 .content {
    flex-direction: column;
    padding: 0 1rem 1rem;
    gap: 1rem;
  }

  .box3 .imgBox {
    width: 100% !important;
    height: auto;
    display: flex;
    flex-direction: row !important;
    background-color: #0000000d !important;
  }

  .box3 .imgBox > a {
    display: inline-flex !important;
    flex-shrink: 0;
    width: 40%;
    aspect-ratio: 3 / 2;
  }

  .box3 .imgBox img {
    height: auto !important;
  }

  .box3 .imgBox h3 {
    padding: 0.5rem 1rem !important;
  }

  .box3 .imgBox h3 a {
    font-size: 1rem !important;
    color: #333 !important;
  }

  .footer {
    margin-top: 2rem;
  }

  .footer .goTop {
    font-size: 1.2rem;
  }
}