.download-modal {
  position: relative;
  width: 800px;
  height: 350px;
  border-radius: 20px;
  padding-left: 28px;
  padding-right: 28px;
  padding-top: 35px;
  animation: download-modal-show 0.2s forwards;
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  background-image: url(../../image/download_modal_panel.svg);
  /* box-shadow:
       inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
       inset -1px -1px 0px 0px rgba(255, 255, 255, 0.7); */
}

.download-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-left: 20px;
  padding-right: 20px;
}
.download-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.download-list-item-pic-block {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 12px;
}

.download-list-item-pic-block-pic {
  max-width: 100%;
}

.download-list-item-name {
  color: #ffffff;
  margin-top: 16px;
}

.download-pic-hide-animation {
  animation: download-pic-hide 0.15s forwards;
}
.download-name-hide-animation {
  animation: download-name-hide 0.15s forwards;
}
.download-pic-show-animation {
  animation: download-pic-show 0.15s forwards;
}
.download-name-show-animation {
  animation: download-name-show 0.15s forwards;
}
.download-qr-hide-animation {
  animation: download-qr-hide 0.15s forwards;
}
.download-qr-show-animation {
  animation: download-qr-show 0.15s forwards;
}

.download-list-item-qr {
  position: absolute;
  background: #198cfe;
  right: -38px;
  top: -38px;
  width: 76px;
  height: 76px;
  transform: rotate(45deg);
}

.download-list-item-qr-icon {
  position: absolute;
  right: 4px;
  top: 4px;
}

@keyframes download-modal-show {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes download-name-hide {
  from {
    opacity: 1;
    transform: translateY(0px);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes download-name-show {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes download-pic-hide {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
    visibility: hidden;
  }
}
@keyframes download-pic-show {
  from {
    transform: scale(0);
    visibility: visible;
  }
  to {
    transform: scale(1);
  }
}

@keyframes download-qr-hide {
  from {
    right: -38px;
    top: -38px;
  }
  to {
    right: -76px;
    top: -76px;
  }
}
@keyframes download-qr-show {
  from {
    right: -76px;
    top: -76px;
  }
  to {
    right: -38px;
    top: -38px;
  }
}