.version-change-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 922px;
  min-height: 750px;
}

.version-change-modal__wrapper {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform-origin: calc(100% - 39px) 23px;
}

.version-change-modal__header {
  text-align: center;
}

.version-change-modal__title {
  margin-top: 54px;
  margin-bottom: 16px;
}

.version-change-modal__cur-version {
  color: #3f4755;
  font-size: 20px;
  line-height: 28px;
  margin-right: 11px;
}

.version-change-modal__book-demo {
  font-size: 20px;
  line-height: 26px;
  color: #0e69ff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.version-change-modal__book-demo .tu-icon-fanhui {
  margin-left: 4px;
  transform: rotate(180deg);
}

.version-change-modal__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #f0f4fa;
  opacity: 0.9;
}

.version-change-modal_bg-color1 {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 201px;
  height: 244px;
  background: linear-gradient(180deg, #ffcc00 0%, #feed7e 100%);
  opacity: 0.24;
  filter: blur(45px);
}

.version-change-modal_bg-color2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 326px;
  height: 400px;
  background: linear-gradient(180deg, #e9f0ff 0%, #cbdff9 100%);
  box-shadow: inset 0px 5px 26px 0px rgba(0, 113, 255, 0.26), inset 0px -5px 24px 0px #ffffff;
  opacity: 0.36;
  filter: blur(34px);
}

.version-change-modal_bg-color3 {
  position: absolute;
  right: 115px;
  top: 0;
  width: 258px;
  height: 216px;
  background: linear-gradient(180deg, #00ffec 0%, #7eb2fe 100%);
  box-shadow: inset 0px 8px 26px 0px rgba(0, 230, 255, 0.26), inset 0px -5px 17px 0px #ffffff;
  opacity: 0.14;
  filter: blur(45px);
}

.version-change-modal__list {
  padding-top: 46px;
  padding-bottom: 20px;
  height: 498px;
  display: flex;
  align-items: center;
  overflow-x: scroll;
  scrollbar-width: none;
}

.version-change-modal__list::-webkit-scrollbar {
  display: none;
}

.version-change-modal__list-wrapper {
  position: relative;
}

.version-change-modal__list-item {
  width: 236px;
  height: 372px;
  border-radius: 22px;
  position: relative;
  transition: all 0.5s;
  flex-shrink: 0;
}

.version-change-modal__list-item:hover {
  height: 436px;
}

.version-change-modal__list-item:hover .version-change-modal__list-item-content {
  height: 312px;
}

.version-change-modal__list-item:hover .version-change-modal__btn {
  visibility: visible;
  opacity: 1;
}

.version-change-modal__list-item:not(:last-child) {
  margin-right: 20px;
}

.version-change-modal__list-item-okr {
  background: linear-gradient(288deg, #e5edff 0%, #87bafb 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset -5px 1px 8px 0px rgba(255, 255, 255, 0.76), inset 5px 0px 7px 0px #61a0f0, inset -1px 1px 3px 0px rgba(97, 160, 240, 0.25);
}

.version-change-modal__list-item-performance {
  background: linear-gradient(287deg, #fef6c1 0%, #ffdf6a 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset -5px 1px 5px 0px rgba(255, 255, 255, 0.76), inset 5px 0px 8px 0px #fecb09, inset -1px 1px 3px 0px rgba(254, 203, 9, 0.25);
}

.version-change-modal__list-item-performance-e {
  background: linear-gradient(287deg, #fff4d0 0%, #ffd87f 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px rgba(255, 255, 255, 0.93), inset 3px 0px 7px 0px #fabb27, inset -5px 0px 5px 0px #ffffff, inset -2px 1px 3px 0px rgba(255, 209, 107, 0.25);
}

.version-change-modal__list-item-senior-performance {
  background: linear-gradient(288deg, #e5e9fd 0%, #bebbff 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset -5px 1px 5px 0px rgba(255, 255, 255, 0.76), inset 5px 0px 7px 0px #adabf2, inset -1px 1px 3px 0px rgba(173, 171, 242, 0.29);
}

.version-change-modal__list-item-survey {
  background: linear-gradient(289deg, #e7ffff 0%, #62f5ff 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset -5px 1px 5px 0px rgba(255, 255, 255, 0.76), inset -1px 1px 3px 0px rgba(46, 236, 250, 0.16), inset 5px 0px 7px 0px #2eecfa;
}

.version-change-modal__list-item-utimate {
  background: linear-gradient(287deg, #fde3ce 0%, #ffcaa1 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset 5px 0px 7px 0px #ffb693, inset -5px 1px 5px 0px rgba(255, 255, 255, 0.53), inset -1px 1px 3px 0px rgba(255, 191, 156, 0.47);
}

.version-change-modal__list-item-senior-utimate {
  background: linear-gradient(289deg, #fff3f3 0%, #ffbfbf 100%);
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), inset 0px 3px 6px 0px #ffffff, inset 5px 0px 7px 0px #ffa3a3, inset -5px 1px 5px 0px rgba(255, 255, 255, 0.53), inset -1px 1px 3px 0px rgba(255, 131, 131, 0.15);
}

.version-change-modal__list-item-img {
  position: absolute;
  top: -64px;
  left: 49px;
}

.version-change-modal__list-item-title {
  font-size: 22px;
  line-height: 32px;
  text-shadow: 0px 10px 12px rgba(178, 178, 178, 0.12);
  text-align: center;
  margin-top: 61px;
  font-weight: 500;
}

.version-change-modal__list-item-title-okr {
  color: #185dc8;
}

.version-change-modal__list-item-title-performance {
  color: #8e6005;
}

.version-change-modal__list-item-title-performance-e {
  color: #a83f00;
}

.version-change-modal__list-item-title-survey {
  color: #007c88;
}

.version-change-modal__list-item-title-senior-performance {
  color: #152fa7;
}

.version-change-modal__list-item-title-utimate {
  color: #a55517;
}

.version-change-modal__list-item-title-senior-utimate {
  color: #9b1d1d;
}

.version-change-modal__list-item-content {
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12);
  transition: all 0.5s;
  box-sizing: border-box;
  background: #fff;
  border-radius: 22px;
  height: 248px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 24px 22px;
}

.version-change-modal__detail-item {
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  color: #3f4755;
  font-size: 15px;
  line-height: 24px;
}

.version-change-modal__detail-item .tu-icon-finished {
  color: #22c534;
  font-size: 20px;
}

.version-change-modal__app-item {
  margin-bottom: 10px;
  height: 42px;
  width: 100%;
  box-sizing: border-box;
  background: rgba(240, 244, 250, 0.8);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.version-change-modal__app-item-title {
  font-size: 16px;
  line-height: 24px;
  color: #3f4755;
  margin-left: 6px;
}

.version-change-modal__version-tag {
  font-weight: 500;
}

.version-change-modal__close-icon {
  position: absolute;
  top: 26px;
  right: 30px;
  background: rgba(17, 47, 92, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  width: 34px;
  height: 34px;
  color: #fff;
  cursor: pointer;
}

.version-change-modal__left-arrow, .version-change-modal__right-arrow {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0px 16px 24px 0px rgba(127, 145, 180, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 249px;
  font-size: 34px;
  cursor: pointer;
  animation: version-arrow-anim 3s infinite;
}

.version-change-modal__left-arrow {
  left: -20px;
}

.version-change-modal__right-arrow {
  right: -20px;
}

.version-change-modal__left-lv {
  transition: all 0.3s;
  position: absolute;
  left: 0;
  top: 87px;
}

.version-change-modal__left-lv--hidden {
  left: -108px;
}

.version-change-modal__btn {
  background: #0e69ff;
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), 0px 8px 18px 0px rgba(14, 105, 255, 0.21);
  border-radius: 31px;
  color: #fff;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
  text-align: center;
  padding: 12px 0;
  box-shadow: 0px 10px 12px 0px rgba(178, 178, 178, 0.12), 0px 8px 18px 0px rgba(14, 105, 255, 0.21);
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 22px;
  left: 24px;
  right: 24px;
  cursor: pointer;
  transition: all 0.4s 0.1s;
}

@media screen and (max-width: 1200px) {
  .version-change-modal__list {
    width: 814px;
  }
}

@media screen and (min-width: 1200px) {
  .version-change-modal__list {
    width: 1092px;
  }
}

@keyframes version-arrow-anim {
  0% {
    transform: translate(0, 0px);
  }

  50% {
    transform: translate(0, 20px);
  }

  100% {
    transform: translate(0, 0);
  }
}
