* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
html,
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 3.1vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}
body {
  text-align: center;
}
.oasis {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.oasis .main-bg {
  width: 100%;
  height: 177.73vw;
  background: url(../image/wb_activity_bg_330.jpg) no-repeat;
  background-size: 100vw 177.73vw;
  z-index: 11;
  position: absolute;
  left: 0;
  top: 0;
}
.oasis .top-logo {
  width: 28.34vw;
  height: 10.06vw;
  background: url(../image/snh48_logo.png) no-repeat;
  background-size: 28.34vw 10.06vw;
  z-index: 12;
  position: absolute;
  left: 50%;
  margin-left: -14.17vw;
  top: 11.73vw;
}
.oasis .main-title {
  width: 86vw;
  height: 38.67vw;
  background: url(../image/qcyn_title.png) no-repeat;
  background-size: 86vw 38.67vw;
  position: absolute;
  left: 50%;
  margin-left: -43vw;
  top: 84vw;
  z-index: 13;
}
.oasis .main-logo-bottom {
  width: 87.36vw;
  height: 7.57vw;
  background: url(../image/qcyn_logo.png) no-repeat;
  background-size: 87.36vw 7.57vw;
  position: absolute;
  left: 50%;
  margin-left: -43.68vw;
  top: 120.93vw;
  z-index: 13;
}
.oasis .main-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 34vw;
  background: #fff;
  z-index: 16;
}
.oasis .main-bottom::after {
  content: '';
  display: block;
  width: 100vw;
  height: 53.6vw;
  background: url(../image/wb_activity_bottom_330.png) no-repeat;
  background-size: 100vw 53.6vw;
  position: absolute;
  z-index: 10;
  left: 0;
  top: -53vw;
}
.oasis .main-bottom .main-btn {
  width: 69.07vw;
  height: 12.67vw;
  background: url(../image/wb_activity_btn_330.png) no-repeat;
  background-size: 69.07vw 12.67vw;
  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;
  font-size: 4.8vw;
  margin: 3.38vw auto 0.7vw;
  z-index: 20;
}
.oasis .main-bottom .main-desc .left {
  padding-right: 1.6vw;
  font-size: 3.73vw;
}
.oasis .main-bottom .main-desc .desc {
  font-size: 3.73vw;
  font-weight: bold;
  letter-spacing: 2px;
}
.oasis .main-bottom .main-desc .right {
  padding-left: 1.6vw;
  font-size: 3.73vw;
}
.oasis .main-bottom .main-logo {
  height: 5.33vw;
  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;
  margin-top: 2vw;
}
.oasis .main-bottom .main-logo img {
  width: 5.33vw;
  height: 5.33vw;
}
.oasis .main-bottom .main-logo .logo-text {
  font-size: 3.2vw;
  font-weight: bold;
  padding-left: 1.07vw;
}
.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;
}