html body .loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  z-index: 100; }
  html body .loading-animation .anime-logo-wrap {
    text-align: center;
    width: 40%;
    height: 50%;
    margin: 15% 30%; }
    html body .loading-animation .anime-logo-wrap .anime-logo-img, html body .loading-animation .anime-logo-wrap .anime-logo-txt {
      display: none; }
    html body .loading-animation .anime-logo-wrap .anime-logo-txt {
      color: #3FC43F; }
html body .main-right .contents-wrap {
  max-width: 1920px;
  min-height: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }
  html body .main-right .contents-wrap .content {
    width: 40%;
    height: 40%;
    background-color: #FFFFFF;
    margin: 1.5% 2.5%;
    margin-bottom: 2.5%;
    padding-bottom: 1%;
    display: flex;
    flex-wrap: wrap;
    border-radius: 5px;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    opacity: 0; }
    html body .main-right .contents-wrap .content:hover {
      box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.4); }
    html body .main-right .contents-wrap .content a {
      text-decoration: none;
      display: flex;
      flex-wrap: wrap; }
      html body .main-right .contents-wrap .content a .img-inner {
        width: 100%;
        height: 85%;
        padding: 2.5%; }
        html body .main-right .contents-wrap .content a .img-inner img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
      html body .main-right .contents-wrap .content a .btn-inner {
        width: 100%;
        height: 15%;
        text-align: center; }
        html body .main-right .contents-wrap .content a .btn-inner .view-more-btn {
          color: #3FC43F;
          border: 2px solid #3FC43F;
          border-radius: 5px;
          transition: 0.5s; }
          html body .main-right .contents-wrap .content a .btn-inner .view-more-btn:hover {
            color: #FFFFFF;
            background-color: #3FC43F; }

@media all and (max-width: 1024px) {
  html {
    /* body */ }
    html body .loading-animation {
      display: none; }
    html body .main-right .contents-wrap .content {
      opacity: 1;
      width: 45%;
      height: auto;
      margin-bottom: 2.5%;
      padding-bottom: 1%; }
      html body .main-right .contents-wrap .content a .btn-inner {
        width: 95%;
        margin: 0 2.5%;
        height: 15%; }
        html body .main-right .contents-wrap .content a .btn-inner .view-more-btn {
          width: 100%;
          padding: 4px 0;
          font-size: 2rem; }

  /* html */ }
@media all and (max-width: 992px) {
  html {
    /* body */ }
    html body .main-right .contents-wrap .content {
      width: 80%;
      height: auto;
      margin: 1.5% 2.5%;
      margin-bottom: 2.5%;
      padding-bottom: 1%; }
      html body .main-right .contents-wrap .content a .btn-inner {
        width: 95%;
        margin: 0 2.5%;
        height: 15%; }
        html body .main-right .contents-wrap .content a .btn-inner .view-more-btn {
          width: 100%;
          padding: 8px 0;
          font-size: 1.75rem; }
    html body .main-right .responsive-footer {
      position: static; }

  /* html */ }
@media all and (max-width: 768px) {
  html {
    /* body */ }
    html body .main-right .contents-wrap .content {
      width: 90%;
      height: auto; }
      html body .main-right .contents-wrap .content a {
        margin-bottom: 32px; }
        html body .main-right .contents-wrap .content a .btn-inner .view-more-btn {
          width: 100%;
          padding: 4px 0;
          font-size: 1.5rem; }

  /* html */ }
@media all and (max-width: 576px) {
  html {
    /* body */ }

  /* html */ }