@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

@keyframes circle {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes flicker-5 {
  0%,
  100% {
    opacity: 1;
  }
  -0.02% {
    opacity: 1;
  }
  0% {
    opacity: 1;
  }
  1% {
    opacity: 1;
  }
  1.02% {
    opacity: 1;
  }
  8.98% {
    opacity: 1;
  }
  9% {
    opacity: 0;
  }
  9.8% {
    opacity: 0;
  }
  9.82% {
    opacity: 1;
  }
  9.48% {
    opacity: 1;
  }
  9.5% {
    opacity: 1;
  }
  9.6% {
    opacity: 1;
  }
  9.62% {
    opacity: 1;
  }
  14.98% {
    opacity: 1;
  }
  15% {
    opacity: 0.5;
  }
  15.8% {
    opacity: 0.5;
  }
  15.82% {
    opacity: 1;
  }
  15.18% {
    opacity: 1;
  }
  15.2% {
    opacity: 0.7;
  }
  16% {
    opacity: 0.7;
  }
  16.02% {
    opacity: 1;
  }
  15.48% {
    opacity: 1;
  }
  15.5% {
    opacity: 0.5;
  }
  16.2% {
    opacity: 0.5;
  }
  16.22% {
    opacity: 1;
  }
  16.98% {
    opacity: 1;
  }
  17% {
    opacity: 1;
  }
  17.8% {
    opacity: 1;
  }
  17.82% {
    opacity: 1;
  }
  20.48% {
    opacity: 1;
  }
  20.5% {
    opacity: 0.9;
  }
  21.3% {
    opacity: 0.9;
  }
  21.32% {
    opacity: 1;
  }
  20.98% {
    opacity: 1;
  }
  21% {
    opacity: 1;
  }
  22% {
    opacity: 1;
  }
  22.02% {
    opacity: 1;
  }
  39.98% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  41.02% {
    opacity: 1;
  }
  40.48% {
    opacity: 1;
  }
  40.5% {
    opacity: 0.6;
  }
  41.4% {
    opacity: 0.6;
  }
  41.42% {
    opacity: 1;
  }
  41.98% {
    opacity: 1;
  }
  42% {
    opacity: 1;
  }
  42.8% {
    opacity: 1;
  }
  42.82% {
    opacity: 1;
  }
  59.98% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  61% {
    opacity: 1;
  }
  61.02% {
    opacity: 1;
  }
  60.18% {
    opacity: 1;
  }
  60.2% {
    opacity: 0.2;
  }
  61% {
    opacity: 0.2;
  }
  61.02% {
    opacity: 1;
  }
  60.78% {
    opacity: 1;
  }
  60.8% {
    opacity: 0.4;
  }
  61.6% {
    opacity: 0.4;
  }
  61.62% {
    opacity: 1;
  }
  61.38% {
    opacity: 1;
  }
  61.4% {
    opacity: 0;
  }
  62.2% {
    opacity: 0;
  }
  62.22% {
    opacity: 1;
  }
  61.78% {
    opacity: 1;
  }
  61.8% {
    opacity: 1;
  }
  62.8% {
    opacity: 1;
  }
  62.82% {
    opacity: 1;
  }
  75.98% {
    opacity: 1;
  }
  76% {
    opacity: 1;
  }
  77% {
    opacity: 1;
  }
  77.02% {
    opacity: 1;
  }
  77.98% {
    opacity: 1;
  }
  78% {
    opacity: 0.7;
  }
  78.8% {
    opacity: 0.7;
  }
  78.82% {
    opacity: 1;
  }
  78.98% {
    opacity: 1;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  80.02% {
    opacity: 1;
  }
  99.98% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
  101% {
    opacity: 1;
  }
  101.02% {
    opacity: 1;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: "Onest", "Pretendard";
}

ul,
li {
  list-style: none;
}

body {
  background-color: #bdc4d6;
  background-image: url(/img/bg-pattern.jpg);
  overflow-x: hidden;
  color: #1f221d;
  word-break: keep-all;
}

header {
  width: 864px;
  margin: 0 auto;
  padding: 64px 32px;
  background-color: #909ab3;
  text-align: center;
  h2 {
    margin-bottom: 24px;
    line-height: 1.4;
  }
  .img-box {
    width: 600px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    font-size: 32px;
    font-weight: 700;
  }
}

main {
  width: 864px;
  margin: 0 auto;
  padding: 0 32px;
  background-color: #909ab3;
  #participant {
    padding-bottom: 32px;
    .inner {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      ul {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        li {
          width: 100%;
          text-align: center;
          padding: 10px 10px;
          transition: all 0.4s ease;
          &:first-child {
            background-color: #2d599a;
            color: #fff;
          }
          &:nth-child(2),
          &:nth-child(3) {
            border-bottom: 1px solid #eee;
          }
          &:not(:first-child) {
            cursor: pointer;
            &:hover {
              background-color: #eee;
            }
          }
          &.is-active {
            background-color: #b3d0eb;
            &:hover {
              background-color: #9abedf;
            }
          }
        }
      }
    }
  }
  #contents {
    width: 100%;
    text-align: center;
    padding-bottom: 64px;
    h4 {
      font-size: 24px;
      margin-bottom: 8px;
    }
    p {
      margin-bottom: 24px;
    }
    .container {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .downloadBtn {
        padding: 16px 64px;
        border: none;
        border-radius: 8px;
        background-color: #2d599a;
        color: #fff;
        font-weight: 700;
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 24px;
        cursor: pointer;
        transition: all 0.4s ease;
        &:hover {
          background-color: #254c86;
        }
      }
      .contents {
        width: 100%;
        overflow: hidden;
        position: relative;
        .background {
          width: 100%;
          height: auto;
          display: block;
        }
        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          transform-origin: 0 0;
          & > img,
          & > div {
            position: absolute;
            top: calc(var(--y, 0) * 1px);
            left: calc(var(--x, 0) * 1px);
          }
          .devider {
            background-color: rgba(255, 255, 255, 0.16);
            &.topline {
              width: 200vw;
              top: calc(var(--y, 0) * 1px);
              height: 1px;
              left: -25vw;
            }
            &.leftline {
              width: 1px;
              height: 200vh;
              top: -25vh;
              left: 125px;
            }
            &.bottomline {
              width: 200vw;
              height: 1px;
              top: calc(var(--y, 0) * 1px);
              left: -25vw;
            }
          }
          .circle {
            animation: circle 8s ease-in-out infinite;
          }
          .shadow {
            mix-blend-mode: multiply;
          }
          .invert_text {
            mix-blend-mode: var(--blend, normal);
            animation: flicker-5 8s linear infinite both;
          }
          .keyword-box {
            transition: top 0.2s ease-in, left 0.3s ease-in-out;
            .icon {
              position: absolute;
              bottom: 14px;
              left: 20px;
            }
            &:hover {
              top: calc((var(--y, 0) * 1px) + 15px);
              left: calc((var(--x, 0) * 1px) - 15px);
            }
          }
        }
      }
    }
  }
}

#art16 {
  .keyword-box.box3 {
    z-index: 1;
  }
}

footer {
  width: 864px;
  margin: 0 auto;
  padding: 0 32px 64px;
  background-color: #909ab3;
  text-align: center;
  line-height: 1.4;
  #indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    left: calc(((100vw - 864px) / 2) + 864px);
    bottom: 0;
    background-color: #fff;
    padding: 32px 22px;
    border-radius: 16px 16px 0 0;
    .team-title {
      font-size: 22px;
      font-weight: 700;
      color: #2d599a;
      padding-bottom: 4px;
    }
    .names {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      .name {
        width: 83px;
        border: none;
        background-color: #fff;
        cursor: pointer;
        padding: 8px;
        font-size: 16px;
        position: relative;
        &.prev,
        &.next {
          color: #909ab3;
          transition: color 0.4s ease;
          &:hover {
            color: #606369;
          }
        }
        &.curr::before {
          content: "▶";
          position: absolute;
          transform: translateX(-50%) rotate(-90deg);
          font-size: 12px;
          left: 50%;
          bottom: -8px;
        }
      }
      p {
        color: #909ab3;
      }
    }
  }
}

@media screen and (max-width: 1605px) {
  footer {
    #indicator {
      left: auto;
      right: 0;
    }
  }
}

@media screen and (max-width: 640px) {
  header {
    .img-box {
      width: 100%;
    }
  }
  main {
    #participant {
      .inner {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }
}

@media screen and (max-width: 864px) {
  header {
    width: 100%;
    padding: 64px 20px;
  }
  main {
    width: 100%;
    padding: 0 20px;
  }
  footer {
    width: 100%;
    padding: 0 20px 186px;
    #indicator {
      width: 100%;
      left: 0;
    }
  }
}