body,
p,
h4,
h3,
h2,
ul {
  padding: 0px;
  margin: 0px;
  font-family: simhei, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
  list-style: none;
}
body {
  background: url("../img/bg.jpg");
  background-size: contain;
}
.viewport {
  position: relative;
}
.viewport:before {
  content: " ";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: url("../img/bg/motion.png") no-repeat;
  -webkit-animation: bgmotion 30s linear infinite;
  /* Safari 4+ */
}
.screen {
  position: absolute;
  display: none;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.footer {
  position: fixed;
  text-align: center;
  bottom: 0px;
  left: 50%;
  margin-left: -58.75px;
  width: 117.5px;
  height: 87.5px;
  background: url("../img/title/entry.png") no-repeat;
  background-size: 100% auto;
}
.footer .next {
  cursor: pointer;
  position: absolute;
  display: inline-block;
  text-align: center;
  bottom: 25px;
  width: 31.5px;
  height: 13.5px;
  background: url("../img/title/next.png") no-repeat;
  background-size: 100% auto;
  -webkit-animation: next 1s linear infinite;
  /* Safari 4+ */
}
.up50 {
  -webkit-animation: up50 1s .1s ease both;
}
#start {
  display: block;
  -webkit-animation: bounceIn 1s .2s ease both;
}
#start .start-con {
  height: 100%;
}
#start .logo-fun {
  text-align: center;
  margin: 0 auto auto;
  padding-top: 40px;
}
#start .logo-fun img {
  width: 300px;
}
#introduce {
  -webkit-animation: up100 1s .2s ease both;
}
#introduce .con {
  margin: 0 27.5px;
  position: relative;
}
#introduce .con .item {
  margin-left: -12px;
}
#introduce .con .fun-logo img {
  width: 100%;
}
#introduce .con .btn-go {
  background: url("../img/go.png") no-repeat 50% 50%;
  display: block;
  width: 80px;
  height: 80px;
  position: absolute;
  left: 50%;
  margin-left: -40px;
  top: 245px;
  -webkit-animation: go-btn 1s 0.2s ease infinite;
}
@-webkit-keyframes go-btn {
  from {
    background: url("../img/go.png") no-repeat 50% 50%;
  }
  to {
    background: url("../img/go-hover.png") no-repeat 50% 50%;
  }
}
#introduce .con .btn-go:hover,
#introduce .con .btn-go:active {
  background: url("../img/go-hover.png") no-repeat 50% 50%;
}
#category {
  -webkit-animation: bounceIn 1s .2s ease both;
  text-algin: center;
}
#category .cate-r3 {
  width: 300px;
}
#category .cate-r2 {
  width: 200px;
}
#category .cate-r3,
#category .cate-r2 {
  zoom: 1;
  margin: auto;
}
#category .cate-r3:after,
#category .cate-r2:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
#category .cate-r3.cate-r3-first,
#category .cate-r2.cate-r3-first {
  padding-top: 5px;
}
#category .cate-r3 .item,
#category .cate-r2 .item {
  width: 85px;
  position: relative;
  margin: 12.5px;
  margin-top: 3.125px;
  margin-bottom: 3.125px;
  color: #fff;
  float: left;
  width: 75px;
  height: 75px;
}
#category .cate-r3 .item:before,
#category .cate-r2 .item:before {
  z-index: 1;
  content: " ";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 75px;
  height: 75px;
  background: url("../img/cate-bg.png") no-repeat;
  background-size: cover;
  -webkit-animation: rotating-function 5s linear infinite;
}
#category .cate-r3 .item .header,
#category .cate-r2 .item .header {
  z-index: 11;
  width: 100%;
  display: block;
  position: absolute;
  text-align: center;
  font-size: 8px;
  line-height: 18px;
  vertical-align: middle;
  top: 15px;
}
#category .cate-r3 .item .con,
#category .cate-r2 .item .con {
  z-index: 11;
  width: 100%;
  display: block;
  position: absolute;
  text-align: center;
  font-size: 18px;
  font-weight: bolder;
  top: 33px;
}
@media (max-height: 480px) {
  #category .cate-r3 .item,
  #category .cate-r2 .item {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
#category .cate-r3 .forbid,
#category .cate-r2 .forbid {
  color: #1f6fa8;
}
#category .cate-r3 .forbid:before,
#category .cate-r2 .forbid:before {
  background: url("../img/cate-bg-forbid.png") no-repeat;
  background-size: cover;
  -webkit-animation: initial;
}
#category .cate-r3 .item:hover:before,
#category .cate-r2 .item:hover:before,
#category .cate-r3 .item:active:before,
#category .cate-r2 .item:active:before {
  background: url("../img/cate-bg-hover.png") no-repeat;
  background-size: cover;
}
#category .cate-footer {
  position: fixed;
  bottom: 20px;
  left: 50%;
  margin-left: -75px;
  width: 150px;
  height: 47.5px;
  line-height: 47.5px;
  vertical-align: middle;
}
#category .cate-footer a {
  display: none;
  width: 100%;
  height: 100%;
  background-color: #3BADE9;
  border-radius: 10px;
  font-size: 21px;
  text-align: center;
  color: #000;
}
#category .cate-footer a:hover,
#category .cate-footer a:active {
  background-color: #fff;
}
#sublist .list {
  zoom: 1;
  display: none;
  -webkit-animation: fadeInRight 1s .5s ease both;
  padding-top: 15px;
  padding-left: 10px;
}
#sublist .list:nth-of-type(1) {
  display: block;
}
#sublist .list:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
@media (max-height: 580px) {
  #sublist .list {
    padding-top: 15px;
  }
}
#sublist .list .item {
  float: left;
  position: relative;
  padding: 5px;
  padding-bottom: 1px;
  margin-right: 7.5px;
  margin-bottom: 20px;
  width: 85px;
  background-color: #575754;
  text-align: center;
}
#sublist .list .item .vote-btn {
  position: absolute;
  display: block;
  width: 33px;
  height: 33px;
  left: 50%;
  top: 35%;
  margin-left: -16.5px;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-animation: vote-btn 1s 0.2s linear infinite;
}
@-webkit-keyframes vote-btn {
  from {
    background-image: url("../img/vote-btn.png");
  }
  to {
    background-image: url("../img/vote-btn-hover.png");
  }
}
#sublist .list .item h4 {
  color: #3bade9;
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  vertical-align: middle;
  margin-top: 5px;
  overflow: hidden;
}
#sublist .list .item p {
  color: #fff;
  font-size: 12px;
}
#sublist .list .item img {
  margin-bottom: 0px;
}
#sublist .list .item:hover,
#sublist .list .item:active {
  background-color: #7f42fd;
}
@media (max-height: 580px) {
  #sublist .list .item {
    margin-bottom: 5px;
  }
}
#sublist .list .last {
  float: left;
  padding-left: 20px;
  color: #41AAE4;
  padding-top: 5px;
}
#sublist .list .last h4 {
  font-size: 10px;
  line-height: 15px;
}
#sublist .list .last h2 {
  font-size: 15px;
  line-height: 15px;
  margin-bottom: 7px;
}
#sublist .list .last h1 {
  font-size: 18px;
  line-height: 18px;
}
@media (max-height: 580px) {
  #sublist .list {
    padding-top: 5px;
  }
}
#sublist .next {
  position: absolute;
  bottom: 15px;
  right: 15px;
  width: 96.5px;
  height: 16.5px;
  background: url("../img/back-cate.png") no-repeat;
  background-size: cover;
}
#sublist .next:hover,
#sublist .next:active {
  background: url("../img/back-cate-hover.png") no-repeat;
  background-size: cover;
}
#share {
  -webkit-animation: bounceIn 1s .2s ease both;
}
#share .result {
  text-align: center;
}
#share .result img {
  width: 50%;
  margin: 0 auto;
}
#share .count-vote {
  text-align: center;
  color: #3bade9;
}
#share .count-vote h3 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 10px;
}
#share .count-vote .count {
  color: #fff;
}
#share .share-btn {
  background: url("../img/share-btn.png") no-repeat;
  background-size: contain;
  width: 150.5px;
  height: 32.5px;
  position: absolute;
  left: 50%;
  margin-left: -75.25px;
  bottom: 190px;
}
#share .share-btn:hover,
#share .share-btn:active {
  background: url("../img/share-btn-hover.png") no-repeat;
  background-size: contain;
}
#share .cloud-tag {
  width: 240px;
  height: 105px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -120px;
}
#share .cloud-tag .con {
  position: relative;
}
#share .cloud-tag .con .cloud-rotate span {
  position: absolute;
  color: #6c1f8f;
  font-size: 20px;
  font-weight: bold;
}
#share .cloud-tag .con .cloud-rotate span.tagc1 {
  left: 20px;
}
#share .cloud-tag .con .cloud-rotate span.tagc2 {
  left: 60px;
}
#share .cloud-tag .con .cloud-rotate span.tagc3 {
  left: 80px;
}
#share .cloud-tag .con .cloud-rotate span.tagc4 {
  left: 100px;
}
#share .cloud-tag .con .cloud-rotate span.tagc5 {
  left: 120px;
}
#share .cloud-tag .con .cloud-rotate span.move-1 {
  -webkit-animation: tag-1-move 8s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-11 {
  -webkit-animation: tag-1-move 8s -19s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-12 {
  -webkit-animation: tag-1-move 8s -10s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-13 {
  -webkit-animation: tag-1-move 8s -11s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-14 {
  -webkit-animation: tag-1-move 8s -12s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-15 {
  -webkit-animation: tag-1-move 8s -13s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-16 {
  -webkit-animation: tag-1-move 8s -14s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-17 {
  -webkit-animation: tag-1-move 8s -15s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-18 {
  -webkit-animation: tag-1-move 8s -16s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-19 {
  -webkit-animation: tag-1-move 8s -17s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-10 {
  -webkit-animation: tag-1-move 8s -18s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-2 {
  animation: tag-2-move 15s -1s linear infinite;
  -webkit-animation: tag-2-move 8s -1s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-3 {
  animation: tag-3-move 15s -2s linear infinite;
  -webkit-animation: tag-3-move 8s -2s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-4 {
  animation: tag-4-move 15s -3s linear infinite;
  -webkit-animation: tag-4-move 8s -3s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-5 {
  animation: tag-1-move 15s -4s linear infinite;
  -webkit-animation: tag-4-move 8s -4s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-6 {
  animation: tag-2-move 15s -5s linear infinite;
  -webkit-animation: tag-4-move 8s -5s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-7 {
  animation: tag-3-move 15s -6s linear infinite;
  -webkit-animation: tag-4-move 8s -6s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-8 {
  animation: tag-4-move 15s -7s linear infinite;
  -webkit-animation: tag-4-move 8s -7s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-9 {
  animation: tag-1-move 15s -8s linear infinite;
  -webkit-animation: tag-4-move 8s -8s linear infinite;
}
#share .cloud-tag .con .cloud-rotate span.move-10 {
  animation: tag-2-move 15s -9s linear infinite;
  -webkit-animation: tag-4-move 8s -9s linear infinite;
}
.share-mask,
.tipbg {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: none;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: right;
}
.share-mask :last-child img {
  margin-right: 30px;
}
.share-mask img {
  width: 20%;
  margin: 150px 10px;
}
@-webkit-keyframes next {
  0% {
    bottom: 20px;
    opacity: 0;
  }
  100% {
    bottom: 25px;
    opacity: 1;
  }
}
@-webkit-keyframes bgmotion {
  0% {
    background-position: 33.33333333% 33.33333333%;
  }
  25% {
    background-position: 66.66666667% 33.33333333%;
  }
  50% {
    background-position: 33.33333333% 66.66666667%;
  }
  75% {
    background-position: 66.66666667% 66.66666667%;
  }
  100% {
    background-position: 33.33333333% 33.33333333%;
  }
}
@-webkit-keyframes up50 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(-100px);
  }
}
@-webkit-keyframes up100 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-webkit-keyframes rotating-function {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
}
@-moz-keyframes bounceOut {
  0% {
    -moz-transform: scale(1);
  }
  25% {
    -moz-transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
}
@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    -moz-transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -moz-transform: scale(1.05);
  }
  70% {
    -moz-transform: scale(0.9);
  }
  100% {
    -moz-transform: scale(1);
  }
}
@-webkit-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transform-origin: top center;
  }
  20% {
    -webkit-transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
@-moz-keyframes swing {
  20%,
  40%,
  60%,
  80%,
  100% {
    -moz-transform-origin: top center;
  }
  20% {
    -moz-transform: rotate(15deg);
  }
  40% {
    -moz-transform: rotate(-10deg);
  }
  60% {
    -moz-transform: rotate(5deg);
  }
  80% {
    -moz-transform: rotate(-5deg);
  }
  100% {
    -moz-transform: rotate(0deg);
  }
}
@-webkit-keyframes tag-1-move {
  0% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
  25% {
    -webkit-transform: translate(50px, 50px) scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(100px, 100px) scale(0.8, 0.8);
    opacity: 0.5;
  }
  75% {
    -webkit-transform: translate(50px, 50px) scale(0.6, 0.6);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
}
@-webkit-keyframes tag-2-move {
  0% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
  25% {
    -webkit-transform: translate(30px, 50px) scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(60px, 100px) scale(0.8, 0.8);
    opacity: 0.5;
  }
  75% {
    -webkit-transform: translate(30px, 50px) scale(0.6, 0.6);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
}
@-webkit-keyframes tag-3-move {
  0% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
  25% {
    -webkit-transform: translate(-50px, 50px) scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-100px, 100px) scale(0.8, 0.8);
    opacity: 0.5;
  }
  75% {
    -webkit-transform: translate(-50px, 50px) scale(0.6, 0.6);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0.5;
  }
}
@-webkit-keyframes tag-4-move {
  0% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0;
  }
  25% {
    -webkit-transform: translate(0, 50px) scale(1, 1);
    opacity: 0.8;
  }
  50% {
    -webkit-transform: translate(0, 100px) scale(0.8, 0.8);
    opacity: 1;
  }
  75% {
    -webkit-transform: translate(0, 50px) scale(0.6, 0.6);
    opacity: 0.2;
  }
  100% {
    -webkit-transform: translate(0, 0) scale(0.8, 0.8);
    opacity: 0;
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
.clear {
  zoom: 1;
}
.clear:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}