@font-face {
  font-family: 'DFYuanGB';
  src: url(../font/DFYuanGB-W5.woff2);
}
* {
  margin: 0px; padding: 0px
}
html {
  width: 100%
}
body {
  width: 100%; background: #fff; color: #000; font-size: 12px; font-family: Arial, Verdana; text-size-adjust: none
}
ul, ol {
  list-style: none
}
img {
  border: 0px
}
a {
  color: #000; text-decoration: none
}
a:hover {
  color: #000; text-decoration: none
}
.hide {
  display: none !important
}
.wrap {
  width: 640px; height: 100vh; min-height: 1160px; font-family: 'DFYuanGB'; overflow: hidden; margin: auto; position: relative
}
.back {
  width: 60px; height: 60px; background: url(../images/img.arrow.2.png) center center no-repeat; position: absolute; top: 15px; left: 15px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease
}
.back.on {
  opacity: 1; pointer-events: all
}
.hamburger {
  width: 60px; height: 60px; position: absolute; top: 15px; right: 15px; cursor: pointer; z-index: 1000
}
.hamburger::before {
  display: block; content: ''; width: 30px; height: 4px; background: #ffffff; transform: translate(-50%, calc(-50% - 10px)); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.hamburger::after {
  display: block; content: ''; width: 30px; height: 4px; background: #ffffff; transform: translate(-50%, calc(-50% + 10px)); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.hamburger em {
  display: block; width: 30px; height: 4px; background: #ffffff; transform: translate(-50%, -50%); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.menu {
  width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); opacity: 0; position: absolute; top: 0px; left: 0px; z-index: 50; transition: opacity 0.3s ease
}
.menu div.box {
  width: 380px; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #ffffff; position: absolute; top: 0px; right: -100%; z-index: 100
}
.menu div.box span.close {
  display: block; width: 60px; height: 60px; position: absolute; top: 15px; right: 15px; z-index: 200
}
.menu div.box span.close::before {
  width: 30px; height: 4px; content: ''; background: #7c7c7c; transform: translateX(-50%) translateY(-50%) rotate(45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.menu div.box span.close::after {
  width: 30px; height: 4px; content: ''; background: #7c7c7c; transform: translateX(-50%) translateY(-50%) rotate(-45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.menu div.box ul {
  width: 100%; box-sizing: border-box; padding-left: 25px; padding-right: 45px
}
.menu div.box ul li {
  width: 100%; padding: 25px 0px
}
.menu div.box ul li span.href {
  width: 100%; height: 58px; box-sizing: border-box; padding-left: 35px; display: flex; align-items: center; justify-content: flex-start; gap: 20px; font-size: 28px; color: #505050; border-radius: 28px
}
.menu div.box ul li span.href img {
  width: 34px
}
.menu div.box ul li span.href img.s {
  width: 28px; margin-right: 6px
}
.menu div.box ul li span.href wx-open-launch-weapp {
  display: block
}
.menu div.box ul li span.href.on {
  background: #ff9000; color: #ffffff
}
.menu div.box ul li span.href.on img {
  filter: brightness(0) invert(1)
}
.menu.on {
  opacity: 1; z-index: 10000
}
.menu.on div.box {
  right: 0%; transition: right 0.3s ease 0.2s
}
.menu.on.out {
  opacity: 0; transition: opacity 0.3s ease 0.2s
}
.menu.on.out div.box {
  right: -100%; transition: right 0.3s
}
.home {
  width: 100%; height: 100%; background: linear-gradient(to bottom, #ac1305 0%, #ac1305 20%, #b60b03 80%, #b60b03 100%); overflow: hidden; position: relative; z-index: 100
}
.home div.logo {
  width: 78px; height: 31px; background: url(../images/logo.png); position: absolute; top: 30px; left: 30px; z-index: 200
}
.home div.character {
  width: 100%; height: 1136px; transform: translate(-50%, -50%); background: url(../images/home-v5.png) 0px 0px no-repeat; position: absolute; top: 50%; left: 50%; z-index: 100; animation: home 1.6s step-start infinite
}
.home div.character::after {
  display: block; width: 175px; height: 252px; content: ''; background: url(../images/home-product.png); background-size: contain; transform: translate(-74px, 92px); position: absolute; top: 50%; left: 50%; z-index: 100
}
.home div.playvideo {
  width: 300px; height: 300px; transform: translateX(-50%) translateY(-50%); cursor: pointer; position: absolute; top: 50%; left: 50%; z-index: 160
}
.home div.buttons {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 20px; position: absolute; bottom: 36px; z-index: 200
}
.home div.buttons span {
  display: block; position: relative; cursor: pointer
}
.home div.buttons span wx-open-launch-weapp {
  display: block
}
.home div.buttons span em {
  display: block; font-style: normal; transform: translateX(-50%); position: absolute; top: calc(100% + 6px); left: 50%; font-size: 16px; color: #ffffff
}
.cards {
  width: 100%; height: 100%; background: #ffffff; overflow: auto; transform: scale(0.9); opacity: 0; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.cards div.title {
  width: 100%; height: 180px; box-sizing: border-box; padding-top: 136px; text-align: center; font-size: 20px; color: rgba(255, 255, 255, 0.9)
}
.cards div.title span {
  font-size: 24px; padding: 0px 4px; color: #ffffff
}
.cards div.banner {
  --swiper-pagination-bottom: 16px
}
.cards div.banner div.logo {
  width: 86px; height: 38px; background: url(../images/logo.b.png) center center no-repeat; transform: translateX(-50%); position: absolute; top: 30px; left: 50%; z-index: 200
}
.cards div.banner div.swiper-slide div.button {
  transform: translateX(-50%); position: absolute; left: 50%; bottom: 50px; z-index: 100
}
.cards div.banner svg.swiper-navigation-icon {
  display: none
}
.cards div.banner div.swiper-button-prev::before {
  display: block; content: ''; width: 36px; height: 18px; background: url(../images/img.arrow1l.png) center center no-repeat; transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: 100; animation: button_prev 1s ease infinite
}
.cards div.banner div.swiper-button-next::before {
  display: block; content: ''; width: 36px; height: 18px; background: url(../images/img.arrow1r.png) center center no-repeat; transform: translateX(50%) translateY(-50%); position: absolute; top: 50%; right: 50%; z-index: 100; animation: button_next 1s ease infinite
}
.cards div.banner span.swiper-pagination-bullet {
  width: 12px; height: 12px; margin: 0px 6px; background: #ffffff; border-radius: 12px; opacity: 1; transition: all 0.3s ease
}
.cards div.banner span.swiper-pagination-bullet-active.swiper-pagination-bullet:nth-of-type(1) {
  width: 30px; background: linear-gradient(to right bottom, #ae2cf1, #7776ff)
}
.cards div.banner span.swiper-pagination-bullet-active.swiper-pagination-bullet:nth-of-type(2) {
  width: 30px; background: linear-gradient(to right bottom, #ffde04, #fe7d00)
}
.cards div.banner span.swiper-pagination-bullet-active.swiper-pagination-bullet:nth-of-type(3) {
  width: 30px; background: linear-gradient(to right bottom, #04f2fe, #4facfe)
}
.cards div.banner span.swiper-pagination-bullet-active.swiper-pagination-bullet:nth-of-type(4) {
  width: 30px; background: linear-gradient(to right bottom, #caf881, #a0e99a)
}
.cards div.list {
  width: 100%; margin-top: -30px; padding-bottom: 30px; position: relative; z-index: 200
}
.cards div.list div.nav {
  width: 100%; box-sizing: border-box; padding: 55px 25px 45px 25px; background: url(../images/bangs.png) top center no-repeat; display: flex; align-items: center; justify-content: space-between
}
.cards div.list div.nav div.category {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px
}
.cards div.list div.nav div.category span.item {
  display: flex; align-items: center; justify-content: center; height: 50px; padding: 0px 24px; font-size: 26px; color: #505050; border: #dedfe4 1px solid; border-radius: 50px; cursor: pointer; transition: all 0.3s ease
}
.cards div.list div.nav div.category span.item.on {
  background: linear-gradient(to right, #e58722, #e16b1b); border-color: #e16b1b; color: #ffffff
}
.cards div.list div.nav div.text {
  font-size: 20px; color: #9fa3b0
}
.cards div.list div.nav div.text span {
  font-size: 24px; padding: 0px 4px
}
.cards div.list div.items {
  width: 100%; overflow: hidden; background: #ffffff; margin-top: -2px; position: relative; z-index: 110; transition: height 0.3s ease
}
.cards div.list div.items div.item {
  position: absolute; top: 0px; left: 0px; width: 186px; transition: top 0.6s ease, left 0.6s ease, opacity 0.3s ease
}
.cards div.list div.items div.item.out {
  opacity: 0; pointer-events: none
}
.cards div.list div.items div.item[i='1'] {
  top: 0px; left: 25px
}
.cards div.list div.items div.item[i='2'] {
  top: 0px; left: 227px
}
.cards div.list div.items div.item[i='3'] {
  top: 0px; left: 429px
}
.cards div.list div.items div.item[i='4'] {
  top: 260px; left: 25px
}
.cards div.list div.items div.item[i='5'] {
  top: 260px; left: 227px
}
.cards div.list div.items div.item[i='6'] {
  top: 260px; left: 429px
}
.cards div.list div.items div.item[i='7'] {
  top: 520px; left: 25px
}
.cards div.list div.items div.item[i='8'] {
  top: 520px; left: 227px
}
.cards div.list div.items div.item[i='9'] {
  top: 520px; left: 429px
}
.cards div.list div.items div.item[i='10'] {
  top: 780px; left: 25px
}
.cards div.list div.items div.item[i='11'] {
  top: 780px; left: 227px
}
.cards div.list div.items div.item[i='12'] {
  top: 780px; left: 429px
}
.cards div.list div.items div.item[i='13'] {
  top: 1040px; left: 25px
}
.cards div.list div.items div.item[i='14'] {
  top: 1040px; left: 227px
}
.cards div.list div.items div.item[i='15'] {
  top: 1040px; left: 429px
}
.cards div.list div.items div.item[i='16'] {
  top: 1300px; left: 25px
}
.cards div.list div.items div.item[i='17'] {
  top: 1300px; left: 227px
}
.cards div.list div.items div.item[i='18'] {
  top: 1300px; left: 429px
}
.cards div.list div.items div.item[i='19'] {
  top: 1560px; left: 25px
}
.cards div.list div.items div.item[i='20'] {
  top: 1560px; left: 227px
}
.cards div.list div.items div.item[i='21'] {
  top: 1560px; left: 429px
}
.cards div.list div.items div.item[i='22'] {
  top: 1820px; left: 25px
}
.cards div.list div.items div.item[i='23'] {
  top: 1820px; left: 227px
}
.cards div.list div.items div.item[i='24'] {
  top: 1820px; left: 429px
}
.cards div.list div.items div.item[i='25'] {
  top: 2080px; left: 25px
}
.cards div.list div.items div.item[i='26'] {
  top: 2080px; left: 227px
}
.cards div.list div.items div.item[i='27'] {
  top: 2080px; left: 429px
}
.cards div.list div.items div.item[i='28'] {
  top: 2340px; left: 25px
}
.cards div.list div.items div.item[i='29'] {
  top: 2340px; left: 227px
}
.cards div.list div.items div.item[i='30'] {
  top: 2340px; left: 429px
}
.cards div.list div.items div.item[i='31'] {
  top: 2600px; left: 25px
}
.cards div.list div.items div.item[i='32'] {
  top: 2600px; left: 227px
}
.cards div.list div.items div.item[i='33'] {
  top: 2600px; left: 429px
}
.cards div.list div.items div.item[i='34'] {
  top: 2860px; left: 25px
}
.cards div.list div.items div.item[i='35'] {
  top: 2860px; left: 227px
}
.cards div.list div.items div.item[i='36'] {
  top: 2860px; left: 429px
}
.cards div.list div.items div.item[i='37'] {
  top: 3120px; left: 25px
}
.cards div.list div.items div.item[i='38'] {
  top: 3120px; left: 227px
}
.cards div.list div.items div.item[i='39'] {
  top: 3120px; left: 429px
}
.cards div.list div.items div.item img {
  display: block; width: 100%; border-radius: 10px; box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1); transition: opacity 0.6s ease
}
.cards div.list div.items div.item img.overlay {
  position: absolute; opacity: 0; top: 0px; left: 0px; z-index: 100
}
.cards.on {
  transform: scale(1); opacity: 1; z-index: 200
}
.cards.on.out {
  transform: scale(1.1); opacity: 0
}
.cards.overlay div.list div.items div.item.double img.main {
  opacity: 0
}
.cards.overlay div.list div.items div.item.double img.overlay {
  opacity: 1
}
.cardscamp.on {
  z-index: 300
}
.cardscamp1 div.title {
  background: url(../images/img.camp.s1.jpg) top center no-repeat
}
.cardscamp2 div.title {
  background: url(../images/img.camp.s2.jpg) top center no-repeat
}
.cardscamp3 div.title {
  background: url(../images/img.camp.s3.jpg) top center no-repeat
}
.bigcards {
  width: 100%; height: 100%; background: #ffffff; overflow: hidden; transform: scale(0.9); opacity: 0; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.bigcards div.logo {
  width: 78px; height: 31px; background: url(../images/logo.png); position: absolute; top: 30px; left: 30px; z-index: 200
}
.bigcards div.close {
  display: block; width: 60px; height: 60px; position: absolute; top: 15px; right: 15px; z-index: 200
}
.bigcards div.close::before {
  width: 30px; height: 4px; content: ''; background: #ffffff; transform: translateX(-50%) translateY(-50%) rotate(45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.bigcards div.close::after {
  width: 30px; height: 4px; content: ''; background: #ffffff; transform: translateX(-50%) translateY(-50%) rotate(-45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.bigcards div.title {
  width: 300px; transform: translateX(-50%); position: absolute; top: 100px; left: 50%; z-index: 200
}
.bigcards div.title div.camp {
  transform: translateX(-50%); position: absolute; top: 0px; left: 50%; opacity: 0; transition: opacity 0.3s ease
}
.bigcards div.title div.camp.on {
  opacity: 1
}
.bigcards div.swiper {
  width: 100%; height: 660px; box-sizing: border-box; padding: 0px 75px; transform: translate(-50%, -50%); overflow: visible; position: absolute; top: 50%; left: 50%; z-index: 100
}
.bigcards div.swiper div.swiper-slide div.item {
  position: relative
}
.bigcards div.swiper div.swiper-slide div.item img {
  width: 100%; border-radius: 20px; transition: opacity 0.6s ease
}
.bigcards div.swiper div.swiper-slide div.item img.overlay {
  position: absolute; opacity: 0; top: 0px; left: 0px; z-index: 100
}
.bigcards div.swiper div.swiper-slide[camp='1'] div.item img {
  box-shadow: 0px 0px 40px #fee99c
}
.bigcards div.swiper div.swiper-slide[camp='2'] div.item img {
  box-shadow: 0px 0px 40px #85ccf2
}
.bigcards div.swiper div.swiper-slide[camp='3'] div.item img {
  box-shadow: 0px 0px 40px #9ad845
}
.bigcards div.swiper div.swiper-slide[camp='4'] div.item img {
  box-shadow: 0px 0px 40px #4b04db
}
.bigcards div.swiper svg.swiper-navigation-icon {
  display: none
}
.bigcards div.swiper div.swiper-button-prev::before {
  display: block; content: ''; width: 36px; height: 18px; background: url(../images/img.arrow1l.png) center center no-repeat; transform: translateX(-50%) translateY(-50%); position: absolute; top: 50%; left: 50%; z-index: 100; animation: button_prev 1s ease infinite
}
.bigcards div.swiper div.swiper-button-next::before {
  display: block; content: ''; width: 36px; height: 18px; background: url(../images/img.arrow1r.png) center center no-repeat; transform: translateX(50%) translateY(-50%); position: absolute; top: 50%; right: 50%; z-index: 100; animation: button_next 1s ease infinite
}
.bigcards div.swiper div.swiper-pagination-fraction {
  transform: translateY(200px); font-family: 'DFYuanGB'; font-size: 48px; color: #ffffff
}
.bigcards div.count {
  width: 400px; transform: translateX(-50%); text-align: center; font-size: 28px; color: #ffffff; position: absolute; bottom: 40px; left: 50%; z-index: 200
}
.bigcards div.bg {
  width: 100%; height: 100%; position: relative
}
.bigcards div.bg div.camp {
  width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; opacity: 0; transition: opacity 0.3s ease
}
.bigcards div.bg div.camp img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: bottom center
}
.bigcards div.bg div.camp.on {
  opacity: 1
}
.bigcards.on {
  transform: scale(1); opacity: 1; z-index: 2000
}
.bigcards.on.out {
  transform: scale(1.1); opacity: 0
}
.bigcards.overlay div.swiper div.swiper-slide div.item img.main {
  opacity: 0
}
.bigcards.overlay div.swiper div.swiper-slide div.item img.overlay {
  opacity: 1
}
.video {
  width: 100%; height: 100%; background: #ffffff; overflow: hidden; transform: scale(0.9); opacity: 0; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.video div.close {
  display: block; width: 60px; height: 60px; position: absolute; top: 15px; right: 15px; z-index: 200
}
.video div.close::before {
  width: 30px; height: 4px; content: ''; background: #ffffff; transform: translateX(-50%) translateY(-50%) rotate(45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.video div.close::after {
  width: 30px; height: 4px; content: ''; background: #ffffff; transform: translateX(-50%) translateY(-50%) rotate(-45deg); border-radius: 4px; position: absolute; top: 50%; left: 50%; z-index: 100
}
.video div.mp4 {
  width: 100%; height: 100%
}
.video div.mp4 video {
  display: block; width: 100%; height: 100%; object-fit: cover
}
.video.on {
  transform: scale(1); opacity: 1; z-index: 1000
}
.video.on.out {
  transform: scale(1.1); opacity: 0
}
.biscuit {
  width: 100%; height: 100%; background: #ffffff; overflow: hidden; transform: scale(0.9); opacity: 0; position: absolute; top: 0px; left: 0px; opacity: 0; z-index: 50; transition: transform 0.3s ease, opacity 0.3s ease
}
.biscuit div.logo {
  width: 154px; height: 63px; background: url(../images/logo.xb.png) center center no-repeat; transform: translateX(-50%); position: absolute; top: 65px; left: 50%; z-index: 1000
}
.biscuit div.swiper {
  width: 100%; height: 100%; --swiper-pagination-bottom: 60px
}
.biscuit div.swiper div.swiper-slide div.tips {
  width: 600px; text-align: center; font-size: 14px; line-height: 160%; color: rgba(255, 255, 255, 0.9); transform: translateX(-50%); position: absolute; bottom: 100px; left: 50%; z-index: 100
}
.biscuit div.swiper div.swiper-slide div.bg {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative
}
.biscuit div.swiper div.swiper-slide div.bg img {
  width: 100%
}
.biscuit div.swiper div.swiper-slide div.bg[product='1'],
.biscuit div.swiper div.swiper-slide div.bg[product='2'] {
  background: linear-gradient(to bottom, #ffb62b 0%, #ffb62b 20%, #b2030a 80%, #b2030a 100%)
}
.biscuit div.swiper div.swiper-slide div.bg[product='3'] {
  background: linear-gradient(to bottom, #d60000 0%, #d60000 20%, #f80000 80%, #f80000 100%)
}
.biscuit div.swiper div.swiper-pagination span.swiper-pagination-bullet {
  width: 10px; height: 10px; margin: 0px 5px; background: #ffffff; border-radius: 10px; opacity: 0.6; transition: opacity 0.3s ease
}
.biscuit div.swiper div.swiper-pagination span.swiper-pagination-bullet-active {
  opacity: 1
}
.biscuit.on {
  transform: scale(1); opacity: 1; z-index: 200
}
.biscuit.on.out {
  transform: scale(1.1); opacity: 0
}
@keyframes home {
  0% {
    background-position: 0px 0px
  }
  6.25% {
    background-position: -640px 0px
  }
  12.5% {
    background-position: -1280px 0px
  }
  18.75% {
    background-position: -1920px 0px
  }
  25% {
    background-position: -2560px 0px
  }
  31.25% {
    background-position: -3200px 0px
  }
  37.5% {
    background-position: -3840px 0px
  }
  43.75% {
    background-position: -4480px 0px
  }
  50% {
    background-position: 0px -1138px
  }
  56.25% {
    background-position: -640px -1138px
  }
  62.5% {
    background-position: -1280px -1138px
  }
  68.75% {
    background-position: -1920px -1138px
  }
  75% {
    background-position: -2560px -1138px
  }
  81.25% {
    background-position: -3200px -1138px
  }
  87.5% {
    background-position: -3840px -1138px
  }
  93.75% {
    background-position: -4480px -1138px
  }
  100% {
    background-position: 0px 0px
  }
}
@keyframes button_prev {
  0% {
    margin-left: 0px
  }
  50% {
    margin-left: 10px
  }
  100% {
    margin-left: 0px
  }
}
@keyframes button_next {
  0% {
    margin-right: 0px
  }
  50% {
    margin-right: 10px
  }
  100% {
    margin-right: 0px
  }
}