.silver17-banner-wrap {
  position: relative;
  margin-bottom: 40px;
}

.silver17-banner,
.silver17-banner *,
.silver17-banner *::before,
.silver17-banner *::after {
  box-sizing: border-box;
}

.silver17-banner {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(220px, 20.13vw, 281px);
  overflow: hidden;
  background: #00191d;
  font-family: "Pragmatica";
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.silver17-banner__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.silver17-banner__bg--desktop {
  display: block;
}

.silver17-banner__bg--mobile {
  display: none;
}

.silver17-banner__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.silver17-banner__bg-img--desktop {
  object-position: 50% 50%;
}

.silver17-banner__bg-img--mobile {
  object-position: 54% 50%;
}

.silver17-banner__mic {
  position: absolute;
  left: 50.2%;
  bottom: -1px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: clamp(210px, 18.8vw, 260px);
  height: 100%;
  pointer-events: none;
  transform: translateX(-50%);
}

.silver17-banner__mic-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.silver17-banner__mic-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
}

.silver17-banner__num {
  position: absolute;
  left: 33.7%;
  top: 51.4%;
  font-size: min(16.7vw, 232px);
  font-weight: 500;
  line-height: 1;
  color: #25aab4;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
  transform: translateY(-50%);
}

.silver17-banner__title {
  position: absolute;
  left: 7.5%;
  top: 48.5%;
  font-size: min(3.72vw, 52px);
  font-weight: 500;
  line-height: 0.92;
  color: #efe7dd;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  white-space: nowrap;
  transform: translateY(-50%);
  transition: color 0.22s ease, text-shadow 0.22s ease;
}

.silver17-banner__copy {
  position: absolute;
  right: 4.8%;
  top: 50.4%;
  font-size: min(3.02vw, 42px);
  font-weight: 300;
  line-height: 1.08;
  color: #199298;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  white-space: nowrap;
  transform: translateY(-50%);
}

.silver17-banner__copy p {
  margin: 0;
}

.silver17-banner__copy b {
  font-weight: 700;
  font-style: normal;
}

.silver17-banner:hover .silver17-banner__title {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.08);
}

.silver17-banner:hover .silver17-banner__copy {
  color: #2cc0cb;
}

.silver17-banner:hover .silver17-banner__copy b {
  color: #63d7df;
}

.silver17-banner [data-aos="silver17-fade"] {
  opacity: 0;
  transition-property: opacity;
}

.silver17-banner [data-aos="silver17-fade"].aos-animate {
  opacity: 1;
}

.silver17-banner [data-aos="silver17-mic"] {
  opacity: 0;
  transform: translateX(-50%) translateY(92%);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.silver17-banner [data-aos="silver17-mic"].aos-animate {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.silver17-banner [data-aos="silver17-num"] {
  opacity: 0;
  transform: translateY(-50%) scale(0.96);
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
}

.silver17-banner [data-aos="silver17-num"].aos-animate {
  opacity: 0.34;
  transform: translateY(-50%) scale(1);
}

.silver17-banner [data-aos="silver17-title"] {
  opacity: 0;
  transform: translateY(-50%) translateX(-28px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.silver17-banner [data-aos="silver17-title"].aos-animate {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.silver17-banner [data-aos="silver17-copy"] {
  opacity: 0;
  transform: translateY(-50%) translateX(28px);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.silver17-banner [data-aos="silver17-copy"].aos-animate {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
  .silver17-banner-wrap {
    padding: 0;
  }

  .silver17-banner {
    height: clamp(299px, 61.27vw, 420px);
    background: #00191d;
  }

  .silver17-banner__bg--desktop {
    display: none;
  }

  .silver17-banner__bg--mobile {
    display: block;
  }

  .silver17-banner__bg-img--mobile {
    object-position: 58% 50%;
  }

  .silver17-banner__mic {
    left: 73%;
    bottom: 0;
    width: 49%;
    height: 100%;
  }

  .silver17-banner__num {
    left: 47.8%;
    top: 50.2%;
    font-size: 39vw;
    color: #199298;
    letter-spacing: -0.06em;
    mix-blend-mode: normal;
  }

  .silver17-banner__title {
    left: 6.64%;
    top: 24%;
    font-size: 7.3vw;
    letter-spacing: 0.25em;
  }

  .silver17-banner__copy {
    left: 6.64%;
    right: auto;
    top: 55.5%;
    font-size: 4.9vw;
    line-height: 1.14;
    text-align: left;
  }

  .silver17-banner [data-aos="silver17-num"].aos-animate {
    opacity: 0.28;
  }

  .silver17-banner [data-aos="silver17-copy"] {
    transform: translateY(-50%) translateX(-28px);
  }
}

@media (max-width: 765px) {
  .mic017 .mic-half-block.design .mic-half-block__cols {
    min-height: 0;
  }

  .mic017 .mic-half-block.design .mic-half-block__left {
    width: 100%;
    height: 220px;
    min-height: 220px;
  }

  .mic017 .mic-half-block.design .mic-half-block__layer1 {
    width: 100%;
    height: 220px;
    min-height: 220px;
    background-position: center;
    background-size: cover;
  }

  .mic017 .mic-half-block.design .mic-half-block__right {
    top: 0;
    height: auto;
    min-height: 0;
  }

  .mic017 .mic-half-block.design .mic-half-block__legend {
    padding-bottom: 20px;
  }
}