@charset "UTF-8";
@import "../lib/animates.css";
/* 清除默认的外边距和内边距 */
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
img,
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img,
input,
button,
textarea {
  border: none;
  padding: 0;
  margin: 0;
  outline-style: none;
}
ul,
ol {
  list-style: none;
  font-size: 12px;
}
input {
  font-family: "SimSun", "宋体";
}
select,
input,
textarea {
  font-size: 12px;
  margin: 0;
}
textarea {
  resize: none;
}
img {
  border: 0;
  /* 可以防止 img 下边出现缝隙问题 */
  vertical-align: middle;
}
body,
html {
  /* 将整个页面的字体, 默认重置 */
  font-size: 12px;
  color: #666;
  background: #fff;
  --themeColor: #fabbd8;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
p,
span,
i {
  font-size: 12px;
}
a {
  color: #666;
  text-decoration: none;
  font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}
/* 废物利用 1*/
s,
i,
em {
  font-style: normal;
  text-decoration: none;
}
div {
  font-size: 0;
}
.ellipsis,
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ell2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
  overflow: hidden;
}
.ell3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3 !important;
  overflow: hidden;
}
.container {
  width: 540px;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.l50 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.t50 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.cen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.infinite {
  animation-iteration-count: infinite;
}
.h5_show .edit:hover {
  cursor: all-scroll;
  outline: 2px solid #1491fc;
}
.form-box form {
  margin-top: 0.66666667rem;
}
.form-box .input-box {
  display: flex;
  margin-bottom: 0.36rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  background: #fff;
  overflow: hidden;
}
.form-box .input-box:last-child {
  margin-bottom: 0;
}
.form-box .input-box p {
  width: 1.6rem;
  flex-shrink: 0;
  line-height: 1.33333333rem;
  color: #000;
  padding-left: 0.26666667rem;
  box-sizing: border-box;
  font-size: 0.34666667rem;
}
.form-box .input-box input {
  flex: 1;
  line-height: 1.2rem;
  background: transparent;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.form-box button {
  width: 100%;
  height: 1.33333333rem;
  background-color: #ffe341;
  font-size: 0.48rem;
  line-height: 1.33333333rem;
  color: #000;
  display: block;
  margin: 0 auto;
}
.img-list ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.img-list ul img {
  width: 3.6rem;
  height: 3.6rem;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
  border-radius: 0.13333333rem;
}
.img-list ul img:nth-last-child(-n+2) {
  margin-bottom: 0;
}
.li-row ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.li-row ul li {
  width: 3.93333333rem;
  margin-top: 0.53333333rem;
}
.li-row ul li img {
  width: 3.93333333rem;
  height: 3.93333333rem;
  box-sizing: border-box;
  display: block;
  margin: 0 auto;
}
.li-row ul li p {
  text-align: center;
}
.li-line ul li {
  display: flex;
  margin-bottom: 0.4rem;
  width: 100%;
  align-items: center;
}
.li-line ul li:last-child {
  margin-bottom: 0;
}
.li-line ul li img {
  flex-shrink: 0;
  width: 2.04rem;
  height: 2.04rem;
  border-radius: 0.06666667rem;
}
.li-line ul li .info-r {
  flex: 1;
  padding-left: 0.4rem;
  box-sizing: border-box;
  overflow: hidden;
}
.li-line ul li h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-line ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.li-line ul li i {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  overflow: hidden;
  height: 100%;
}
.swiper-slide > div {
  width: 100%;
  height: 100%;
}
.edit {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
html,
body {
  color: #494949;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0 auto;
  overflow: hidden;
}
@media (min-aspect-ratio: 10/16) and (min-width: 768px) {
  .container {
    width: 10rem;
    margin: 0 auto;
  }
}
@media (max-aspect-ratio: 9/16) {
  .container {
    height: 100%;
  }
}
@media (max-width: 319px) {
  html {
    width: 320px;
    overflow-x: auto;
  }
}
@media (max-height: 568px) {
  html {
    height: 568px;
    overflow-y: auto;
  }
}
.swiper-slide {
  background: linear-gradient(to bottom, #aabdff, #d693fd);
  background-size: 100% 100%;
}
.container {
  opacity: 0;
}
.container.now {
  opacity: 1;
}
.box {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.box.now {
  transition: all 0.8s;
}
.box .cen {
  width: 9.69333333rem;
  height: 16.17333333rem;
  background: url('../images/box.png') no-repeat;
  background-size: 100% 100%;
}
.box .cen.cen-box {
  background: none;
  z-index: 20;
  padding: 0.8rem 0.46666667rem 0 0.4rem;
}
.box .peo {
  width: 2.93333333rem;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0.14666667rem;
}
.box .tit {
  width: 4.70666667rem;
  height: 1.04rem;
  background: url('../images/tit.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0.58666667rem;
  text-align: center;
}
.box .tit p {
  line-height: 1.04rem;
  font-size: 0.64rem;
  color: #4458bd;
  padding: 0 0.48rem;
  text-align: center;
  font-weight: bold;
}
.box .top {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.box .bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@keyframes iconAni {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(508%, -337%);
  }
  100% {
    transform: translate(-295%, -949%);
  }
}
.box .ball {
  width: 1.29333333rem;
  height: 1.29333333rem;
  position: absolute;
  left: 2.29333333rem;
  bottom: -1.29333333rem;
  z-index: 2;
}
@keyframes iconAni2 {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(1075%, 830%);
  }
  100% {
    transform: translate(-270%, 1808%);
  }
}
.box .ball2 {
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
  left: 1.18666667rem;
  top: -0.76rem;
  z-index: 2;
}
@keyframes bgShow {
  0% {
    transform: scale(1.05);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes bgShow2 {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
.swiper-slide > div.now .ball {
  animation: iconAni 10s linear infinite;
}
.swiper-slide > div.now .ball2 {
  animation: iconAni2 8s linear infinite;
}
.swiper-slide > div.now .cen {
  animation: spaceInDown 1.5s 0s both;
}
.swiper-slide > div.now .top {
  animation: fadeInDown 1.5s 0s both;
}
.swiper-slide > div.now .bottom {
  animation: fadeInUp 1.5s 0s both;
}
.swiper-slide > div.now .tit {
  animation: spaceInUp 1.5s 1s both;
}
.swiper-slide > div.now .peo {
  animation: scale-br 1.5s 0s both;
}
.sw-box {
  height: 100%;
  opacity: 0;
}
div > div.now .sw-box {
  opacity: 1;
}
div .one.now {
  opacity: 1;
  animation: bgShow 1s 0s both;
}
div .one.now .logo {
  animation: roll-left 1.5s 0.3s both;
}
div .one.now .peo {
  animation: rotateInDownRight 2s 0s both;
}
div .one.now ol li:nth-of-type(1) {
  animation: rs-sl 1.5s 0.6s both;
}
div .one.now ol li:nth-of-type(2) {
  animation: rs-sr 1.5s 0.7s both;
}
div .one.now ol li:nth-of-type(3) {
  animation: rs-sl 1.5s 0.8s both;
}
div .one.now ol li:nth-of-type(4) {
  animation: rs-sr 1.5s 0.9s both;
}
div .one.now .ban-txt {
  animation: spaceInUp 1.5s 0s both;
}
div .one.now .ban-txt h2:nth-of-type(1) {
  animation: fadeInRight 1.5s 0.5s both;
}
div .one.now .ban-txt h2:nth-of-type(2) {
  animation: fadeInLeft 1.5s 0.5s both;
}
div .one.now .ban-bot {
  animation: spaceInDown 1.5s 0s both;
}
div .one.now .ban-bot p {
  animation: spaceInDown 1.5s 0.5s both;
}
div .one.now .p-cen {
  animation: spaceInDown 1.5s 0.7s both;
}
div .one.now .bot-info {
  animation: spaceInLeft 1.5s 0.5s both;
}
div .one.now h3 {
  animation: spaceInRight 1.5s 0.5s both;
}
div .one.now .ban-box {
  animation: scale-bl 1.5s 0.5s both;
}
div .one.now .ban-box .ban-peo {
  animation: scale-br 1.5s 0.5s both;
}
div .one.now .ban-box .arrow {
  animation: bounceInDown 1.5s 1s both;
}
div .one.now .ban-box p {
  animation: bounceInRight 1.5s 0.8s both;
}
div .one.now .ban-box .price-box {
  animation: bounceInRight 1.5s 1s both;
}
div .two.now {
  opacity: 1;
}
div .two.now .cen {
  animation: scale-center 1.5s 0s both;
}
div .two.now .tit {
  animation: fadeInRight 1.5s 0.6s both;
}
div .two.now ul li:nth-of-type(1) h2 {
  animation: spaceInLeft 1.5s 0.5s both;
}
div .two.now ul li:nth-of-type(1) .info {
  animation: scale-br 1.5s 0.5s both;
}
div .two.now ul li:nth-of-type(1) p {
  animation: spaceInDown 1.5s 1s both;
}
div .two.now ul li:nth-of-type(2) h2 {
  animation: spaceInLeft 1.5s 1s both;
}
div .two.now ul li:nth-of-type(2) .info {
  animation: scale-bl 1.5s 1s both;
}
div .two.now ul li:nth-of-type(2) p {
  animation: spaceInDown 1.5s 1.3s both;
}
div .two.now ul li:nth-of-type(3) h2 {
  animation: spaceInLeft 1.5s 1.5s both;
}
div .two.now ul li:nth-of-type(3) .info {
  animation: scale-br 1.5s 1.5s both;
}
div .two.now ul li:nth-of-type(3) p {
  animation: spaceInDown 1.5s 1.6s both;
}
div .two.now h3 {
  animation: scale_width 1.5s 1.6s both;
}
div .three.now {
  opacity: 1;
}
div .three.now .cen {
  animation: spaceInRight 1.5s 0s both;
}
div .three.now .tit {
  animation: rs-sl 1.5s 1s both;
}
div .three.now h2 {
  animation: scale_height 1.5s 1s both;
}
div .three.now ul li:nth-of-type(1) {
  animation: scale-top 1.5s 0.5s both;
}
div .three.now ul li:nth-of-type(1) .img-box {
  animation: scale-bl 1.5s 1s both;
}
div .three.now ul li:nth-of-type(1) .img-box img {
  animation: scale-tl 1.5s 1.5s both;
}
div .three.now ul li:nth-of-type(1) p {
  animation: fadeInDown 1.5s 1s both;
}
div .three.now ul li:nth-of-type(1) h2 {
  animation: fadeInUp 1.5s 1s both;
}
div .three.now ul li:nth-of-type(2) {
  animation: scale-top 1.5s 0.8s both;
}
div .three.now ul li:nth-of-type(2) .img-box {
  animation: scale-bl 1.5s 1.4s both;
}
div .three.now ul li:nth-of-type(2) .img-box img {
  animation: scale-tl 1.5s 1.9s both;
}
div .three.now ul li:nth-of-type(2) p {
  animation: fadeInDown 1.5s 1.2s both;
}
div .three.now ul li:nth-of-type(2) h2 {
  animation: fadeInUp 1.5s 1.2s both;
}
div .three.now ul li:nth-of-type(3) {
  animation: scale-top 1.5s 1.1s both;
}
div .three.now ul li:nth-of-type(3) .img-box {
  animation: scale-bl 1.5s 1.6s both;
}
div .three.now ul li:nth-of-type(3) .img-box img {
  animation: scale-tl 1.5s 2.1s both;
}
div .three.now ul li:nth-of-type(3) p {
  animation: fadeInDown 1.5s 1.4s both;
}
div .three.now ul li:nth-of-type(3) h2 {
  animation: fadeInUp 1.5s 1.4s both;
}
div .three.now ul li:nth-of-type(4) {
  animation: scale-top 1.5s 1.4s both;
}
div .three.now ul li:nth-of-type(4) .img-box {
  animation: scale-bl 1.5s 1.8s both;
}
div .three.now ul li:nth-of-type(4) .img-box img {
  animation: scale-tl 1.5s 2.3s both;
}
div .three.now ul li:nth-of-type(4) p {
  animation: fadeInDown 1.5s 1.6s both;
}
div .three.now ul li:nth-of-type(4) h2 {
  animation: fadeInUp 1.5s 1.6s both;
}
div .four.now {
  opacity: 1;
}
div .four.now .cen {
  animation: spaceInUp 1.5s 0s both;
}
div .four.now .tit {
  animation: scale_width 1.5s 0s both;
}
div .four.now ul li:nth-of-type(1) {
  animation: skew-tl 1.5s 0.7s both;
}
div .four.now ul li:nth-of-type(2) {
  animation: skew-tr 1.5s 0.7s both;
}
div .four.now ul li:nth-of-type(3) {
  animation: skew-l 1.5s 0.7s both;
}
div .four.now ul li:nth-of-type(4) {
  animation: skew-r 1.5s 0.7s both;
}
div .four.now ul li:nth-of-type(5) {
  animation: skew-bl 1.5s 0.7s both;
}
div .four.now ul li:nth-of-type(6) {
  animation: skew-br 1.5s 0.7s both;
}
div .five.now {
  opacity: 1;
}
div .five.now .cen {
  animation: spaceInUp 1.5s 0s both;
}
div .five.now .tit {
  animation: boingInUp 1.5s 1s both;
}
div .five.now .cen > p {
  animation: fadeInDown 1.5s 0.5s both;
}
div .five.now .ab-img .img1 {
  animation: spaceInLeft 1.5s 1s both;
}
div .five.now .ab-img .img-b img:nth-of-type(1) {
  animation: fadeInDown 1.5s 1s both;
}
div .five.now .ab-img .img-b img:nth-of-type(2) {
  animation: fadeInDown 1.5s 1.2s both;
}
div .five.now .ab-img .img-b img:nth-of-type(3) {
  animation: fadeInUp 1.5s 1.3s both;
}
div .five.now .ab-img .img-b img:nth-of-type(4) {
  animation: fadeInUp 1.5s 1.4s both;
}
div .six.now {
  opacity: 1;
}
div .six.now .tit {
  animation: boingInBottom 1.5s 1s both;
}
div .six.now .input-box:nth-child(1) {
  animation: scale-center 1s 0.33333333s both;
}
div .six.now .input-box:nth-child(2) {
  animation: scale-center 1s 0.66666667s both;
}
div .six.now .input-box:nth-child(3) {
  animation: scale-center 1s 1s both;
}
div .six.now .input-box:nth-child(4) {
  animation: scale-center 1s 1.33333333s both;
}
div .six.now .input-box:nth-child(5) {
  animation: scale-center 1s 1.66666667s both;
}
div .six.now button {
  animation: scale-center 1s 1.5s both;
}
div .six.now .img-box {
  animation: scale-center 1s 1.7s both;
}
div .six.now .info p:nth-of-type(1) {
  animation: scale-center 1s 1.8s both;
}
div .six.now .info p:nth-of-type(2) {
  animation: scale-center 1s 1.9s both;
}
.one {
  position: relative;
  overflow: hidden;
  opacity: 0;
  background: url('../images/bg.png') no-repeat;
  background-size: 100%;
}
.one .sw-box {
  overflow: hidden;
}
.one .logo {
  max-width: 2.93333333rem;
  max-height: 1.78666667rem;
  position: absolute !important;
  z-index: 10;
  top: 0.30666667rem;
  left: 0.26666667rem;
}
.one .ban-bg {
  width: 100%;
}
.one .ban-txt {
  width: 9.46666667rem;
  height: 5.46666667rem;
  padding: 1.06666667rem 0.6rem 0.70666667rem;
  background: url('../images/ban-txt.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0.82666667rem;
  left: 0;
  right: 0;
  margin: auto;
}
.one .ban-txt h2 {
  font-size: 1.25333333rem;
  line-height: 1.73333333rem;
  color: #ffffff;
  text-shadow: 0rem 0.16rem 0rem #4458bd;
  font-weight: bold;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0.05333333rem #de63a3;
  text-align: center;
}
.one .ban-bot {
  width: 8.72rem;
  height: 2.22666667rem;
  background: url('../images/ban-bot.png') no-repeat;
  background-size: 100% 100%;
  padding-top: 1.13333333rem;
  position: absolute;
  top: 5.70666667rem;
  left: 0;
  right: 0;
  margin: auto;
}
.one .ban-bot p {
  text-align: center;
  font-size: 0.44rem;
  line-height: 0.48rem;
  letter-spacing: 0.02666667rem;
  color: #ffffff;
  padding: 0 0.13333333rem;
}
.one .p-cen {
  font-size: 0.85333333rem;
  line-height: 1.02666667rem;
  letter-spacing: 0.06666667rem;
  margin: 7.93333333rem auto 0;
  text-align: center;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0.04rem #4458bd;
  font-weight: bold;
  width: 90%;
}
.one ol {
  width: 8.86666667rem;
  justify-content: space-between;
  display: flex;
  margin: 0.30666667rem auto 0;
  text-align: center;
}
.one ol li {
  width: 2.69333333rem;
  height: 1.06666667rem;
  background: url('../images/li.png') no-repeat;
  background-size: 100% 100%;
  font-size: 0.44rem;
  line-height: 0.96rem;
  letter-spacing: 0.02666667rem;
  color: #4458bd;
  text-align: center;
  padding: 0 0.06666667rem;
  font-weight: bold;
}
.one h3 {
  font-size: 1.06666667rem;
  line-height: 1.13333333rem;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 0.04rem #de63a3;
  margin: 0.34666667rem auto 0;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.06666667rem;
}
.one .bot-info {
  width: 100%;
  height: 1.26666667rem;
  background: url('../images/bot-info.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 0.34666667rem;
}
.one .bot-info p {
  padding-left: 0.8rem;
  padding-right: 2.2rem;
  font-size: 0.46666667rem;
  line-height: 0.96rem;
  letter-spacing: 0.04rem;
  color: #4458bd;
  font-weight: bold;
}
.one .icon {
  width: 7.8rem;
  right: 0;
  bottom: 0.06666667rem;
  left: 0;
  margin: auto;
  position: absolute;
}
.one .ban-box {
  width: 9.48rem;
  height: 3.50666667rem;
  background: url('../images/ban-box.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 0.66666667rem;
  left: 0;
  right: 0;
  margin: auto;
}
.one .ban-box .arrow {
  width: 3.09333333rem;
  height: 3.06666667rem;
  background: url('../images/arrow.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 0.05333333rem;
  margin-left: 0.05333333rem;
  padding: 0.4rem 0.61333333rem 0;
  text-align: center;
}
.one .ban-box .arrow i {
  font-size: 0.37333333rem;
  line-height: 0.4rem;
  color: #ffffff;
}
.one .ban-box .arrow h2 {
  font-size: 0.6rem;
  color: #ffffff;
  line-height: 0.88rem;
  font-weight: bold;
}
.one .ban-box .arrow span {
  font-size: 0.32rem;
  line-height: 0.34666667rem;
  color: #ffffff;
}
.one .ban-box p {
  width: 4.84rem;
  height: 0.64rem;
  background-color: #f9637d;
  border-radius: 0.32rem;
  font-size: 0.34666667rem;
  line-height: 0.64rem;
  letter-spacing: 0.02666667rem;
  color: #ffffff;
  text-align: center;
  padding: 0 0.26666667rem;
  top: 0.26666667rem;
  left: 3.10666667rem;
  position: absolute;
}
.one .ban-box .price-box {
  width: 3.61333333rem;
  height: 1.72rem;
  display: flex;
  padding-left: 0.06666667rem;
  align-items: center;
  border-top: 0.01333333rem dashed #f9637d;
  border-bottom: 0.01333333rem dashed #f9637d;
  position: absolute;
  top: 1.13333333rem;
  left: 3.49333333rem;
}
.one .ban-box .price-box h5 {
  font-size: 0.36rem;
  line-height: 0.4rem;
  letter-spacing: 0.06666667rem;
  color: #f9637d;
  writing-mode: vertical-lr;
  height: 0.93333333rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.one .ban-box .price-box h4 {
  font-size: 0.65333333rem;
  line-height: 0.64rem;
  color: #f9637d;
  width: 2.06666667rem;
  text-align: center;
  font-weight: bold;
  text-decoration: line-through;
  padding: 0 0.06666667rem;
}
.one .ban-box .price-box span {
  font-size: 0.34666667rem;
  line-height: 0.64rem;
  color: #f9637d;
  width: 0.6rem;
}
.one .ban-box .ban-peo {
  width: 3.4rem;
  right: -0.24rem;
  top: -1.49333333rem;
  position: absolute;
}
p {
  font-size: 0.4rem;
  line-height: 0.69333333rem;
  color: #4458bd;
}
.two,
.three,
.four,
.six,
.five {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.two.now,
.three.now,
.four.now,
.six.now,
.five.now {
  transition: all 0.8s;
}
.two .cen,
.three .cen,
.four .cen,
.six .cen,
.five .cen {
  width: 9.69333333rem;
  height: 16.17333333rem;
  background: url('../images/box.png') no-repeat;
  background-size: 100% 100%;
}
.two .cen.cen-box,
.three .cen.cen-box,
.four .cen.cen-box,
.six .cen.cen-box,
.five .cen.cen-box {
  background: none;
  z-index: 20;
  padding: 0.8rem 0.46666667rem 0 0.4rem;
}
.two .peo,
.three .peo,
.four .peo,
.six .peo,
.five .peo {
  width: 2.93333333rem;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0.14666667rem;
}
.two .tit,
.three .tit,
.four .tit,
.six .tit,
.five .tit {
  width: 4.70666667rem;
  height: 1.04rem;
  background: url('../images/tit.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0.58666667rem;
  text-align: center;
}
.two .tit p,
.three .tit p,
.four .tit p,
.six .tit p,
.five .tit p {
  line-height: 1.04rem;
  font-size: 0.64rem;
  color: #4458bd;
  padding: 0 0.48rem;
  text-align: center;
  font-weight: bold;
}
.two .top,
.three .top,
.four .top,
.six .top,
.five .top {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.two .bottom,
.three .bottom,
.four .bottom,
.six .bottom,
.five .bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@keyframes iconAni {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(508%, -337%);
  }
  100% {
    transform: translate(-295%, -949%);
  }
}
.two .ball,
.three .ball,
.four .ball,
.six .ball,
.five .ball {
  width: 1.29333333rem;
  height: 1.29333333rem;
  position: absolute;
  left: 2.29333333rem;
  bottom: -1.29333333rem;
  z-index: 2;
}
@keyframes iconAni2 {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(1075%, 830%);
  }
  100% {
    transform: translate(-270%, 1808%);
  }
}
.two .ball2,
.three .ball2,
.four .ball2,
.six .ball2,
.five .ball2 {
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
  left: 1.18666667rem;
  top: -0.76rem;
  z-index: 2;
}
.two ul {
  margin: 0 auto;
  width: 100%;
}
.two ul li {
  margin-bottom: 0.13333333rem;
}
.two ul li:nth-of-type(2) .info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.two ul li:nth-of-type(1) p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.two ul li h2 {
  width: 2.26666667rem;
  height: 2.08rem;
  background-color: #4458bd;
  border-radius: 0rem 1.04rem 1.04rem 0rem;
  text-align: center;
  font-size: 1.17333333rem;
  line-height: 1.92rem;
  color: #ffffff;
  font-weight: bold;
  padding-right: 0.4rem;
}
.two ul li .info {
  width: 6.94666667rem;
  background-color: #ffeefd;
  border-radius: 0.58666667rem;
  border: solid 0.05333333rem #4458bd;
  padding: 0.49333333rem;
  margin-left: 1.57333333rem;
  margin-top: -1.6rem;
  position: relative;
  z-index: 200;
}
.two ul li .info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.three .tit {
  margin-bottom: 0.4rem;
}
.three ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.three ul li {
  width: 8.05333333rem;
  height: 2.82666667rem;
  background-color: #ffeefd;
  border: solid 0.02666667rem #4458bd;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  margin-bottom: 0.44rem;
  overflow: hidden;
  align-items: center;
  border-radius: 0.26666667rem;
}
.three ul li .img-box {
  width: 2.82666667rem;
  height: 100%;
  border-radius: 0 1.41333333rem 1.41333333rem 0;
  padding: 0.05333333rem;
  overflow: hidden;
  flex-shrink: 0;
  background: #4458bd;
  font-size: 0;
  padding: 0;
  margin: 0;
  border-right: solid 0.05333333rem #4458bd;
}
.three ul li .img-box img {
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0;
  border-radius: 0 1.41333333rem 1.41333333rem 0;
}
.three ul li .info {
  padding-left: 0.26666667rem;
}
.three ul li .info h2 {
  font-size: 0.48rem;
  line-height: 0.77333333rem;
  color: #4458bd;
  font-weight: bold;
}
.three ul li .info p {
  font-size: 0.4rem;
  line-height: 0.69333333rem;
  color: #4458bd;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: 1.30666667rem;
}
.four ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 0.90666667rem;
}
.four ul li {
  position: relative;
  margin-bottom: 0.32rem;
  font-size: 0;
  cursor: move;
}
.four ul li .img-box {
  width: 3.48rem;
  height: 3.48rem;
}
.four ul li img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0.16rem;
}
.four ul li p {
  width: 3.46666667rem;
  height: 0.77333333rem;
  background-color: #e24e57;
  font-size: 0.4rem;
  line-height: 0.77333333rem;
  text-align: center;
  color: #140657;
  position: absolute !important;
  right: 0;
  bottom: 0;
}
.five .cen > p {
  width: 8.04rem;
  font-size: 0.4rem;
  line-height: 0.69333333rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
  margin: 0 auto;
}
.five .ab-img {
  width: 8.04rem;
  margin: 0 auto;
  margin-top: 0.26666667rem;
  display: flex;
}
.five .ab-img img {
  width: 2.56rem;
  height: 2.56rem;
  border-radius: 0.26666667rem;
  border: solid 0.05333333rem #4458bd;
  flex-shrink: 0;
  box-sizing: border-box;
}
.five .ab-img img.img1 {
  width: 2.54666667rem;
  height: 5.29333333rem;
  background-color: #4458bd;
}
.five .ab-img .img-b {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.five .ab-img .img-b img:nth-of-type(-n+2) {
  margin-bottom: 0.13333333rem;
}
.six {
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.six.now {
  transition: all 0.8s;
}
.six .cen {
  width: 9.69333333rem;
  height: 16.17333333rem;
  background: url('../images/box.png') no-repeat;
  background-size: 100% 100%;
}
.six .cen.cen-box {
  background: none;
  z-index: 20;
  padding: 0.8rem 0.46666667rem 0 0.4rem;
}
.six .peo {
  width: 2.93333333rem;
  position: absolute;
  z-index: 1;
  bottom: 0;
  right: 0.14666667rem;
}
.six .tit {
  width: 4.70666667rem;
  height: 1.04rem;
  background: url('../images/tit.png') no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 0.58666667rem;
  text-align: center;
}
.six .tit p {
  line-height: 1.04rem;
  font-size: 0.64rem;
  color: #4458bd;
  padding: 0 0.48rem;
  text-align: center;
  font-weight: bold;
}
.six .top {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.six .bottom {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@keyframes iconAni {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(508%, -337%);
  }
  100% {
    transform: translate(-295%, -949%);
  }
}
.six .ball {
  width: 1.29333333rem;
  height: 1.29333333rem;
  position: absolute;
  left: 2.29333333rem;
  bottom: -1.29333333rem;
  z-index: 2;
}
@keyframes iconAni2 {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translate(1075%, 830%);
  }
  100% {
    transform: translate(-270%, 1808%);
  }
}
.six .ball2 {
  width: 0.76rem;
  height: 0.76rem;
  position: absolute;
  left: 1.18666667rem;
  top: -0.76rem;
  z-index: 2;
}
.six form {
  margin-top: 0.66666667rem;
}
.six .input-box {
  display: flex;
  margin-bottom: 0.36rem;
  box-sizing: border-box;
  border-radius: 0.2rem;
  background: #fff;
  overflow: hidden;
}
.six .input-box:last-child {
  margin-bottom: 0;
}
.six .input-box p {
  width: 1.6rem;
  flex-shrink: 0;
  line-height: 1.33333333rem;
  color: #000;
  padding-left: 0.26666667rem;
  box-sizing: border-box;
  font-size: 0.34666667rem;
}
.six .input-box input {
  flex: 1;
  line-height: 1.2rem;
  background: transparent;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.six button {
  width: 100%;
  height: 1.33333333rem;
  background-color: #ffe341;
  font-size: 0.48rem;
  line-height: 1.33333333rem;
  color: #000;
  display: block;
  margin: 0 auto;
}
.six form {
  margin-top: 0.84rem;
}
.six .input-box {
  width: 7.73333333rem;
  height: 1.06666667rem;
  background-color: #f6f4ff;
  border-radius: 0.53333333rem;
  border: solid 0.01333333rem #4458bd;
  margin: 0 auto 0.53333333rem;
}
.six .input-box p,
.six .input-box input {
  line-height: 1.06666667rem;
  color: #4458bd;
  font-size: 0.4rem;
}
.six .input-box p {
  font-weight: bold;
}
.six button {
  width: 4.26666667rem;
  height: 1.06666667rem;
  background-color: #4458bd;
  border-radius: 0.53333333rem;
  margin-top: 0.8rem;
}
.six button p {
  font-size: 0.4rem;
  color: #fff;
}
.six .code-info {
  width: 93%;
  margin: 0.8rem auto 0;
}
.six .img-box {
  width: 2rem;
  height: 2rem;
  border: solid 0.02666667rem #4458bd;
  padding: 0.05333333rem;
  background: #fff;
  flex-shrink: 0;
  box-shadow: none;
  margin: 0.56rem auto 0;
  text-align: center;
}
.six .img-box img {
  width: 100%;
  height: 100%;
}
.six .info p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.4rem;
  line-height: 0.64rem;
  color: #4458bd;
  flex: 1;
  flex-shrink: 0;
  padding-left: 0.37333333rem;
  text-align: center;
}