.gjp-content {
  width: 100%;
  height: 100%;
  background-color: #fbfbfb;
  animation:mymove 2s infinite;
}

@keyframes mymove{
  0%{ opacity: 80%;}
  50%{ opacity: 90%;}
  100%{ opacity: 100%;}
}
.gjp-header {
  height: 70px;
  background-color: #f5f5f5;
}

.gjp-tab {
  margin: 40px 20px 0 20px;
  background: #f4f4f4;
  box-shadow: 0px 30px 46px 0px rgba(245, 245, 245, 0.35);
  border-radius: 10px;
  padding-top: 5px;
}
.gjp-tab-content {
  height: 210px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  position: relative; 
}

.gjp-tab-box {
  flex: 0 0 33.33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px 0px 5px 0px;
  box-sizing: border-box;
}

.gjp-img-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f5f5f5;
  position: relative;
}

.gjp-text {
  margin-top: 10px;
  width: 60px;
  height: 15px;
  background-color: #f5f5f5;
}

.gjp-friend {
  margin-top: 20px;
}

.gjp-friend-top {
  height: 20px;
}

.gjp-friend-top-left {
  display: inline-block;
  width: 40%;
  height: 20px;
  margin-left: 20px;
  background-color: #f5f5f5;
}

.gjp-friend-top-right {
  float: right;
  width: 10%;
  height: 20px;
  margin-right: 10px;
  background-color: #f5f5f5;
}

.gjp-friend-box {
  display: flex;
}

.gjp-box-one {
  position: relative;
  display: inline-block;
  width: 240px;
  height: 172px;
  border-radius: 20px;
  background-color: #fff;
  margin: 10px 0 20px 20px;
}

.gjp-box-one-img {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.gjp-box-one-title {
  position: absolute;
  top: 10px;
  left: 55px;
  width: 50px;
  height: 16px;
  background-color: #f5f5f5;
}

.gjp-box-one-time {
  position: absolute;
  top: 30px;
  left: 55px;
  width: 100px;
  height: 16px;
  background-color: #f5f5f5;
}

.gjp-box-one-text {
  position: absolute;
  top: 50px;
  left: 55px;
  width: 120px;
  height: 32px;
  background-color: #f5f5f5;
}

.gjp-box-one-url {
  position: absolute;
  top: 95px;
  left: 55px;
  width: 120px;
  height: 60px;
  background-color: #f5f5f5;
}

.gjp-bottom-box {
  display: flex;
  position: relative;
  bottom: 0px;
  width: 100%;
  height: 72px;
  background-color: #fff;
}

.gjp-bottom-left {
  flex: 1;
  padding-top: 10px;
}

.gjp-bottom-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #f5f5f5;
}

.gjp-bottom-text {
  width: 40px;
  height: 15px;
  margin: 0 auto;
  margin-top: 8px;
  background-color: #f5f5f5;
}