@charset "UTF-8";
/**
 *
 * @authors wen
 * @date    2019-02-24 10:07:18
 * @version $Id$
 */
#login_container {
  position: fixed;
  top: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
  /* 设置为 Flex 容器 */
  /* 竖直居中 */
  align-items: center;
  /* 水平居中（可选） */
  justify-content: center;
  z-index: 44;
}
.flexs {
  display: flex;
}
.img100 img {
  width: 100%;
}
.marCenter {
  margin: 0 auto;
}
#waiting .rect {
  z-index: 999;
  position: relative;
}
.mask,
.dmask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}
.dmask {
  background-color: rgba(0, 0, 0, 0.2);
}
.loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 40%;
  bottom: 0;
  margin: 0 auto;
  width: 66px;
  height: 60px;
  text-align: center;
  font-size: 10px;
  z-index: 1001;
}
.loading > div.rect {
  background-color: #fff;
  height: 100%;
  width: 0.4rem;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.loading .rect2 {
  -webkit-animation-delay: -1.1s !important;
  animation-delay: -1.1s !important;
}
.loading .rect3 {
  -webkit-animation-delay: -1s !important;
  animation-delay: -1s !important;
}
.loading .rect4 {
  -webkit-animation-delay: -0.9s !important;
  animation-delay: -0.9s !important;
}
.loading .rect5 {
  -webkit-animation-delay: -0.8s !important;
  animation-delay: -0.8s !important;
}
.loading .loadingText {
  color: #fff;
}
.loading .loadingText2 {
  color: #fff;
}
@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
@-webkit-keyframes playdeg {
  0% {
    transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
  }
  100% {
    transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
  }
}
@keyframes playdeg {
  0% {
    transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
  }
  100% {
    transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
  }
}
@-webkit-keyframes stopplaydeg {
  0% {
    transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  100% {
    transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
  }
}
@keyframes stopplaydeg {
  0% {
    transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
  }
  100% {
    transform: rotate(-18deg);
    -moz-transform: rotate(-18deg);
    -webkit-transform: rotate(-18deg);
  }
}
@-webkit-keyframes toLastdescUp {
  from {
    -webkit-transform: translateY(200%);
  }
  to {
    -webkit-transform: translateY(5%);
  }
}
@keyframes toLastdescUp {
  from {
    -webkit-transform: translateY(200%);
  }
  to {
    -webkit-transform: translateY(5%);
  }
}
.toLastdescUp {
  -webkit-animation: toLastdescUp 1s ease;
  animation: toLastdescUp 1s ease;
  animation-fill-mode: forwards;
}
@-webkit-keyframes tofirstdesc {
  from {
    -webkit-transform: translateY(200%);
  }
  to {
    -webkit-transform: translateY(5%);
  }
}
@keyframes tofirstdesc {
  from {
    -webkit-transform: translateY(200%);
  }
  to {
    -webkit-transform: translateY(5%);
  }
}
.tofirstdesc {
  -webkit-animation: tofirstdesc 1s ease;
  animation: tofirstdesc 1s ease;
}
@-webkit-keyframes toScrollTips {
  from {
    -webkit-transform: translateX(200%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(5%);
    opacity: 1;
  }
}
@keyframes toScrollTips {
  from {
    -webkit-transform: translateX(200%);
    opacity: 0;
  }
  to {
    -webkit-transform: translateX(5%);
    opacity: 1;
  }
}
.toScrollTips {
  -webkit-animation: toScrollTips 2s ease infinite;
  animation: toScrollTips 2s ease infinite;
}
.toScale {
  -webkit-animation: toScale 2s linear infinite;
  animation: toScale 2s linear infinite;
}
@keyframes toScale {
  0% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
  50% {
    transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }
}
html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
}
/* 背景音乐 */
#musicPlayer {
  width: 1.55rem;
  height: 1.55rem;
  right: 1.125rem;
  top: 1.125rem;
  z-index: 9999;
  position: fixed;
  cursor: pointer;
  /*background: url(../images/music.png) no-repeat;*/
  background-size: 100% 100%;
  -webkit-animation: play 3s linear infinite;
  animation: play 3s linear infinite;
}
#musicPlayer.pause {
  -webkit-animation: none;
  animation: none;
  /*background: url(../images/music.png) no-repeat;*/
  background-size: 100% 100%;
}
#music {
  width: 8%;
  right: 4%;
  top: 2%;
  z-index: 120;
  cursor: pointer;
  /*background: url(../images/music.png) no-repeat;*/
  background-size: 100% 100%;
  position: fixed;
  -webkit-animation: play 3s linear infinite;
  animation: play 3s linear infinite;
}
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes play {
  0% {
    -webkit-transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
/* 背景音乐 end */
body {
  width: 100%;
  height: 100%;
}
body img {
  width: 100%;
}
body .sdjgjg {
  width: 90%;
  text-align: center;
  padding: 0.75rem 0;
  margin: 0 auto;
  font-size: 0.5rem;
  line-height: 0.75rem;
  color: #666;
}
body .honme {
  position: absolute;
  left: 2%;
  top: 2%;
  z-index: 4;
  width: 1.25rem;
}
body #container {
  width: 100%;
  height: 100%;
}
body #container .page {
  width: 100%;
  height: 100%;
}
body .mask {
  background-color: rgba(0, 0, 0, 0.5);
}
body .acttac {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
body .acttac .infoBox {
  text-align: justify;
  background: url(../images/bg.png) no-repeat;
  background-size: 100% 100%;
  padding: 0.75rem 0.75rem;
  margin: 1.75rem auto;
  height: 85%;
  width: 80%;
  overflow-y: scroll;
}
body .acttac .infoBox p {
  color: #101010;
  font-size: 0.6rem;
  margin-bottom: 0.25rem;
  line-height: 1rem;
}
body .txfgg {
  left: 50%;
  width: 750px;
  margin-left: -375px;
}
body .main {
  width: 100%;
  height: 100%;
}
body .main .warpper {
  background: url('../images/bg.png') no-repeat;
  background-size: 100% 100%;
  width: 18.75rem;
  min-height: 100%;
  height: fit-content;
  margin: 0 auto;
}
body .main .banner {
  width: 18.75rem;
  position: relative;
}
body .main .banner .infohtml {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  display: flex;
}
body .main .banner .infohtml span {
  color: #8C4607;
  font-size: 0.6rem;
}
body .main .banner .infohtml img {
  width: 0.75rem;
}
body .main .banner .bannershort {
  height: 7.8rem;
  overflow: hidden;
}
body .main .banner .active {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #fff;
  font-size: 0.75rem;
}
body .main .banner .active .icons2 {
  width: 0.75rem;
}
body .main .banner .dataArea {
  position: absolute;
  bottom: 0.35rem;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  color: #8C4607;
  margin: 0 auto;
  width: 84%;
}
body .main .banner .dataArea .number {
  font-size: 0.6rem;
  color: #8C4607;
}
body .main .banner .dataArea .sum {
  width: 3rem;
  display: flex;
  align-items: center;
}
body .main .banner .dataArea .sum .icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
body .main .banner .dataArea .sum .data {
  font-size: 0.6rem;
  color: #8C4607;
}
body .main .navBox {
  margin: 0.55rem 0;
}
body .main .navBox ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-evenly;
  width: 100%;
  margin: 0 auto;
}
body .main .navBox ul li {
  width: 3rem;
  height: 1rem;
  line-height: 1rem;
  background-color: #5288E6;
  border: 0.1rem solid #fff;
  border-radius: 0.2rem;
  font-size: 0.5rem;
  text-align: center;
  color: #fff;
  margin-left: 0.425rem;
  margin-right: 0.425rem;
  margin-bottom: 0.2rem;
}
body .main .navBox ul li.active {
  background-color: #E68152;
}
body .main .navBox ul li.sdsf {
  margin-right: 14.1rem;
}
body .main .rankname {
  color: #8C4607;
  font-size: 0.7rem;
  letter-spacing: 0.2rem;
  margin: 0.6rem 0;
  width: 100%;
  text-align: center;
}
body .main .rankBox {
  width: 100%;
  height: fit-content;
}
body .main .rankBox .showTopThree .static {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
body .main .rankBox .showTopThree .static li {
  width: 4rem;
  height: 4.5rem;
  border: 0.2rem solid #fff;
  border-radius: 0.25rem;
  position: relative;
}
body .main .rankBox .showTopThree .static li .rhgtws {
  width: 100%;
  height: 100%;
}
body .main .rankBox .showTopThree .static li .sjdsjfgname {
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.5rem;
}
body .main .rankBox .showTopThree .static li img {
  width: 100%;
  height: 100%;
}
body .main .rankBox .showTopThree .static li .rank1,
body .main .rankBox .showTopThree .static li .rank2,
body .main .rankBox .showTopThree .static li .rank3 {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.6rem;
  position: absolute;
  top: -0.2rem;
  z-index: 4;
  right: -0.2rem;
}
body .main .rankBox .showTopThree .static li .rank1 {
  background-color: #F90707;
}
body .main .rankBox .showTopThree .static li .rank2 {
  background-color: #F77908;
}
body .main .rankBox .showTopThree .static li .rank3 {
  background-color: #E4E430;
}
body .main .rankBox .swiperBox {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
body .main .rankBox .swiperBox .swipermask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
}
body .main .rankBox .swiperBox .swiper {
  width: 80%;
  height: 80%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 3;
}
body .main .rankBox .swiperBox .swiper .swiper-slide img {
  width: -webkit-fill-available;
  height: 80%;
  border: 0.1rem solid #fff;
  border-radius: 0.25rem;
}
body .main .rankBox .swiperBox .swiper .swiper-slide p {
  width: -webkit-fill-available;
  height: 2rem;
  background: #fff;
  border-radius: 0.25rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.5rem;
  color: #969191;
}
body .main .rankBox .rankBtn {
  display: flex;
  width: 80%;
  margin: 0.25rem auto;
  justify-content: flex-end;
}
body .main .rankBox .rankBtn .line {
  width: 11rem;
  border-bottom: 0.05rem solid #BBBBBB;
  height: 0.4rem;
  line-height: 0.8rem;
  margin-right: 0.5rem;
}
body .main .rankBox .rankBtn .btn {
  color: #869096;
  font-size: 0.5rem;
}
body .main .rankBox .rankBtn .btn a {
  color: #869096;
}
body .main .rankBox .searchBox {
  width: 84%;
  margin: 0.5rem auto;
}
body .main .rankBox .searchBox .search {
  width: 100%;
  height: 1.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
}
body .main .rankBox .searchBox .search .icon {
  width: 0.8rem;
  height: 1.5rem;
  margin: 0 0.5rem;
  margin-top: 0.25rem;
  float: left;
}
body .main .rankBox .searchBox .search .input {
  float: left;
  width: 13rem;
  height: 1.5rem;
}
body .main .rankBox .searchBox .search .input input {
  line-height: 1.5rem;
}
body .main .rankBox .listBox {
  width: 90%;
  margin: 0 auto;
}
body .main .rankBox .listBox .list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body .main .rankBox .listBox .list li {
  width: 7.7rem;
  height: auto;
  border: 0.2rem solid #fff;
  border-radius: 0.25rem;
  background-color: #fff;
  margin-bottom: 0.5rem;
}
body .main .rankBox .listBox .list li .mainpic {
  width: 7.7rem;
  height: 7.7rem;
  border-radius: 0.25rem;
}
body .main .rankBox .listBox .list li .title {
  font-size: 0.6rem;
  padding: 0.25rem 0;
}
body .main .rankBox .listBox .list li .desc {
  font-size: 0.5rem;
  margin-bottom: 0.25rem;
  -webkit-line-clamp: 4;
  color: #666;
}
body .main .rankBox .listBox .list li .btnarea {
  display: flex;
  justify-content: space-around;
}
body .main .rankBox .listBox .list li .btnarea .votebtn {
  width: 3rem;
  height: 1.2rem;
  background: #1684FC;
  border: none;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.6rem;
}
body .main .rankBox .listBox .list li .btnarea .sum {
  width: 3rem;
}
body .main .rankBox .listBox .list li .btnarea .sum .icon {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
body .main .rankBox .listBox .list li .btnarea .sum .data {
  font-size: 0.45rem;
  color: #969191;
}
body .main .icon-home {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
}
body .main .icon-home img {
  width: 1rem;
}
body .main .infoBox {
  padding: 1.75rem 0.75rem;
}
body .main .infoBox p {
  color: #101010;
  font-size: 0.6rem;
  margin-bottom: 0.25rem;
  line-height: 1rem;
}
body .main .rankList {
  margin-top: 1.5rem;
  padding-bottom: 2.5rem;
}
body .main .rankList ul li {
  width: 88%;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
body .main .rankList ul li:nth-child(even) .right {
  float: left;
}
body .main .rankList ul li:nth-child(even) .center {
  float: right;
}
body .main .rankList ul li:nth-child(odd) .right {
  float: right;
}
body .main .rankList ul li:nth-child(odd) .center {
  float: left;
}
body .main .rankList ul li .rank1,
body .main .rankList ul li .rank2,
body .main .rankList ul li .rank3,
body .main .rankList ul li .ranknum {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  color: #fff;
  font-size: 0.45rem;
  text-align: center;
  line-height: 0.6rem;
}
body .main .rankList ul li .rank1 {
  background-color: #F90707;
}
body .main .rankList ul li .rank2 {
  background-color: #F77908;
}
body .main .rankList ul li .rank3 {
  background-color: #E4E430;
}
body .main .rankList ul li .ranknum {
  background-color: #DCF7EE;
  color: #8C4607;
}
body .main .rankList ul li .picture {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.25rem;
}
body .main .rankList ul li .picture img {
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}
body .main .rankList ul li .right {
  width: 11.5rem;
}
body .main .rankList ul li .right .title {
  font-size: 0.75rem;
  padding-bottom: 0.25rem;
}
body .main .rankList ul li .right .desc {
  font-size: 0.625rem;
  margin-bottom: 0.25rem;
  -webkit-line-clamp: 3;
  text-align: justify;
  color: #666;
}
body .main .rankList ul li .right .sum {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 11.5rem;
}
body .main .rankList ul li .right .sum .icon {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
body .main .rankList ul li .right .sum .data {
  font-size: 0.75rem;
  color: #8C4607;
}
body .main .rankList ul li .left {
  margin-top: 1.45rem;
  width: 0.6rem;
  margin-right: 0.4rem;
}
body .main .rankList ul li .left,
body .main .rankList ul li .center,
body .main .rankList ul li .right {
  float: left;
}
body .main .content {
  width: auto;
  padding: 1rem;
}
body .main .content .ctitle {
  font-size: 1rem;
  color: #000;
  text-align: center;
  margin-bottom: 0.5rem;
}
body .main .content img,
body .main .content video {
  width: 100% !important;
  margin-bottom: 0.5rem;
}
body .main .content p {
  text-align: justify;
  color: #666;
  font-size: 0.75rem;
  line-height: 1rem;
  margin-bottom: 0.5rem;
}
body .main .sdimg {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
body .main #pagePd {
  text-align: center;
}
body .main .buttonBox {
  width: 100%;
  max-width: 750px;
  height: 2rem;
  background-color: #eee7d0c4;
  position: fixed;
  bottom: 0;
}
body .main .buttonBox .shareposter {
  position: absolute;
  left: 1.5rem;
  width: 4rem;
  line-height: 1.8rem;
}
body .main .buttonBox .shareposter span {
  font-size: 0.5rem;
  color: #333;
}
body .main .buttonBox .shareposter img {
  width: 1rem;
}
body .main .buttonBox .sharetofris {
  position: absolute;
  right: 2rem;
  line-height: 1.8rem;
}
body .main .buttonBox .sharetofris img {
  width: 1rem;
  margin-left: 0.5rem;
}
body .main .buttonBox .controlBox {
  width: 5.75rem;
  height: 2rem;
  border-radius: 2rem;
  position: absolute;
  top: 0%;
  left: 0;
  right: 0;
  margin: auto;
}
body .main .buttonBox .controlBox .top {
  padding-top: 0.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .main .buttonBox .controlBox .top .jian,
body .main .buttonBox .controlBox .top .jia {
  width: 1rem;
  height: 1rem;
  background-color: #D5E9F5;
  position: relative;
  border-radius: 0.1rem;
}
body .main .buttonBox .controlBox .top .jian img,
body .main .buttonBox .controlBox .top .jia img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}
body .main .buttonBox .controlBox .top .shuzi {
  width: 1.5rem;
  height: 1rem;
  background-color: #D2D7D9;
  position: relative;
  margin: 0 0.4rem;
  border-radius: 0.1rem;
}
body .main .buttonBox .controlBox .top .shuzi input {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}
body .main .buttonBox .controlBox .bottom {
  width: 4rem;
  height: 1.4rem;
  background-color: #1684FC;
  border-radius: 0.25rem;
  text-align: center;
  padding: 0.375rem 0 0;
  margin-top: 0.15rem;
  margin-left: 0.86rem;
}
body .main .buttonBox .controlBox .bottom img {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
body .main .buttonBox .controlBox .bottom span {
  font-size: 0.6rem;
  color: #fff;
}
body .main .footer {
  width: 100%;
}
body .main .sdkgg {
  padding-top: 1rem;
}
body .main .poster {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  width: 100%;
  height: 100%;
}
body .main .poster img {
  max-width: 80%;
}
body .main .poster img.tsdjr {
  margin-top: 0.5rem;
  width: 30%;
}
body .main .posterBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body .main .posterBox .posterContent {
  width: 100%;
  height: 100%;
  background: url('../images/posterbg.png') no-repeat;
  background-size: 100% 100%;
  width: 18.75rem;
  min-height: 100%;
  height: fit-content;
}
body .main .posterBox .posterContent .voteinfo {
  padding-top: 2.75rem;
}
body .main .posterBox .posterContent .voteinfo .votepic {
  width: 15rem;
  height: 25rem;
}
body .main .posterBox .posterContent .voteinfo .votetitle {
  color: #000;
  padding-top: 0.5rem;
  font-size: 1rem;
}
body .main .posterBox .posterQrcode {
  width: 20%;
  position: absolute;
  right: 6%;
  top: 82%;
  z-index: 222;
  height: 29%;
}
body .icons3 {
  margin: 0.5rem 0;
}
body .sjdfgg {
  text-indent: 1.25rem;
}