src/components/mini/box-friend.vue

@@ -191,24 +191,31 @@
   @media screen and (min-width: 1600px) {
      .link-box a {
         margin: 0 0.9375rem 3.75rem;
         width: -webkit-calc(100% / 5 - 1.875rem);
         width: calc(100% / 5 - 1.875rem);
         width: -webkit-calc(100% / 5 - 4rem);
         width: calc(100% / 5 - 4rem);
      }
   }

   @media screen and (max-width: 1599px) and (min-width: 768px) {
   @media screen and (max-width: 1599px) and (min-width: 1439px) {
      .link-box a {
         margin: 0 0.9375rem 3.75rem;
         width: -webkit-calc(100% / 4 - 1.875rem);
         width: calc(100% / 4 - 1.875rem);
         width: -webkit-calc(100% / 3 - 8rem);
         width: calc(100% / 3 - 8rem);
      }
   }
   @media screen and (max-width: 1438px) and (min-width: 791px) {
      .link-box a {
         margin: 0 0.9375rem 3.75rem;
         width: -webkit-calc(100% / 4 - 2.3rem);
         width: calc(100% / 4 - 2.3rem);
      }
   }

   @media screen and (max-width: 767px) and (min-width: 501px) {
   @media screen and (max-width: 790px) and (min-width: 501px) {
      .link-box a {
         margin: 0 0.9375rem 3.75rem;
         width: -webkit-calc(100% / 3 - 1.875rem);
         width: calc(100% / 3 - 1.875rem);
         width: -webkit-calc(100% / 3 - 2.3rem);
         width: calc(100% / 3 - 2.3rem);
      }
   }

@@ -216,8 +223,8 @@
   @media screen and (max-width: 500px) and (min-width: 319px) {
      .link-box a {
         margin: 0 0.75rem 1.5rem;
         width: -webkit-calc(50% - 1.5rem);
         width: calc(50% - 1.5rem);
         width: -webkit-calc(100% / 3 - 1.5rem);
         width: calc(100% / 3 - 1.5rem);
      }

      .blog-main {