* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  font-size: 0;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
html {
  height: 100%;
}
body {
  background: #fff;
  height: 100%;
  position: relative;
}
.oasis {
  min-height: 100vh;
  background-color: #f9f9f9;
}
.header {
  padding-left: 14.4vw;
  height: 17.6vw;
  width: 100vw;
  background: url(../image/bg_top_850.png) no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 102;
}
.header .logo {
  width: 11.46vw;
  height: 11.46vw;
  position: absolute;
  left: 1.6vw;
  top: 2.13vw;
  z-index: 9;
}
.header .logo img {
  width: 100%;
  height: 100%;
}
.header .sub-title {
  display: inline-block;
  font-size: 3.47vw;
  color: #fff;
  border-left: 1px solid #fff;
  line-height: 0.96rem;
  padding-left: 2.13vw;
  position: absolute;
  top: 4.8vw;
}
.header .btn-open {
  width: 26.67vw;
  height: 12vw;
  cursor: pointer;
  background: url(../image/btn_open_850.png) no-repeat;
  background-size: 26.67vw 12vw;
  position: absolute;
  top: 0;
  right: 0;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.footer-placeholder {
  height: 4rem;
  margin-bottom: 2rem;
  width: 100%;
}
.footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #44ab6d;
  color: #fff;
  height: 4rem;
  padding: 0 1.2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  z-index: 1000;
}
.footer .logo {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 3.2rem;
  height: 3.2rem;
}
.footer .logo img {
  width: 3.2rem;
  height: 3.2rem;
}
.footer .title {
  margin-left: 0.8rem;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  color: #fff;
  font-size: 1rem;
}
.footer .btn-download {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  margin-left: auto;
  height: 2rem;
  width: 5.33rem;
  cursor: pointer;
}
.footer .btn-download img {
  height: 2rem;
  width: 5.33rem;
}
.oasis {
  display: block;
}
.tips {
  display: none;
  position: relative;
  width: 100vw;
  height: 100vh;
  top: 0;
  bottom: 0;
  background: #f4f4f4;
}
.tips .tips-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 156px;
  height: 119px;
}
.tips .tips-tip {
  width: 200px;
  height: 65px;
  position: absolute;
  top: 18px;
  right: 21px;
}
.avatar-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-top: 17.6vw;
  background-color: #fff;
}
.avatar-container .avatar-main {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 19.47vw;
  height: 19.47vw;
  border-radius: 50%;
}
.avatar-container .btn-follow {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  margin-right: 1.33rem;
  width: 4.5rem;
  height: 1.875rem;
}
.name-main {
  text-align: center;
  padding-top: 2.13vw;
  font-size: 4.53vw;
  font-weight: bold;
  color: #000000;
  line-height: 6.4vw;
  background-color: #fff;
}
.desc-wrapper {
  padding-left: 18vw;
  padding-right: 18vw;
  padding-top: 2.13vw;
  width: 64vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  background-color: #fff;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.desc {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.desc-inner {
  border: 1px solid #fff;
  font-size: 2.93vw;
  color: #8c8c8c;
  line-height: 4vw;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: -o-ellipsis-lastline;
  -o-text-overflow: ellipsis;
  display: -webkit-box;
  display: -moz-box;
  max-height: 12vw;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.detail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 2.53vw;
  background-color: #fff;
  padding-bottom: 4vw;
}
.detail .tag {
  margin: 0 2.67vw;
  position: relative;
  font-size: 3.2vw;
  line-height: 4.4vw;
  height: 4.4vw;
  color: #8c8c8c;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.detail .tag .gender {
  width: 3.2vw;
  height: 3.2vw;
  margin-right: 0.15rem;
}
.detail .tag::after {
  position: absolute;
  right: -2.67vw;
  content: '';
  width: 1px;
  height: 1.47vw;
  background-color: #c0c0cc;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.detail .tag:last-of-type::after {
  width: 0;
  height: 0;
}
.birthday-text {
  font-size: 3.2vw;
}
.container {
  width: 100%;
  padding: 1.07vw 1.07vw 0 1.07vw;
  overflow: hidden;
  background-color: #f9f9f9;
  padding-bottom: 23.33vw;
}
.container .item {
  margin-bottom: 2.93vw;
  background-color: #fff;
  width: 48.4vw;
  position: relative;
  border-radius: 1.33vw 1.33vw 1.07vw 1.07vw;
}
.container .item .media-wrapper {
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 1.33vw 1.33vw 0 0;
}
.container .item .media {
  border-radius: 0.1rem;
  height: 100%;
  min-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.container .item .status-desc-container {
  height: 1.2rem;
  margin-top: 0.5rem;
}
.container .item .status-desc {
  width: 100%;
  font-size: 0.87rem;
  font-weight: bold;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  text-overflow: ellipsis;
}
.container .item .top-right {
  position: absolute;
  top: 1.42rem;
  right: 0.6rem;
  height: 1.8rem;
  width: 1.8rem;
}
.container .left-status,
.container .right-status {
  width: 48.4vw;
}
.container .left-status {
  float: left;
}
.container .right-status {
  float: right;
}
.container .status-item {
  margin-bottom: 1.07vw;
  background-color: #fff;
  border-radius: 1.33vw 1.33vw 1.07vw 1.07vw;
  overflow: hidden;
}
.container .status-item .status-img {
  width: 100%;
  border-radius: 1.33vw 1.33vw 0 0;
  overflow: hidden;
}
.container .status-item .status-img img {
  display: block;
  width: 100%;
}
.container .status-item .status-item-title {
  margin-top: 2.67vw;
  color: #000;
  font-size: 3.73vw;
  padding-left: 1.6vw;
  line-height: 5.33vw;
}
.container .status-item .status-item-bottom {
  margin-top: 1.47vw;
  position: relative;
  padding-left: 6.93vw;
  overflow: hidden;
  margin-bottom: 2.8vw;
  height: 4.27vw;
}
.container .status-item .status-item-bottom .item-avatar {
  position: absolute;
  display: block;
  width: 4.27vw;
  height: 4.27vw;
  border-radius: 50%;
  left: 1.33vw;
  top: 0;
}
.container .status-item .status-item-bottom .item-bottom-name {
  height: 4.27vw;
  line-height: 4.27vw;
  font-size: 2.93vw;
  color: #8c8c8c;
  width: 26.67vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 1px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.container .status-item .status-item-bottom .item-bottom-like {
  position: absolute;
  right: 1.6vw;
  top: 0;
  height: 4.27vw;
  line-height: 4.27vw;
  font-size: 3.2vw;
  color: #525151;
  padding-left: 4.54vw;
  padding-right: 4.93vw;
}
.container .status-item .status-item-bottom .item-bottom-like::after {
  content: '';
  display: block;
  width: 3.2vw;
  height: 2.9vw;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAWCAYAAADafVyIAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAFgAAAABdBcvMAAACo0lEQVRIDa2UP2hTURTG8yKxoQnqIAiSwUFQKFYbU126Wmfxz+Bk60vSCCFBJ7cUB9dg1Ji8tHbRQRBnnbvYkmCFUgUHh1gcHFSaEAgk/r7HS3m2aZNoDpyce8+f7zv35N5neFwSi8V8rVZrxjCM67jH0SD6Cf2IPrUsaxXriUajk5g7qHJOo1uocl5Ru1QsFpusbTE6i0QiMd5sNl+zP4lukriM3Wq326ew59BRfC+xHnw3MXX0A77P2CC+Kexx9IvP57uaz+dF6LEJ4vH4WToXoJeC+4VCIYdtK0HCyY5iMuTMaU8sj87T6Q/tJRAY4CSxD9m2vF7vFDhrRiaTOVitVtcpEPsFxrCugm5imuY18kbIedEtLh/jG8OsQLQZCoXGDLqL09kzGJN09HivwkH8kOgkj8Cc87K4QVffOM6TQUD2y1WjwhS2CM6gyzi2Z75fcT8xYQlT2F4KdDtq/RQOkuNgjopgA9VdHrYIc0PXUvd1IpVKHRsWg4M1IWydIIeO1Ov1B8MicLBGhH2gUql8D4fDJ9jMRiKRr+Vyee1/iLiit/hz5+l+ifdS1Ak8wWDwLqZMYFEJ8v2LOLUL1JYDgcA9YdgE2Wz2JySXFEAXePIzCg4iTo0NLixhqn77Y6dNOp0+UqvV3rE8zys0eXzP5e8lAudrUCJPnU93wFX3F4EcfDoOkyySSeZoMsdF+fcSxjLLaAW+SlPTvOJf7txdBAq6SdhGS6WSjr5L+PjdxmmhXcFVYP8HWrhFXagbTrCC34LQdMe1dnyWcrp13snvSqCgSPx+v03CyIpuEq3lE7hydo6lAy7bdUTuhGQyeajRaLxlzhcBjCvGusD6PeCXc7ncb3f+znVPAhW4SbTvF9zO1U8/4pC8US6dX+nVeQfzD/i/MNbftLlVAAAAAElFTkSuQmCC) no-repeat;
  background-size: 3.2vw 2.9vw;
}
.no-status-wrapper {
  position: absolute;
  z-index: 6;
  top: 69.47vw;
  bottom: 0;
  left: 0;
  right: 0;
}
.no-status {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.no-status img {
  width: 53.23vw;
}
.no-status .no-status-info {
  font-size: 3.47vw;
  padding-top: 4vw;
  color: #515252;
  text-align: center;
}
.fill-empty {
  position: fixed;
  z-index: 4;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: #fff;
}
.oasis-main-content {
  position: relative;
  z-index: 5;
}
.download-btn {
  width: 48.8vw;
  height: 22.13vw;
  background: url(../image/button_bottom_850.png) no-repeat;
  background-size: 48.8vw 22.13vw;
  position: fixed;
  left: 50%;
  margin-left: -24.4vw;
  bottom: 8vw;
  z-index: 999;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.status-footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 0.4rem;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 0.4rem 0.6667rem 0.333rem;
}
.status-footer .avatar {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  width: 1.33rem;
  height: 1.33rem;
  border-radius: 50%;
}
.status-footer .name {
  padding-left: 0.4rem;
  font-size: 0.8rem;
  color: #525151;
}
.status-footer .like-count {
  color: #525151;
  font-size: 0.8rem;
  margin-left: auto;
  padding-right: 0.2rem;
}
.status-footer .like-img {
  width: 0.8rem;
  height: 0.8rem;
}
.red-btn-box {
  display: none;
  width: 28vw;
  height: 30.93vw;
  position: fixed;
  right: 0;
  bottom: 46.67vw;
  z-index: 20;
}
.red-btn-box.show {
  display: block;
}
.red-btn-box img {
  display: block;
  width: 28vw;
  height: 30.93vw;
}
.red-btn-box .close-btn {
  width: 4vw;
  height: 4vw;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAoNJREFUeNrMl89rGkEUx/dHu9KC1BYqbWNls7SQtgYPRYoX0Uuam3+ApIjQm4IH/4eA+A94k54kIHgQQgy0gjdvttteGsoeWuLWiyGtbbpr0vdktthkd3bcaOkXvl52nM/Mzntv3vIcmwTwbeIA+Dr4KnlmgMfgEXhIfOo2Ie/yHCdXwDJYYlzkL7AG/kQWNTd4BfwE7OO86QT8HvzF7qHosJh18CPwFc678L93ycKHbmCEPgXf5xYnjAk/+JAGjiwYaslPYuSrHfge+DG3POHOv4GPrTSxojfCLV8RKw0tsGIXvYVCYVXX9e1Go7HBMmu5XI4OBoPtarX6zGGIj7CmYIHk6QWdgURRlFKp1Gaz2dykQSuVSjSXy21JkuTjeV6gDEWWgGccBIftRvR6vVEwGNSjIFmWH8Tjcb5erx/YQbPZ7JYA6na7+5lM5g0FjMwR/qyCbzqNarfbOg1+HppOp3dZqhuCH4Kv0UY5wT1Cp6eIBeM5ax0moBfA4TVN+xAOh9c8QP/seI3hsvhr57FYLB4KhdYxiDqdTmtO6LRCCh7z8Qz/DJpGvpcJEGyyDrbO1DTNn6qq7o3H41EikdhwSzUbmfiq77gFl130JpPJHZZUc9ARgm/Q0omWMm6pRtFAJIG1Mi+UNc8d9BHBP0gZu9AU5PN5uVgsvnRLmfNwRVGOWq3WZ0pr9E4gjZlmG/OgyWRiQMrsuaVMqVTq12q1V4ZhnLjsFlmn/My1mLpEf8VcOMCvsQkUZlpU9R/cx6rVec6e6zHZcWBJUHzFB04915D0R/4FQ7HR67u1t4fk0ggscKd9UmapYI50g9/Bty7RW2N0v519vf/9J8xSP9p+CzAAKrkPOdLvQMsAAAAASUVORK5CYII=) no-repeat;
  background-size: 4vw 4vw;
  position: absolute;
  right: 1.6vw;
  top: 3.5vw;
}