/* 世界观 */
.worldview.section3 {
  background: url("../image/section3/bg.jpg") no-repeat center top;
  background-size: 100%;
  position: relative;
}

#worldviews {
  display: block;
}

.worldview-title  {
  width: 4.22rem;
  height: 1.53rem;
  background: url(../image/section3/worldview_title.png) no-repeat;
  background-size: 100%;
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
}

.section3 ul {
  position: absolute;
  display: flex;
  top: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  justify-content: space-around;
  width: 9.8rem;
}

.section3 ul li {
  width: 1.82rem;
  height: 2.05rem;
}

.section3 ul li:first-child {
  background: url(../image/section3/reach_1.png) no-repeat;
  background-size: 100%;

}

.section3 ul li:nth-child(2) {
  background: url(../image/section3/reach_2.png) no-repeat;
  background-size: 100%;
}

.section3 ul li:nth-child(3) {
  background: url(../image/section3/reach_3.png) no-repeat;
  background-size: 100%;
}

.section3 ul li:nth-child(4) {
  background: url(../image/section3/reach_4.png) no-repeat;
  background-size: 100%;
}

.section3 ul li:nth-child(5) {
  background: url(../image/section3/reach_5.png) no-repeat;
  background-size: 100%;
}

/* 使用 mask-image 定义蒙版 */
.section3 .finished {
  -webkit-mask-image: url(../image/section3/reach_1.png); 
  mask-image: url(../image/section3/reach_1.png);
  -webkit-mask-size: contain;
  mask-size: contain;
  position: relative;
}

.section3 .finished::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0rem;
  width: 1.82rem;
  height: 2.05rem;
  background-color: rgba(0, 0, 0, 0.3); /* 半透明背景色 */
  background-image: url(../image/section3/finished-bg.png); /* 背景图片 */
  background-repeat: no-repeat;
  background-size: 100%;
  z-index: 2;
}

.section3 .finished::after {
  content: "";
  position: absolute;
  width: 1.44rem;
  height: 0.66rem;
  background: url(../image/section3/finished.png) no-repeat;
  background-size: 100%;
  margin-left: 0.18rem;
  margin-top: 0.75rem;
  z-index: 3;
}

.section3 .claim-btn {
  position: absolute;
  width: 1.79rem;
  height: 0.51rem;
  top: 5.1rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../image/section3/claim.png) no-repeat;
  background-size: 100%;
}

.section3 .second-title {
  position: absolute;
  width: 8.68rem;
  height: 2.39rem;
  top: 5.8rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../image/section3/second_title.png) no-repeat;
  background-size: 100%;
}

.section3 .second-title .follow-btn {
  position: absolute;
  width: 1.79rem;
  height: 0.51rem;
  top: 2.55rem;
  left: 1.05rem;
  background: url(../image/section3/follow.png) no-repeat;
  background-size: 100%;
}

.section3 .second-title .join-btn {
  position: absolute;
  width: 1.79rem;
  height: 0.51rem;
  top: 2.55rem;
  left: 5.85rem;
  background: url(../image/section3/join.png) no-repeat;
  background-size: 100%;
}