.page {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.tc {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg img {
  object-fit: cover;
  height: 100%;
}

.p1 .slogan {
  width: 2.5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 8%;
}

.p1 .p1_title {
  width: 6.5rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 31%;
  height: 3.8rem;
}

.p1 .p1_title .title1 {
  width: 4.58rem;
  text-align: left;
  animation-delay: .3s;
  mask-image: url(../img/mask.png);
  -webkit-mask-image: url(../img/mask.png);
  mask-size: auto;
  -webkit-mask-size: auto;
  mask-position: 100% 100%;
  -webkit-mask-position: 100% 100%;
  padding: 6px 0;
}

.p1 .p1_title .title2 {
  width: 5.04rem;
  position: absolute;
  bottom: 0;
  right: 0;
  animation-delay: .8s;
  mask-image: url(../img/mask.png);
  -webkit-mask-image: url(../img/mask.png);
  mask-size: auto;
  -webkit-mask-size: auto;
  mask-position: 100% 100%;
  -webkit-mask-position: 100% 100%;
  padding: 6px 0;
}

.p1 .p1_title .title2 .xin {
  width: 0.69rem;
  position: absolute;
  top: 0%;
  left: 34%;
  opacity: 0;
  animation-delay: 1.5s;
}

.p1 .progress {
  width: 4.13rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 10%;
  overflow: hidden;
  border-radius: 30px;
  box-sizing: border-box;
}

.p1 .progress .pro_color {
  width: 0rem;
  position: absolute;
  top: 50%;
  left: 1.1%;
  height: 80%;
  border-radius: 20px;
  transform: translateY(-50%);
  box-sizing: border-box;
  padding: 0px 0px;
  background-color: #f7d522;
}

.p1 .p1_btn {
  width: 2.68rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 15%;
}

.p1 .ji {
  position: absolute;
  width: .6rem;
  left: -52%;
  right: 0;
  bottom: 9.5%;
  margin: 0 auto;
}

.p1 .rule_btn {
  width: 2.2rem;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 4.5%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p1 .rule_btn .choose_icon {
  width: 9px;
  height: 9px;
  border: 1px #833114 solid;
  border-radius: 50%;
  margin-right: 5px;
  margin-top: -0.5px;
}

.p1 .rule_btn .choose_act {
  background-color: #833114;
}

.p1 .rule_btn .r_show {
  position: absolute;
  height: 100%;
  width: 50%;
  opacity: 0;
  right: 0;
  top: 0;
}

.p1 .rule_btn .r_choose {
  position: absolute;
  height: 20px;
  width: 20px;
  opacity: 0;
  left: -13%;
  top: -45%;
}

.p1 .rule .rule_box {
  width: 90%;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  height: 85%;
  overflow: hidden;
  border-radius: 15px;
  border: 1px #16789e solid;
  padding: 15px 20px;
  box-sizing: border-box;
  background-color: #fff;
}

.p1 .rule .rule_box .r_title {
  width: 2.32rem;
  margin: 0 auto;
}

.p1 .rule .rule_box .r_return {
  position: absolute;
  width: 30px;
  padding: 9px;
  box-sizing: border-box;
  top: 10px;
  left: 20px;
}

.p1 .rule .rule_box .rule_txt {
  color: #5a5b5b;
  font-size: .24rem;
  margin-top: .5rem;
  height: 90%;
  overflow: hidden;
  overflow-y: auto;
}

.p1 .rule .rule_box .rule_txt p {
  margin: 10px auto;
}

.p2 .box .p2_bg {
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
}

.p2 .box .diy_arr {
  position: absolute;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: perspective(1000px);
}

.p2 .box .diy_arr .diy_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p2 .box .diy_arr .big_0 {
  width: 165px;
}

.p2 .box .diy_arr .big_5 {
  width: 250px;
}

.p2 .box .diy_arr .big_10, .p2 .box .diy_arr .big_28, .p2 .box .diy_arr .big_36, .p2 .box .diy_arr .big_43, .p2 .box .diy_arr .big_45 {
  width: 200px;
}

.p2 .box .diy_arr .big_15, .p2 .box .diy_arr .big_26, .p2 .box .diy_arr .big_40 {
  width: 75px;
}

.p2 .box .diy_arr .big_8, .p2 .box .diy_arr .big_9, .p2 .box .diy_arr .big_33, .p2 .box .diy_arr .big_34, .p2 .box .diy_arr .big_46 {
  width: 90px;
}

.p2 .box .diy_arr .big_47 {
  width: 150px;
}

.p2 .p2_btn1 {
  width: 1.61rem;
  position: absolute;
  top: 3%;
  right: 28%;
}

.p2 .p2_btn2 {
  width: 1.61rem;
  position: absolute;
  top: 3%;
  right: 3%;
}

.p2 .dec_list {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.p2 .dec_list .d_menu {
  position: absolute;
  top: -3.2rem;
  width: 100%;
  background-color: #fbeab1;
  display: flex;
}

.p2 .dec_list .d_menu div {
  width: 17%;
  padding: 8px 0;
}

.p2 .dec_list .d_menu div img {
  width: 0.43rem;
  margin: 0 auto;
}

.p2 .dec_list .d_menu .act_span {
  background: #fffde4;
}

.p2 .dec_list .decorate {
  background: #fffde4;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 20px 0;
  width: 100%;
  height: 2.5rem;
  box-sizing: border-box;
}

.p2 .dec_list .swi_box {
  display: flex;
  align-items: baseline;
  overflow: hidden;
  overflow-x: auto;
}

.p2 .dec_list .swi_box::-webkit-scrollbar {
  -webkit-appearance: none;
}

.p2 .dec_list .swi_box::-webkit-scrollbar:vertical {
  width: 50px;
}

.p2 .dec_list .swi_box::-webkit-scrollbar:horizontal {
  height: 5px;
}

.p2 .dec_list .swi_box::-webkit-scrollbar-thumb {
  background-color: #fbeab1;
  border-radius: 10px;
}

.p2 .dec_list .decorate1 img {
  width: 60px;
  padding: 3%;
}

.p2 .dec_list .decorate2 img {
  width: 14%;
  padding: 3%;
}

.p2 .decorate3 img {
  width: 14%;
  padding: 3%;
}

.p2 .edit {
  border: 1px dashed rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.p2 .icon_change {
  position: absolute;
  width: 22px;
  top: -10px;
  right: -11px;
}

.p2 .turn_pic {
  transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(180deg) !important;
  -webkit-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(180deg) !important;
  -moz-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(180deg) !important;
  -ms-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(180deg) !important;
}

.p2 .icon_remove {
  position: absolute;
  width: 22px;
  bottom: -12px;
  left: -11px;
}

.p2 .addIcon_list {
  width: 60px;
  position: absolute;
  top: 0%;
  left: 0%;
  transform-style: preserve-3d;
  transition: trandform linear 1s;
  opacity: 0;
}

.p2 .addIcon_list .ornament-img {
  width: 400%;
  transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -webkit-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -moz-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -ms-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
}

.p2 .addIcon_list2 {
  width: 100px;
  position: absolute;
  top: 0%;
  left: 0%;
  opacity: 0;
  transform-style: preserve-3d;
  transition: trandform linear 1s;
}

.p2 .addIcon_list2 .ornament-img {
  width: 400%;
  transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -webkit-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -moz-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
  -ms-transform: translate3d(-37%, -37%, 0) scale(0.25, 0.25) rotateY(0deg);
}

.p2 .bg2 {
  position: relative;
  width: 100%;
  left: 0;
}

.p3 {
  width: 414px;
  height: 672px;
}

.p3 .box2 {
  background-color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.p3 .add_img {
  display: block;
  width: 86%;
  margin: 0 auto;
  margin-top: 10%;
  border-radius: 20px;
}

.p3 .share_txt {
  display: block;
  width: 53%;
  position: absolute;
  left: 3%;
  bottom: 6%;
}

.p3 .share_logo {
  display: block;
  width: 14.5%;
  position: absolute;
  right: 23%;
  bottom: 7%;
}

.p3 .qrcode {
  display: block;
  width: 15%;
  position: absolute;
  right: 5%;
  bottom: 7%;
  text-align: center;
}

.p3 .qrcode img {
  margin: 0 auto;
}

.p3 .qrcode p {
  font-size: 6px;
  color: #9a541b;
  margin-top: -8px;
}

.p4 {
  background-color: #fff;
}

.p4 .p4_return {
  width: 9%;
  position: absolute;
  top: 0.5%;
  left: 1%;
}

.p4 .p4_img1 {
  position: relative;
  width: 80%;
  margin: .9rem auto .2rem;
  border: 2px #833114 solid;
}

.p4 .p4_img1 .qrcode_img {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.p4 .p4_img2 {
  width: 5rem;
  margin: 0.3rem 0 .5rem 10%;
}

.p4 .p4_img3 {
  width: 5.1rem;
  margin: .2rem auto 0;
}

.p4 .p4_img4 {
  width: 6.47rem;
  margin: .4rem auto 0;
}

.ani_ji {
  animation: ani_ji 3s linear forwards;
  -webkit-animation: ani_ji 3s linear forwards;
}

@keyframes ani_ji {
  0% {
    left: -52%;
  }
  100% {
    left: 50%;
  }
}

@keyframes ani_ji {
  0% {
    left: -52%;
  }
  100% {
    left: 50%;
  }
}

.ani_pro {
  animation: ani_pro 3s linear forwards;
  -webkit-animation: ani_pro 3s linear forwards;
}

@keyframes ani_pro {
  0% {
    width: 0;
  }
  100% {
    width: 4rem;
  }
}

@keyframes ani_pro {
  0% {
    width: 0;
  }
  100% {
    width: 4rem;
  }
}