/* .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
} */
.fontColorBox,
.fontColorBox1,
.fontColorBox2,
.fontColorBox3 {
    /* 文字默认颜色 */
    color: black;
}
.header{
  height: 250rpx;
  position: relative;
  width: 100%;
}
.title{
  position: absolute;
  font-family: "xiaowei";
  font-weight: 300;
  font-size: 70px;
  color: #333;
  top:30px;
  left: 20px;
}

.logo{
  position: absolute;
  top: 12px;
  right: 15px;
  height: 120px;
  width:120px;
  z-index: 1;
}

.navBox {
  /* border: 1px solid lightgreen; */
  /* 顶部tab盒子样式 */
  position: fixed;
  bottom: 1%;
  width: 100%;
  height: 8vh;
  background: white;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.titleBox {
  /* border: 1px solid lightgreen; */
  /* 未选中文字的样式 */
  font-family: 'Franklin Gothic Medium';
  font-weight: 200;
  box-sizing: border-box;
  height: 80%;
  width: 30%;
  color: rgb(168, 170, 175);
  font-size: 40rpx;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.lineBox,.notLineBox{
  /* 选中及未选中底线共同样式 */
  width: 32rpx;
  height: 8rpx;
  z-index: 1;
}

.lineBox {
  /* 选中底线样式 */
  background: rgb(43, 44, 45);
  margin-top: 16rpx;
  border-radius: 4rpx;
  z-index: 1;
}

.notLineBox {
  /* 未选中底线样式 */
  background: transparent;
  z-index: 1;
}

.picture47 {
  position: fixed;
  width: 15%;
  top:14%;
  right:34% ;
  z-index: 1;
  pointer-events: none;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 29%;
  width: 80%;  /* 让这一行占据宽度的 80% */
  margin-bottom: 20px;  /* 让这一行和图片之间有些距离 */
}

.toggle-label {
  position: fixed;
  left: 31%;
  font-weight: bold;
  font-size: 20px;
}

.toggle-switch {
  position: fixed;
  right: 29%;
  transform:scale(0.8) ;
}

.picture10 {
  position: fixed;
  width: 35%;
  left: 31%;
  top: 32.5%;
}

/* 外层按钮样式 */
.center-button {
  /* position: fixed; */
  /* left: 20%;
  top:70%; */
  position: fixed;
  width: 47%;
  height: 10.5%;
  left: 22%;
  bottom: 31.9%;
  border: 2px solid #5994DB;  /* 边框颜色 */
  background-color: #5994DB;  /* 按钮背景颜色 */
  color: #5994DB;             /* 字体颜色 */
  border-radius: 20px;        /* 圆角设置 */
  padding: 5px 10px;         /* 内边距 */
  font-size: 40px;            /* 字体大小 */
  text-align: center;
  justify-content: center;
  /* align-items: center; */
}

/* 内部内容区域样式 */
.inner-content {
  position: fixed;
  width: 60%;
  height: 10%;
  bottom: 33%;
  left: 25%;
  background-color: #FAE39F;  /* 内部背景颜色 */
  color: #5994DB;
  padding: 12px;              /* 内边距 */
  border-radius: 15px;        /* 内部圆角半径 */
  font-size: 40px;            /* 字体大小 */
  font-family: "youshebiaotihei";
  line-height: 130%;
  z-index: 2;
  font-weight: 150;
}

.picture101 {
  position: fixed;
  width: 35%;
  left: 31%;
  top: 10%;
}

.random-button {
  position: fixed;
  width: 47%;
  height: 10.5%;
  left: 22%;
  bottom: 54.4%;
  border: 2px solid #D88A8E;  /* 边框颜色 */
  background-color: #D88A8E;  /* 按钮背景颜色 */
  color: #D88A8E;             /* 字体颜色 */
  border-radius: 20px;        /* 圆角设置 */
  padding: 5px 10px;         /* 内边距 */
  font-size: 40px;            /* 字体大小 */
  text-align: center;
  justify-content: center;
}

.random-content {
  position: fixed;
  width: 60%;
  height: 10%;
  bottom: 55.5%;
  left: 25%;
  background-color: #FAE39F;  /* 内部背景颜色 */
  color: #D88A8E;
  padding: 12px;              /* 内边距 */
  border-radius: 15px;        /* 内部圆角半径 */
  font-size: 40px;            /* 字体大小 */
  font-family: "youshebiaotihei";
  line-height: 130%;
  z-index: 2;
  font-weight: 150;
}

.picture26 {
  position: fixed;
  width: 35%;
  left: 31%;
  top: 40%;
}

.solid-button {
  position: fixed;
  width: 47%;
  height: 10.5%;
  left: 22%;
  bottom: 24.4%;
  border: 2px solid #5994DB;  /* 边框颜色 */
  background-color: #5994DB;  /* 按钮背景颜色 */
  color: #5994DB;             /* 字体颜色 */
  border-radius: 20px;        /* 圆角设置 */
  padding: 5px 10px;         /* 内边距 */
  font-size: 40px;            /* 字体大小 */
  text-align: center;
  justify-content: center;
}

.solid-content {
  position: fixed;
  width: 60%;
  height: 10%;
  bottom: 25.5%;
  left: 25%;
  background-color: #FAE39F;  /* 内部背景颜色 */
  color: #5994DB;
  padding: 12px;              /* 内边距 */
  border-radius: 15px;        /* 内部圆角半径 */
  font-size: 40px;            /* 字体大小 */
  font-family: "youshebiaotihei";
  line-height: 130%;
  z-index: 2;
  font-weight: 150;
}

.headerr {
  display: flex;
  flex-wrap: nowrap;
  font-weight: bold;
  font-size: 20px;
  justify-content: space-around;
  z-index: -1;
}

/* .ranking-header {
  margin-right: 7%;
  margin-left: 7%;
  font-weight: bold;
  font-size: 20px;
} */


.ranking-top {
  background-color: #9BD1F1; /* 设置背景为蓝色 */
  color: white;              /* 设置字体颜色为白色 */
  font-size: 36px;           /* 设置字体大小 */
  text-align: center;        /* 让文本水平居中 */
  padding: 10px 10px;           /* 添加上下内边距，使其在背景中垂直居中 */
  margin-bottom: 4%;
  font-weight: bold;         /* 设置字体加粗 */
}

.ranking-text1 {
  margin-left: 10%;
  font-weight: bold;
  font-size: 30px;
  color: #4D95DF;
}

.ranking-text2{
  margin-left: 9%;
  font-weight: bold;
  font-size: 20px;
}

.ranking-text3 {
  margin-left: 1%;
  font-weight: bold;
  font-size: 20px;
}

.ranking-text4 {
  position: absolute;
  right: 12%;
  font-weight: bold;
  text-align: left;
  font-size: 20px;
  color: #A73E33;
  z-index: -1;
}

.ranking-item {
  margin-bottom: 3%;
  margin-top: 3%;
  display: flex;
  align-items: center;
  /* border-bottom: 1px solid #E0E0E0;  */
  border-top: 1px solid #E0E0E0;
  padding-top: 3%;
  z-index: -1;
}

.picture44 {
  position: fixed;
  width: 40%;
  left: 31%;
  top: 18%;
}

.picture44-text {
  position: fixed;
  font-family: "YouSheBiaoTiHei";
  font-size: 48px;
  left: 16%;
  top:43%;
}

.picker {
  width: 60%;
  height: 5%;
  position: fixed;
  top: 55%;
  left: 17%;
  border: 10px solid white;
  border-radius: 10px;
  font-size: 25px;
  background-color: white;
  text-align: center;
  justify-content: center;
}
.pickerback{
  position: fixed;
  width: 65%;
  height: 7%;
  top: 54%;
  left: 15%;
  background-color: #4D95DF ;
  border: 10px solid #4D95DF;
  border-radius: 15px;
}

.check-button {
  position: fixed;
  width: 45%;
  height: 4.5%;
  left: 24%;
  bottom: 24.7%;
  border: 2px solid #F8E39F;  /* 边框颜色 */
  background-color: #F8E39F;  /* 按钮背景颜色 */
  color: #F8E39F;             /* 字体颜色 */
  border-radius: 20px;        /* 圆角设置 */
  padding: 5px 10px;         /* 内边距 */
  font-size: 40px;            /* 字体大小 */
  text-align: center;
  justify-content: center;
}

.check-content {
  position: fixed;
  /* width: 10%; */
  height: 5%;
  bottom: 25.5%;
  left: 26%;
  background-color: white;  /* 内部背景颜色 */
  color: black;
  /* padding: 12px; */
  border-radius: 15px;        /* 内部圆角半径 */
  font-size: 28px;            /* 字体大小 */
  font-family: "youshebiaotihei";
  font-weight: 150;
  line-height: 90%;
  z-index: 2;
}

.return1 {
  position: fixed;
  bottom: 10%;
  right: -7%;
  font-size: 20px ;
  background-color: white;
}

.image-btn {
  position: absolute;
  width: 10%;
  right: 10%;
  top: 5.8%;
}