body,
div,
h4,
html,
li,
span,
ul {
  padding: 0;
  margin: 0;
}

:root {
  --color-primary: #efbc38;
  --color-primary2: #efbc38;
  --color-primary3: #4ba0f8;
  --color-secondary: #5a3d90;
  --color-dark: #1f1f1f;
  --color-border: #cfd0d2;
  --color-grey2: #565656;
  --color-lightgrey: #a9a9a9;
  --color-extralightgrey: #dcdcdc;
  --color-background: #f5f5f5;
  --color-white: #ffffff;
  --color-transparent: rgba(255, 255, 255, 0);
  --font-normal: "PingFangSC-Regular", "Helvetica Neue", Helvetica, Arial,
    "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
    sans-serif;
  --transition-duration: 0.5s;
  --transition-duration-half: 0.25s;
}

.hidden {
  display: none !important;
}

html {
  width: 100vw;
  overflow: hidden;
  overflow-y: auto;
}

body {
  position: relative;
  width: 100vw;
  overflow: hidden;
  overflow-y: auto;
}

img {
  width: 100%;
  height: auto;
}

#news .close,
#newslist .close,
#newslist .news-title,
#page2,
#page2 .swiper-slide .control .tab,
#page3,
#page3 .title,
#page4,
.nav-container .nav > a:after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#page {
  position: relative;
  width: 100%;
  /* min-width: calc(1080 * 1vw / 19.2); */
  margin: 0 auto;
  background-color: #ffffff;
}

#page1 {
  position: relative;
  width: 100%;
  height: calc(1137 * 1vw / 19.2);
  background-image: url("../img/Web_13.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

#page1 .container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#page1 .container .bg {
  width: 100%;
  height: 100%;
}

.logo {
  position: absolute;
  left: calc(111 * 1vw / 19.2);
  top: calc(84 * 1vw / 19.2);
  width: calc(320 * 1vw / 19.2);
  height: calc(141 * 1vw / 19.2);
}

.video_text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(1920 * 1vw / 19.2);
  height: calc(461 * 1vw / 19.2);
}

.code {
  position: absolute;
  left: calc(733 * 1vw / 19.2);
  top: calc(93 * 1vw / 19.2);
  width: calc(598 * 1vw / 19.2);
  height: calc(378 * 1vw / 19.2);
  border-style: solid;
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0);
  border-radius: 5px;
  /* background-color: rgba(255, 255, 255, 0.722); */
  display: flex;
  align-items: center;
}

.code a {
  width: calc(234 * 1vw / 19.2);
  height: calc(72 * 1vw / 19.2);
  display: block;
  margin: calc(8 * 1vw / 19.2) 0;
}

.code .link_btns {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: calc(80 * 1vw / 19.2);
  width: 100%;
}

.code img {
  width: 100%;
  height: 100%;
  display: block;
}

.code .tip {
  position: absolute;
  bottom: calc(10 * 1vw / 19.2);
  left: calc(0 * 1vw / 19.2);
  width: 100%;
  /* height: calc(22 * 1vw / 19.2); */
  font-size: calc(22 * 1vw / 19.2);
  line-height: 1.2;
  color: #575a62;
  text-align: center;
}

.code.alter {
  top: calc(900 * 1vw / 19.2);
  height: calc(100 * 1vw / 19.2);
}

.code.alter .link_btns {
  margin-bottom: 0;
}

#videoPoster {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#videoPoster video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#page2 {
  position: relative;
  width: 100%;
  height: calc(1137 * 1vw / 19.2);
  background-image: url("../img/Web_13.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#page2 .img_wpr {
  position: relative;
  width: 100%;
  height: 100%;
}

#page2 .img_wpr img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#page2 .img_wpr video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#page2 .list {
  position: absolute;
  top: 0.8rem;
  left: 0.7rem;
  width: 2rem;
  height: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

#page2 .list img {
  width: 1.2rem;
  height: 1.2rem;
}

#page2 .list .swiper-slide img {
  width: 1.2rem;
  height: 1.2rem;
  box-shadow: 3px 3px 12px 0px rgb(0 0 0 / 30%);
  border-radius: 50%;
}

#page2 .list .swiper-container {
  width: 100%;
  height: 8.3rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* #page2 .list .swiper-wrapper {
    margin-top: .2rem;
} */

#page2 .list .swiper-slide {
  width: 100%;
  /* height: 1.6rem !important; */
}

#page2 .list .swiper-slide.swiper-slide-active {
  margin-bottom: 0.4rem;
}

#page2 .list .swiper-slide.swiper-slide-active img {
  width: 1.6rem;
  height: 1.6rem !important;
  /* width: 1.5rem;
    height: 1.5rem !important; */
  box-shadow: 3px 3px 12px 0px rgb(0 0 0 / 30%);
  border-radius: 50%;
}

#page2 .swiper-button-next {
  position: unset;
  width: 2rem;
  right: 0;
}

#page2 .swiper-button-next img {
  width: 0.8rem;
  height: 0.81rem;
  margin-left: -0.21rem;
}

#page2 .img_logo {
  position: absolute;
  top: 1.6rem;
  left: 3.4rem;
}

#page2 img.img_logo_bg {
  width: 1.8rem;
}

/* #page2 .img_logo_name {
  position: absolute;
    top: 0;
} */

#page2 .img_logo_name div {
  width: 0.6rem;
  font-size: 0.5rem;
  color: #fff;
  font-family: "font2";
}

#page2 .img_logo_name div.name1 {
  position: absolute;
  top: 0.4rem;
  left: 0.3rem;
  line-height: 0.56rem;
}

#page2 .img_logo_name div.name2 {
  position: absolute;
  top: 1.2rem;
  left: 1.1rem;
  font-size: 0.4rem;
  color: #6c79c4;
  line-height: 0.43rem;
}

#page2 .img_logo_title {
  width: 1.6rem;
  height: auto;
  position: absolute;
  top: -0.3rem;
  left: 1rem;
}

#page2 .img_logo_title img {
  width: 1.6rem;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}

#page3 {
  background-image: url("../img/Web_13.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(1080 * 1vw / 19.2);
  overflow: hidden;
}

#page3 .title {
  width: 100%;
  text-align: center;
  position: relative;
  padding-top: calc(20 * 1vw / 19.2);
}

#page3 .title img {
  width: calc(711 * 1vw / 19.2);
}

#page3 .title img.title_line {
  width: calc(146 * 1vw / 19.2);
  left: calc(1010 * 1vw / 19.2);
  bottom: 0;
  position: absolute;
}

#page3 .pics {
  position: relative;
  width: calc(1268 * 1vw / 19.2);
  margin: 1.2rem auto 0;
}

#page3 .pics img {
  width: calc(1050 * 1vw / 19.2);
  /* height: calc(591 * 1vw / 19.2); */
  height: auto;
  /* background: #ffffff; */
  display: block;
}

.bl-border {
  text-align: center;
  position: relative;
}

.bl-border div {
  position: absolute;
  top: 0;
  width: 100%;
  font-size: 0.6rem;
}

#page3 .pics .swiper-slide {
  /* width: 10.6rem;
    height: 5.263rem; */
  /* opacity: 0; */
  text-align: center;
  font-size: calc(18 * 1vw / 19.2);
  /* background: #fff; */
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  transition: 300ms;
  transform: scale(0.7);
  z-index: 1;
  padding-bottom: 0.6rem;
}

#page3 .pics .swiper-slide-active,
#page3 .pics .swiper-slide-duplicate-active {
  z-index: 3;
  transform: scale(1);
}

/* #page3 .pics .swiper-slide-active img,
#page3 .pics .swiper-slide-prev img,
#page3 .pics .swiper-slide-next img {
  box-shadow: 0 8px 12px 0 rgba(93, 156, 202, 0.3);
} */

#page3 .pics .swiper-slide-prev {
  z-index: 2;
}

#page3 .pics .swiper-slide-next {
  z-index: 2;
}

#page3 .swiper-button-prev img,
#page3 .swiper-button-next img {
  width: 0.8rem;
  height: 0.81rem;
  box-shadow: unset;
  background: transparent;
  outline: none;
}

.swiper-button-prev:focus,
.swiper-button-next:focus {
  outline: none !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: unset;
  outline: none;
}

.swiper-button-next {
  right: -1.6rem;
}

.swiper-button-prev {
  left: -1.6rem;
}

#page4 {
  background-image: url("../img/Web_13.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: calc(1180 * 1vw / 19.2);
  overflow: hidden;
}

#page4 .title {
  width: 100%;
  text-align: center;
  position: relative;
}

#page4 .title img {
  width: calc(461 * 1vw / 19.2);
}

#page4 .title img.title_line {
  width: calc(146 * 1vw / 19.2);
  left: calc(970 * 1vw / 19.2);
  bottom: 0;
  position: absolute;
}

#page4 .text {
  width: 100%;
  text-align: center;
  margin-top: 0.4rem;
}

#page4 .text img {
  width: calc(937 * 1vw / 19.2);
}

@media (min-width: 850px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 118% !important;
  }
}

@media (min-width: 1200px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 114% !important;
  }
}

@media (min-width: 1350px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 110% !important;
  }
}

@media (min-width: 1400px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 108% !important;
  }
}

@media (min-width: 1600px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 106% !important;
  }
}

@media (min-width: 1800px) {
  .dialog-valid-code .valid-code .btn-cancel {
    left: 106% !important;
  }
}

.nav-container {
  position: fixed;
  font-size: calc(12 * 1vw / 19.2);
  right: 4%;
  top: calc(84 * 1vw / 19.2);
  height: calc(330 * 1vw / 19.2);
  border-right: 2px solid rgb(232 229 229 / 40%);
  z-index: 2;
  display: flex;
  justify-content: center;
}

.nav-container.page0 {
  border-right: 2px solid rgb(115 113 113 / 40%);
}

.nav-container.countdown_modify {
  display: none;
}

.nav-container.countdown_modify.page0 {
  display: block;
}

.nav-container .nav {
  position: relative;
  top: 46%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-container .nav > a {
  display: block;
  position: relative;
  color: #fff;
  text-align: right;
  padding-right: 1.5em;
  margin: 2em 0;
  text-decoration: none;
  font-size: 0.26rem;
  font-family: "font2";
}

.nav-container .nav > a:after {
  content: "";
  display: block;
  position: absolute;
  background-image: url("../img/Web_21.png");
  width: 0.15rem;
  height: 0.04rem;
  left: 100%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.nav-container .nav > a.active {
  /* color: #7bf5e0; */
  font-size: 0.6rem;
  padding-right: 0.3rem;
  margin: 0.3rem 0;
}

.nav-container .nav > a.active:after {
  /* background-image: url("../img/nav-icon"-active.png?e6a0faff); */
  width: calc(16 * 1vw / 19.2);
  height: calc(19 * 1vw / 19.2);
}

.nav-container .nav > a {
  color: #30343f;
}

.nav-container .nav > a:after {
  background-image: url("../img/Web_36.png");
}

.beiain_text {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #595c65;
  text-align: right;
  padding-right: calc(30 * 1vw / 19.2);
  margin-top: calc(-58 * 1vw / 19.2);
  text-decoration: none;
  font-size: calc(14 * 1vw / 19.2);
}

.beiain_text a {
  text-decoration: none;
  color: #595c65;
}

.beiain_text.countdown_modify.modify_on {
  color: #fff;
}

.beiain_text.countdown_modify.modify_on a {
  color: #fff;
}

.privacy_btn {
  cursor: pointer;
}

.privacy_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  visibility: hidden;
  opacity: 0;
  /* background-color: rgba(0, 0, 0, 0.8); */
  font-size: calc(18 * 1vw / 19.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.privacy_modal.show {
  visibility: visible;
  opacity: 1;
}
.privacy_modal .modal_body {
  width: 80%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  margin: auto;
  padding: 3%;
  position: relative;
}
.privacy_modal .modal_body .close {
  position: fixed;
  right: 7%;
  top: 2%;
  cursor: pointer;
  color: #fff;
}

.privacy_modal pre {
  white-space: pre-line;
  text-align: justify;
}

@font-face {
  font-family: "font2";
  src: url("../css/font/font2.ttf") format("truetype");
  font-size: calc(14 * 1vw / 19.2);
}

.font2 {
  font-family: "font2", "PingFangSC-Regular", "Helvetica Neue", Helvetica, Arial,
    "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei",
    sans-serif;
}

.download_modal {
  border-radius: calc(20 * 1vw / 19.2);
  background-color: rgb(255, 255, 255);
  position: absolute;
  left: calc(685 * 1vw / 19.2);
  top: calc(308 * 1vw / 19.2);
  width: calc(550 * 1vw / 19.2);
  height: calc(530 * 1vw / 19.2);
}

.download_modal .close {
  position: absolute;
  right: calc(30 * 1vw / 19.2);
  top: calc(30 * 1vw / 19.2);
  width: calc(22 * 1vw / 19.2);
  height: calc(22 * 1vw / 19.2);
  cursor: pointer;
}
.download_modal .close img {
  display: block;
}

.download_modal .btns {
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.download_modal .btn {
  border-width: 1px;
  border-color: rgb(252, 249, 249);
  border-style: solid;
  border-radius: 5px;
  background-color: rgba(1, 1, 1, 0.949);
  width: calc(232 * 1vw / 19.2);
  height: calc(70 * 1vw / 19.2);
  font-size: calc(36 * 1vw / 19.2);
  color: rgb(255, 255, 255);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: calc(14 * 1vw / 19.2) 0;
  cursor: pointer;
}
.download_modal .tip {
  font-size: calc(26 * 1vw / 19.2);
  color: rgb(87, 90, 98);
  line-height: calc(40 * 1vw / 19.2);
  text-align: center;
}

.full_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.logo_split {
  display: block;
  width: calc(320 * 1vw / 19.2);
  height: calc(141 * 1vw / 19.2);
  margin: calc(30 * 1vw / 19.2) auto;
}

.logo_split2 {
  display: block;
  width: calc(320 * 1vw / 19.2);
  height: calc(141 * 1vw / 19.2);
  margin: 0 auto;
  margin-top: 2rem;
}