/* -*- coding: utf-8 -*- */

.download-head-page-container .division-content {
  align-items: center;
  gap: 10px;
}

.download-head-page-container .main-title {
  font-weight: 600;
}

.download-head-page-container .main-abstract {
  font-size: 20px;
  margin-top: 10px;
}

.download-head-page-container .detail {
  font-size: 16px;
}

.download-step-page-container {
  margin-top: 30px;
}

.download-step-page-container .division-container {
  gap: 10px;
}

.download-step-page-container .section-content {
  max-width: 400px;
  min-width: 240px;
  width: calc((100% - 40px)/3);
}

.download-step-page-container .segment-step {
  align-items: flex-start;
}

.download-step-page-container .step-number {
  backdrop-filter: blur(5px);
  border-radius: 10px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  font-size: 14px;
  display: inline-block;
  padding: 7px 10px;
}

.download-step-page-container .title {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  height: 2.5em;
  margin-top: 10px;
}

.download-step-page-container .detail {
  font-size: 18px;
  height: 4.5em;
}

.download-step-page-container .screenshot img {
  margin-left: -10px;
  max-width: 100vw;
  width: 100%;
}

.download-upgrade-page-container {
  padding-top: 30px;
  padding-bottom: 30px;
}

.download-upgrade-page-container .division-container {
  align-items: center;
  background-blend-mode: overlay;
  background: linear-gradient(224.92deg, #1E85E2 24.31%, #27418F 82.26%);
  border-radius: 30px;
  box-shadow: 0px 23px 31.6px 0px rgba(0, 0, 0, 0.25);
  color: #fff;
  gap: 30px;
  padding: 30px 50px;
}

.download-upgrade-page-container .section-content {
  gap: 20px;
  min-width: 300px;
  width: calc(50% - 50px);
}

.download-upgrade-page-container .section-title {
  max-width: 540px;
}

.download-upgrade-page-container .section-detail {
  max-width: 450px;
}

.download-upgrade-page-container .title {
  font-weight: 500;
}

.download-upgrade-page-container .explore-button {
  align-items: center;
  background: #fff;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--fg-color);
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 50px;
  justify-content: center;
  width: 300px;
}

@media only screen and (max-width:768px) {
  .download-step-page-container .division-container {
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .download-step-page-container .section-content {
    width: 100%;
  }
  .download-step-page-container .screenshot img {
    width: auto;
  }
}

.download-action-page-container {
  align-items: center;
  background-blend-mode: overlay;
  /* background: linear-gradient(224.92deg, #1E85E2 24.31%, #27418F 82.26%); */
  border: 8px solid rgba(19, 118, 223, 0.02)
  box-shadow: 0px 47px 153.6px 0px rgba(16, 61, 105, 0.15);
  color: #fff;
  display: flex;
  flex-direction: column;
  font-size: 20px;
  font-weight: 600;
  height: 294px;
  justify-content: space-between;
  right: 0;
  position: fixed;
  top: 0;
  width: 238px;
}
.download-action-page-container::before {
  content: '';
  background-image: url("../images/pentagon-238x294.svg");
  background-repeat: no-repeat;
  /* background-size: contain; */
  display: block;
  left: 0;
  top: 0;
  padding-top: 294px;
  position: absolute;
  width: 238px;
  z-index: 1;
}
.download-action-page-container .arrow-up {
  font-size: 60px;
  font-weight: 300;
  line-height: 1;
  opacity: 0.5;
  padding-top: 45px;
  z-index: 2;
}
.download-action-page-container .arrow-body {
  padding: 0 30px 45px;
  text-align: center;
  z-index: 2;
}

.arrow-downloaded {
  animation: animateArrow0 500ms ease-in-out 1000ms 1 normal, animateArrow1 2500ms ease-in-out 1500ms 1 normal, animateArrow2 2000ms ease-in-out 4000ms infinite normal;
}

@keyframes animateArrow0 {
  0% {
    top: 10px;
    opacity: 0;
  }
  100% {
    top: 500px;
    opacity: 0;
  }
}

@keyframes animateArrow1 {
  0% {
    top: 500px;
    opacity: 0;
  }
  33% {
    top: 50px;
    opacity: 1;
  }
  60% {
    top: 200px;
    opacity: 1;
  }
  100% {
    top: 50px;
    opacity: 1;
  }
}

@keyframes animateArrow2 {
  0% {
    top: 50px;
    opacity: 1;
  }
  50% {
    top: 120px;
    opacity: 1;
  }
  100% {
    top: 50px;
    opacity: 1;
  }
}