/*首页*/
.index {
  height: 92%;
  position: relative;
  width: 100%;
  overflow: scroll;
}

.swiper {
  width: 100%;
  height: 50vw;
}

.swiper-slide {
  width: 100%;
  background-position: center;
  background-size: cover;
  height: 100%;
  background-repeat: no-repeat;
}

.main {
  width: 100%;
  height: 80vh;
  margin-top: -6.5vw;
  position: relative;
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  z-index: 50;
}

/*头部*/
.main-header {
  display: flex;
  display: -webkit-flex;
}

.list {
  text-align: center;
  color: #302a27;
}

/* 查看更多 */
.more {
  position: relative;
  float: right;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  width: 30vw;
  text-align: right;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
  /* border: 1px solid red; */
}

.more span {
  margin-right: 2vw;
  font-weight: 400;
  color: #c4c4c8;
  font-size: 4vw;
}

.main-medium {
  position: relative;
  width: 100%;
}

/* 工作动态 */
.dynamic {
  position: relative;
  width: 100%;
  padding: 4vw 4vw 1vw 4vw;
}

.dlist {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  padding: 0 4vw;
}

.dlist-img {
  width: 31vw;
  height: 24vw;
  margin: 3vw 2vw 4vw 0;
  border-radius: 7px;
  border: 1px solid #dfd6cb;
}

.dlist-cont {
  width: 70vw;
}

.dlist-title {
  font-size: 4vw;
  font-weight: 600;
  /* margin-bottom: 6.5vw; */
  padding-top: 3vw;
  color: #302a27;
  /* text-align: justify; */
  display: -webkit-box;
  /* word-break: break-all; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: 15vw;
}

.dlist-clazz {
  font-size: 4vw;
  color: #c4c4c8;
  height: 7vw;
  line-height: 7vw;
}

.dlist-read {
  float: left;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
}

.read-img {
  height: 3vw;
  margin-right: 1vw;
}

.read-text {
  font-weight: 400;
  color: #c4c4c8;
}

.dlist-time {
  float: right;
  font-weight: 400;
  color: #c4c4c8;
}

/* 精彩瞬间 */
.moment {
  position: relative;
  width: 100%;
  padding: 4vw 4vw 1vw 4vw;
}

.moment-text {
  position: relative;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  overflow-x: scroll;
  padding: 0 4vw;
}

.mlist {
  position: relative;
}

.mlist-img {
  width: 32vw;
  height: 35vw;
  margin: 3vw 4vw 2vw 0;
  border-radius: 6px;
  text-align: center;
  position: relative;
}

.mlist-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 32vw;
  margin: 2vw 2vw 2vw 0;
  font-size: 16px;
  font-weight: 600;
  color: #302a27;
}

.mlist-video {
  width: 100%;
  height: 100%;
}

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10vw;
  transform: translate(-50%, -50%);
  z-index: 5555;
}

.videos {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10000;
  background-color: black;
}

.videos_div {
  width: 100%;
  height: 100%;
}

.close_videos {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  position: absolute;
  bottom: 15vw;
  right: 8vw;
  background: linear-gradient(180deg, #ffdb06 0%, #ffb500 100%);
  z-index: 10001;
  text-align: center;
  color: #000;
  font-size: 4vw;
  line-height: 15vw;
}

/* 志愿风采 */
.voluntaryStyle {
  position: relative;
  width: 100%;
  padding: 4vw 4vw 1vw 4vw;
}

.vlist {
  width: 44vw;
  display: inline-block;
  margin: 4vw 0 4vw 4vw;
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}

.vlist-img {
  width: 100%;
  height: 32vw;
  border-radius: 6px 6px 0 0;
}

.vlist-title {
  font-weight: 600;
  font-size: 16px;
  padding: 1vw 2vw 0 2vw;
  color: #302a27;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vlist-clazz {
  font-size: 4vw;
  color: #c4c4c8;
  height: 7vw;
  line-height: 7vw;
  margin: 1vw 2vw;
}

.vlist-time {
  font-weight: 400;
  color: #c4c4c8;
  padding: 0vw 2vw 2vw 2vw;
}

.vlist-thumbs {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  padding: 1vw 2vw 2vw 2vw;
  height: 9vw;
}

/* 打卡 */
.clock {
  display: none;
  position: relative;
  height: 92%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 5vw 5vw 0 5vw;
}

.clist {
  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  background: #ffffff;
  width: 100%;
  padding: 3vw;
  margin-bottom: 5vw;
  color: #302a27;
  position: relative;
}

.clist-img {
  width: 100%;
}

.clist-title {
  margin-top: 2vw;
  font-size: 4vw;
  font-weight: 600;
  width: 75%;
}

.clist-address {
  display: flex;
  display: -webkit-flex;
  margin-top: 0.5vw;
  color: #c4c4c8;
}

.address-text {
  margin-left: 4vw;
}

.daka {
  position: absolute;
  width: 17vw;
  height: 8vw;
  line-height: 8vw;
  background: linear-gradient(180deg, #ffdb06 0%, #ffb500 100%);
  box-shadow: 0px 2px 12px 0px rgb(255 184 0 / 22%);
  border-radius: 18px;
  bottom: 5vw;
  right: 5vw;
  text-align: center;
  font-size: 3.5vw;
  font-weight: 500;
  color: #302a27;
}

/* 消息 */
.message {
  display: none;
  position: relative;
  height: 92%;
  top: 0;
  padding: 1vw;
}

.notice {
  margin: 7vw 0vw 0vw 2vw;
  display: flex;
  display: -webkit-flex;
}

.notice-img {
  height: 12vw;
  margin-right: 3vw;
}

.notice-cont {
  width: 82vw;
  border-bottom: 1px solid #ebebed;
  height: 16vw;
}

.cont-title {
  font-size: 3.4vw;
  font-weight: 500;
  color: #302a27;
  display: inline-block;
}

.cont-time {
  float: right;
  margin-right: 5vw;
  color: #a8a8b1;
}

.cont-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80vw;
  color: #a8a8b1;
  font-size: 3.2vw;
  margin-top: 2.2vw;
}

.remind {
  position: absolute;
  left: 12vw;
  width: 4vw;
  display: none;
}

/* 个人 */
.my {
  display: none;
  overflow-y: scroll;
  width: 100%;
  height: 92%;
  position: relative;
}

.banner-my {
  width: 100%;
  position: relative;
}

.my-info {
  position: absolute;
  z-index: 5;
  top: 0;
}

.touxiang {
  width: 15vw;
  border-radius: 50%;
  top: 5vw;
  left: 5vw;
  position: absolute;
}

.nicheng {
  top: 5vw;
  left: 23vw;
  position: relative;
  font-size: 5vw;
  color: #302a27;
  font-weight: 600;
}

.state {
  background: #fff9c5;
  border-radius: 11px;
  top: 7vw;
  left: 23vw;
  position: relative;
  width: 15vw;
  text-align: center;
  color: #302a27;
}

.icon1,
.icon2 {
  position: absolute;
  top: 25vw;
  z-index: 2;
  width: 42vw;
}

.icon1 {
  right: 6vw;
}

.icon2 {
  left: 6vw;
}

.my-main {
  width: 100%;
  margin-top: -12vw;
  position: relative;
  background: #f4f4f7;
  border-radius: 20px 20px 0px 0px;
}

.signUp-info {
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  padding: 3vw 4.1vw;
  color: #302a27;
  margin-bottom: 2vw;
}

.sinfo-title {
  font-size: 4.6vw;
  font-weight: 600;
  margin: 1vw 0;
}

.sinfo-text {
  display: flex;
  display: -webkit-flex;
}

.sinfo-list {
  text-align: center;
  margin: 3vw auto;
  font-size: 3.2vw;
  width: 17vw;
}

.sinfo-list img {
  margin-bottom: 2vw;
  width: 14vw;
}

.voluntary-service {
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  padding: 3vw 4.1vw;
  color: #302a27;
  margin-bottom: 2vw;
}

.vservice-title {
  font-size: 4.6vw;
  font-weight: 600;
  margin: 1vw 0;
}

.vservice-text {
  display: flex;
  display: -webkit-flex;
}

.vservice-list {
  text-align: center;
  margin: 3vw 4vw;
}

.vservice-list img {
  margin-bottom: 2vw;
  width: 14vw;
}

.personal-service {
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  padding: 3vw 4.1vw 0 4.1vw;
  color: #302a27;
}

.pservice-title {
  font-size: 4.6vw;
  font-weight: 600;
  margin: 1vw 0;
}

.pservice-list {
  position: relative;
  height: 17vw;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  border-bottom: 1px solid #ebebed;
  font-size: 4vw;
}

.plist-img {
  width: 9vw;
}

.plist-arrow {
  position: absolute;
  right: 2vw;
  height: 4vw;
}

.clazz-service {
  background: #ffffff;
  border-radius: 20px 20px 0px 0px;
  padding: 3vw 4.1vw;
  color: #302a27;
  margin-bottom: 2vw;
}

.cservice-title {
  font-size: 4.6vw;
  font-weight: 600;
  margin: 1vw 0;
}

.cservice-text {
  display: flex;
  display: -webkit-flex;
}

.cservice-list {
  text-align: center;
  margin: 3vw 4vw;
}

.cservice-list img {
  margin-bottom: 2vw;
  width: 14vw;
}

.interval {
  width: 100%;
  height: 2vw;
}

/*底部导航*/
.nav-bottom {
  z-index: 999;
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: white;
  border-top: 1px solid #ebebed;
  color: #c4c4c8;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-left {
  /* bottom: 0;
  position: absolute; */
}

.nav-left img {
  width: 7vw;
}

.nav-right {
  /* bottom: 0;
  position: absolute; */
}

.nav-right img {
  width: 7vw;
}

.nav-middle {
  text-align: center;
  width: 18vw;
  margin-top: -9.5%;
}

.nav-middle img {
  width: 100%;
}

.nav-list {
  text-align: center;
  display: inline-block;
  margin: 0 5vw;
}

.noData {
  position: relative;
  text-align: center;
  font-size: 4vw;
  margin: 6vw 0;
  width: 100%;
}

.noData1 {
  text-align: center;
  margin: 15vw;
}

.noData1 img {
  width: 30vw;
}

.noData1 div {
  font-size: 4vw;
  margin-top: 3vw;
}

.time_div {
  font-size: 3.6vw;
  margin: 2vw 0;
}

.dynamic-text {
  position: relative;
  width: 100%;
}

.signIn {
  position: relative;
  width: 100%;
  padding: 4vmin 4vmin 1vmin 4vmin;
}

.grid-signUp {
  /* display: grid; */
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  padding: 5.6vmin 0;
  gap: 2vmin;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}


.grid-signUp div{
  display: inline;
}


.grid-signUp img {
  width: 100%;
  border-radius: 5px;
  padding-bottom: 12px;
}

.btn-qa {
  position: fixed;
  z-index: 10;
  right: 3.3vmin;
  top: 78vh;
  width: 23.2vmin;
}

.btn-qa img {
  width: 100%;
}

.policy,
.policy-text {
  position: relative;
  width: 90vw;
  margin: 0 auto;
}

.policy-text {
  box-sizing: border-box;
}

.policy-text>*+* {
  margin-top: 4vw;
}

.policy-text>div {
  position: relative;
  height: 24vw;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 1fr 1fr;
  gap: 2.1vw;
}

.policy-text .title {
  font-size: 4.1vw;
  font-weight: 600;
  color: #302a27;
  line-height: 1.375;
}

.policy-text .time {
  font-size: 3.2vw;
  font-weight: 400;
  color: #c4c4c8;
  line-height: 1.42;
}

.policy-text .cover {
  border-radius: 2.4vw;
  width: 24vw;
  height: 24vw;
  grid-row: span 2;
  object-fit: cover;
  object-position: center;
  border: 1px solid #dfd6cb;
  place-self: flex-start flex-end;
}