* {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif, "宋体";
}
input:focus,
textarea:focus {
  outline: none;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
li {
  list-style: none;
}
.location {
  position: absolute;
}
body {
  max-width: 10rem;
  margin: auto;
  overflow-x: hidden;
}
.box_imgi {
  position: fixed;
  bottom: 4.53333333rem;
  z-index: 1000000000;
  right: calc(50vw - 5rem);
}
.box_imgi .box_content {
  position: relative;
}
.box_imgi .box_content .imgi {
  width: 2.13333333rem;
}
.box_imgi .box_content span {
  position: absolute;
  bottom: 0.13333333rem;
  right: 0.22rem;
  text-align: center;
  font-size: 0.37333333rem;
  color: #000000;
}
.box_imgi2 {
  position: fixed;
  bottom: 4.53333333rem;
  z-index: 1000000000;
  right: calc(50vw - 5rem);
}
.box_imgi2 .box_content {
  position: relative;
}
.box_imgi2 .box_content .imgi {
  width: 2.13333333rem;
}
.box_imgi2 .box_content span {
    position: absolute;
    bottom: 0.16666667rem;
    right: 0rem;
    text-align: center;
    font-size: 0.32rem;
    color: #000000;
    font-family: Microsoft YaHei;
}
.boxExplain {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000000000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  background: rgba(48, 49, 51, 0.69);
}
.boxExplain .explain {
  width: 9.2rem;
  display: block;
  height: auto;
  background: linear-gradient(180deg, #fcf7ff 0%, #ffffff 100%);
  border-radius: 0.32rem;
}
.boxExplain .explain .top {
  width: 5.73333333rem;
  height: 0.96rem;
  background-image: url('../images/explain/pic01.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  margin: -0.34666667rem auto 0;
  font-size: 0.48rem;
  color: #ffffff;
  line-height: 0.96rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.boxExplain .explain .content {
  margin: 0.72rem auto 0;
  width: 8.24rem;
  max-height: 11rem;
  overflow-y: scroll;
}
.boxExplain .explain .content .one .con {
  margin: 0rem 0rem 0.21333333rem 0rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-items: center;
}
.boxExplain .explain .content .one .con .itemTitle {
  width: 0.53333333rem;
  height: 0.53333333rem;
  box-sizing: border-box;
  position: relative;
}
.boxExplain .explain .content .one .con .itemTitle .title {
  width: 0.53333333rem;
  height: 0.53333333rem;
  text-align: left;
  background-image: url('../images/explain/pic03.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-size: 0.37333333rem;
  color: #ffffff;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
}
.boxExplain .explain .content .one .con .itemTitle .title span {
  margin: 0rem 0rem 0rem 0.10666667rem;
}
.boxExplain .explain .content .one .con .text {
  margin: 0rem 0rem 0rem 0.13333333rem;
}
.boxExplain .explain .content .one .con .text .txt01 {
  width: 7.57333333rem;
  height: auto;
  font-size: 0.32rem;
  color: #303133;
  text-align: left;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 0.50666667rem;
  letter-spacing: 1px;
}
.boxExplain .explain .content .one .con .text .txt02 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 7rem;
  margin: 0.24rem 0rem 0rem 0rem;
}
.boxExplain .explain .content .one .con .text .txt02 .itemLi {
  width: 2.13333333rem;
  height: 0.8rem;
  background: #ffffff;
  border-radius: 0.05333333rem;
  border: 0.02666667rem solid #b690e4;
  line-height: 0.8rem;
  font-size: 0.37333333rem;
  color: #9c6ed3;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin: 0rem 0rem 0.32rem 0rem;
}
.boxExplain .explain .content .one .con .text .txt02 .itemLi a{
    color: #9c6ed3;
}
.boxExplain .explain .bottom {
  text-align: center;
  margin: 0rem auto 0;
  width: 8.24rem;
}
.boxExplain .explain .bottom .item {
  margin: 0rem auto 0;
  width: 8.24rem;
  height: 1.22666667rem;
  background: rgba(168, 160, 255, 0.07);
  border-radius: 0.13333333rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0rem 0rem 0.42666667rem 0rem;
}
.boxExplain .explain .bottom .item .left {
  font-family: PingFangSC-Regular, PingFang SC;
  font-size: 0.37333333rem;
  color: #303133;
  margin: 0rem 0rem 0rem 0.42666667rem;
}
.boxExplain .explain .bottom .item .center {
  font-size: 0.37333333rem;
  color: #835272;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  margin: 0rem 0rem 0rem 0.26666667rem;
  text-align: left;
  width: 3.73333333rem;
}
.boxExplain .explain .bottom .item .right {
  font-size: 0.37333333rem;
  color: #afb3bb;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin: 0rem 0rem 0rem 0.66666667rem;
}
.boxExplain .explain .bottom .item .btnright {
  width: 1.92rem;
  height: 0.74666667rem;
  line-height: 0.74666667rem;
  font-size: 0.37333333rem;
  color: #ffffff;
  background: #b9a4f6;
  box-shadow: 0px 0.05333333rem 0.13333333rem 0px rgba(185, 164, 246, 0.49);
  border-radius: 0.37333333rem;
  margin: 0rem 0rem 0rem 0.13333333rem;
}
.boxExplain .explain2 {
  text-align: center;
  position: relative;
  margin: 1.33333333rem 0rem 0rem 0rem;
  width: 8rem;
  height: auto;
  display: block;
  background: #F0E4F7;
  border-radius: 0.32rem;
}
    .boxExplain .explain2 .top {
        position: absolute;
        top: -3.266667rem;
        left: -0.8rem;
        width: 9.6rem;
        height: 4.013333rem;
        background-image: url(../images/explain/pic02.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        text-align: center;
    }
.boxExplain .explain2 .content {
  padding: 0rem 0rem 0.53333333rem 0rem;
  max-height: 10rem;
  overflow-y: scroll;
}
.boxExplain .explain2 .content .title {
  font-size: 0.64rem;
  color: #7162D1;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  margin: 0.8rem 0rem 0rem 0rem;
}
.boxExplain .explain2 .content .title2 {
  font-size: 0.32rem;
  color: #606266;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  margin: 0.10666667rem 0rem 0rem 0rem;
}
.boxExplain .explain2 .content .box_list {
  width: 7.2rem;
  height: auto;
  margin: 0.32rem auto 0;
  background: #fcfcf9;
  border-radius: 0.13333333rem;
  position: relative;
}
.boxExplain .explain2 .content .box_list .list {
  width: 7.2rem;
  padding: 0rem 0rem 1.25333333rem 0rem;
  background: #fcfcf9;
  border-radius: 0.13333333rem;
  max-height: 5.5rem;
  overflow-y: scroll;
}
.boxExplain .explain2 .content .box_list .list li {
  height: 1.25333333rem;
  width: 6.45333333rem;
  margin: auto;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  border-bottom: 0.02666667rem solid #ECEDEE;
}
.boxExplain .explain2 .content .box_list .list li img.head {
  width: 0.77333333rem;
  height: 0.77333333rem;
  border-radius: 50%;
  margin: 0rem 0rem 0rem 0rem;
}
.boxExplain .explain2 .content .box_list .list li .name {
  font-size: 0.37333333rem;
  color: #303133;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  width: 4.26666667rem;
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  max-width: 4.26666667rem;
  /*需要配合宽度来使用*/
  text-align: left;
  margin: 0rem 0rem 0rem 0.18666667rem;
}
.boxExplain .explain2 .content .box_list .list li .word {
  margin: 0rem 0rem 0rem 0rem;
  font-size: 0.37333333rem;
  color: #8148BA;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.boxExplain .explain2 .content .box_list .list .box_li {
  width: 7.2rem;
  position: absolute;
  bottom: -0.05333333rem;
  left: 0;
  background: #919bea;
  box-shadow: 0px -0.05333333rem 0.21333333rem 0px rgba(187, 195, 251, 0.71);
  border-radius: 0px 0px 0.13333333rem 0.13333333rem;
  color: #FFFFFF;
}
.boxExplain .explain2 .content .box_list .list .box_li .name {
  color: #FFFFFF;
}
.boxExplain .explain2 .content .box_list .list .box_li .word {
  color: #FFFFFF;
}
.boxExplain .explain2 .content .box_list2 .countTime {
  margin: 0rem auto 0;
  font-size: 1.33333333rem;
  color: #EA1057;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
}
.boxExplain .explain2 .content .box_list2 .btn {
  width: 6.66666667rem;
  height: 1.28rem;
  line-height: 1.28rem;
  background: #a185f2;
  box-shadow: 0px 0.13333333rem 0.32rem 0px rgba(185, 164, 246, 0.49);
  border-radius: 0.13333333rem;
  margin: 0.26666667rem auto 0;
  font-size: 0.48rem;
  color: #FFFFFF;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.boxExplain .explain2 .content .box_list2 .btn01 {
  width: 6.66666667rem;
  height: 1.28rem;
  line-height: 1.28rem;
  background: rgba(161, 133, 242, 0.38);
  box-shadow: 0px 0.13333333rem 0.32rem 0px rgba(185, 164, 246, 0.49);
  border-radius: 0.13333333rem;
  margin: 0.26666667rem auto 0;
  font-size: 0.48rem;
  color: #FFFFFF;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.boxExplain .explain2 .content .box_list2 .boxUl {
  margin: 0rem auto 0;
  height: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.boxExplain .explain2 .content .box_list2 .boxUl li {
  font-size: 0.36666667rem;
  color: #303133;
  width: 100%;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.boxExplain .explain2 .content .box_list2 .boxUl2 {
  width: 6.66666667rem;
  height: 1.12rem;
  border-top: 0.02666667rem solid #DFCCFF;
  padding: 0.26666667rem 0rem 0rem 0rem;
  margin: 0.26666667rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
.boxExplain .explain2 .content .box_list2 .boxUl2 .item {
  display: flex;
  flex-wrap: nowrap;
  justify-items: flex-start;
  align-items: center;
  align-content: center;
  height: 0.53333333rem;
}
.boxExplain .explain2 .content .box_list2 .boxUl2 .item .one {
  font-size: 0.26666667rem;
  color: #5D0917;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
}
.boxExplain .explain2 .content .box_list2 .boxUl2 .item .two {
  font-size: 0.26666667rem;
  color: #303133;
  margin: 0rem 0rem 0rem 0.13333333rem;
}
.boxExplain .explain2 .content .box_list2 .boxUl2 .item .three {
  font-size: 0.26666667rem;
  color: #A40202;
  margin: 0rem 0rem 0rem 0.26666667rem;
}
.boxExplain .explain2 .content .box_list2 .txt03 {
  font-size: 0.32rem;
  color: #8148BA;
  margin: 0.26666667rem auto 0;
  padding: 0rem 0rem 0rem 0rem;
  width: 100%;
  text-align: center;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  text-decoration: underline;
}
.boxExplain .explain2 .bottom {
  width: 8rem;
  height: 1.46666667rem;
  background: #F9F1FA;
  border-radius: 0px 0px 0.26666667rem 0.26666667rem;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}
.boxExplain .explain2 .bottom .left {
  font-size: 0.32rem;
  color: #606266;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  overflow: hidden;
  /*超出部分隐藏*/
  text-overflow: ellipsis;
  /* 超出部分显示省略号 */
  white-space: nowrap;
  /*规定段落中的文本不进行换行 */
  max-width: 4.8rem;
  /*需要配合宽度来使用*/
  text-align: left;
}
.boxExplain .explain2 .bottom .btnRight {
  width: 1.92rem;
  height: 0.74666667rem;
  line-height: 0.74666667rem;
  background: #b9a4f6;
  box-shadow: 0px 0.05333333rem 0.13333333rem 0px rgba(185, 164, 246, 0.49);
  border-radius: 0.37333333rem;
  font-size: 0.32rem;
  color: #FFFFFF;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
}
.boxExplain .box_close {
  width: 100%;
  margin: 0.8rem auto 0;
}
.boxExplain .close {
  width: 0.74666667rem;
}
.leftDiv {
  transform: translateX(0);
  transition: transform 0.5s;
}
.rightDiv {
  transition: transform 0.5s;
  transform: translateX(2rem);
  animation: arotateOut 0.5s;
  opacity: 0;
}
@keyframes arotateOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}