@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
body,
html {
  background-color: #020203;
  color: #fff;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #fff;
}

#newyear-app .header-wrap {
  margin: auto;
  width: 100%;
  position: relative;
  background-image: url(../img/header-pc.png);
  background-size: cover;
  background-position: top center;
  padding-bottom: 45%;
  height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  #newyear-app .header-wrap {
    padding-bottom: 110%;
  }
}

@media (max-width: 450px) {
  #newyear-app .header-wrap {
    padding-bottom: 126%;
  }
}

@-webkit-keyframes spot {
  0% {
    -webkit-transform: translate3d(0, 120px, 0) scale(1);
            transform: translate3d(0, 120px, 0) scale(1);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -120px, 0) scale(1);
            transform: translate3d(0, -120px, 0) scale(1);
    opacity: 0;
  }
}

@keyframes spot {
  0% {
    -webkit-transform: translate3d(0, 120px, 0) scale(1);
            transform: translate3d(0, 120px, 0) scale(1);
    opacity: 0;
  }
  50% {
    -webkit-transform: translateZ(0) scale(1);
            transform: translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -120px, 0) scale(1);
            transform: translate3d(0, -120px, 0) scale(1);
    opacity: 0;
  }
}

#newyear-app .header-wrap .light {
  position: absolute;
  width: 1500px;
  height: 564px;
  top: 10px;
  left: 50%;
  margin-left: calc(-1500px/2);
  background: url(../img/light.png) no-repeat center top;
  z-index: 3;
  -webkit-animation: spot 2.8s linear infinite;
          animation: spot 2.8s linear infinite;
  opacity: 0;
}

#newyear-app .morebtn {
  width: 100%;
  max-width: 960px;
  margin: auto;
  text-align: center;
}

#newyear-app .morebtn .custom-btn {
  width: 180px;
  height: 50px;
  color: #fff;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  background: transparent;
  margin-bottom: 15px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

#newyear-app .morebtn .btn {
  border: none;
  background: #fbb621;
  background: -webkit-gradient(linear, left bottom, left top, from(#bd8c11), color-stop(50%, #8d731f), to(#eac54c));
  background: -webkit-linear-gradient(bottom, #bd8c11 0%, #8d731f 50%, #eac54c 100%);
  background: -o-linear-gradient(bottom, #bd8c11 0%, #8d731f 50%, #eac54c 100%);
  background: linear-gradient(0deg, #bd8c11 0%, #8d731f 50%, #eac54c 100%);
  color: #fff;
  overflow: hidden;
}

#newyear-app .morebtn .btn:before {
  position: absolute;
  content: '';
  display: inline-block;
  top: -180px;
  left: 0;
  width: 30px;
  height: 100%;
  background-color: #fff;
  -webkit-animation: shiny-btn1 3s ease-in-out infinite;
          animation: shiny-btn1 3s ease-in-out infinite;
}

#newyear-app .morebtn .btn:hover {
  opacity: .9;
}

#newyear-app .morebtn .btn:before:active {
  -webkit-box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3), -4px -4px 6px 0 rgba(116, 125, 136, 0.2), inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2), inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
}

@-webkit-keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
            transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

@keyframes shiny-btn1 {
  0% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    -webkit-transform: scale(0) rotate(45deg);
            transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    -webkit-transform: scale(4) rotate(45deg);
            transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(50) rotate(45deg);
            transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

#newyear-app .title {
  width: 100%;
  max-width: 960px;
  margin: auto;
  text-align: center;
}

#newyear-app .title p {
  font-size: 10px;
}

#newyear-app .title img {
  width: 35%;
}

@media (max-width: 768px) {
  #newyear-app .title img {
    width: 80%;
  }
}

#newyear-app .ranking-wrap {
  width: 100%;
  max-width: 960px;
  margin: auto;
  font-size: 12px;
  line-height: 16px;
}

#newyear-app .ranking-wrap a {
  text-decoration: none;
  color: #fff;
}

@media (max-width: 768px) {
  #newyear-app .ranking-wrap {
    padding: 0 15px;
  }
}

#newyear-app .ranking-wrap .content {
  color: #fff;
  margin-bottom: 30px;
}

#newyear-app .ranking-wrap .content table {
  border: #fff solid 1px;
  border-collapse: collapse;
  margin: auto;
}

#newyear-app .ranking-wrap .content table thead {
  text-align: center;
  height: 45px;
}

#newyear-app .ranking-wrap .content table tr td {
  border: #fff solid 1px;
}

#newyear-app .ranking-wrap .content .rank {
  text-align: center;
}

#newyear-app .ranking-wrap .content .rank p {
  font-size: 30px;
  font-weight: 600;
}

#newyear-app .ranking-wrap .content .product-view-item {
  height: 150px;
}

#newyear-app .ranking-wrap .content .product-view-item img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (max-width: 425px) {
  #newyear-app .ranking-wrap .content .product-view-item img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}

#newyear-app .ranking-wrap .content .product-info-item {
  font-size: 12px;
  float: left;
  padding: 15px;
}

#newyear-app .producers-ranking-wrap {
  width: 100%;
  max-width: 960px;
  margin: auto;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 768px) {
  #newyear-app .producers-ranking-wrap {
    padding: 0 15px;
  }
}

#newyear-app .producers-ranking-wrap .content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

#newyear-app .producers-ranking-wrap .content table {
  text-align: center;
  width: 100%;
  margin: 15px auto;
  word-break: break-all;
  border-collapse: collapse;
  border: #fff solid 1px;
}

#newyear-app .producers-ranking-wrap .content table thead {
  height: 50px;
}

#newyear-app .producers-ranking-wrap .content table thead td {
  border: #fff solid 1px;
}

#newyear-app .producers-ranking-wrap .content table tbody tr td {
  padding: 10px 5px;
  border: #fff solid 1px;
}

#newyear-app .producers-ranking-wrap .content table tbody tr td p {
  font-size: 12px;
}

#newyear-app .producers-ranking-wrap .content table tbody tr td .producers img {
  width: 60px;
  border-radius: 50%;
}

#newyear-app .fans-ranking-wrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 960px;
  margin: auto;
  text-align: center;
  font-size: 12px;
}

@media (max-width: 768px) {
  #newyear-app .fans-ranking-wrap {
    padding: 0 15px;
  }
}

#newyear-app .fans-ranking-wrap .content {
  width: 100%;
  max-width: 960px;
}

#newyear-app .fans-ranking-wrap .content img {
  width: 60%;
}

@media (max-width: 768px) {
  #newyear-app .fans-ranking-wrap .content img {
    width: 100%;
  }
}

#newyear-app .fans-ranking-wrap .content table {
  text-align: center;
  width: 100%;
  margin: 15px auto;
  word-break: break-all;
  border-collapse: collapse;
}

#newyear-app .fans-ranking-wrap .content table thead {
  height: 50px;
  border: 1px solid #fff;
}

#newyear-app .fans-ranking-wrap .content table thead td {
  border: 1px solid #fff;
}

#newyear-app .fans-ranking-wrap .content table tbody img {
  width: 15px;
}

#newyear-app .fans-ranking-wrap .content table tbody tr td {
  border: 1px solid #fff;
  padding: 10px 5px;
}

@media (max-width: 375px) {
  #newyear-app .fans-ranking-wrap .content table tbody tr td {
    font-weight: normal;
    font-size: 12px;
  }
}

#newyear-app .rule-wrap {
  width: 100%;
  max-width: 960px;
  margin: auto;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 120px;
  font-family: ‘cwTeXKai’, serif;
}

@media (max-width: 425px) {
  #newyear-app .rule-wrap {
    margin-top: 120px;
  }
}

@media (max-width: 768px) {
  #newyear-app .rule-wrap .rules {
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

#newyear-app .rule-wrap .rules .title {
  width: auto;
  margin: auto;
}

@media (max-width: 375px) {
  #newyear-app .rule-wrap .rules .title img {
    width: 100%;
  }
}

#newyear-app .rule-wrap .rules .rulesContent {
  width: 100%;
  height: auto;
  margin: auto;
  font-size: 14px;
  text-align: left;
  line-height: 36px;
  text-align: justify;
  word-break: break-all;
  margin-bottom: 70px;
}

#newyear-app .rule-wrap .rules .rulesContent ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#newyear-app .rule-wrap .rules .rulesContent ul .txt {
  padding-left: 15px;
}
/*# sourceMappingURL=style.css.map */