.phone_box {
  width: 230px;
  height: 390px;
  background: url("../images/1001/1/phone1.svg") center bottom no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -114px;
  z-index: 2;
}

.phone_box>img {
  position: absolute;
  transition: all 0.4s;
  opacity: 0;
}

.phone_box .tip_icon {
  left: -60px;
  top: 100px;
}

.phone_box .line {
  bottom: 0;
  left: 30px;
  opacity: 1;
}

.phone_box .p1 {
  right: -80px;
  top: 160px;
  transition-delay: 0.4s;
}

.phone_box .p2 {
  left: -80px;
  bottom: 110px;
  transition-delay: 0.8s;
}

.phone_box .p3 {
  right: -80px;
  bottom: 40px;
  transition-delay: 1.3s;
}

.phone_box .p4 {
  left: -80px;
  bottom: 0;
  transition-delay: 1.8s;
}

.phone_box.fadeInActive .tip_icon {
  top: 70px;
  opacity: 1;
}

.phone_box.fadeInActive .p1 {
  top: 120px;
  opacity: 1;
}

.phone_box.fadeInActive .p2 {
  bottom: 140px;
  opacity: 1;
}

.phone_box.fadeInActive .p3 {
  bottom: 80px;
  opacity: 1;
}

.phone_box.fadeInActive .p4 {
  bottom: 10px;
  opacity: 1;
}

.phone2 .tip_icon {
  left: -80px;
}

.phone2 .p1 {
  left: -30px;
  max-width: 288px;
}

.phone2 .p2 {
  bottom: 20px;
  left: 14px;
  transition-delay: 1.2s;
}

.phone2.fadeInActive .p2 {
  bottom: 60px;
  ;
}

.phone_box.phone3 {
  background-image: url("../images/1001/3/p3.png");
}

.phone3 .tip_icon {
  left: auto;
  top: auto;
  right: -60px;
  bottom: 0;
  transition-delay: 1.5s;
}

.phone3 .p1 {
  right: -30px;
  top: 120px;
  transition-delay: 1s;
  max-width: 295px;
  transition-delay: 0.5s;
}

.phone3 .p2 {
  left: -34px;
  top: 220px;
  transition-delay: 1s;
  max-width: 295px;
  transition-delay: 1s;
}

.phone3 .p3 {
  bottom: -40px;
  right: 14px;
  transition-delay: 1.5s;
}

.phone3.fadeInActive .tip_icon {
  opacity: 1;
  top: auto;
  bottom: 20px;
}

.phone3.fadeInActive .p1 {
  opacity: 1;
  top: 80px;
}

.phone3.fadeInActive .p2 {
  opacity: 1;
  top: 190px;
}

.phone3.fadeInActive .p3 {
  opacity: 1;
  bottom: 2px;
}

.color_round {
  background: linear-gradient(180deg, #9f92ff 0%, rgba(255, 255, 255, 0.22) 100%);
  border-radius: 50%;
  position: absolute;
}

.color_round.round1 {
  width: 200px;
  height: 200px;
  opacity: 0.2;
  left: 20px;
  top: 10px;
}

.color_round.round2 {
  width: 140px;
  height: 140px;
  opacity: 0.1;
  right: 20px;
  bottom: 100px;
}

.shadow_phone_box {
  width: 230px;
  height: 390px;
  position: absolute;
  left: 50%;
  margin-left: -115px;
  bottom: 0;
}

.shadow_phone {
  width: 230px;
  height: 390px;
  border-radius: 30px;
}

.shadow_phone.p1 {
  background: linear-gradient(180deg, #7dcd8e 0%, rgba(255, 255, 255, 0.22) 100%);
  position: absolute;
  top: 0;
  transform: rotate(5deg);
}

.shadow_phone.p1:last-child {
  transform: rotate(10deg);
}

.shadow_phone.p2 {
  background: linear-gradient(180deg, #cee6ff 0%, rgba(255, 255, 255, 0.22) 100%);
  position: absolute;
  bottom: -80px;
  right: -40px;
  transform: rotate(15deg);
}

.shadow_phone.p2:last-child {
  transform: rotate(-20deg);
  bottom: -160px;
  left: -20px;
}