#crab {
  display: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 100;
  height: 0.52rem;
  line-height: 0.52rem;
  text-align: center;
  font-size: 0.12rem;
  font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
}

#crab.white-bg {
  background: #fafafa;
}

#crab.white-bg .tip,
#crab.white-bg .watch {
  color: #000;
}

#crab.white-bg .close img.black {
  display: block;
}

#crab.white-bg .close img.white {
  display: none;
}

#crab.black-bg {
  background: #000;
}

#crab.black-bg .tip,
#crab.black-bg .watch {
  color: #fafafa;
}

#crab.black-bg .close img.white {
  display: block;
}

#crab.black-bg .close img.black {
  display: none;
}

#crab .tip {
  margin-right: 0.32rem;
}

#crab .tip .store-icon {
  width: 0.28rem;
  height: 0.28rem;
  margin-right: 0.12rem;
}

#crab .watch {
  margin-right: 0.12rem;
  padding-bottom: 0.02rem;
  border-bottom: 0.01rem solid;
}

#crab .actions {
  font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
}

#crab .close {
  right: calc((100% - 13.12rem) / 2);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: transparent;
  border: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: inline-block;
  height: 0.4rem;
  width: 0.2rem;
  padding-left: 0;
}

#crab .close:before {
  content: unset;
}

#crab .close:after {
  content: unset;
}

#crab .close img {
  width: 0.14rem;
}

@media (max-width: 767.98px) {
  #crab {
    text-align: left;
    height: auto;
    padding: 0.16rem 0.2rem;
    line-height: 0.2rem;
  }

  #crab .tip {
    font-size: 0.12rem;
    line-height: 0.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    letter-spacing: -0.0005rem;
  }

  #crab .tip .store-icon {
    margin-top: 0.03rem;
    margin-left: 0.16rem;
    width: 0.32rem;
    height: 0.32rem;
  }

  #crab .actions {
    display: inline-block;
  }

  #crab .watch {
    margin-top: 0;
    font-size: 0.12rem;
    line-height: 0.2rem;
    padding-bottom: 0;
  }

  #crab .close {
    right: 0.1rem;
  }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  #crab .close {
    right: 0.54rem;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #crab .close {
    right: 0.54rem;
  }
}

@media (min-width: 1440px) {
  #crab {
    right: unset;
    width: 100vw;
  }

  #crab .close {
    right: calc((100% - 13.12rem) / 2);
  }
}

@media (min-width: 1440px) and (min-width: 1025px) and (max-width: 1440px) {
  #crab .close {
    right: 0.7rem;
  }
}

html.hasHeader #oc-container {
  padding-top: 0.6rem;
}

.oppo-navbar #navbar ul.selector svg.arrow {
  display: none;
}

.oppo-navbar nav#navbar .container ul.selector {
  display: none;
}

.oppo-navbar nav#navbar .container .links.page {
  display: none;
}

.oppo-navbar nav#navbar {
  z-index: 998;
  opacity: 1;
  color: #000;
  background-color: #fff;
  border: 0.01rem solid rgba(0, 0, 0, 0.1);
  border-left: none;
  border-right: none;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.oppo-navbar #online-store .store-container {
  display: block;
}

.oppo-navbar #online-store.show .store-container {
  display: block;
}

.oppo-navbar .lang-ar nav#navbar {
  direction: rtl;
}

.oppo-navbar .lang-ar nav#navbar .container .products ul + ul,
.oppo-navbar .lang-ar nav#navbar .container .links ul + ul,
.oppo-navbar .lang-ar nav#navbar .container .buttons ul + ul,
.oppo-navbar .lang-ar nav#navbar .container .products ul + li,
.oppo-navbar .lang-ar nav#navbar .container .links ul + li,
.oppo-navbar .lang-ar nav#navbar .container .buttons ul + li,
.oppo-navbar .lang-ar nav#navbar .container .products li + ul,
.oppo-navbar .lang-ar nav#navbar .container .links li + ul,
.oppo-navbar .lang-ar nav#navbar .container .buttons li + ul,
.oppo-navbar .lang-ar nav#navbar .container .products li + li,
.oppo-navbar .lang-ar nav#navbar .container .links li + li,
.oppo-navbar .lang-ar nav#navbar .container .buttons li + li {
  margin-right: 0.18rem;
  margin-left: 0;
}

.oppo-navbar nav#navbar li a,
.oppo-navbar nav#navbar li span {
  opacity: 0.69;
  color: inherit;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.oppo-navbar #navbar > div > ul.products > li > a {
  opacity: 0.7;
}

.oppo-navbar nav#navbar li a:hover,
.oppo-navbar nav#navbar li span:hover {
  opacity: 1;
}

.oppo-navbar nav#navbar .container .mask {
  background-color: rgba(253, 253, 253, 0.9);
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.oppo-navbar nav#navbar .container .indicator .arrow {
  fill: #000;
  -webkit-transition: fill 0.3s ease;
  transition: fill 0.3s ease;
}

.oppo-navbar nav#navbar[data-theme='dark'] {
  color: #fff;
  background-color: #000;
  border-color: rgba(255, 255, 255, 0.1);
}

.oppo-navbar nav#navbar[data-theme='dark'] .container .mask {
  background-color: rgba(21, 21, 21, 0.9);
}

.oppo-navbar nav#navbar[data-theme='dark'] .container .indicator .arrow {
  fill: #fff;
}

.oppo-navbar nav#navbar.light[data-theme='dark'] {
  color: #000;
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.1);
}

.oppo-navbar nav#navbar.light[data-theme='dark'] .container .indicator .arrow {
  fill: #000;
}

.oppo-navbar nav#navbar {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.58rem;
}

.oppo-navbar nav#navbar.scrolled {
  position: fixed;
}

.oppo-navbar nav#navbar li {
  color: inherit;
}

.oppo-navbar nav#navbar li,
.oppo-navbar nav#navbar li a {
  font-family: OPPOSans-Medium;
  font-size: 0.14rem;
  line-height: 0.24rem;
  letter-spacing: -0.0006rem;
}

.oppo-navbar nav#navbar li a,
.oppo-navbar nav#navbar li span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: default;
}

.oppo-navbar nav#navbar li a {
  cursor: pointer;
  white-space: nowrap;
}

.oppo-navbar nav#navbar .container {
  position: relative;
  height: 100%;
  width: auto;
  margin: 0 auto;
  padding: 0 0.64rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.oppo-navbar nav#navbar .container ul,
.oppo-navbar nav#navbar .container li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.oppo-navbar nav#navbar .container .products,
.oppo-navbar nav#navbar .container .links,
.oppo-navbar nav#navbar .container .buttons {
  min-width: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.oppo-navbar nav#navbar .container .products ul + ul,
.oppo-navbar nav#navbar .container .links ul + ul,
.oppo-navbar nav#navbar .container .buttons ul + ul,
.oppo-navbar nav#navbar .container .products ul + li,
.oppo-navbar nav#navbar .container .links ul + li,
.oppo-navbar nav#navbar .container .buttons ul + li,
.oppo-navbar nav#navbar .container .products li + ul,
.oppo-navbar nav#navbar .container .links li + ul,
.oppo-navbar nav#navbar .container .buttons li + ul,
.oppo-navbar nav#navbar .container .products li + li,
.oppo-navbar nav#navbar .container .links li + li,
.oppo-navbar nav#navbar .container .buttons li + li {
  margin-left: 0.18rem;
}

.oppo-navbar nav#navbar .container .products {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.oppo-navbar nav#navbar .container .products .active {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .products .divider a {
  cursor: default;
}

.oppo-navbar nav#navbar .container .links {
  -webkit-box-flex: 3;
  -ms-flex: 3 3 0%;
  flex: 3 3 0%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 1rem;
}

.oppo-navbar nav#navbar .container .links .anchors {
  margin-left: 0;
}

.oppo-navbar nav#navbar .container .links .anchors > :first-child {
  margin-left: 0.18rem;
}

.oppo-navbar nav#navbar .container .buttons {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.oppo-navbar nav#navbar .container .buttons .button {
  position: relative;
  overflow: hidden;
}

.oppo-navbar nav#navbar .container .buttons .button a {
  font-family: 'OPPOSans-Bold';
  font-size: 0.12rem;
  letter-spacing: -0.0005rem;
  opacity: 1;
  line-height: 0.24rem;
  height: 0.32rem;
  padding: 0.04rem 0.12rem;
  border-radius: 0.02rem;
  min-width: 0.64rem;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.oppo-navbar nav#navbar .container .buttons[data-theme='green'] .button a {
  background-color: #2dc84d;
  color: #fff;
}

.oppo-navbar nav#navbar .container .buttons[data-theme='light'] .button a {
  background: #fff;
  color: #000;
}

.oppo-navbar nav#navbar .container .buttons[data-theme='dark'] .button a {
  background: #000;
  color: #fff;
}

.oppo-navbar nav#navbar .container .links[data-active=''] .default,
.oppo-navbar nav#navbar .container .links:not([data-active]) .default {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='1'] > li:nth-child(1) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='2'] > li:nth-child(2) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='3'] > li:nth-child(3) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='4'] > li:nth-child(4) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='5'] > li:nth-child(5) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='6'] > li:nth-child(6) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='7'] > li:nth-child(7) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='8'] > li:nth-child(8) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar nav#navbar .container .links[data-active='9'] > li:nth-child(9) a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar
  nav#navbar
  .container
  .links[data-active='10']
  > li:nth-child(10)
  a {
  opacity: 1;
  pointer-events: none;
}

.oppo-navbar #online-store {
  position: fixed;
  visibility: hidden;
  z-index: 999;
  top: -999vh;
  top: calc(var(--vh, 1vh) * -999);
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.oppo-navbar #online-store .mask {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(0.05rem);
  backdrop-filter: blur(0.05rem);
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.oppo-navbar #online-store .store-container {
  position: relative;
  z-index: 2;
  background-color: #fff;
  width: 13.12rem;
  height: 7.2rem;
  opacity: 0;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.5s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.5s ease;
  transition: transform 0.5s ease, opacity 0.3s ease;
  transition: transform 0.5s ease, opacity 0.3s ease,
    -webkit-transform 0.5s ease;
}

.oppo-navbar #online-store .store-container .store-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
}

.oppo-navbar #online-store .store-container .store-page::-webkit-scrollbar {
  width: 0.04rem;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page::-webkit-scrollbar-thumb {
  background-color: #2dc84d;
}

.oppo-navbar #online-store .store-container .store-page .close-button {
  position: absolute;
  z-index: 3;
  top: 0.32rem;
  right: 0.32rem;
  width: 0.14rem;
  height: 0.14rem;
  cursor: pointer;
}

.oppo-navbar #online-store .store-container .store-page .title-area {
  position: static;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(100% - 0.04rem);
  background-color: #fff;
  text-align: center;
  padding-top: 0.7rem;
}

.oppo-navbar #online-store .store-container .store-page .title-area a {
  font-size: 0.28rem;
  line-height: 0.44rem;
  letter-spacing: -0.1;
  font-family: 'OPPOSans-Bold';
  pointer-events: none;
  display: inline-block;
  max-width: 10.88rem;
}

.oppo-navbar #online-store .store-container .store-page .store-content {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 0.32rem;
  margin-bottom: 0.28rem;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list {
  width: 10.88rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-line-pack: baseline;
  align-content: baseline;
  min-height: 3.95rem;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store-title {
  -webkit-box-flex: 100%;
  -ms-flex: 100%;
  flex: 100%;
  text-align: center;
  margin-bottom: 0.2rem;
  font-family: 'OPPOSans-Bold';
  font-size: 0.2rem;
  line-height: 0.32rem;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store {
  width: 1.92rem;
  height: 1.44rem;
  background-color: rgba(0, 0, 0, 0.04);
  margin-bottom: 0.32rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store
  img {
  width: 1.18rem;
  height: 0.8rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store:hover,
.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store
  :active {
  background-color: rgba(0, 0, 0, 0.01);
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store:hover
  img,
.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list
  .store
  :active
  img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

.oppo-navbar
  #online-store
  .store-container
  .store-page
  .store-content
  .store-list:not(:first-child) {
  margin-top: 0.06rem;
}

.oppo-navbar #online-store.show {
  top: 0;
  visibility: visible;
}

.oppo-navbar #online-store.show .mask {
  opacity: 1;
}

.oppo-navbar #online-store.show .store-container {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.oppo-navbar #online-store.show .remarks {
  position: relative;
  padding-top: 0.01rem;
  padding-bottom: 0.28rem;
}

.oppo-navbar #online-store.show .remarks ul li {
  margin: auto;
  width: 10.88rem;
  font-size: 0.12rem;
  font-family: 'OPPOSans-S-R', 'OPPOSans-S';
  font-weight: normal;
  color: #000;
  line-height: 0.24rem;
}

.oppo-navbar .mb-tab {
  display: none;
}

.oppo-navbar #navbar .container ul li.post.hightlight a,
.oppo-navbar #navbar .container ul li.pc.hightlight a {
  opacity: 1;
  pointer-events: none;
}

@media (min-width: 1440px) and (max-width: 1919px) {
  .oppo-navbar nav#navbar .container .products ul + ul,
  .oppo-navbar nav#navbar .container .links ul + ul,
  .oppo-navbar nav#navbar .container .buttons ul + ul,
  .oppo-navbar nav#navbar .container .products ul + li,
  .oppo-navbar nav#navbar .container .links ul + li,
  .oppo-navbar nav#navbar .container .buttons ul + li,
  .oppo-navbar nav#navbar .container .products li + ul,
  .oppo-navbar nav#navbar .container .links li + ul,
  .oppo-navbar nav#navbar .container .buttons li + ul,
  .oppo-navbar nav#navbar .container .products li + li,
  .oppo-navbar nav#navbar .container .links li + li,
  .oppo-navbar nav#navbar .container .buttons li + li {
    margin-left: 0.14rem;
  }

  .oppo-navbar nav#navbar .container .links .anchors > :first-child {
    margin-left: 0.14rem;
  }
}

@media (min-width: 1440px) and (max-width: 1600px) {
  .oppo-navbar #online-store .store-container {
    width: 13.12rem;
    height: 6.25rem;
  }
}

@media (min-width: 1440px) {
  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list {
    width: auto;
    margin: auto;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store {
    margin: 0.16rem;
  }
}

@media (min-width: 1920px) {
  .oppo-navbar nav#navbar .container {
    padding: 0 3.04rem;
  }

  .oppo-navbar nav#navbar .container .buttons .button a {
    font-size: 0.14rem;
    height: 0.2rem;
    line-height: 0.2rem;
    padding: 0.1rem 0.24rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list {
    min-height: 4.9rem;
  }
}

@media (min-width: 1024px) {
  .oppo-navbar nav#navbar.scrolled {
    top: 0 !important;
  }
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  html.hasHeader #oc-container {
    padding-top: 0.64rem;
  }

  .oppo-navbar nav#navbar .container {
    padding: 0 0.64rem;
  }

  .oppo-navbar nav#navbar li,
  .oppo-navbar nav#navbar li a {
    font-size: 0.12rem;
    line-height: 0.24rem;
    letter-spacing: -0.0005rem;
  }

  .oppo-navbar #navbar > div > ul.links.module > li {
    line-height: 0.2rem;
  }

  .oppo-navbar nav#navbar .container .buttons .button a {
    line-height: 0.16rem;
  }

  .oppo-navbar nav#navbar .container .products ul + ul,
  .oppo-navbar nav#navbar .container .links ul + ul,
  .oppo-navbar nav#navbar .container .buttons ul + ul,
  .oppo-navbar nav#navbar .container .products ul + li,
  .oppo-navbar nav#navbar .container .links ul + li,
  .oppo-navbar nav#navbar .container .buttons ul + li,
  .oppo-navbar nav#navbar .container .products li + ul,
  .oppo-navbar nav#navbar .container .links li + ul,
  .oppo-navbar nav#navbar .container .buttons li + ul,
  .oppo-navbar nav#navbar .container .products li + li,
  .oppo-navbar nav#navbar .container .links li + li,
  .oppo-navbar nav#navbar .container .buttons li + li {
    margin-left: 0.1rem;
  }

  .oppo-navbar nav#navbar .container .links .anchors > :first-child {
    margin-left: 0.1rem;
  }

  .oppo-navbar #online-store .store-container {
    width: 8.96rem;
    height: 5.8rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list {
    width: 6.64rem;
    min-height: 3.25rem;
    -ms-flex-line-pack: baseline;
    align-content: baseline;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store {
    width: 2rem;
    height: 1.5rem;
    margin: 0.1rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store:not(:nth-of-type(3n + 1)) {
    margin-left: 0.32rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store
    img {
    width: 1.22rem;
    height: 0.82rem;
  }

  .oppo-navbar #online-store .store-container .store-page .title-area a {
    max-width: 6.64rem;
  }

  .oppo-navbar #online-store.show .remarks ul li {
    width: 6.64rem;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  html.hasHeader #oc-container {
    padding-top: unset;
  }

  .oppo-navbar nav#navbar {
    z-index: 998;
    height: 0.52rem;
  }

  .oppo-navbar nav#navbar .container {
    padding: 0 0.64rem;
    position: relative;
  }

  .oppo-navbar #navbar ul.selector svg.arrow {
    display: block;
  }

  .oppo-navbar nav#navbar .container ul.selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .oppo-navbar nav#navbar .products li,
  .oppo-navbar nav#navbar .links li {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar .products li a,
  .oppo-navbar nav#navbar .links li a {
    border-bottom: 0.01rem solid #e5e5e5;
  }

  .oppo-navbar nav#navbar .products > :last-child > :last-child,
  .oppo-navbar nav#navbar .links > :last-child > :last-child,
  .oppo-navbar nav#navbar .products > :last-child > :last-child > :last-child,
  .oppo-navbar nav#navbar .links > :last-child > :last-child > :last-child {
    border-bottom-color: transparent;
  }

  .oppo-navbar nav#navbar.sticked {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .products li,
  .oppo-navbar nav#navbar[data-theme='dark'] .links li {
    background-color: #000;
  }

  .oppo-navbar nav#navbar[data-theme='dark'].sticked {
    background-color: #000;
  }

  .oppo-navbar nav#navbar.light[data-theme='dark'] .products li,
  .oppo-navbar nav#navbar.light[data-theme='dark'] .links li {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar.light[data-theme='dark'].sticked {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar li,
  .oppo-navbar nav#navbar li a {
    font-size: 0.14rem;
    line-height: 0.2rem;
    letter-spacing: -0.0005rem;
  }

  .oppo-navbar nav#navbar .container .products ul + ul,
  .oppo-navbar nav#navbar .container .links ul + ul,
  .oppo-navbar nav#navbar .container .buttons ul + ul,
  .oppo-navbar nav#navbar .container .products ul + li,
  .oppo-navbar nav#navbar .container .links ul + li,
  .oppo-navbar nav#navbar .container .buttons ul + li,
  .oppo-navbar nav#navbar .container .products li + ul,
  .oppo-navbar nav#navbar .container .links li + ul,
  .oppo-navbar nav#navbar .container .buttons li + ul,
  .oppo-navbar nav#navbar .container .products li + li,
  .oppo-navbar nav#navbar .container .links li + li,
  .oppo-navbar nav#navbar .container .buttons li + li {
    margin-left: 0;
  }

  .oppo-navbar nav#navbar .container .products,
  .oppo-navbar nav#navbar .container .links.page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .container .links.module {
    background-color: black;
  }

  .oppo-navbar nav#navbar[data-theme='light'] .container .links.module,
  .oppo-navbar nav#navbar.light[data-theme='dark'] .container .links.module {
    background-color: white;
  }

  .oppo-navbar nav#navbar .container .links.module {
    visibility: hidden;
    overflow: auto;
    position: absolute;
    left: 0;
    top: 100%;
    height: 0.4rem;
    width: 100%;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.01rem solid rgba(0, 0, 0, 0.1);
    scrollbar-width: none;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .oppo-navbar nav#navbar .container .links.module::-webkit-scrollbar {
    display: none;
  }

  .oppo-navbar nav#navbar .container .products li,
  .oppo-navbar nav#navbar .container .links li {
    position: relative;
    padding: 0 0.1rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%);
  }

  .oppo-navbar nav#navbar .container .products li a,
  .oppo-navbar nav#navbar .container .links li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 0.15rem 0;
  }

  .oppo-navbar nav#navbar .container .links li.post a {
    border-bottom: unset;
  }

  .oppo-navbar nav#navbar .container .products {
    z-index: 3;
  }

  .oppo-navbar nav#navbar .container .products .divider {
    display: none;
  }

  .oppo-navbar nav#navbar .container .links {
    margin-left: 0;
    -webkit-box-pack: unset;
    -ms-flex-pack: unset;
    justify-content: unset;
  }

  .oppo-navbar nav#navbar .container .links {
    z-index: 4;
  }

  .oppo-navbar nav#navbar .container .links > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .oppo-navbar nav#navbar .container .links .anchors > :first-child {
    margin-left: 0;
  }

  .oppo-navbar nav#navbar .container .buttons .button a {
    height: 0.32rem;
    padding: 0 0.1rem;
    line-height: 0.2rem;
    background: #046a38;
  }

  .oppo-navbar nav#navbar .container .mask {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 100%;
    width: 100%;
    height: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.56);
  }

  .oppo-navbar nav#navbar .container .indicator {
    height: 0.24rem;
    margin-left: 0.05rem;
  }

  .oppo-navbar nav#navbar .container .indicator .arrow {
    margin-top: 0.05rem;
    width: 0.14rem;
    height: 0.14rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .oppo-navbar nav#navbar .container .selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .oppo-navbar nav#navbar .container .selector li * {
    opacity: 1;
    font-family: OPPOSans-Bold;
  }

  .oppo-navbar nav#navbar .container[data-active-selector] .mask {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    opacity: 1;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .product-selector
    .indicator
    .arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .oppo-navbar nav#navbar .container[data-active-selector='product'] .products {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .link-selector
    .indicator
    .arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .oppo-navbar nav#navbar .container[data-active-selector='link'] .links.page {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .oppo-navbar nav#navbar .container[data-active-selector='product'] ul.module {
    visibility: hidden;
    z-index: 0;
  }

  .oppo-navbar nav#navbar .container[data-active-selector='link'] ul.module {
    visibility: hidden;
    z-index: 0;
  }

  .oppo-navbar nav#navbar .container .links .post {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .oppo-navbar nav#navbar .container .links > li.post {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .oppo-navbar nav#navbar .container .product-selector,
  .oppo-navbar nav#navbar .container .buttons {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1.07rem;
    flex: 0 0 1.07rem;
  }

  .oppo-navbar nav#navbar .container .link-selector {
    margin: 0 0.05rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .oppo-navbar nav#navbar .links li.pc {
    display: none;
  }

  .oppo-navbar #online-store .store-container {
    width: 7.2rem;
    height: 8.5rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list {
    width: 5.32rem;
    min-height: 5.95rem;
    -ms-flex-line-pack: baseline;
    align-content: baseline;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store {
    width: 1.55rem;
    height: 1.16rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store:not(:nth-of-type(3n + 1)) {
    margin-left: 0.32rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store
    img {
    width: 0.95rem;
    height: 0.64rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 1.55rem;
    height: 1.16rem;
    margin: 0 0.11rem 0.16rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store-title {
    margin-bottom: 0.4rem;
  }

  .oppo-navbar #online-store .store-container .store-page .title-area a {
    max-width: 5.29rem;
  }

  .oppo-navbar nav#navbar .container .links[data-active=''] .default,
  .oppo-navbar nav#navbar .container .links:not([data-active]) .default {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='1']
    > li:nth-child(1)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='2']
    > li:nth-child(2)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='3']
    > li:nth-child(3)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='4']
    > li:nth-child(4)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='5']
    > li:nth-child(5)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='6']
    > li:nth-child(6)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='7']
    > li:nth-child(7)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='8']
    > li:nth-child(8)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='9']
    > li:nth-child(9)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='10']
    > li:nth-child(10)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar #online-store.show .remarks ul li {
    width: 5.29rem;
  }
}

@media (max-width: 767.98px) {
  html.hasHeader #oc-container {
    padding-top: unset;
  }

  .oppo-navbar .store-title,
  .oppo-navbar .title-area {
    display: none;
  }

  .oppo-navbar .mb-tab {
    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    padding-left: 0.1rem;
    padding-top: 0.33rem;
    height: 0.32rem;
    font-size: 0.16rem;
    font-weight: normal;
    color: #000;
    line-height: 0.32rem;
    overflow: auto;
    z-index: 100;
    background-color: white;
    width: 95vw;
    padding-bottom: 0.19rem;
    scrollbar-width: none;
  }

  .oppo-navbar .mb-tab::-webkit-scrollbar {
    display: none;
  }

  .oppo-navbar .mb-tab a {
    padding: 0 0.1rem;
    opacity: 0.78;
    font-family: 'OPPOSans-Regular';
  }

  .oppo-navbar .mb-tab a.active {
    opacity: 1;
    font-family: 'OPPOSans-Bold';
  }

  .oppo-navbar nav#navbar {
    z-index: 998;
    height: 0.51rem;
  }

  .oppo-navbar #navbar ul.selector svg.arrow {
    display: block;
  }

  .oppo-navbar nav#navbar .container ul.selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .oppo-navbar #online-store .store-container {
    position: fixed;
    width: 100vw;
    max-height: 4.1rem;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    bottom: 0;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list {
    width: 3.2rem;
    -webkit-box-pack: left;
    -ms-flex-pack: left;
    justify-content: left;
    min-height: 1.85rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 1.5rem;
    height: 0.96rem;
    margin: 0 0.04rem 0.2rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap
    .store {
    width: 1.3rem;
    height: 0.8rem;
    border-radius: 0.2rem;
    border: 0.01rem solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.04);
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap
    .store {
    width: 1.5rem;
    height: 0.96rem;
    border-radius: 0.04rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page
    .store-content
    .store-list
    .store
    img {
    width: 0.98rem;
    height: 0.66rem;
  }

  .oppo-navbar nav#navbar .container {
    padding: 0 0.2rem;
    position: relative;
  }

  .oppo-navbar nav#navbar .products li,
  .oppo-navbar nav#navbar .links li {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar .products li a,
  .oppo-navbar nav#navbar .links li a {
    border-bottom: 0 solid #e5e5e5;
  }

  .oppo-navbar nav#navbar .products > :last-child > :last-child,
  .oppo-navbar nav#navbar .links > :last-child > :last-child,
  .oppo-navbar nav#navbar .products > :last-child > :last-child > :last-child,
  .oppo-navbar nav#navbar .links > :last-child > :last-child > :last-child {
    border-bottom-color: transparent;
  }

  .oppo-navbar nav#navbar.sticked {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .products li,
  .oppo-navbar nav#navbar[data-theme='dark'] .links li {
    background-color: #000;
  }

  .oppo-navbar nav#navbar[data-theme='dark'].sticked {
    background-color: #000;
  }

  .oppo-navbar nav#navbar.light[data-theme='dark'] .products li,
  .oppo-navbar nav#navbar.light[data-theme='dark'] .links li {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar.light[data-theme='dark'].sticked {
    background-color: #fff;
  }

  .oppo-navbar nav#navbar li,
  .oppo-navbar nav#navbar li a {
    font-size: 0.14rem;
    line-height: 0.2rem;
    letter-spacing: -0.0005rem;
  }

  .oppo-navbar nav#navbar .container .products ul + ul,
  .oppo-navbar nav#navbar .container .links ul + ul,
  .oppo-navbar nav#navbar .container .buttons ul + ul,
  .oppo-navbar nav#navbar .container .products ul + li,
  .oppo-navbar nav#navbar .container .links ul + li,
  .oppo-navbar nav#navbar .container .buttons ul + li,
  .oppo-navbar nav#navbar .container .products li + ul,
  .oppo-navbar nav#navbar .container .links li + ul,
  .oppo-navbar nav#navbar .container .buttons li + ul,
  .oppo-navbar nav#navbar .container .products li + li,
  .oppo-navbar nav#navbar .container .links li + li,
  .oppo-navbar nav#navbar .container .buttons li + li {
    margin-left: 0;
  }

  .oppo-navbar nav#navbar .container .products,
  .oppo-navbar nav#navbar .container .links.page {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background-color: white;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
  }

  .oppo-navbar nav#navbar .container .products a,
  .oppo-navbar nav#navbar .container .links.page a {
    line-height: 0.24rem;
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .container .links.module {
    background-color: black;
  }

  .oppo-navbar nav#navbar.light[data-theme='dark'] .container .links.module {
    background-color: white;
  }

  .oppo-navbar nav#navbar[data-theme='light'] .container .links.module {
    background-color: white;
  }

  .oppo-navbar nav#navbar .container .links.module {
    visibility: hidden;
    overflow: auto;
    position: absolute;
    left: 0;
    top: 100%;
    height: 0.4rem;
    width: 100%;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.01rem solid rgba(0, 0, 0, 0.1);
    text-align: center;
    scrollbar-width: none;
  }

  .oppo-navbar nav#navbar .container .links.module::-webkit-scrollbar {
    display: none;
  }

  .oppo-navbar nav#navbar .container .links.module li {
    font-size: 0.12rem;
  }

  .oppo-navbar nav#navbar .container .products li,
  .oppo-navbar nav#navbar .container .links li {
    position: relative;
    padding: 0 0.1rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%);
  }

  .oppo-navbar nav#navbar .container .products li a,
  .oppo-navbar nav#navbar .container .links li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding: 0.12rem 0;
  }

  .oppo-navbar nav#navbar .container .links {
    z-index: 4;
    margin-left: 0;
    -webkit-box-pack: unset;
    -ms-flex-pack: unset;
    justify-content: unset;
  }

  .oppo-navbar nav#navbar .container .products {
    z-index: 3;
  }

  .oppo-navbar nav#navbar .container .products .divider {
    display: none;
  }

  .oppo-navbar nav#navbar .container .links > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .oppo-navbar nav#navbar .container .links .anchors > :first-child {
    margin-left: 0;
  }

  .oppo-navbar nav#navbar .container .buttons .button a {
    height: 0.24rem;
    padding: 0.04rem 0.12rem;
  }

  .oppo-navbar nav#navbar .container.fakeshow.nobefore::before {
    content: unset;
  }

  .oppo-navbar nav#navbar .container.fakeshow.noafter::after {
    content: unset;
  }

  .oppo-navbar nav#navbar .container.fakeshow::after {
    content: '';
    position: absolute;
    right: 0;
    z-index: 9;
    top: 0.51rem;
    width: 0.33rem;
    height: 0.4rem;
  }

  .oppo-navbar nav#navbar .container.fakeshow::before {
    content: '';
    position: absolute;
    left: 0;
    z-index: 9;
    top: 0.51rem;
    width: 0.33rem;
    height: 0.4rem;
  }

  .oppo-navbar nav#navbar[data-theme='light'] .container.fakeshow::after,
  .oppo-navbar nav#navbar.light[data-theme='dark'] .container.fakeshow::after {
    background: -webkit-linear-gradient(
      right,
      white 0%,
      white 40%,
      rgba(255, 255, 255, 0.28) 100%
    );
    background: linear-gradient(
      270deg,
      white 0%,
      white 40%,
      rgba(255, 255, 255, 0.28) 100%
    );
  }

  .oppo-navbar nav#navbar[data-theme='light'] .container.fakeshow::before,
  .oppo-navbar nav#navbar.light[data-theme='dark'] .container.fakeshow::before {
    background: -webkit-linear-gradient(
      left,
      white 0%,
      white 40%,
      rgba(255, 255, 255, 0.28) 100%
    );
    background: linear-gradient(
      -270deg,
      white 0%,
      white 40%,
      rgba(255, 255, 255, 0.28) 100%
    );
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .container.fakeshow::after {
    background: -webkit-linear-gradient(
      right,
      black 0%,
      black 40%,
      rgba(0, 0, 0, 0.28) 100%
    );
    background: linear-gradient(
      270deg,
      black 0%,
      black 40%,
      rgba(0, 0, 0, 0.28) 100%
    );
  }

  .oppo-navbar nav#navbar[data-theme='dark'] .container.fakeshow::before {
    background: -webkit-linear-gradient(
      left,
      black 0%,
      black 40%,
      rgba(0, 0, 0, 0.28) 100%
    );
    background: linear-gradient(
      -270deg,
      black 0%,
      black 40%,
      rgba(0, 0, 0, 0.28) 100%
    );
  }

  .oppo-navbar nav#navbar .container .mask {
    position: absolute;
    z-index: 0;
    left: 0;
    top: 100%;
    width: 100%;
    height: 0;
    opacity: 0;
    background: rgba(0, 0, 0, 0.56);
  }

  .oppo-navbar nav#navbar .container .indicator {
    height: 0.24rem;
    margin-left: 0.05rem;
  }

  .oppo-navbar nav#navbar .container .indicator .arrow {
    margin-top: 0.05rem;
    width: 0.14rem;
    height: 0.14rem;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .oppo-navbar nav#navbar .container .selector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .oppo-navbar nav#navbar .container .selector li * {
    opacity: 1;
    font-family: OPPOSans-Bold;
  }

  .oppo-navbar nav#navbar .container[data-active-selector] .mask {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    opacity: 1;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .product-selector
    .indicator
    .arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .oppo-navbar nav#navbar .container[data-active-selector='product'] .products {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    background-color: white;
    opacity: 1;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(0) {
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(1) {
    -webkit-transition: opacity 0.2s ease 0.025s;
    transition: opacity 0.2s ease 0.025s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(2) {
    -webkit-transition: opacity 0.2s ease 0.05s;
    transition: opacity 0.2s ease 0.05s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(3) {
    -webkit-transition: opacity 0.2s ease 0.075s;
    transition: opacity 0.2s ease 0.075s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(4) {
    -webkit-transition: opacity 0.2s ease 0.1s;
    transition: opacity 0.2s ease 0.1s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(5) {
    -webkit-transition: opacity 0.2s ease 0.125s;
    transition: opacity 0.2s ease 0.125s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(6) {
    -webkit-transition: opacity 0.2s ease 0.15s;
    transition: opacity 0.2s ease 0.15s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(7) {
    -webkit-transition: opacity 0.2s ease 0.175s;
    transition: opacity 0.2s ease 0.175s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(8) {
    -webkit-transition: opacity 0.2s ease 0.2s;
    transition: opacity 0.2s ease 0.2s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(9) {
    -webkit-transition: opacity 0.2s ease 0.225s;
    transition: opacity 0.2s ease 0.225s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:nth-child(10) {
    -webkit-transition: opacity 0.2s ease 0.25s;
    transition: opacity 0.2s ease 0.25s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:first-child {
    padding-top: 0.18rem;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='product']
    .products
    > li:last-child {
    padding-bottom: 0.34rem;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .link-selector
    .indicator
    .arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  .oppo-navbar nav#navbar .container[data-active-selector='link'] .links.page {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }

  .oppo-navbar nav#navbar .container .links.page > li {
    opacity: 0;
  }

  .oppo-navbar nav#navbar .container .products > li {
    opacity: 0;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(0) {
    -webkit-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(1) {
    -webkit-transition: opacity 0.2s ease 0.025s;
    transition: opacity 0.2s ease 0.025s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(2) {
    -webkit-transition: opacity 0.2s ease 0.05s;
    transition: opacity 0.2s ease 0.05s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(3) {
    -webkit-transition: opacity 0.2s ease 0.075s;
    transition: opacity 0.2s ease 0.075s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(4) {
    -webkit-transition: opacity 0.2s ease 0.1s;
    transition: opacity 0.2s ease 0.1s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(5) {
    -webkit-transition: opacity 0.2s ease 0.125s;
    transition: opacity 0.2s ease 0.125s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(6) {
    -webkit-transition: opacity 0.2s ease 0.15s;
    transition: opacity 0.2s ease 0.15s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(7) {
    -webkit-transition: opacity 0.2s ease 0.175s;
    transition: opacity 0.2s ease 0.175s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(8) {
    -webkit-transition: opacity 0.2s ease 0.2s;
    transition: opacity 0.2s ease 0.2s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(9) {
    -webkit-transition: opacity 0.2s ease 0.225s;
    transition: opacity 0.2s ease 0.225s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:nth-child(10) {
    -webkit-transition: opacity 0.2s ease 0.25s;
    transition: opacity 0.2s ease 0.25s;
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:first-child {
    padding-top: 0.18rem;
    border-top: 0.01rem solid rgba(0, 0, 0, 0.1);
  }

  .oppo-navbar
    nav#navbar
    .container[data-active-selector='link']
    .links.page
    > li:last-child {
    padding-bottom: 0.34rem;
  }

  .oppo-navbar nav#navbar .container[data-active-selector='product'] ul.module {
    visibility: hidden;
    z-index: 0;
  }

  .oppo-navbar nav#navbar .container[data-active-selector='link'] ul.module {
    visibility: hidden;
    z-index: 0;
  }

  .oppo-navbar nav#navbar .container .links .post {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .oppo-navbar nav#navbar .container .links > li.post {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .oppo-navbar nav#navbar .container .product-selector,
  .oppo-navbar nav#navbar .container .buttons {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 1.07rem;
    flex: 0 0 1.07rem;
  }

  .oppo-navbar nav#navbar .container .link-selector {
    margin: 0 0.05rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .oppo-navbar nav#navbar .links li.pc {
    display: none;
  }

  .oppo-navbar nav#navbar .container .links[data-active=''] .default,
  .oppo-navbar nav#navbar .container .links:not([data-active]) .default {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='1']
    > li:nth-child(1)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='2']
    > li:nth-child(2)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='3']
    > li:nth-child(3)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='4']
    > li:nth-child(4)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='5']
    > li:nth-child(5)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='6']
    > li:nth-child(6)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='7']
    > li:nth-child(7)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='8']
    > li:nth-child(8)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='9']
    > li:nth-child(9)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar
    nav#navbar
    .container
    .links[data-active='10']
    > li:nth-child(10)
    a {
    opacity: 1;
    pointer-events: none;
  }

  .oppo-navbar #online-store .store-container .store-page .title-area a {
    max-width: 3.2rem;
  }

  .oppo-navbar #online-store.show .remarks ul li {
    width: 3.2rem;
  }

  .oppo-navbar #online-store.show .store-container .store-page .close-button {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(0)
    .store {
    -webkit-transition: border-radius 0.2s ease 0s, width 0.2s ease 0s,
      height 0.2s ease 0s;
    transition: border-radius 0.2s ease 0s, width 0.2s ease 0s,
      height 0.2s ease 0s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(1)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.025s, width 0.2s ease 0.025s,
      height 0.2s ease 0.025s;
    transition: border-radius 0.2s ease 0.025s, width 0.2s ease 0.025s,
      height 0.2s ease 0.025s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(2)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.05s, width 0.2s ease 0.05s,
      height 0.2s ease 0.05s;
    transition: border-radius 0.2s ease 0.05s, width 0.2s ease 0.05s,
      height 0.2s ease 0.05s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(3)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.075s, width 0.2s ease 0.075s,
      height 0.2s ease 0.075s;
    transition: border-radius 0.2s ease 0.075s, width 0.2s ease 0.075s,
      height 0.2s ease 0.075s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(4)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.1s, width 0.2s ease 0.1s,
      height 0.2s ease 0.1s;
    transition: border-radius 0.2s ease 0.1s, width 0.2s ease 0.1s,
      height 0.2s ease 0.1s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(5)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.125s, width 0.2s ease 0.125s,
      height 0.2s ease 0.125s;
    transition: border-radius 0.2s ease 0.125s, width 0.2s ease 0.125s,
      height 0.2s ease 0.125s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(6)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.15s, width 0.2s ease 0.15s,
      height 0.2s ease 0.15s;
    transition: border-radius 0.2s ease 0.15s, width 0.2s ease 0.15s,
      height 0.2s ease 0.15s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(7)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.175s, width 0.2s ease 0.175s,
      height 0.2s ease 0.175s;
    transition: border-radius 0.2s ease 0.175s, width 0.2s ease 0.175s,
      height 0.2s ease 0.175s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(8)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.2s, width 0.2s ease 0.2s,
      height 0.2s ease 0.2s;
    transition: border-radius 0.2s ease 0.2s, width 0.2s ease 0.2s,
      height 0.2s ease 0.2s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(9)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.225s, width 0.2s ease 0.225s,
      height 0.2s ease 0.225s;
    transition: border-radius 0.2s ease 0.225s, width 0.2s ease 0.225s,
      height 0.2s ease 0.225s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(10)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.25s, width 0.2s ease 0.25s,
      height 0.2s ease 0.25s;
    transition: border-radius 0.2s ease 0.25s, width 0.2s ease 0.25s,
      height 0.2s ease 0.25s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(11)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.275s, width 0.2s ease 0.275s,
      height 0.2s ease 0.275s;
    transition: border-radius 0.2s ease 0.275s, width 0.2s ease 0.275s,
      height 0.2s ease 0.275s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(12)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.3s, width 0.2s ease 0.3s,
      height 0.2s ease 0.3s;
    transition: border-radius 0.2s ease 0.3s, width 0.2s ease 0.3s,
      height 0.2s ease 0.3s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(13)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.325s, width 0.2s ease 0.325s,
      height 0.2s ease 0.325s;
    transition: border-radius 0.2s ease 0.325s, width 0.2s ease 0.325s,
      height 0.2s ease 0.325s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(14)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.35s, width 0.2s ease 0.35s,
      height 0.2s ease 0.35s;
    transition: border-radius 0.2s ease 0.35s, width 0.2s ease 0.35s,
      height 0.2s ease 0.35s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(15)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.375s, width 0.2s ease 0.375s,
      height 0.2s ease 0.375s;
    transition: border-radius 0.2s ease 0.375s, width 0.2s ease 0.375s,
      height 0.2s ease 0.375s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(16)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.4s, width 0.2s ease 0.4s,
      height 0.2s ease 0.4s;
    transition: border-radius 0.2s ease 0.4s, width 0.2s ease 0.4s,
      height 0.2s ease 0.4s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(17)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.425s, width 0.2s ease 0.425s,
      height 0.2s ease 0.425s;
    transition: border-radius 0.2s ease 0.425s, width 0.2s ease 0.425s,
      height 0.2s ease 0.425s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(18)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.45s, width 0.2s ease 0.45s,
      height 0.2s ease 0.45s;
    transition: border-radius 0.2s ease 0.45s, width 0.2s ease 0.45s,
      height 0.2s ease 0.45s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(19)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.475s, width 0.2s ease 0.475s,
      height 0.2s ease 0.475s;
    transition: border-radius 0.2s ease 0.475s, width 0.2s ease 0.475s,
      height 0.2s ease 0.475s;
  }

  .oppo-navbar
    #online-store.show
    .store-container
    .store-page
    .store-content
    .store-list
    .store-wrap:not([style*='display: none']):nth-child(20)
    .store {
    -webkit-transition: border-radius 0.2s ease 0.5s, width 0.2s ease 0.5s,
      height 0.2s ease 0.5s;
    transition: border-radius 0.2s ease 0.5s, width 0.2s ease 0.5s,
      height 0.2s ease 0.5s;
  }

  .oppo-navbar #online-store .store-container .store-page .close-button {
    z-index: 101;
    top: 0.17rem;
    right: 0.2rem;
  }

  .oppo-navbar #online-store .store-container .store-page.tabscrolled .mb-tab {
    position: fixed;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page.tabscrolled
    .store-content {
    margin-top: 1.05rem;
  }

  .oppo-navbar
    #online-store
    .store-container
    .store-page.tabnoscroll
    .store-content {
    margin-top: 1.05rem;
  }

  .oppo-navbar #navbar .container ul li.post.hightlight a {
    opacity: 1;
    pointer-events: none;
  }
}

.base-module-wrapper .swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.base-module-wrapper .swiper-container-no-flexbox .swiper-slide {
  float: left;
}

.base-module-wrapper .swiper-container-vertical > .swiper-wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.base-module-wrapper .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  box-sizing: content-box;
}

.base-module-wrapper .swiper-container-android .swiper-slide,
.base-module-wrapper .swiper-wrapper {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.base-module-wrapper .swiper-container-multirow > .swiper-wrapper {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.base-module-wrapper .swiper-container-free-mode > .swiper-wrapper {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  margin: 0 auto;
}

.base-module-wrapper .swiper-slide {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.base-module-wrapper .swiper-slide-invisible-blank {
  visibility: hidden;
}

.base-module-wrapper .swiper-container-autoheight,
.base-module-wrapper .swiper-container-autoheight .swiper-slide {
  height: auto;
}

.base-module-wrapper .swiper-container-autoheight .swiper-wrapper {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-transition-property: height, -webkit-transform;
  transition-property: height, -webkit-transform;
  transition-property: transform, height;
  transition-property: transform, height, -webkit-transform;
}

.base-module-wrapper .swiper-container-3d {
  -webkit-perspective: 12rem;
  perspective: 12rem;
}

.base-module-wrapper .swiper-container-3d .swiper-wrapper,
.base-module-wrapper .swiper-container-3d .swiper-slide,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-left,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-right,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-top,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-bottom,
.base-module-wrapper .swiper-container-3d .swiper-cube-shadow {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-left,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-right,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-top,
.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-left {
  background-image: -webkit-gradient(
    linear,
    right top,
    left top,
    from(rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: -webkit-linear-gradient(
    right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}

.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-right {
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}

.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-top {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: -webkit-linear-gradient(
    bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}

.base-module-wrapper .swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(0, 0, 0, 0.5)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}

.base-module-wrapper .swiper-container-wp8-horizontal,
.base-module-wrapper .swiper-container-wp8-horizontal > .swiper-wrapper {
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}

.base-module-wrapper .swiper-container-wp8-vertical,
.base-module-wrapper .swiper-container-wp8-vertical > .swiper-wrapper {
  -ms-touch-action: pan-x;
  touch-action: pan-x;
}

.base-module-wrapper .swiper-button-prev,
.base-module-wrapper .swiper-button-next {
  position: absolute;
  top: 50%;
  width: 0.27rem;
  height: 0.44rem;
  margin-top: -0.22rem;
  z-index: 10;
  cursor: pointer;
  background-size: 0.27rem 0.44rem;
  background-position: center;
  background-repeat: no-repeat;
}

.base-module-wrapper .swiper-button-prev.swiper-button-disabled,
.base-module-wrapper .swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}

.base-module-wrapper .swiper-button-prev,
.base-module-wrapper .swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  left: 0.1rem;
  right: auto;
}

.base-module-wrapper .swiper-button-next,
.base-module-wrapper .swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
  right: 0.1rem;
  left: auto;
}

.base-module-wrapper .swiper-button-prev.swiper-button-white,
.base-module-wrapper
  .swiper-container-rtl
  .swiper-button-next.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.base-module-wrapper .swiper-button-next.swiper-button-white,
.base-module-wrapper
  .swiper-container-rtl
  .swiper-button-prev.swiper-button-white {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.base-module-wrapper .swiper-button-prev.swiper-button-black,
.base-module-wrapper
  .swiper-container-rtl
  .swiper-button-next.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.base-module-wrapper .swiper-button-next.swiper-button-black,
.base-module-wrapper
  .swiper-container-rtl
  .swiper-button-prev.swiper-button-black {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}

.base-module-wrapper .swiper-button-lock {
  display: none;
}

.base-module-wrapper .swiper-pagination {
  position: absolute;
  text-align: center;
  -webkit-transition: 300ms opacity;
  transition: 300ms opacity;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  z-index: 10;
}

.base-module-wrapper .swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}

.base-module-wrapper .swiper-pagination-fraction,
.base-module-wrapper .swiper-pagination-custom,
.base-module-wrapper .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0.1rem;
  left: 0;
  width: 100%;
}

.base-module-wrapper .swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
  position: relative;
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-main {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-prev {
  -webkit-transform: scale(0.66);
  transform: scale(0.66);
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-prev-prev {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-next {
  -webkit-transform: scale(0.66);
  transform: scale(0.66);
}

.base-module-wrapper
  .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet-active-next-next {
  -webkit-transform: scale(0.33);
  transform: scale(0.33);
}

.base-module-wrapper .swiper-pagination-bullet {
  width: 0.08rem;
  height: 0.08rem;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}

.base-module-wrapper button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.base-module-wrapper .swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}

.base-module-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
  background: #007aff;
}

.base-module-wrapper .swiper-container-vertical > .swiper-pagination-bullets {
  right: 0.1rem;
  top: 50%;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

.base-module-wrapper
  .swiper-container-vertical
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0.06rem 0;
  display: block;
}

.base-module-wrapper
  .swiper-container-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 0.08rem;
}

.base-module-wrapper
  .swiper-container-vertical
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  display: inline-block;
  -webkit-transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms top, 200ms -webkit-transform;
  transition: 200ms transform, 200ms top;
  transition: 200ms transform, 200ms top, 200ms -webkit-transform;
}

.base-module-wrapper
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 0.04rem;
}

.base-module-wrapper
  .swiper-container-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  white-space: nowrap;
}

.base-module-wrapper
  .swiper-container-horizontal
  > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  -webkit-transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms left, 200ms -webkit-transform;
  transition: 200ms transform, 200ms left;
  transition: 200ms transform, 200ms left, 200ms -webkit-transform;
}

.base-module-wrapper
  .swiper-container-horizontal.swiper-container-rtl
  > .swiper-pagination-bullets-dynamic
  .swiper-pagination-bullet {
  -webkit-transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms right, 200ms -webkit-transform;
  transition: 200ms transform, 200ms right;
  transition: 200ms transform, 200ms right, 200ms -webkit-transform;
}

.base-module-wrapper .swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}

.base-module-wrapper
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  background: #007aff;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

.base-module-wrapper
  .swiper-container-rtl
  .swiper-pagination-progressbar
  .swiper-pagination-progressbar-fill {
  -webkit-transform-origin: right top;
  transform-origin: right top;
}

.base-module-wrapper
  .swiper-container-horizontal
  > .swiper-pagination-progressbar,
.base-module-wrapper
  .swiper-container-vertical
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 0.04rem;
  left: 0;
  top: 0;
}

.base-module-wrapper
  .swiper-container-vertical
  > .swiper-pagination-progressbar,
.base-module-wrapper
  .swiper-container-horizontal
  > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 0.04rem;
  height: 100%;
  left: 0;
  top: 0;
}

.base-module-wrapper .swiper-pagination-white .swiper-pagination-bullet-active {
  background: #ffffff;
}

.base-module-wrapper .swiper-pagination-progressbar.swiper-pagination-white {
  background: rgba(255, 255, 255, 0.25);
}

.base-module-wrapper
  .swiper-pagination-progressbar.swiper-pagination-white
  .swiper-pagination-progressbar-fill {
  background: #ffffff;
}

.base-module-wrapper .swiper-pagination-black .swiper-pagination-bullet-active {
  background: #000000;
}

.base-module-wrapper .swiper-pagination-progressbar.swiper-pagination-black {
  background: rgba(0, 0, 0, 0.25);
}

.base-module-wrapper
  .swiper-pagination-progressbar.swiper-pagination-black
  .swiper-pagination-progressbar-fill {
  background: #000000;
}

.base-module-wrapper .swiper-pagination-lock {
  display: none;
}

.base-module-wrapper .swiper-scrollbar {
  border-radius: 0.1rem;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}

.base-module-wrapper .swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 0.03rem;
  z-index: 50;
  height: 0.05rem;
  width: 98%;
}

.base-module-wrapper .swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 0.03rem;
  top: 1%;
  z-index: 50;
  width: 0.05rem;
  height: 98%;
}

.base-module-wrapper .swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0.1rem;
  left: 0;
  top: 0;
}

.base-module-wrapper .swiper-scrollbar-cursor-drag {
  cursor: move;
}

.base-module-wrapper .swiper-scrollbar-lock {
  display: none;
}

.base-module-wrapper .swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
}

.base-module-wrapper .swiper-zoom-container > img,
.base-module-wrapper .swiper-zoom-container > svg,
.base-module-wrapper .swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.base-module-wrapper .swiper-slide-zoomed {
  cursor: move;
}

.base-module-wrapper .swiper-lazy-preloader {
  width: 0.42rem;
  height: 0.42rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.21rem;
  margin-top: -0.21rem;
  z-index: 10;
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
  animation: swiper-preloader-spin 1s steps(12, end) infinite;
}

.base-module-wrapper .swiper-lazy-preloader:after {
  display: block;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 50%;
  background-size: 100%;
  background-repeat: no-repeat;
}

.base-module-wrapper .swiper-lazy-preloader-white:after {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

@-webkit-keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes swiper-preloader-spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.base-module-wrapper .swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}

.base-module-wrapper
  .swiper-container-fade.swiper-container-free-mode
  .swiper-slide {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.base-module-wrapper .swiper-container-fade .swiper-slide {
  pointer-events: none;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.base-module-wrapper .swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}

.base-module-wrapper .swiper-container-fade .swiper-slide-active,
.base-module-wrapper
  .swiper-container-fade
  .swiper-slide-active
  .swiper-slide-active {
  pointer-events: auto;
}

.base-module-wrapper .swiper-container-cube {
  overflow: visible;
}

.base-module-wrapper .swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}

.base-module-wrapper .swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}

.base-module-wrapper .swiper-container-cube.swiper-container-rtl .swiper-slide {
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
}

.base-module-wrapper .swiper-container-cube .swiper-slide-active,
.base-module-wrapper
  .swiper-container-cube
  .swiper-slide-active
  .swiper-slide-active {
  pointer-events: auto;
}

.base-module-wrapper .swiper-container-cube .swiper-slide-active,
.base-module-wrapper .swiper-container-cube .swiper-slide-next,
.base-module-wrapper .swiper-container-cube .swiper-slide-prev,
.base-module-wrapper .swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}

.base-module-wrapper .swiper-container-cube .swiper-slide-shadow-top,
.base-module-wrapper .swiper-container-cube .swiper-slide-shadow-bottom,
.base-module-wrapper .swiper-container-cube .swiper-slide-shadow-left,
.base-module-wrapper .swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.base-module-wrapper .swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(0.5rem);
  filter: blur(0.5rem);
  z-index: 0;
}

.base-module-wrapper .swiper-container-flip {
  overflow: visible;
}

.base-module-wrapper .swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}

.base-module-wrapper .swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}

.base-module-wrapper .swiper-container-flip .swiper-slide-active,
.base-module-wrapper
  .swiper-container-flip
  .swiper-slide-active
  .swiper-slide-active {
  pointer-events: auto;
}

.base-module-wrapper .swiper-container-flip .swiper-slide-shadow-top,
.base-module-wrapper .swiper-container-flip .swiper-slide-shadow-bottom,
.base-module-wrapper .swiper-container-flip .swiper-slide-shadow-left,
.base-module-wrapper .swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.base-module-wrapper .swiper-container-coverflow .swiper-wrapper {
  -ms-perspective: 12rem;
}

.base-module-wrapper {
  position: relative;
  padding-top: 0.6rem;
  font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
  color: #000;
  background: #fff;
  overflow: hidden;
}

.base-module-wrapper.arabic {
  direction: rtl;
}

.base-module-wrapper.no-navbar {
  padding-top: 0;
}

.base-module-wrapper.dark {
  color: #fff;
  background: #000;
}

.base-module-wrapper *,
.base-module-wrapper ::before,
.base-module-wrapper ::after {
  box-sizing: border-box;
}

.base-module-wrapper img {
  display: block;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.base-module-wrapper canvas img {
  display: none;
}

.base-module-wrapper video {
  display: block;
}

.base-module-wrapper picture {
  display: block;
}

.base-module-wrapper picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.base-module-wrapper .lazyload,
.base-module-wrapper .lazyloading {
  opacity: 0;
}

.base-module-wrapper .lazyloaded {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.base-module-wrapper .base-module-container {
  position: relative;
}

.base-module-wrapper .module {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.base-module-wrapper .module-inner {
  position: relative;
  margin: 0 auto;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.base-module-wrapper .module-inner.fixed {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.base-module-wrapper .v-center {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.base-module-wrapper .h-center {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media only screen and (max-width: 1023px) {
  .base-module-wrapper {
    padding-top: 0.5rem;
  }

  .base-module-wrapper .module-inner {
    width: 88.88889vw;
  }

  .base-module-wrapper .base-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 7.77778vw;
    line-height: 12.22222vw;
  }

  .base-module-wrapper .base-subtitle {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 12.22222vw;
    font-size: 7.77778vw;
    letter-spacing: -0.05556vw;
    opacity: 0.6;
  }

  .base-module-wrapper .base-desc {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 7.77778vw;
    font-size: 4.44444vw;
    letter-spacing: -0.02778vw;
    margin-top: 5.55556vw;
  }

  .base-module-wrapper .module-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 6.66667vw;
    font-weight: 400;
    line-height: 12.22222vw;
    letter-spacing: -0.02778vw;
    text-align: center;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1559px) {
  .base-module-wrapper .module-inner {
    width: 91.11111vw;
  }

  .base-module-wrapper .base-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 4.44444vw;
    font-size: 2.91667vw;
    letter-spacing: -0.01389vw;
    text-align: center;
  }

  .base-module-wrapper .base-subtitle {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    color: #000;
    line-height: 4.44444vw;
    font-size: 2.91667vw;
    letter-spacing: -0.01389vw;
    text-align: center;
    opacity: 0.55;
  }

  .base-module-wrapper .base-desc {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 1.94444vw;
    font-size: 1.11111vw;
    letter-spacing: -0.00625vw;
    text-align: center;
    margin-top: 1.38889vw;
  }

  .base-module-wrapper .module-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 2.91667vw;
    font-weight: 400;
    line-height: 4.44444vw;
    letter-spacing: -0.01389vw;
    text-align: center;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
  .base-module-wrapper .module-inner {
    width: 68.33333vw;
  }

  .base-module-wrapper .base-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 2.1875vw;
    font-weight: 400;
    line-height: 3.33333vw;
    text-align: center;
    letter-spacing: -0.01042vw;
  }

  .base-module-wrapper .base-subtitle {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    color: rgba(0, 0, 0, 0.55);
    font-size: 2.1875vw;
    font-weight: 400;
    line-height: 3.33333vw;
    text-align: center;
    letter-spacing: -0.01042vw;
  }

  .base-module-wrapper .base-desc {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    margin-top: 1.04167vw;
    font-size: 0.83333vw;
    font-weight: 400;
    line-height: 1.45833vw;
    text-align: center;
    letter-spacing: -0.00469vw;
  }

  .base-module-wrapper .module-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 2.1875vw;
    line-height: 3.33333vw;
    text-align: center;
    letter-spacing: -0.01042vw;
  }
}

@media only screen and (min-width: 1921px) {
  .base-module-wrapper .module-inner {
    width: 51.25vw;
  }

  .base-module-wrapper .base-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.64063vw;
    font-weight: 400;
    line-height: 2.5vw;
    text-align: center;
    letter-spacing: -0.00781vw;
  }

  .base-module-wrapper .base-subtitle {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    color: rgba(0, 0, 0, 0.55);
    font-size: 1.64063vw;
    font-weight: 400;
    line-height: 2.5vw;
    text-align: center;
    letter-spacing: -0.00781vw;
  }

  .base-module-wrapper .base-desc {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    margin-top: 0.78125vw;
    font-size: 0.625vw;
    font-weight: 400;
    line-height: 1.09375vw;
    text-align: center;
    letter-spacing: -0.00352vw;
  }

  .base-module-wrapper .module-title {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.64063vw;
    line-height: 2.5vw;
    text-align: center;
    letter-spacing: -0.00781vw;
  }
}

@supports (-webkit-background-clip: text) {
  .background-clip {
    color: transparent;
    background-image: -webkit-linear-gradient(bottom, #ff692e 0%, #dc9433 100%);
    background-image: linear-gradient(360deg, #ff692e 0%, #dc9433 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

#oc-header.fixed {
  position: absolute !important;
}

html.ie {
  overflow-x: hidden;
}

@media only screen and (max-width: 767px) {
  body #oc-header {
    overflow: hidden;
  }
}

.no-scroll {
  overflow: hidden;
}

.base-module-navbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  height: 0.6rem;
  line-height: 0.6rem;
  font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
  font-size: 0.13rem;
  color: #000;
  background-color: #fff;
  -webkit-transition: color 0.3s ease, background-color 0.3s ease;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.base-module-navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.01rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.base-module-navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.01rem;
  background-color: rgba(0, 0, 0, 0.1);
}

.base-module-navbar a {
  color: inherit;
  white-space: nowrap;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.base-module-navbar a:hover {
  opacity: 1;
}

.base-module-navbar.dark {
  color: #fff;
  background-color: #000;
}

.base-module-navbar.dark::before {
  background-color: rgba(255, 255, 255, 0.1);
}

.base-module-navbar.dark::after {
  background-color: rgba(255, 255, 255, 0.1);
}

.base-module-navbar.dark .navbar-mask {
  background-color: rgba(21, 21, 21, 0.9);
}

@media only screen and (max-width: 1023px) {
  .base-module-navbar.dark .product-list {
    background-color: #000;
  }

  .base-module-navbar.dark .product-list li:not(:first-of-type)::before {
    background-color: #fff;
  }

  .base-module-navbar.dark .anchor-list {
    background-color: #000;
  }

  .base-module-navbar.dark .navbar-selector .arrow .icon-arrow {
    fill: #fff;
  }
}

.base-module-navbar.fixed {
  position: fixed;
}

.base-module-navbar .navbar-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  max-width: 14.4rem;
  height: 100%;
  margin: 0 auto;
  padding: 0 0.64rem;
}

.base-module-navbar .navbar-mask {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(253, 253, 253, 0.9);
}

.base-module-navbar .navbar-mask.on {
  height: 100vh;
  opacity: 1;
  visibility: visible;
}

.base-module-navbar .product-list li.on a {
  opacity: 1;
}

.base-module-navbar .anchor-list li.on a {
  opacity: 1;
}

.base-module-navbar .product-selector {
  display: none;
}

.base-module-navbar .anchor-selector {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .base-module-navbar {
    height: 0.5rem;
    line-height: 0.5rem;
    font-size: 0.12rem;
  }

  .base-module-navbar .product-list,
  .base-module-navbar .anchor-list {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateX(-100vw);
    transform: translateX(-100vw);
    background-color: #fff;
    overflow: hidden;
  }

  .base-module-navbar .product-list.on,
  .base-module-navbar .anchor-list.on {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  .base-module-navbar .product-list.on li,
  .base-module-navbar .anchor-list.on li {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .base-module-navbar .product-list li,
  .base-module-navbar .anchor-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transform: translateY(-800%);
    transform: translateY(-800%);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .base-module-navbar .product-list li:not(:nth-of-type(1))::before,
  .base-module-navbar .anchor-list li:not(:nth-of-type(1))::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    height: 0.01rem;
    background: rgba(229, 229, 229, 0.6);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .base-module-navbar .product-list li a,
  .base-module-navbar .anchor-list li a {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .base-module-navbar .navbar-selector {
    pointer-events: none;
  }

  .base-module-navbar .navbar-selector.on .arrow .icon-arrow {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  .base-module-navbar .navbar-selector.selector {
    pointer-events: auto;
  }

  .base-module-navbar .navbar-selector.selector .arrow {
    opacity: 1;
  }

  .base-module-navbar .navbar-selector .arrow {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 0.14rem;
    height: 0.5rem;
    line-height: 0.5rem;
    margin: 0 0.02rem;
    opacity: 0;
  }

  .base-module-navbar .navbar-selector .arrow .icon-arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  }

  .base-module-navbar .product-selector {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .anchor-selector {
    -webkit-box-flex: 2;
    -ms-flex: 2 2 0%;
    flex: 2 2 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .button-list {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .button-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .base-module-navbar .button-list li a {
    height: 0.24rem;
    line-height: 0.24rem;
    padding: 0 0.1rem;
    color: #fff;
    background-color: #2ec84d;
    opacity: 1;
  }
}

@media only screen and (min-width: 1024px) {
  .base-module-navbar .product-list {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .product-list li:not(:first-of-type)::before {
    content: '';
    display: inline-block;
    width: 0.01rem;
    height: 0.12rem;
    margin: -0.02rem 0.2rem 0;
    background-color: #000;
    opacity: 0.6;
    vertical-align: middle;
  }

  .base-module-navbar .anchor-list {
    -webkit-box-flex: 3;
    -ms-flex: 3 3 0%;
    flex: 3 3 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .anchor-list li {
    margin-right: 0.1rem;
    margin-left: 0.1rem;
  }

  .base-module-navbar .button-list {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-width: 0;
    white-space: nowrap;
  }

  .base-module-navbar .button-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .base-module-navbar .button-list li a {
    height: 0.32rem;
    line-height: 0.32rem;
    padding-right: 0.15rem;
    padding-left: 0.15rem;
    color: #fff;
    background-color: #2ec84d;
    opacity: 1;
  }
}

@media only screen and (max-width: 767px) {
  .base-module-navbar .navbar-inner {
    padding: 0 0.2rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .base-module-navbar .navbar-inner {
    padding: 0 0.24rem;
  }
}

.base-module-store {
  font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
  color: #000;
}

.base-module-store.open .store-mask {
  opacity: 1;
  visibility: visible;
}

.base-module-store.open .store-wrapper {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}

.base-module-store .store-mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(0.05rem);
  backdrop-filter: blur(0.05rem);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

.base-module-store .store-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  width: 13.12rem;
  height: 7.2rem;
  background-color: #fff;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translate3d(-50%, 25%, 0);
  transform: translate3d(-50%, 25%, 0);
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
}

.base-module-store .store-close {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  z-index: 3;
  width: 0.14rem;
  height: 0.14rem;
  cursor: pointer;
}

.base-module-store .store-close::before,
.base-module-store .store-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.16rem;
  height: 0.02rem;
  border-radius: 0.1rem;
  background-color: #000000;
}

.base-module-store .store-close::before {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
}

.base-module-store .store-close::after {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  transform: translate3d(-50%, -50%, 0) rotate(45deg);
}

.base-module-store .store-content {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.base-module-store .store-content::-webkit-scrollbar {
  width: 0.04rem;
}

.base-module-store .store-content::-webkit-scrollbar-thumb {
  background: #2ec84d;
}

.base-module-store .store-page {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 1.46rem;
  margin-bottom: 0.28rem;
}

.base-module-store .store-title {
  line-height: 0.44rem;
  padding-top: 0.7rem;
  padding-bottom: 0.32rem;
  font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
  font-size: 0.28rem;
  text-align: center;
  background-color: #ffffff;
}

.base-module-store .store-subtitle {
  line-height: 0.32rem;
  margin-bottom: 0.2rem;
  font-size: 0.2rem;
  text-align: center;
}

.base-module-store .store-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 11.2rem;
  margin: 0 auto;
}

.base-module-store .store-list:not(:first-of-type) {
  margin-top: 0.06rem;
}

.base-module-store .store-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 1.92rem;
  height: 1.44rem;
  margin: 0 0.16rem 0.32rem 0.16rem;
  background-color: rgba(0, 0, 0, 0.04);
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.base-module-store .store-item img {
  width: 1.2rem;
  height: 0.8rem;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.base-module-store .store-item:hover {
  background-color: rgba(0, 0, 0, 0.01);
}

.base-module-store .store-item:hover img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

@media only screen and (max-width: 767px) {
  .base-module-store .store-wrapper {
    width: 3.2rem;
    height: 6.2rem;
  }

  .base-module-store .store-list {
    width: 2.96rem;
  }

  .base-module-store .store-item {
    width: 1.32rem;
    height: 0.96rem;
    margin: 0 0.08rem 0.32rem 0.08rem;
  }

  .base-module-store .store-item img {
    width: 0.98rem;
    height: 0.66rem;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .base-module-store .store-wrapper {
    width: 7.2rem;
    height: 8.5rem;
  }

  .base-module-store .store-list {
    width: 5.64rem;
  }

  .base-module-store .store-item {
    width: 1.55rem;
    height: 1.15rem;
  }

  .base-module-store .store-item img {
    width: 0.95rem;
    height: 0.63rem;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .base-module-store .store-wrapper {
    width: 8.96rem;
    height: 5.8rem;
  }

  .base-module-store .store-list {
    width: 6.96rem;
  }

  .base-module-store .store-item {
    width: 2rem;
    height: 1.5rem;
  }
}

@media only screen and (min-width: 1440px) and (max-width: 1919px) {
  .base-module-store .store-wrapper {
    width: 13.12rem;
    height: 6.25rem;
  }
}

.base-dialog-video {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  padding-top: 0.5rem;
  background: #000;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}

.base-dialog-video.active {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.base-dialog-video .video-panel {
  position: relative;
  width: 75%;
  height: auto;
}

.base-dialog-video video {
  width: 100%;
  height: 100%;
  outline: none;
  object-fit: contain;
}

.base-dialog-video .dialog-close {
  position: absolute;
  top: -0.44rem;
  right: 0;
  width: 0.24rem;
  height: 0.24rem;
  fill: #fff;
  cursor: pointer;
}

@media only screen and (max-width: 1023px) {
  .base-dialog-video .video-panel {
    width: 100vw;
  }

  .base-dialog-video .dialog-close {
    top: -0.44rem;
    right: 0.16rem;
    width: 0.24rem;
    height: 0.24rem;
  }
}

#oc-wrapper {
  padding-bottom: 0 !important;
}

@media only screen and (max-width: 1023px) {
  .dialog-video {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
    display: none;
  }

  .dialog-video.on {
    z-index: 9999;
    display: block;
  }

  .dialog-video .dia-con {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 88.88889vw;
    height: 130vw;
    background-color: #fff;
  }

  .dialog-video .dia-con video {
    width: 88.88889vw;
    height: 130vw;
  }

  .dialog-video .dia-con .dia-close {
    position: absolute;
    right: 0;
    top: -13.88889vw;
    font-size: 13.88889vw;
    color: #fff;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .dialog-video {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
    display: none;
  }

  .dialog-video.on {
    z-index: 9999;
    display: block;
  }

  .dialog-video .dia-con {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 91.11111vw;
    height: 51.25vw;
    background-color: #fff;
  }

  .dialog-video .dia-con video {
    width: 91.11111vw;
    height: 51.25vw;
  }

  .dialog-video .dia-con .dia-close {
    position: absolute;
    right: 0;
    top: -3.47222vw;
    font-size: 3.47222vw;
    color: #fff;
  }
}

@media only screen and (min-width: 1600px) {
  .dialog-video {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
    display: none;
  }

  .dialog-video.on {
    z-index: 9999;
    display: block;
  }

  .dialog-video .dia-con {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 68.33333vw;
    height: 38.4375vw;
    background-color: #fff;
  }

  .dialog-video .dia-con video {
    width: 68.33333vw;
    height: 38.4375vw;
  }

  .dialog-video .dia-con .dia-close {
    position: absolute;
    right: 0;
    top: -2.60417vw;
    font-size: 2.60417vw;
    color: #fff;
  }
}

@media only screen and (min-width: 1921px) {
  .dialog-video {
    position: fixed;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
    display: none;
  }

  .dialog-video.on {
    z-index: 9999;
    display: block;
  }

  .dialog-video .dia-con {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 51.25vw;
    height: 28.82813vw;
    background-color: #fff;
  }

  .dialog-video .dia-con video {
    width: 51.25vw;
    height: 28.82813vw;
  }

  .dialog-video .dia-con .dia-close {
    position: absolute;
    right: 0;
    top: -1.95313vw;
    font-size: 1.95313vw;
    color: #fff;
  }
}

.module-kv .kv-title {
  font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
}

.module-kv .kv-desc {
  font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
}

@media only screen and (max-width: 1023px) {
  .module-kv {
    position: relative;
    height: 177.77778vw;
  }

  .module-kv .module-kv-bg {
    width: 100%;
    position: absolute;
    bottom: 0;
  }

  .module-kv .module-inner .white-circle {
    position: absolute;
    top: 43.05556vw;
    left: 50%;
    margin-left: -47.63889vw;
    width: 95.27778vw;
    height: 95.27778vw;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    -webkit-animation: kv-circle 1s;
    animation: kv-circle 1s;
  }

  .module-kv .module-inner .person {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    height: 135.97222vw;
    -webkit-animation: kv-person 1s forwards;
    animation: kv-person 1s forwards;
    z-index: 3;
  }

  .module-kv .module-inner .title-box {
    display: none;
    position: absolute;
    top: 10.55556vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 74.44444vw;
    color: #48391b;
    z-index: 3;
  }

  .module-kv .module-inner .title-box > div:nth-child(1) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .module-kv .module-inner .moblie-title {
    width: 75.27778vw;
    height: 27.77778vw;
    margin: 10.55556vw auto 0;
    opacity: 0;
    font-size: 13.88889vw;
    letter-spacing: -0.83333vw;
    -webkit-animation: kv-title-fadeIn 1s 1s forwards;
    animation: kv-title-fadeIn 1s 1s forwards;
  }

  .module-kv .module-inner .kv-desc .left {
    font-size: 5.55556vw;
  }

  .module-kv .module-inner .kv-desc .right {
    font-size: 4.44444vw;
  }

  .module-kv .module-inner .kv-title .left,
  .module-kv .module-inner .kv-desc .left {
    opacity: 0;
    -webkit-animation: kv-left-text 1s 1s forwards;
    animation: kv-left-text 1s 1s forwards;
  }

  .module-kv .module-inner .kv-title .right,
  .module-kv .module-inner .kv-desc .right {
    opacity: 0;
    -webkit-animation: kv-right-text 1s 1s forwards;
    animation: kv-right-text 1s 1s forwards;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module-kv {
    position: relative;
    height: 45.83333vw;
  }

  .module-kv .module-kv-bg {
    position: relative;
    width: 100vw;
    height: 45.83333vw;
    margin: 0 auto;
  }

  .module-kv .module-kv-bg picture {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
  }

  .module-kv .white-circle {
    position: absolute;
    top: -4.51389vw;
    left: 50%;
    margin-left: -24.13194vw;
    width: 49.65278vw;
    height: 49.65278vw;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    -webkit-animation: kv-circle 1s;
    animation: kv-circle 1s;
  }

  .module-kv .person {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -26.38889vw;
    width: 55.55556vw;
    height: 48.40278vw;
    -webkit-animation: kv-person 1s forwards;
    animation: kv-person 1s forwards;
    z-index: 3;
  }

  .module-kv .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    top: 13.47222vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    padding: 0 4.51389vw 0 5.55556vw;
    color: #48391b;
    z-index: 3;
  }

  .module-kv .title-box .title-left {
    width: 31.04167vw;
    height: 14.16667vw;
    opacity: 0;
    -webkit-animation: kv-left-text 1s 1s forwards;
    animation: kv-left-text 1s 1s forwards;
  }

  .module-kv .title-box .title-right {
    width: 23.81944vw;
    height: 14.30556vw;
    opacity: 0;
    -webkit-animation: kv-right-text 1s 1s forwards;
    animation: kv-right-text 1s 1s forwards;
  }

  .module-kv .moblie-title {
    display: none;
  }

  .module-kv .kv-title {
    font-size: 11.11111vw;
    line-height: 10.76389vw;
    letter-spacing: -0.90278vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module-kv {
    position: relative;
    height: 48.4375vw;
  }

  .module-kv .module-kv-bg {
    width: 100vw;
    min-height: 48.41146vw;
    margin: 0 auto;
  }

  .module-kv .white-circle {
    position: absolute;
    top: -2.08333vw;
    left: 50%;
    margin-left: -24.94792vw;
    width: 49.89583vw;
    height: 49.89583vw;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    -webkit-animation: kv-circle 1s;
    animation: kv-circle 1s;
  }

  .module-kv .person {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -26.25vw;
    width: 55.20833vw;
    height: 48.41146vw;
    -webkit-animation: kv-person 1s forwards;
    animation: kv-person 1s forwards;
    z-index: 3;
  }

  .module-kv .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    top: 16.14583vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    padding: 0 6.82292vw 0 6.09375vw;
    color: #48391b;
    z-index: 3;
  }

  .module-kv .title-box .title-left {
    width: 30.36458vw;
    height: 11.27604vw;
    opacity: 0;
    -webkit-animation: kv-left-text 1s 1s forwards;
    animation: kv-left-text 1s 1s forwards;
  }

  .module-kv .title-box .title-right {
    width: 23.28125vw;
    height: 13.95833vw;
    opacity: 0;
    -webkit-animation: kv-right-text 1s 1s forwards;
    animation: kv-right-text 1s 1s forwards;
  }

  .module-kv .moblie-title {
    display: none;
  }
}

@media only screen and (min-width: 1921px) {
  .module-kv {
    height: 50.58594vw;
  }

  .module-kv .module-kv-bg {
    width: 100vw;
    height: 50.58594vw;
    margin: 0 auto;
  }

  .module-kv .white-circle {
    position: absolute;
    top: -2.53906vw;
    left: 50%;
    margin-left: -25.09766vw;
    width: 50.19531vw;
    height: 50.19531vw;
    border-radius: 50%;
    background-color: #fff;
    z-index: 2;
    -webkit-animation: kv-circle 1s;
    animation: kv-circle 1s;
  }

  .module-kv .person {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -27.87891vw;
    width: 55.76172vw;
    height: 50.42969vw;
    -webkit-animation: kv-person 1s forwards;
    animation: kv-person 1s forwards;
    z-index: 3;
  }

  .module-kv .title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    top: 16.60156vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    padding: 0 6.25vw 0 5.66406vw;
    color: #48391b;
    z-index: 3;
  }

  .module-kv .title-box .title-left {
    width: 30.35156vw;
    height: 12.42188vw;
    opacity: 0;
    -webkit-animation: kv-left-text 1s 1s forwards;
    animation: kv-left-text 1s 1s forwards;
  }

  .module-kv .title-box .title-right {
    width: 23.28125vw;
    height: 13.98438vw;
    opacity: 0;
    -webkit-animation: kv-right-text 1s 1s forwards;
    animation: kv-right-text 1s 1s forwards;
  }

  .module-kv .moblie-title {
    display: none;
  }
}

.module1 .title {
  font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
    'Helvetica Neue', 'Helvetica', 'Arial';
}

.module1 .feature-item {
  overflow: hidden;
}

.module1 .feature-item .feature-img {
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}

.module1 .feature-item:hover .feature-img {
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}

@media only screen and (max-width: 1023px) {
  .module1 {
    padding: 22.22222vw 0 24.16667vw 0;
    background-color: #ffffff;
    text-align: center;
  }

  .module1 .title {
    font-size: 7.77778vw;
    font-weight: 400;
    line-height: 11.66667vw;
    letter-spacing: -0.19444vw;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: translate(0, 0vw) scale(0.8);
    transform: translate(0, 0vw) scale(0.8);
    opacity: 0;
  }

  .module1 .title span {
    display: none;
  }

  .module1 .title.on {
    opacity: 1;
    -webkit-transform: translate(0, 0vw) scale(1);
    transform: translate(0, 0vw) scale(1);
  }

  .module1 .feature-list {
    position: relative;
    width: 88.88889vw;
    height: 135vw;
    margin: 13.33333vw auto 0;
  }

  .module1 .feature-list .feature-item {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
    border-radius: 1.11111vw;
    -webkit-transform: translateY(13.88889vw);
    transform: translateY(13.88889vw);
  }

  .module1 .feature-list .feature-item .feature-name {
    position: absolute;
    bottom: 4.72222vw;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 5vw;
    letter-spacing: -0.02778vw;
  }

  .module1 .feature-list .feature-item1 {
    top: 0;
    left: 0;
    width: 43.05556vw;
    height: 61.11111vw;
  }

  .module1 .feature-list .feature-item1 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item2 {
    top: 0;
    right: 0vw;
    width: 43.05556vw;
    height: 61.11111vw;
  }

  .module1 .feature-list .feature-item2 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item3 {
    top: 63.88889vw;
    left: 0;
    width: 43.05556vw;
    height: 34.16667vw;
  }

  .module1 .feature-list .feature-item4 {
    bottom: 0;
    left: 0;
    width: 43.05556vw;
    height: 34.16667vw;
  }

  .module1 .feature-list .feature-item5 {
    top: 63.88889vw;
    right: 0;
    width: 43.05556vw;
    height: 34.16667vw;
  }

  .module1 .feature-list .feature-item6 {
    bottom: 0;
    right: 0;
    width: 43.05556vw;
    height: 34.16667vw;
  }

  .module1 .feature-list.on .feature-item {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .module1 .feature-list.on .feature-item3 {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item4 {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-list.on .feature-item5 {
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item6 {
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-arrow-box {
    position: absolute;
    bottom: 2.22222vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 2.5vw;
    height: 1.11111vw;
  }

  .module1 .feature-arrow-box .feature-arrow {
    width: 100%;
    height: 100%;
  }

  .module1 .btn-buy-new {
    position: relative;
    display: block;
    margin: 13.33333vw auto 0;
    width: 32.77778vw;
    height: 8.88889vw;
    padding-right: 8.33333vw;
    font-family: 'OPPOSans-Medium';
    font-size: 3.33333vw;
    line-height: 8.88889vw;
    color: #fff;
    background: #2ec84d;
    box-sizing: border-box;
  }

  .module1 .btn-buy-new .icon-cart {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(23.61111vw, -50%);
    transform: translate(23.61111vw, -50%);
    width: 4.44444vw;
    height: 4.02778vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module1 {
    padding: 8.88889vw 0;
    background-color: #ffffff;
    text-align: center;
  }

  .module1 .module1-br {
    display: none;
  }

  .module1 .title {
    -webkit-perspective: 48.61111vw;
    perspective: 48.61111vw;
  }

  .module1 .title p {
    font-size: 4.16667vw;
    font-weight: 400;
    line-height: 6.25vw;
    letter-spacing: -0.04861vw;
    -webkit-transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 1s linear;
    transition: transform 0.5s, opacity 1s linear, -webkit-transform 0.5s;
    -webkit-transform: translate3d(0, 1.73611vw, -12.5vw);
    transform: translate3d(0, 1.73611vw, -12.5vw);
    opacity: 0;
  }

  .module1 .title.on {
    -webkit-perspective: 48.61111vw;
    perspective: 48.61111vw;
  }

  .module1 .title.on p {
    -webkit-transform: translate3d(0, 0vw, 0vw);
    transform: translate3d(0, 0vw, 0vw);
    opacity: 1;
  }

  .module1 .feature-list {
    position: relative;
    width: 91.11111vw;
    height: 30.41667vw;
    margin: 4.375vw auto 0;
  }

  .module1 .feature-list .feature-item {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translateY(6.25vw);
    transform: translateY(6.25vw);
    border-radius: 0.41667vw;
  }

  .module1 .feature-list .feature-item .feature-name {
    position: absolute;
    bottom: 2.5vw;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.38889vw;
    line-height: 1.80556vw;
    letter-spacing: -0.00694vw;
  }

  .module1 .feature-list .feature-item1 {
    top: 0;
    left: 0;
    width: 21.73611vw;
    height: 30.41667vw;
  }

  .module1 .feature-list .feature-item1 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item2 {
    top: 0;
    left: 23.125vw;
    width: 21.73611vw;
    height: 30.41667vw;
  }

  .module1 .feature-list .feature-item2 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item3 {
    top: 0vw;
    left: 46.25vw;
    width: 21.73611vw;
    height: 14.51389vw;
  }

  .module1 .feature-list .feature-item4 {
    bottom: 0;
    left: 46.25vw;
    width: 21.73611vw;
    height: 14.58333vw;
    -webkit-transform: translateY(8.33333vw);
    transform: translateY(8.33333vw);
  }

  .module1 .feature-list .feature-item5 {
    top: 0;
    right: 0;
    width: 21.73611vw;
    height: 14.58333vw;
  }

  .module1 .feature-list .feature-item6 {
    bottom: 0;
    right: 0;
    width: 21.73611vw;
    height: 14.58333vw;
    -webkit-transform: translateY(8.33333vw);
    transform: translateY(8.33333vw);
  }

  .module1 .feature-list.on {
    position: relative;
    width: 91.11111vw;
    height: 30.41667vw;
    margin: 4.375vw auto 0;
  }

  .module1 .feature-list.on .feature-item {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .module1 .feature-list.on .feature-item1 {
    top: 0;
    left: 0;
    width: 21.73611vw;
    height: 30.41667vw;
  }

  .module1 .feature-list.on .feature-item2 {
    top: 0;
    left: 23.125vw;
    width: 21.73611vw;
    height: 30.41667vw;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }

  .module1 .feature-list.on .feature-item3 {
    top: 0vw;
    left: 46.25vw;
    width: 21.73611vw;
    height: 14.51389vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item4 {
    bottom: 0;
    left: 46.25vw;
    width: 21.73611vw;
    height: 14.58333vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item5 {
    top: 0;
    right: 0;
    width: 21.73611vw;
    height: 14.58333vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-list.on .feature-item6 {
    bottom: 0;
    right: 0;
    width: 21.73611vw;
    height: 14.58333vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-arrow-box {
    position: absolute;
    bottom: 1.38889vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0.90278vw;
    height: 0.41667vw;
  }

  .module1 .feature-arrow-box .feature-arrow {
    width: 100%;
    height: 100%;
  }

  .module1 .btn-buy-new {
    position: relative;
    display: block;
    margin: 5.55556vw auto 0;
    width: 12.5vw;
    height: 3.33333vw;
    padding-right: 2.08333vw;
    font-family: 'OPPOSans-Medium';
    font-size: 1.11111vw;
    line-height: 3.125vw;
    color: #fff;
    background: #2ec84d;
    box-sizing: border-box;
  }

  .module1 .btn-buy-new .icon-cart {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(8.33333vw, -50%);
    transform: translate(8.33333vw, -50%);
    width: 1.52778vw;
    height: 1.38889vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module1 {
    padding: 6.66667vw 0;
    background-color: #ffffff;
    text-align: center;
  }

  .module1 .module1-br {
    display: none;
  }

  .module1 .title {
    -webkit-perspective: 36.45833vw;
    perspective: 36.45833vw;
  }

  .module1 .title p {
    font-size: 3.125vw;
    font-weight: 400;
    line-height: 4.6875vw;
    letter-spacing: -0.03646vw;
    -webkit-transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 1s linear;
    transition: transform 0.5s, opacity 1s linear, -webkit-transform 0.5s;
    -webkit-transform: translate3d(0, 1.30208vw, -9.375vw);
    transform: translate3d(0, 1.30208vw, -9.375vw);
    opacity: 0;
  }

  .module1 .title.on {
    -webkit-perspective: 36.45833vw;
    perspective: 36.45833vw;
  }

  .module1 .title.on p {
    -webkit-transform: translate3d(0, 0vw, 0vw);
    transform: translate3d(0, 0vw, 0vw);
    opacity: 1;
  }

  .module1 .feature-list {
    position: relative;
    width: 68.33333vw;
    height: 22.8125vw;
    margin: 3.28125vw auto 0;
  }

  .module1 .feature-list .feature-item {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translateY(4.6875vw);
    transform: translateY(4.6875vw);
    border-radius: 0.3125vw;
  }

  .module1 .feature-list .feature-item .feature-name {
    position: absolute;
    bottom: 1.875vw;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.04167vw;
    line-height: 1.35417vw;
    letter-spacing: -0.00521vw;
  }

  .module1 .feature-list .feature-item1 {
    top: 0;
    left: 0;
    width: 16.30208vw;
    height: 22.8125vw;
  }

  .module1 .feature-list .feature-item1 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item2 {
    top: 0;
    left: 17.34375vw;
    width: 16.30208vw;
    height: 22.8125vw;
  }

  .module1 .feature-list .feature-item2 .feature-name {
    color: #fff;
  }

  .module1 .feature-list .feature-item3 {
    top: 0vw;
    left: 34.6875vw;
    width: 16.30208vw;
    height: 10.88542vw;
  }

  .module1 .feature-list .feature-item4 {
    bottom: 0;
    left: 34.6875vw;
    width: 16.30208vw;
    height: 10.9375vw;
    -webkit-transform: translateY(6.25vw);
    transform: translateY(6.25vw);
  }

  .module1 .feature-list .feature-item5 {
    top: 0;
    right: 0;
    width: 16.30208vw;
    height: 10.9375vw;
  }

  .module1 .feature-list .feature-item6 {
    bottom: 0;
    right: 0;
    width: 16.30208vw;
    height: 10.9375vw;
    -webkit-transform: translateY(6.25vw);
    transform: translateY(6.25vw);
  }

  .module1 .feature-list.on {
    position: relative;
    width: 68.33333vw;
    height: 22.8125vw;
    margin: 3.28125vw auto 0;
  }

  .module1 .feature-list.on .feature-item {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .module1 .feature-list.on .feature-item1 {
    top: 0;
    left: 0;
    width: 16.30208vw;
    height: 22.8125vw;
  }

  .module1 .feature-list.on .feature-item2 {
    top: 0;
    left: 17.34375vw;
    width: 16.30208vw;
    height: 22.8125vw;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }

  .module1 .feature-list.on .feature-item3 {
    top: 0vw;
    left: 34.6875vw;
    width: 16.30208vw;
    height: 10.88542vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item4 {
    bottom: 0;
    left: 34.6875vw;
    width: 16.30208vw;
    height: 10.9375vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item5 {
    top: 0;
    right: 0;
    width: 16.30208vw;
    height: 10.9375vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-list.on .feature-item6 {
    bottom: 0;
    right: 0;
    width: 16.30208vw;
    height: 10.9375vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-arrow-box {
    position: absolute;
    bottom: 1.04167vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0.67708vw;
    height: 0.3125vw;
  }

  .module1 .feature-arrow-box .feature-arrow {
    width: 100%;
    height: 100%;
  }

  .module1 .btn-buy-new {
    position: relative;
    display: block;
    margin: 4.16667vw auto 0;
    width: 9.375vw;
    height: 2.5vw;
    padding-right: 1.5625vw;
    font-family: 'OPPOSans-Medium';
    font-size: 0.83333vw;
    line-height: 2.34375vw;
    color: #fff;
    background: #2ec84d;
    box-sizing: border-box;
  }

  .module1 .btn-buy-new .icon-cart {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(6.25vw, -50%);
    transform: translate(6.25vw, -50%);
    width: 1.14583vw;
    height: 1.04167vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module1 {
    padding: 5vw 0;
    background-color: #ffffff;
    text-align: center;
  }

  .module1 .module1-br {
    display: none;
  }

  .module1 .title {
    -webkit-perspective: 27.34375vw;
    perspective: 27.34375vw;
  }

  .module1 .title p {
    font-size: 2.34375vw;
    font-weight: 400;
    line-height: 3.51563vw;
    letter-spacing: -0.02734vw;
    -webkit-transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: opacity 1s linear, -webkit-transform 0.5s;
    transition: transform 0.5s, opacity 1s linear;
    transition: transform 0.5s, opacity 1s linear, -webkit-transform 0.5s;
    -webkit-transform: translate3d(0, 0.97656vw, -7.03125vw);
    transform: translate3d(0, 0.97656vw, -7.03125vw);
    opacity: 0;
  }

  .module1 .title.on {
    -webkit-perspective: 27.34375vw;
    perspective: 27.34375vw;
  }

  .module1 .title.on p {
    -webkit-transform: translate3d(0, 0vw, 0vw);
    transform: translate3d(0, 0vw, 0vw);
    opacity: 1;
  }

  .module1 .feature-list {
    position: relative;
    width: 51.25vw;
    height: 17.10938vw;
    margin: 2.46094vw auto 0;
  }

  .module1 .feature-list .feature-item {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    -webkit-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translateY(3.51563vw);
    transform: translateY(3.51563vw);
  }

  .module1 .feature-list .feature-item .feature-name {
    position: absolute;
    bottom: 1.40625vw;
    left: 50%;
    width: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.78125vw;
    line-height: 1.01563vw;
    letter-spacing: -0.00391vw;
  }

  .module1 .feature-list .feature-item1 {
    top: 0;
    left: 0;
    width: 12.22656vw;
    height: 17.10938vw;
  }

  .module1 .feature-list .feature-item2 {
    top: 0;
    left: 13.00781vw;
    width: 12.22656vw;
    height: 17.10938vw;
  }

  .module1 .feature-list .feature-item3 {
    top: 0vw;
    left: 26.01563vw;
    width: 12.22656vw;
    height: 8.16406vw;
  }

  .module1 .feature-list .feature-item4 {
    bottom: 0;
    left: 26.01563vw;
    width: 12.22656vw;
    height: 8.20313vw;
    -webkit-transform: translateY(4.6875vw);
    transform: translateY(4.6875vw);
  }

  .module1 .feature-list .feature-item5 {
    top: 0;
    right: 0;
    width: 12.22656vw;
    height: 8.20313vw;
  }

  .module1 .feature-list .feature-item6 {
    bottom: 0;
    right: 0;
    width: 12.22656vw;
    height: 8.20313vw;
    -webkit-transform: translateY(4.6875vw);
    transform: translateY(4.6875vw);
  }

  .module1 .feature-list.on {
    position: relative;
    width: 51.25vw;
    height: 17.10938vw;
    margin: 2.46094vw auto 0;
  }

  .module1 .feature-list.on .feature-item {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  .module1 .feature-list.on .feature-item1 {
    top: 0;
    left: 0;
    width: 12.22656vw;
    height: 17.10938vw;
  }

  .module1 .feature-list.on .feature-item2 {
    top: 0;
    left: 13.00781vw;
    width: 12.22656vw;
    height: 17.10938vw;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
  }

  .module1 .feature-list.on .feature-item3 {
    top: 0vw;
    left: 26.01563vw;
    width: 12.22656vw;
    height: 8.16406vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item4 {
    bottom: 0;
    left: 26.01563vw;
    width: 12.22656vw;
    height: 8.20313vw;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
  }

  .module1 .feature-list.on .feature-item5 {
    top: 0;
    right: 0;
    width: 12.22656vw;
    height: 8.20313vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-list.on .feature-item6 {
    bottom: 0;
    right: 0;
    width: 12.22656vw;
    height: 8.20313vw;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s;
  }

  .module1 .feature-arrow-box {
    position: absolute;
    bottom: 0.78125vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0.50781vw;
    height: 0.23438vw;
  }

  .module1 .feature-arrow-box .feature-arrow {
    width: 100%;
    height: 100%;
  }

  .module1 .btn-buy-new {
    position: relative;
    display: block;
    margin: 3.125vw auto 0;
    width: 7.03125vw;
    height: 1.875vw;
    padding-right: 1.17188vw;
    font-family: 'OPPOSans-Medium';
    font-size: 0.625vw;
    line-height: 1.75781vw;
    color: #fff;
    background: #2ec84d;
    box-sizing: border-box;
  }

  .module1 .btn-buy-new .icon-cart {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(4.6875vw, -50%);
    transform: translate(4.6875vw, -50%);
    width: 0.85938vw;
    height: 0.78125vw;
  }
}

.module2 {
  background: #fff;
}

@media only screen and (max-width: 1023px) {
  .module2 .module2-bg {
    height: 219.44444vw;
  }

  .module2 .module-inner {
    padding-top: 22.22222vw;
  }

  .module2 .module-inner .base-desc {
    width: 88.88889vw;
    margin: 5.55556vw auto 0;
  }

  .module2 .module-inner .base-subtitle {
    letter-spacing: -0.01rem;
  }

  .module2 .module-inner .introduce .base-title {
    color: #fff;
  }

  .module2 .module-inner .introduce .base-subtitle {
    color: #fff;
    opacity: 0.6;
  }

  .module2 .module-inner .introduce .base-desc {
    color: #fff;
  }

  .module2 .module-inner .charge-battery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 56.94444vw;
    height: 35.55556vw;
    margin: 8.75vw 0 0 0;
    color: #fff;
  }

  .module2 .module-inner .charge-battery .charge {
    position: relative;
    width: 22.22222vw;
    padding-top: 22.22222vw;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger {
    top: 0;
    left: 0;
    width: 9.44444vw;
    height: 19.44444vw;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on {
    top: 0;
    left: 0;
    width: 9.44444vw;
    height: 19.44444vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .battery {
    position: relative;
    width: 22.22222vw;
    height: 31.38889vw;
    padding-top: 22.22222vw;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery {
    top: 2.77778vw;
    left: 0;
    width: 8.33333vw;
    height: 13.88889vw;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on {
    top: 2.77778vw;
    left: 0;
    width: 8.33333vw;
    height: 13.88889vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .text {
    position: relative;
    line-height: 7.77778vw;
    font-size: 4.44444vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module2 .module-inner .charge-battery .text span {
    white-space: nowrap;
  }

  .module2 .module-inner .charge-battery .text :nth-child(1) {
    position: absolute;
    top: 6.94444vw;
    left: 0;
    font-size: 3.33333vw;
  }

  .module2 .module-inner .charge-battery .text :nth-child(2) {
    font-size: 0vw;
  }

  .module2 .module-inner .charge-battery .text :nth-child(3) {
    position: absolute;
    left: 0;
    font-size: 4.44444vw;
  }

  .module2 .module-inner .charge-battery picture {
    position: absolute;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module2 .module2-bg {
    height: 56.25vw;
  }

  .module2 .module-inner {
    padding-top: 6.66667vw;
  }

  .module2 .module-inner .base-desc {
    width: 60vw;
    margin: 1.38889vw auto 0;
  }

  .module2 .module-inner .introduce .base-title {
    color: #fff;
  }

  .module2 .module-inner .introduce .base-subtitle {
    color: #fff;
    opacity: 0.6;
  }

  .module2 .module-inner .introduce .base-desc {
    color: #fff;
  }

  .module2 .module-inner .charge-battery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 42.70833vw;
    height: 7.84722vw;
    margin: 2.08333vw auto 0;
    color: #fff;
  }

  .module2 .module-inner .charge-battery .charge {
    position: relative;
    width: 20.13889vw;
    height: 7.56944vw;
    padding-left: 5.69444vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 3.05556vw;
    height: 6.18056vw;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    width: 3.05556vw;
    height: 6.18056vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .battery {
    position: relative;
    width: 19.30556vw;
    height: 7.84722vw;
    padding-left: 5vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2.84722vw;
    height: 4.86111vw;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2.84722vw;
    height: 4.86111vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .text {
    line-height: 7.84722vw;
    font-size: 1.38889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module2 .module-inner .charge-battery picture {
    margin-right: 1.73611vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module2 .module2-bg {
    height: 56.25vw;
  }

  .module2 .module-inner {
    padding-top: 6.66667vw;
  }

  .module2 .module-inner .base-desc {
    width: 45vw;
    margin: 1.04167vw auto 0;
  }

  .module2 .module-inner .introduce .base-title {
    color: #fff;
  }

  .module2 .module-inner .introduce .base-subtitle {
    color: #fff;
    opacity: 0.6;
  }

  .module2 .module-inner .introduce .base-desc {
    color: #fff;
  }

  .module2 .module-inner .charge-battery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 32.03125vw;
    height: 5.88542vw;
    margin: 2.5vw auto 0;
    color: #fff;
  }

  .module2 .module-inner .charge-battery .charge {
    position: relative;
    width: 15.10417vw;
    height: 5.67708vw;
    padding-left: 4.27083vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger {
    position: absolute;
    left: 0;
    width: 2.86458vw;
    height: 5.88542vw;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on {
    position: absolute;
    left: 0;
    width: 2.86458vw;
    height: 5.88542vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .battery {
    position: relative;
    width: 14.47917vw;
    height: 5.88542vw;
    padding-left: 3.75vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2.39583vw;
    height: 4.0625vw;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 2.39583vw;
    height: 4.0625vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .text {
    line-height: 5.88542vw;
    font-size: 1.04167vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module2 .module-inner .charge-battery picture {
    margin-right: 1.30208vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module2 .module2-bg {
    height: 50.78125vw;
  }

  .module2 .module-inner {
    padding-top: 5vw;
  }

  .module2 .module-inner .base-desc {
    width: 35.15625vw;
    margin: 0.78125vw auto 0;
  }

  .module2 .module-inner .charge-battery {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 24.02344vw;
    height: 4.41406vw;
    margin: 1.875vw auto 0;
  }

  .module2 .module-inner .charge-battery .charge {
    position: relative;
    width: 11.32813vw;
    height: 4.25781vw;
    padding-left: 3.20313vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger {
    position: absolute;
    left: 0;
    width: 2.14844vw;
    height: 4.41406vw;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on {
    position: absolute;
    left: 0;
    width: 2.14844vw;
    height: 4.41406vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .charge .icon-charger-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .battery {
    position: relative;
    width: 10.85938vw;
    height: 4.41406vw;
    padding-left: 2.8125vw;
    box-sizing: border-box;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.79688vw;
    height: 3.04688vw;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.79688vw;
    height: 3.04688vw;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
    -webkit-transition: all 2s;
    transition: all 2s;
  }

  .module2 .module-inner .charge-battery .battery .icon-battery-on.on {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }

  .module2 .module-inner .charge-battery .text {
    line-height: 4.41406vw;
    font-size: 0.78125vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module2 .module-inner .charge-battery picture {
    margin-right: 0.97656vw;
  }
}

@media only screen and (max-width: 1023px) {
  .module3 {
    height: 215vw;
  }

  .module3 .module-inner {
    height: 215vw;
  }

  .module3 .box-left {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 215vw;
    z-index: 3;
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
  }

  .module3 .box-left .base-subtitle {
    color: #9dbfda;
  }

  .module3 .box-left picture {
    width: 100%;
    height: 100%;
  }

  .module3 .box-right {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    padding-top: 22.22222vw;
    width: 100vw;
    height: 215vw;
    background-color: #fff7da;
    z-index: 1;
  }

  .module3 .phone {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 92.5vw;
    width: 12.5vw;
    z-index: 3;
  }

  .module3 .introduce {
    position: absolute;
    top: 23.61111vw;
    left: 50%;
    -webkit-transform: translate(-50%, -9.72222vw) scaleY(0.95);
    transform: translate(-50%, -9.72222vw) scaleY(0.95);
    width: 88.88889vw;
    margin: 0 auto;
    z-index: 2;
  }

  .module3 .introduce .base-title,
  .module3 .introduce .base-subtitle {
    font-size: 7.77778vw;
    line-height: 10.55556vw;
    letter-spacing: -0.05556vw;
  }

  .module3 .introduce .base-desc {
    font-size: 4.16667vw;
    line-height: 7.77778vw;
    margin-top: 5.55556vw;
  }

  .module3 .popup-introduce {
    display: none;
  }

  .module3 .phone-introduce {
    margin-top: 2.22222vw;
  }

  .module3 .box-left .introduce .base-title,
  .module3 .box-left .introduce .base-desc {
    color: #fff;
  }

  .module3 .box-left .introduce .base-subtitle {
    color: #dfc59a;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module3 {
    height: 56.25vw;
  }

  .module3 .module-inner {
    height: 56.25vw;
  }

  .module3 .box {
    width: 50vw;
  }

  .module3 .box-left {
    position: absolute;
    right: -50%;
    margin-right: 100%;
    width: 66.66667vw;
    height: 70.83333vw;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    z-index: 3;
  }

  .module3 .box-left picture {
    width: 100%;
    height: 100%;
  }

  .module3 .box-left .introduce {
    display: none;
  }

  .module3 .box-right {
    position: absolute;
    left: 50%;
    margin-left: -66.66667vw;
    width: 133.33333vw;
    height: 70.83333vw;
    z-index: 2;
    background-color: #fff7da;
  }

  .module3 .phone {
    position: absolute;
    top: 14.93056vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 80.34722vw;
    height: 3.36806vw;
  }

  .module3 .phone-introduce {
    position: absolute;
    top: 25.34722vw;
    left: 29.16667vw;
    z-index: 4;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.6s;
    transition: opacity 0.3s, -webkit-transform 0.6s;
    transition: opacity 0.3s, transform 0.6s;
    transition: opacity 0.3s, transform 0.6s, -webkit-transform 0.6s;
  }

  .module3 .phone-introduce .base-title,
  .module3 .phone-introduce .base-subtitle {
    width: 52.08333vw;
    font-size: 2.91667vw;
    font-weight: 400;
    line-height: 4.44444vw;
    letter-spacing: -0.01389vw;
    text-align: left;
  }

  .module3 .phone-introduce .base-desc {
    width: 33.68056vw;
    font-size: 1.11111vw;
    font-weight: 400;
    line-height: 1.94444vw;
    text-align: left;
  }

  .module3 .phone-introduce.on {
    opacity: 0;
    -webkit-transform: translateX(52.08333vw);
    transform: translateX(52.08333vw);
  }

  .module3 .popup-introduce {
    background-color: #fff7da;
    position: absolute;
    top: 25.34722vw;
    left: -4.16667vw;
    width: 33.68056vw;
    height: 19.375vw;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    z-index: 2;
    opacity: 0;
  }

  .module3 .popup-introduce .base-title,
  .module3 .popup-introduce .base-subtitle {
    font-size: 2.91667vw;
    font-weight: 400;
    line-height: 4.44444vw;
    letter-spacing: -0.01389vw;
    text-align: left;
  }

  .module3 .popup-introduce .base-desc {
    width: 33.68056vw;
    font-size: 1.11111vw;
    font-weight: 400;
    line-height: 1.94444vw;
    text-align: left;
  }

  .module3 .popup-introduce.on {
    opacity: 1;
    -webkit-transform: translateX(calc(100vw / 1440 * 810));
    transform: translateX(calc(100vw / 1440 * 810));
  }
}

@media only screen and (min-width: 1600px) {
  .module3 {
    height: 53.125vw;
  }

  .module3 .module-inner {
    height: 53.125vw;
  }

  .module3 .box {
    width: 50vw;
  }

  .module3 .box-left {
    position: absolute;
    right: -50%;
    margin-right: 100%;
    width: 50vw;
    height: 53.125vw;
    background-color: skyblue;
    z-index: 3;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }

  .module3 .box-left picture {
    width: 100%;
    height: 100%;
  }

  .module3 .box-left .introduce {
    display: none;
  }

  .module3 .box-right {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    padding-top: 25vw;
    width: 100vw;
    height: 53.125vw;
    background-color: #fff7da;
    z-index: 2;
  }

  .module3 .phone {
    position: absolute;
    top: 14.84375vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 83.4375vw;
    height: 5.05208vw;
  }

  .module3 .phone-introduce {
    position: absolute;
    top: 24.89583vw;
    left: 25.52083vw;
    z-index: 4;
    -webkit-transition: opacity 0.325s, -webkit-transform 0.6s;
    transition: opacity 0.325s, -webkit-transform 0.6s;
    transition: opacity 0.325s, transform 0.6s;
    transition: opacity 0.325s, transform 0.6s, -webkit-transform 0.6s;
  }

  .module3 .phone-introduce .base-title,
  .module3 .phone-introduce .base-subtitle {
    width: 39.0625vw;
    font-size: 2.1875vw;
    font-weight: 400;
    line-height: 3.33333vw;
    letter-spacing: -0.01042vw;
    text-align: left;
  }

  .module3 .phone-introduce .base-desc {
    width: 25.26042vw;
    font-size: 0.83333vw;
    font-weight: 400;
    line-height: 1.45833vw;
    text-align: left;
  }

  .module3 .phone-introduce.on {
    opacity: 0;
    -webkit-transform: translateX(calc(100vw / 1920 * 700));
    transform: translateX(calc(100vw / 1920 * 700));
  }

  .module3 .popup-introduce {
    position: absolute;
    top: 24.89583vw;
    left: 7.29167vw;
    width: 25.26042vw;
    height: 14.53125vw;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 2;
    opacity: 0;
  }

  .module3 .popup-introduce .base-title,
  .module3 .popup-introduce .base-subtitle {
    font-size: 2.1875vw;
    font-weight: 400;
    line-height: 3.33333vw;
    letter-spacing: -0.01042vw;
    text-align: left;
  }

  .module3 .popup-introduce .base-desc {
    width: 25.26042vw;
    font-size: 0.83333vw;
    font-weight: 400;
    line-height: 1.45833vw;
    text-align: left;
  }

  .module3 .popup-introduce.on {
    opacity: 1;
    -webkit-transform: translateX(calc(100vw / 1920 * 590));
    transform: translateX(calc(100vw / 1920 * 590));
  }
}

@media only screen and (min-width: 1921px) {
  .module3 {
    height: 50.78125vw;
  }

  .module3 .module-inner {
    height: 50.78125vw;
  }

  .module3 .box {
    width: 50vw;
    height: 100%;
  }

  .module3 .box-left {
    position: absolute;
    right: -50%;
    margin-right: 100%;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    z-index: 3;
  }

  .module3 .box-left picture {
    width: 100%;
    height: 100%;
  }

  .module3 .box-left .introduce {
    display: none;
  }

  .module3 .box-right {
    position: absolute;
    left: 50%;
    margin-left: -50vw;
    padding-top: 18.08594vw;
    width: 100vw;
    background-color: #fff7da;
    z-index: 2;
  }

  .module3 .phone {
    position: absolute;
    top: 16.21094vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 62.57813vw;
    height: 3.78906vw;
  }

  .module3 .phone-introduce {
    position: absolute;
    top: 23.78906vw;
    left: 19.33594vw;
    z-index: 4;
    -webkit-transition: opacity 0.4s, -webkit-transform 0.7s;
    transition: opacity 0.4s, -webkit-transform 0.7s;
    transition: opacity 0.4s, transform 0.7s;
    transition: opacity 0.4s, transform 0.7s, -webkit-transform 0.7s;
  }

  .module3 .phone-introduce .base-title,
  .module3 .phone-introduce .base-subtitle {
    width: 29.29688vw;
    font-size: 1.64063vw;
    font-weight: 400;
    line-height: 2.5vw;
    letter-spacing: -0.00781vw;
    text-align: left;
  }

  .module3 .phone-introduce .base-desc {
    width: 18.94531vw;
    font-size: 0.625vw;
    font-weight: 400;
    line-height: 1.09375vw;
    text-align: left;
  }

  .module3 .phone-introduce.on {
    opacity: 0;
    -webkit-transform: translateX(calc(100vw / 2560 * 920));
    transform: translateX(calc(100vw / 2560 * 920));
  }

  .module3 .popup-introduce {
    position: absolute;
    top: 23.78906vw;
    left: -8.98438vw;
    width: 18.94531vw;
    height: 10.89844vw;
    -webkit-transition: all 0.68s;
    transition: all 0.68s;
    z-index: 2;
    opacity: 0;
  }

  .module3 .popup-introduce .base-title,
  .module3 .popup-introduce .base-subtitle {
    font-size: 1.64063vw;
    font-weight: 400;
    line-height: 2.5vw;
    letter-spacing: -0.00781vw;
    text-align: left;
  }

  .module3 .popup-introduce .base-desc {
    width: 18.94531vw;
    font-size: 0.625vw;
    font-weight: 400;
    line-height: 1.09375vw;
    text-align: left;
  }

  .module3 .popup-introduce.on {
    opacity: 1;
    -webkit-transform: translateX(calc(100vw / 2560 * 1120));
    transform: translateX(calc(100vw / 2560 * 1120));
  }
}

.module4 {
  background-color: #ffffff;
}

@media only screen and (max-width: 1023px) {
  .module4 {
    height: 169.44444vw;
  }

  .module4 .color-box {
    position: absolute;
    top: 22.22222vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 104.44444vw;
    margin: 0 auto;
  }

  .module4 .color-box .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 76.38889vw;
    height: 76.38889vw;
    background-color: #efeeeb;
    border-radius: 50%;
  }

  .module4 .color-box .color {
    width: 43.05556vw;
  }

  .module4 .color-box .color picture {
    display: inline-block;
    width: 5.55556vw;
    height: 5.55556vw;
    margin-right: 0.83333vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-name {
    font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    display: inline-block;
    font-size: 4.44444vw;
    line-height: 8.33333vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-desc {
    padding-left: 8.05556vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 5.55556vw;
    letter-spacing: -0.04722vw;
    text-align: left;
  }

  .module4 .color-box .color-black {
    position: absolute;
    bottom: 0;
    left: 6.94444vw;
  }

  .module4 .color-box .color-gold {
    position: absolute;
    top: 0;
    right: 6.94444vw;
  }

  .module4 .color-box .color-gold .color-name {
    color: #deaf4c;
  }

  .module4 .color-box .phone,
  .module4 .color-box .p-shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .module4 .color-box .p-shadow-b {
    opacity: 0.5;
  }

  .module4 .color-box .p-shadow-g {
    opacity: 0.65;
  }

  .module4 .btn-box {
    position: absolute;
    bottom: 22.22222vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 87.22222vw;
    margin: 0 auto;
  }

  .module4 .btn-box > a {
    position: relative;
    width: 42.22222vw;
    height: 8.88889vw;
    text-align: center;
    line-height: 8.88889vw;
    font-size: 3.33333vw;
    color: #ffffff;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module4 .btn-box .btn-buy {
    padding-right: 9.72222vw;
    background-color: #2ec84d;
  }

  .module4 .btn-box .btn-buy picture {
    position: absolute;
    right: 9.16667vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4.44444vw;
    height: 4.02778vw;
  }

  .module4 .btn-box .btn-phone-video {
    padding-right: 5.55556vw;
    background-color: #000000;
  }

  .module4 .btn-box .btn-phone-video picture {
    position: absolute;
    right: 2.77778vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 4.44444vw;
    height: 4.44444vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module4 {
    height: 69.44444vw;
  }

  .module4 .color-box {
    position: relative;
    position: relative;
    width: 91.11111vw;
    height: 52.15278vw;
    margin: 5.06944vw auto 0;
  }

  .module4 .color-box .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -18.75vw;
    margin-top: -18.75vw;
    width: 37.5vw;
    height: 37.5vw;
    background-color: #efeeeb;
    border-radius: 50%;
  }

  .module4 .color-box .color {
    width: 27.08333vw;
  }

  .module4 .color-box .color picture {
    display: inline-block;
    width: 2.63889vw;
    height: 2.63889vw;
    margin-right: 0.625vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-name {
    font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    display: inline-block;
    font-size: 2.91667vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-desc {
    margin-top: 1.04167vw;
    padding-left: 1.38889vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.11111vw;
    line-height: 1.94444vw;
    letter-spacing: -0.00648vw;
    text-align: left;
    padding-left: 3.81944vw;
  }

  .module4 .color-box .color-black {
    position: absolute;
    bottom: 6.59722vw;
    left: 1.38889vw;
  }

  .module4 .color-box .color-gold {
    position: absolute;
    top: 10.06944vw;
    right: 1.38889vw;
  }

  .module4 .color-box .color-gold .color-name {
    color: #deaf4c;
  }

  .module4 .color-box .phone,
  .module4 .color-box .p-shadow {
    position: absolute;
    width: 91.11111vw;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module4 .color-box .p-shadow-b {
    opacity: 0.5;
  }

  .module4 .color-box .p-shadow-g {
    opacity: 0.8;
  }

  .module4 .btn-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 30.13889vw;
    margin: 0 auto;
  }

  .module4 .btn-box > a {
    position: relative;
    width: 14.16667vw;
    height: 3.33333vw;
    text-align: center;
    line-height: 3.33333vw;
    color: #ffffff;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module4 .btn-box .btn-buy {
    padding-right: 1.38889vw;
    background-color: #2ec84d;
  }

  .module4 .btn-box .btn-buy picture {
    position: absolute;
    right: 2.77778vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.52778vw;
    height: 1.38889vw;
  }

  .module4 .btn-box .btn-phone-video {
    padding-right: 1.38889vw;
    background-color: #000000;
  }

  .module4 .btn-box .btn-phone-video picture {
    position: absolute;
    right: 1.11111vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.38889vw;
    height: 1.38889vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module4 {
    height: 56.25vw;
  }

  .module4 .color-box {
    position: relative;
    position: relative;
    width: 68.33333vw;
    height: 45.83333vw;
    margin: 3.22917vw auto 0;
  }

  .module4 .color-box .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -16.40625vw;
    margin-top: -16.40625vw;
    width: 32.8125vw;
    height: 32.8125vw;
    background-color: #efeeeb;
    border-radius: 50%;
  }

  .module4 .color-box .color {
    width: 19.79167vw;
  }

  .module4 .color-box .color picture {
    display: inline-block;
    width: 1.97917vw;
    height: 1.97917vw;
    margin-right: 0.98958vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-name {
    display: inline-block;
    font-size: 2.1875vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    vertical-align: middle;
  }

  .module4 .color-box .color .color-desc {
    margin-top: 0.78125vw;
    padding-left: 3.38542vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.83333vw;
    line-height: 1.45833vw;
    letter-spacing: -0.00486vw;
    text-align: left;
  }

  .module4 .color-box .color-black {
    position: absolute;
    bottom: 4.94792vw;
    left: 0;
  }

  .module4 .color-box .color-gold {
    position: absolute;
    top: 7.55208vw;
    right: 0;
  }

  .module4 .color-box .color-gold .color-name {
    color: #deaf4c;
  }

  .module4 .color-box .phone,
  .module4 .color-box .p-shadow {
    position: absolute;
    width: 100vw;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module4 .color-box .p-shadow-b {
    opacity: 0.5;
  }

  .module4 .color-box .p-shadow-g {
    opacity: 0.8;
  }

  .module4 .btn-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 22.60417vw;
    margin: 0 auto;
  }

  .module4 .btn-box > a {
    position: relative;
    width: 10.625vw;
    height: 2.5vw;
    text-align: center;
    line-height: 2.5vw;
    color: #ffffff;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module4 .btn-box .btn-buy {
    padding-right: 1.04167vw;
    background-color: #2ec84d;
  }

  .module4 .btn-box .btn-buy picture {
    position: absolute;
    right: 2.08333vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.14583vw;
    height: 1.04167vw;
  }

  .module4 .btn-box .btn-phone-video {
    padding-right: 1.04167vw;
    background-color: #000000;
  }

  .module4 .btn-box .btn-phone-video picture {
    position: absolute;
    right: 0.83333vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1.04167vw;
    height: 1.04167vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module4 {
    height: 42.1875vw;
  }

  .module4 .color-box {
    position: relative;
    position: relative;
    width: 51.25vw;
    height: 34.375vw;
    margin: 2.42188vw auto 0;
  }

  .module4 .color-box .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.30469vw;
    margin-top: -12.30469vw;
    width: 24.60938vw;
    height: 24.60938vw;
    background-color: #efeeeb;
    border-radius: 50%;
  }

  .module4 .color-box .color {
    width: 14.84375vw;
  }

  .module4 .color-box .color picture {
    display: inline-block;
    width: 1.48438vw;
    height: 1.48438vw;
    margin-right: 0.74219vw;
    vertical-align: middle;
  }

  .module4 .color-box .color .color-name {
    display: inline-block;
    font-size: 1.64063vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    vertical-align: middle;
  }

  .module4 .color-box .color .color-desc {
    margin-top: 0.58594vw;
    padding-left: 2.53906vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.625vw;
    line-height: 1.09375vw;
    letter-spacing: -0.00365vw;
    text-align: left;
  }

  .module4 .color-box .color-black {
    position: absolute;
    bottom: 3.71094vw;
    left: 0;
  }

  .module4 .color-box .color-gold {
    position: absolute;
    top: 5.66406vw;
    right: 0;
  }

  .module4 .color-box .color-gold .color-name {
    color: #deaf4c;
  }

  .module4 .color-box .phone,
  .module4 .color-box .p-shadow {
    position: absolute;
    width: 75vw;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module4 .btn-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 16.95313vw;
    margin: 0 auto;
  }

  .module4 .btn-box > a {
    position: relative;
    width: 7.96875vw;
    height: 1.875vw;
    text-align: center;
    line-height: 1.875vw;
    color: #ffffff;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module4 .btn-box .btn-buy {
    padding-right: 0.78125vw;
    background-color: #2ec84d;
  }

  .module4 .btn-box .btn-buy picture {
    position: absolute;
    right: 1.5625vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.85938vw;
    height: 0.78125vw;
  }

  .module4 .btn-box .btn-phone-video {
    padding-right: 0.78125vw;
    background-color: #000000;
  }

  .module4 .btn-box .btn-phone-video picture {
    position: absolute;
    right: 0.625vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0.78125vw;
    height: 0.78125vw;
  }
}

.module5 {
  background: #fff;
}

@media only screen and (max-width: 1023px) {
  .module5 .base-desc {
    width: 88.88889vw;
    margin: 5.27778vw auto 0;
    font-size: 4.44444vw;
    line-height: 7.77778vw;
  }

  .module5 .remark {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 5.55556vw;
    color: #000;
    margin-top: 5.55556vw;
    text-align: left;
  }

  .module5 .memory-box {
    position: relative;
    width: 88.88889vw;
    height: 88.88889vw;
    margin: 13.33333vw auto 0;
  }

  .module5 .progress-box {
    position: absolute;
    bottom: -28.88889vw;
    left: 29.16667vw;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    width: 30.83333vw;
    height: 89.16667vw;
  }

  .module5 .progress-box .progress {
    position: absolute;
    top: 13.33333vw;
    left: 20.83333vw;
    width: 1.66667vw;
    height: 66.66667vw;
    border-radius: 0.83333vw;
    background: #eaf8ff;
  }

  .module5 .progress-box .progress .progress-bg {
    position: absolute;
    bottom: 0;
    background-color: #248fff;
    width: 100%;
    border-radius: 0.83333vw;
  }

  .module5 .progress-box .progress .dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -2.77778vw;
    width: 5.55556vw;
    height: 5.55556vw;
    border-radius: 6.38889vw;
    border: solid 1.38889vw #248fff;
    background: #eaf8ff;
  }

  .module5 .progress-box .progress .num {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #8999ad;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 5.55556vw;
  }

  .module5 .progress-box .progress .num.on {
    color: #248fff;
  }

  .module5 .progress-box .progress .num1 {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .module5 .progress-box .progress .num2 {
    position: absolute;
    top: 29.16667vw;
    right: -0;
  }

  .module5 .progress-box .progress .num3 {
    position: absolute;
    top: 0;
    right: -0;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module5 .base-desc {
    width: 60.41667vw;
    margin: 1.38889vw auto 0;
  }

  .module5 .remark {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.83333vw;
    line-height: 1.38889vw;
    color: #000;
    margin-top: 2.22222vw;
    text-align: center;
  }

  .module5 .memory-box {
    position: relative;
    width: 91.11111vw;
    height: 42.36111vw;
    margin: 5.55556vw auto 0;
  }

  .module5 .memory-box .progress-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 21.11111vw;
    height: 42.15278vw;
    background: #d5e7ff;
  }

  .module5 .memory-box .progress-box .progress {
    position: absolute;
    top: 4.72222vw;
    left: 6.59722vw;
    width: 0.83333vw;
    height: 33.33333vw;
    border-radius: 0.41667vw;
    background: #eaf8ff;
  }

  .module5 .memory-box .progress-box .progress .progress-bg {
    position: absolute;
    bottom: 0;
    background-color: #248fff;
    width: 100%;
    border-radius: 0.41667vw;
  }

  .module5 .memory-box .progress-box .progress .dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.45833vw;
    width: 2.91667vw;
    height: 2.91667vw;
    border-radius: 1.59722vw;
    border: solid 0.34722vw #248fff;
    background: #eaf8ff;
  }

  .module5 .memory-box .progress-box .progress .num {
    color: #8999ad;
    font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.38889vw;
    line-height: 1.94444vw;
  }

  .module5 .memory-box .progress-box .progress .num.on {
    color: #248fff;
  }

  .module5 .memory-box .progress-box .progress .num1 {
    position: absolute;
    bottom: 0;
    right: -7.5vw;
  }

  .module5 .memory-box .progress-box .progress .num2 {
    position: absolute;
    top: 15.69444vw;
    right: -7.5vw;
  }

  .module5 .memory-box .progress-box .progress .num3 {
    position: absolute;
    top: 0;
    right: -7.5vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module5 .base-desc {
    width: 47.65625vw;
    margin: 0.98958vw auto 0;
    font-size: 0.83333vw;
  }

  .module5 .remark {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.625vw;
    line-height: 1.04167vw;
    color: #000;
    margin-top: 1.66667vw;
    text-align: center;
  }

  .module5 .memory-box {
    position: relative;
    width: 68.33333vw;
    height: 31.77083vw;
    margin: 4.16667vw auto 0;
  }

  .module5 .memory-box .progress-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 15.83333vw;
    height: 31.61458vw;
    background: #d5e7ff;
  }

  .module5 .memory-box .progress-box .progress {
    position: absolute;
    top: 3.54167vw;
    left: 4.94792vw;
    width: 0.625vw;
    height: 25vw;
    border-radius: 0.3125vw;
    background: #dbeafd;
  }

  .module5 .memory-box .progress-box .progress .progress-bg {
    position: absolute;
    bottom: 0;
    background-color: #248fff;
    width: 100%;
    border-radius: 0.3125vw;
  }

  .module5 .memory-box .progress-box .progress .dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1.09375vw;
    width: 2.1875vw;
    height: 2.1875vw;
    border-radius: 1.19792vw;
    border: solid 0.26042vw #248fff;
    background: #dbeafd;
  }

  .module5 .memory-box .progress-box .progress .num {
    color: #8999ad;
    font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.04167vw;
    line-height: 1.45833vw;
  }

  .module5 .memory-box .progress-box .progress .num.on {
    color: #248fff;
  }

  .module5 .memory-box .progress-box .progress .num1 {
    position: absolute;
    bottom: 0;
    right: -5.625vw;
  }

  .module5 .memory-box .progress-box .progress .num2 {
    position: absolute;
    top: 11.77083vw;
    right: -5.625vw;
  }

  .module5 .memory-box .progress-box .progress .num3 {
    position: absolute;
    top: 0;
    right: -5.625vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module5 .base-desc {
    width: 34.76563vw;
    margin: 0.74219vw auto 0;
    font-size: 0.625vw;
  }

  .module5 .remark {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.46875vw;
    line-height: 0.78125vw;
    color: #000;
    margin-top: 1.25vw;
    text-align: center;
  }

  .module5 .memory-box {
    position: relative;
    width: 51.25vw;
    height: 23.82813vw;
    margin: 3.125vw auto 0;
  }

  .module5 .memory-box .progress-box {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 11.875vw;
    height: 23.71094vw;
    background: #d5e7ff;
  }

  .module5 .memory-box .progress-box .progress {
    position: absolute;
    top: 2.65625vw;
    left: 3.71094vw;
    width: 0.46875vw;
    height: 18.75vw;
    border-radius: 0.23438vw;
    background: #dbeafd;
  }

  .module5 .memory-box .progress-box .progress .progress-bg {
    position: absolute;
    bottom: 0;
    background-color: #248fff;
    width: 100%;
    border-radius: 0.23438vw;
  }

  .module5 .memory-box .progress-box .progress .dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -0.82031vw;
    width: 1.64063vw;
    height: 1.64063vw;
    border-radius: 0.89844vw;
    border: solid 0.19531vw #248fff;
    background: #dbeafd;
  }

  .module5 .memory-box .progress-box .progress .num {
    color: #8999ad;
    font-family: 'OPPOSans-Bold', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.78125vw;
    line-height: 1.09375vw;
  }

  .module5 .memory-box .progress-box .progress .num.on {
    color: #248fff;
  }

  .module5 .memory-box .progress-box .progress .num1 {
    position: absolute;
    bottom: 0;
    right: -4.21875vw;
  }

  .module5 .memory-box .progress-box .progress .num2 {
    position: absolute;
    top: 8.82813vw;
    right: -4.21875vw;
  }

  .module5 .memory-box .progress-box .progress .num3 {
    position: absolute;
    top: 0;
    right: -4.21875vw;
  }
}

.module6 {
  background: #fff;
}

@media only screen and (max-width: 1023px) {
  .module6 {
    padding: 22.22222vw 0;
  }

  .module6 .base-subtitle {
    letter-spacing: -0.19444vw;
  }

  .module6 .screen-shadow {
    position: absolute;
    top: -5.55556vw;
    left: 50%;
    width: 100vw;
    height: 81.38889vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.65;
    pointer-events: none;
  }

  .module6 .screen-box {
    position: relative;
    width: 88.88889vw;
    height: 41.25vw;
    margin: 13.33333vw auto 0;
  }

  .module6 .screen-box .screen-shadow {
    position: absolute;
  }

  .module6 .param-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 86.66667vw;
    height: 64.16667vw;
    margin: 8.88889vw auto 0;
  }

  .module6 .param-box .param-item {
    position: absolute;
    width: 43.33333vw;
    height: 18.05556vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item .data {
    font-size: 6.66667vw;
    line-height: 12.22222vw;
  }

  .module6 .param-box .param-item .name {
    margin-top: -1.94444vw;
    font-size: 3.05556vw;
    line-height: 6.66667vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item:nth-child(1) {
    top: 0;
    left: 0;
  }

  .module6 .param-box .param-item:nth-child(2) {
    top: 0;
    right: 0;
  }

  .module6 .param-box .param-item:nth-child(3) {
    top: 23.05556vw;
    right: 0;
  }

  .module6 .param-box .param-item:nth-child(4) {
    top: 23.05556vw;
    left: 0;
  }

  .module6 .param-box .param-item:nth-child(5) {
    bottom: 0;
    left: 0;
  }

  .module6 .param-box .param-item:nth-child(6) {
    bottom: 0;
    right: 0;
  }

  .module6 .param-box .param-item:nth-child(2),
  .module6 .param-box .param-item:nth-child(3),
  .module6 .param-box .param-item:nth-child(6) {
    padding-left: 7.5vw;
  }

  .module6 .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 88.61111vw;
    height: 41.38889vw;
    z-index: 2;
    pointer-events: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module6 {
    padding: 8.88889vw 0;
    height: 84.375vw;
  }

  .module6 .base-desc {
    width: 65.625vw;
    margin: 1.31944vw auto 0;
  }

  .module6 .screen-box {
    position: relative;
    width: 60.13889vw;
    height: 34.16667vw;
    margin: 5.55556vw auto 0;
  }

  .module6 .screen-box .screen-shadow {
    position: absolute;
    top: 6.18056vw;
    left: 50%;
    width: 89.30556vw;
    height: 37.70833vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
  }

  .module6 .screen-box .screen {
    position: relative;
    z-index: 2;
  }

  .module6 .screen-box .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 59.79167vw;
    height: 27.84722vw;
    z-index: 2;
    pointer-events: none;
  }

  .module6 .param-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 49.86111vw;
    height: 12.29167vw;
    margin: -2.77778vw auto 0;
    z-index: 2;
  }

  .module6 .param-box .param-item {
    width: 9.72222vw;
    height: 5.34722vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item .data {
    font-size: 2.63889vw;
    line-height: 3.33333vw;
  }

  .module6 .param-box .param-item .name {
    margin-top: 0.41667vw;
    font-size: 0.97222vw;
    line-height: 1.52778vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item:nth-child(1),
  .module6 .param-box .param-item:nth-child(4) {
    width: 22.56944vw;
  }

  .module6 .param-box .param-item:nth-child(2),
  .module6 .param-box .param-item:nth-child(5) {
    width: 16.31944vw;
  }

  .module6 .param-box .param-item:nth-child(3),
  .module6 .param-box .param-item:nth-child(6) {
    width: 10.76389vw;
  }

  .module6 .param-box .param-item:nth-child(n + 4) {
    margin-top: 2.22222vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module6 {
    padding: 6.66667vw 0;
  }

  .module6 .module-inner {
    -webkit-perspective: 36.45833vw;
    perspective: 36.45833vw;
  }

  .module6 .base-desc {
    width: 46.875vw;
    margin: 0.98958vw auto 0;
  }

  .module6 .screen-box {
    position: relative;
    width: 45.10417vw;
    height: 25.625vw;
    margin: 4.16667vw auto 0;
  }

  .module6 .screen-box .screen-shadow {
    position: absolute;
    top: 4.63542vw;
    left: 50%;
    width: 66.97917vw;
    height: 28.28125vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
  }

  .module6 .screen-box .screen {
    position: relative;
    z-index: 2;
  }

  .module6 .screen-box .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20.88542vw;
    z-index: 2;
    pointer-events: none;
  }

  .module6 .param-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 37.39583vw;
    margin: -2.08333vw auto 0;
    z-index: 2;
  }

  .module6 .param-box .param-item {
    width: 7.29167vw;
    height: 4.01042vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item .data {
    font-size: 1.97917vw;
    line-height: 2.5vw;
  }

  .module6 .param-box .param-item .name {
    margin-top: 0.3125vw;
    font-size: 0.72917vw;
    line-height: 1.14583vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item:nth-child(1),
  .module6 .param-box .param-item:nth-child(4) {
    width: 16.92708vw;
  }

  .module6 .param-box .param-item:nth-child(2),
  .module6 .param-box .param-item:nth-child(5) {
    width: 12.23958vw;
  }

  .module6 .param-box .param-item:nth-child(3),
  .module6 .param-box .param-item:nth-child(6) {
    width: 8.07292vw;
  }

  .module6 .param-box .param-item:nth-child(n + 4) {
    margin-top: 1.66667vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module6 {
    padding: 5vw 0;
  }

  .module6 .module-inner {
    -webkit-perspective: 27.34375vw;
    perspective: 27.34375vw;
  }

  .module6 .base-desc {
    width: 36.71875vw;
    margin: 0.74219vw auto 0;
  }

  .module6 .screen-box {
    position: relative;
    width: 33.82813vw;
    height: 19.21875vw;
    margin: 3.125vw auto 0;
  }

  .module6 .screen-box .screen-shadow {
    position: absolute;
    top: 3.47656vw;
    left: 50%;
    width: 50.23438vw;
    height: 21.21094vw;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    opacity: 0.8;
  }

  .module6 .screen-box .screen {
    position: relative;
    z-index: 2;
  }

  .module6 .screen-box .light {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 15.66406vw;
    z-index: 2;
    pointer-events: none;
  }

  .module6 .param-box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    width: 28.04688vw;
    margin: -1.5625vw auto 0;
    z-index: 2;
  }

  .module6 .param-box .param-item {
    width: 5.46875vw;
    height: 3.00781vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item .data {
    font-size: 1.48438vw;
    line-height: 1.875vw;
  }

  .module6 .param-box .param-item .name {
    margin-top: 0.23438vw;
    font-size: 0.54688vw;
    line-height: 0.85938vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module6 .param-box .param-item:nth-child(1),
  .module6 .param-box .param-item:nth-child(4) {
    width: 12.69531vw;
  }

  .module6 .param-box .param-item:nth-child(2),
  .module6 .param-box .param-item:nth-child(5) {
    width: 9.17969vw;
  }

  .module6 .param-box .param-item:nth-child(3),
  .module6 .param-box .param-item:nth-child(6) {
    width: 6.05469vw;
  }

  .module6 .param-box .param-item:nth-child(n + 4) {
    margin-top: 1.25vw;
  }
}

.module7 {
  background: #fff;
}

.module7 .special-wrap {
  display: none;
}

@media only screen and (max-width: 1023px) {
  .module7 {
    padding-bottom: 22.22222vw;
  }

  .module7 .special-wrap {
    display: block;
  }

  .module7 .fingerprint {
    height: 88.88889vw;
    position: relative;
    margin-top: 13.33333vw;
  }

  .module7 .fingerprint .magnifying {
    position: absolute;
    top: 64%;
    left: 44%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 29.16667vw;
    height: 29.16667vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module7 .module-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 91.11111vw;
    height: 60.06944vw;
    padding-bottom: 8.88889vw;
    margin: 0 auto;
  }

  .module7 .base-title,
  .module7 .base-subtitle,
  .module7 .base-desc {
    text-align: left;
  }

  .module7 .base-desc {
    width: 31.11111vw;
  }

  .module7 .fingerprint {
    position: relative;
  }

  .module7 .fingerprint picture {
    width: 51.25vw;
    height: 51.25vw;
  }

  .module7 .fingerprint .magnifying {
    position: absolute;
    top: 47%;
    left: 29%;
    width: 13.88889vw;
    height: 13.88889vw;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
  .module7 .module-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 68.33333vw;
    height: 51.77083vw;
    padding-bottom: 6.66667vw;
    margin: 0 auto;
  }

  .module7 .base-title,
  .module7 .base-subtitle,
  .module7 .base-desc {
    text-align: left;
  }

  .module7 .base-desc {
    width: 23.33333vw;
  }

  .module7 .fingerprint {
    position: relative;
  }

  .module7 .fingerprint picture {
    width: 38.4375vw;
    height: 38.4375vw;
  }

  .module7 .fingerprint .magnifying {
    position: absolute;
    top: 47%;
    left: 29%;
    width: 10.41667vw;
    height: 10.41667vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module7 .module-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 51.25vw;
    height: 33.82813vw;
    padding-bottom: 5vw;
    margin: 0 auto;
  }

  .module7 .base-title,
  .module7 .base-subtitle,
  .module7 .base-desc {
    text-align: left;
  }

  .module7 .base-desc {
    width: 17.5vw;
  }

  .module7 .fingerprint {
    position: relative;
  }

  .module7 .fingerprint picture {
    width: 28.82813vw;
    height: 28.82813vw;
  }

  .module7 .fingerprint .magnifying {
    position: absolute;
    top: 47%;
    left: 29%;
    width: 7.8125vw;
    height: 7.8125vw;
  }
}

@media only screen and (max-width: 1023px) {
  .module8 {
    height: 196.66667vw;
  }

  .module8 .module8-bg {
    width: 100vw;
    height: 196.66667vw;
  }

  .module8 .module8-bg2 {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 196.66667vw;
    -webkit-clip-path: circle(85.5% at 64% 54.3%);
    clip-path: circle(85.5% at 64% 54.3%);
    z-index: 2;
  }

  .module8 .module8-bg2 .introduce {
    display: none;
    position: absolute;
    top: 22.22222vw;
    left: 5.55556vw;
    width: 88.88889vw;
    color: #fff;
  }

  .module8 .module8-bg2 .introduce .base-title {
    font-size: 7.77778vw;
    text-align: left;
  }

  .module8 .module8-bg2 .introduce .base-desc {
    text-align: left;
    margin: 5.55556vw 0 0 0;
  }

  .module8 .module-inner {
    padding-top: 22.22222vw;
  }

  .module8 .module-inner .base-desc {
    letter-spacing: -0.05556vw;
  }

  .module8 .base-title {
    letter-spacing: -0.19444vw;
  }

  .module8 .camera {
    position: absolute;
    bottom: 0;
    right: -16.66667vw;
    width: 97.5vw;
    height: 113.88889vw;
  }

  .module8 .camera-data {
    position: absolute;
    top: 85.83333vw;
    left: 0;
    width: 54.44444vw;
  }

  .module8 .data-item {
    height: 21.25vw;
    padding-top: 5.55556vw;
    border-bottom: 0.27778vw solid #999;
  }

  .module8 .data-item .num {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 6.66667vw;
    line-height: 8.33333vw;
  }

  .module8 .data-item .name {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 6.66667vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module8 {
    height: 62.5vw;
  }

  .module8 .module8-bg {
    width: 133.33333vw;
    height: 62.5vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 {
    position: absolute;
    top: 0vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 62.5vw;
    -webkit-clip-path: circle(75% at 48% 52.5%);
    clip-path: circle(75% at 48% 52.5%);
    z-index: 2;
  }

  .module8 .module8-bg2 .inner {
    position: relative;
    width: 91.11111vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 .introduce {
    position: absolute;
    top: 6.66667vw;
    left: 0vw;
    width: 38.19444vw;
    color: #fff;
  }

  .module8 .module8-bg2 .introduce .base-title {
    font-size: 2.91667vw;
    text-align: left;
  }

  .module8 .module8-bg2 .introduce .base-desc {
    width: 38.19444vw;
    text-align: left;
    margin: 1.38889vw 0 0 0;
  }

  .module8 .module-inner {
    padding-top: 6.66667vw;
  }

  .module8 .base-desc {
    width: 44.44444vw;
    margin: 1.38889vw auto 0;
  }

  .module8 .camera {
    position: absolute;
    bottom: 0vw;
    left: 37%;
    width: 48.26389vw;
    height: 38.61111vw;
  }

  .module8 .camera-data {
    position: absolute;
    top: 24.51389vw;
    left: 14.30556vw;
    width: 27.15278vw;
    height: 21.25vw;
  }

  .module8 .data-item {
    height: 8.02083vw;
    padding-top: 2.43056vw;
    border-bottom: 0.06944vw solid #999;
  }

  .module8 .data-item .num {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 2.63889vw;
    line-height: 3.33333vw;
    letter-spacing: -0.04167vw;
  }

  .module8 .data-item .name {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.97222vw;
    line-height: 1.52778vw;
    letter-spacing: -0.00694vw;
    margin-top: 0.34722vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module8 {
    height: 53.125vw;
  }

  .module8 .module8-bg {
    width: 100vw;
    height: 53.125vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 {
    position: absolute;
    top: 0vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 53.125vw;
    -webkit-clip-path: circle(75% at 50% 51.8%);
    clip-path: circle(75% at 50% 51.8%);
    z-index: 2;
  }

  .module8 .module8-bg2 .inner {
    position: relative;
    width: 68.33333vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 .introduce {
    position: absolute;
    top: 6.66667vw;
    left: 0vw;
    width: 33.85417vw;
    height: 8.69792vw;
    color: #fff;
  }

  .module8 .module8-bg2 .introduce .base-title {
    text-align: left;
  }

  .module8 .module8-bg2 .introduce .base-desc {
    width: 26.04167vw;
    text-align: left;
    margin: 1.04167vw 0 0 0;
  }

  .module8 .module-inner {
    padding-top: 6.66667vw;
  }

  .module8 .base-desc {
    width: 33.33333vw;
    margin: 1.04167vw auto 0;
  }

  .module8 .camera {
    position: absolute;
    bottom: 0vw;
    left: 39.2%;
    width: 36.19792vw;
    height: 32.1875vw;
  }

  .module8 .camera-data {
    position: absolute;
    top: 21.71875vw;
    left: 11.5625vw;
    width: 20.36458vw;
    height: 15.9375vw;
  }

  .module8 .data-item {
    height: 6.09375vw;
    padding-top: 1.82292vw;
    border-bottom: 0.05208vw solid #999;
  }

  .module8 .data-item .num {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.97917vw;
    line-height: 2.5vw;
    letter-spacing: -0.03125vw;
  }

  .module8 .data-item .name {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.72917vw;
    line-height: 1.14583vw;
    letter-spacing: -0.00521vw;
    margin-top: 0.26042vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module8 {
    height: 50.78125vw;
  }

  .module8 .module8-bg {
    width: 100vw;
    height: 50.78125vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 {
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    height: 50.78125vw;
    -webkit-clip-path: circle(75% at 51% 42.1%);
    clip-path: circle(75% at 51% 42.1%);
    z-index: 2;
  }

  .module8 .module8-bg2 .inner {
    position: relative;
    width: 51.25vw;
    margin: 0 auto;
  }

  .module8 .module8-bg2 .introduce {
    position: absolute;
    top: 5vw;
    left: 0vw;
    width: 25.39063vw;
    height: 6.52344vw;
    color: #fff;
  }

  .module8 .module8-bg2 .introduce .base-title {
    font-size: 1.64063vw;
    text-align: left;
  }

  .module8 .module8-bg2 .introduce .base-desc {
    width: 20.52734vw;
    text-align: left;
    margin: 0.78125vw 0 0 0;
  }

  .module8 .module-inner {
    padding-top: 5vw;
  }

  .module8 .base-desc {
    width: 25vw;
    margin: 0.78125vw auto 0;
  }

  .module8 .camera {
    position: absolute;
    bottom: 0;
    left: 39%;
    width: 32.38281vw;
    height: 35.50781vw;
  }

  .module8 .camera-data {
    position: absolute;
    top: 16.67969vw;
    left: 4.76563vw;
    width: 19.76563vw;
  }

  .module8 .data-item {
    height: 4.57031vw;
    padding-top: 1.36719vw;
    border-bottom: 0.03906vw solid #999;
  }

  .module8 .data-item .num {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.48438vw;
    line-height: 1.875vw;
    letter-spacing: -0.02344vw;
  }

  .module8 .data-item .name {
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.54688vw;
    line-height: 0.85938vw;
    letter-spacing: -0.00391vw;
    margin-top: 0.19531vw;
  }

  .module8 .data-item:nth-child(n + 2) {
    margin-top: 0.85938vw;
  }
}

.module9 {
  background: #fff;
}

.module9 .swiper-pagination {
  display: none;
}

.module9 .spic-item {
  opacity: 0.5;
}

.module9 .spic-item.on {
  opacity: 1;
}

.module9 .pic {
  position: relative;
}

.module9 .pic .pic-img {
  position: absolute;
  bottom: 0;
  left: 0;
}

.module9 .pic .pic-img.on {
  -webkit-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-animation: picScale 1s 1s linear;
  animation: picScale 1s 1s linear;
}

@media only screen and (max-width: 1023px) {
  .module9 .module-inner {
    padding: 22.22222vw 0;
    height: 201.11111vw;
  }

  .module9 .introduce {
    width: 88.88889vw;
    margin: 0 auto;
  }

  .module9 .introduce .base-title,
  .module9 .introduce .base-subtitle,
  .module9 .introduce .base-desc {
    text-align: left;
  }

  .module9 .introduce .base-title {
    line-height: 10vw;
    letter-spacing: -0.19444vw;
  }

  .module9 .introduce-list {
    display: none;
  }

  .module9 .small-pic {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 142.77778vw;
  }

  .module9 .small-pic .spic-item {
    width: 13.88889vw;
    height: 13.88889vw;
    margin-right: 2.22222vw;
  }

  .module9 .pic-list {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .module9 .pic-box {
    height: 100%;
  }

  .module9 .pic-box .pic-img {
    width: 88.88889vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .module9 .pic-scale {
    position: absolute;
    top: 62.22222vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 88.88889vw;
    height: 75vw;
  }

  .module9 .pic {
    width: 100vw;
    height: 145vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module9 .module-inner {
    padding: 8.88889vw 0;
    height: 69.02778vw;
  }

  .module9 .introduce {
    width: 31.59722vw;
  }

  .module9 .introduce .base-title,
  .module9 .introduce .base-subtitle,
  .module9 .introduce .base-desc {
    text-align: left;
  }

  .module9 .introduce-list {
    position: relative;
    margin-top: 13.47222vw;
    height: 9.51389vw;
  }

  .module9 .introduce-list .introduce {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 31.59722vw;
  }

  .module9 .introduce-list .introduce:nth-child(n + 2) {
    opacity: 0;
  }

  .module9 .small-pic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 5.55556vw;
  }

  .module9 .small-pic .spic-item:nth-child(1),
  .module9 .small-pic .spic-item:nth-child(2) {
    width: 6.73611vw;
    height: 9.02778vw;
    margin-right: 1.38889vw;
  }

  .module9 .small-pic .spic-item:nth-child(3) {
    width: 12.01389vw;
    height: 9.02778vw;
  }

  .module9 .pic {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 43.75vw;
    width: 68.47222vw;
    height: 51.25vw;
  }

  .module9 .pic .pic-scale {
    position: relative;
    width: 38.40278vw;
    height: 51.25vw;
    overflow: hidden;
  }

  .module9 .pic .pic-box:nth-child(3) .pic-scale {
    width: 68.47222vw;
  }

  .module9 .pic .pic-box {
    position: absolute;
    left: 0;
    top: 0;
  }

  .module9 .pic .pic-box:nth-child(1) {
    z-index: 999;
  }

  .module9 .pic .pic-box:nth-child(n + 2) picture {
    opacity: 0;
  }

  .module9 .pic .introduce {
    display: none;
  }

  .module9 .pic .pic-img1 {
    width: 38.40278vw;
    height: 51.25vw;
  }

  .module9 .pic .pic-img2 {
    width: 38.40278vw;
    height: 51.25vw;
  }

  .module9 .pic .pic-img3 {
    width: 68.47222vw;
    height: 51.25vw;
  }
}

@media only screen and (min-width: 1600px) and (max-width: 1920px) {
  .module9 .module-inner {
    padding: 6.66667vw 0;
    height: 51.77083vw;
  }

  .module9 .introduce .base-title,
  .module9 .introduce .base-subtitle,
  .module9 .introduce .base-desc {
    text-align: left;
  }

  .module9 .introduce-list {
    position: relative;
    margin-top: 10.10417vw;
    height: 7.13542vw;
  }

  .module9 .introduce-list .introduce {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 23.4375vw;
  }

  .module9 .introduce-list .introduce:nth-child(n + 2) {
    opacity: 0;
  }

  .module9 .small-pic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 4.16667vw;
  }

  .module9 .small-pic .spic-item:nth-child(1),
  .module9 .small-pic .spic-item:nth-child(2) {
    width: 5.05208vw;
    height: 6.77083vw;
    margin-right: 1.04167vw;
  }

  .module9 .small-pic .spic-item:nth-child(3) {
    width: 9.01042vw;
    height: 6.77083vw;
  }

  .module9 .pic {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 32.8125vw;
    width: 51.35417vw;
    height: 38.4375vw;
  }

  .module9 .pic .pic-scale {
    position: relative;
    width: 28.80208vw;
    height: 38.4375vw;
    overflow: hidden;
  }

  .module9 .pic .pic-box:nth-child(3) .pic-scale {
    width: 51.35417vw;
  }

  .module9 .pic .pic-box {
    position: absolute;
    left: 0;
    top: 0;
  }

  .module9 .pic .pic-box:nth-child(1) {
    z-index: 999;
  }

  .module9 .pic .pic-box:nth-child(n + 2) picture {
    opacity: 0;
  }

  .module9 .pic .introduce {
    display: none;
  }

  .module9 .pic .pic-img1 {
    width: 28.80208vw;
    height: 38.4375vw;
  }

  .module9 .pic .pic-img2 {
    width: 28.80208vw;
    height: 38.4375vw;
  }

  .module9 .pic .pic-img3 {
    width: 51.35417vw;
    height: 38.4375vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module9 .module-inner {
    padding: 5vw 0;
    height: 38.82813vw;
  }

  .module9 .introduce {
    width: 20.15625vw;
  }

  .module9 .introduce .base-title,
  .module9 .introduce .base-subtitle,
  .module9 .introduce .base-desc {
    text-align: left;
  }

  .module9 .introduce-list {
    position: relative;
    margin-top: 7.57813vw;
    height: 5.35156vw;
  }

  .module9 .introduce-list .introduce {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 17.57813vw;
  }

  .module9 .introduce-list .introduce:nth-child(n + 2) {
    opacity: 0;
  }

  .module9 .small-pic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 3.125vw;
  }

  .module9 .small-pic .spic-item:nth-child(1),
  .module9 .small-pic .spic-item:nth-child(2) {
    width: 3.78906vw;
    height: 5.07813vw;
    margin-right: 0.78125vw;
  }

  .module9 .small-pic .spic-item:nth-child(3) {
    width: 6.75781vw;
    height: 5.07813vw;
  }

  .module9 .pic {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 24.60938vw;
    width: 38.51563vw;
    height: 28.82813vw;
  }

  .module9 .pic .pic-scale {
    position: relative;
    width: 21.60156vw;
    height: 28.82813vw;
    overflow: hidden;
  }

  .module9 .pic .pic-box:nth-child(3) .pic-scale {
    width: 38.51563vw;
  }

  .module9 .pic .pic-box {
    position: absolute;
    left: 0;
    top: 0;
  }

  .module9 .pic .pic-box:nth-child(1) {
    z-index: 999;
  }

  .module9 .pic .pic-box:nth-child(n + 2) picture {
    opacity: 0;
  }

  .module9 .pic .introduce {
    display: none;
  }

  .module9 .pic .pic-img1 {
    width: 21.60156vw;
    height: 28.82813vw;
  }

  .module9 .pic .pic-img2 {
    width: 21.60156vw;
    height: 28.82813vw;
  }

  .module9 .pic .pic-img3 {
    width: 38.51563vw;
    height: 28.82813vw;
  }
}

.module10 {
  background: #fff;
}

@media only screen and (max-width: 1023px) {
  .module10 .module-inner {
    padding-bottom: 22.22222vw;
  }

  .module10 .base-desc {
    letter-spacing: -0.11111vw;
  }

  .module10 .game-box picture {
    margin-top: 13.33333vw;
    width: 90vw;
    height: 90vw;
  }

  .module10 .game-box .magnifying {
    position: absolute;
    top: 57%;
    left: 40%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 40.55556vw;
    height: 25.69444vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module10 .module-inner {
    padding-bottom: 8.88889vw;
  }

  .module10 .base-desc {
    width: 64.44444vw;
    margin-left: auto;
    margin-right: auto;
  }

  .module10 .game-box picture {
    margin-top: 5.55556vw;
    width: 91.11111vw;
    height: 42.36111vw;
  }

  .module10 .game-box .magnifying {
    position: absolute;
    top: 29%;
    left: 27%;
    width: 22.67361vw;
    height: 14.375vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module10 .module-inner {
    padding-bottom: 6.66667vw;
  }

  .module10 .base-desc {
    width: 48.33333vw;
    margin: 1.04167vw auto;
  }

  .module10 .game-box picture {
    margin-top: 4.16667vw;
    width: 68.33333vw;
    height: 31.77083vw;
  }

  .module10 .game-box .magnifying {
    position: absolute;
    top: 29%;
    left: 27%;
    width: 17.00521vw;
    height: 10.78125vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module10 .module-inner {
    padding-bottom: 5vw;
  }

  .module10 .base-desc {
    width: 36.25vw;
    margin: 0.78125vw auto;
  }

  .module10 .game-box picture {
    margin-top: 3.125vw;
    width: 51.25vw;
    height: 23.82813vw;
  }

  .module10 .game-box .magnifying {
    position: absolute;
    top: 29%;
    left: 27%;
    width: 12.75391vw;
    height: 8.08594vw;
  }
}

.module11 {
  background-color: #fffaf2 !important;
}

@media only screen and (max-width: 1023px) {
  .module11 {
    background: #fffaf2;
  }

  .module11 .module-inner {
    height: 239.72222vw;
    padding: 22.22222vw 0;
  }

  .module11 .base-title {
    text-align: center;
  }

  .module11 .function-list {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100vw;
    margin-top: 12.5vw;
  }

  .module11 .function-list .function-item {
    width: 88.88889vw;
    height: 159.72222vw;
  }

  .module11 .function-list .function-item .func-pic-box {
    position: relative;
    height: 125.27778vw;
    width: 88.88889vw;
    margin: 0 auto;
    background: #fff0d5;
  }

  .module11 .function-list .function-item .func-pic-box picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 50.55556vw;
    height: 108.33333vw;
  }

  .module11 .function-list .function-item .name {
    width: 88.88889vw;
    margin: 5.55556vw auto 0;
    font-size: 3.88889vw;
    line-height: 6.66667vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module11 .function-list .function-item .text {
    width: 88.88889vw;
    margin: 2.22222vw auto 0;
    font-size: 3.33333vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 6.66667vw;
  }

  .module11 .function-list .function-item:nth-child(2) .name {
    letter-spacing: -0.02778vw;
  }

  .module11 .swiper-pagination {
    bottom: 22.22222vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 9.72222vw;
    height: 1.11111vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .module11 .swiper-pagination .swiper-pagination-bullet {
    background: #7f7d79;
  }

  .module11 .swiper-pagination .swiper-pagination-bullet-active {
    background: #000;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module11 {
    padding: 8.88889vw 0;
    background: #f5f5f5;
  }

  .module11 .function-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 5.69444vw;
  }

  .module11 .function-list .function-item {
    margin-right: 3.88889vw;
    width: 27.77778vw;
    height: 47.01389vw;
  }

  .module11 .function-list .function-item .func-pic-box {
    position: relative;
    height: 37.01389vw;
    background: #fff0d5;
  }

  .module11 .function-list .function-item .func-pic-box picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 14.23611vw;
    height: 30.48611vw;
  }

  .module11 .function-list .function-item .name {
    margin-top: 1.38889vw;
    font-size: 1.38889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module11 .function-list .function-item .text {
    margin-top: 0.55556vw;
    font-size: 1.11111vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 1.94444vw;
  }

  .module11 .function-list .function-item:nth-child(2) {
    width: 28.47222vw;
    letter-spacing: -0.02778vw;
  }

  .module11 .function-list .function-item:nth-child(3) {
    margin-right: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .module11 {
    padding: 6.66667vw 0;
    background: #fffaf2;
  }

  .module11 .function-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 4.27083vw;
  }

  .module11 .function-list .function-item {
    margin-right: 2.91667vw;
    width: 20.83333vw;
    height: 35.26042vw;
  }

  .module11 .function-list .function-item .func-pic-box {
    position: relative;
    height: 27.76042vw;
    background: #fff0d5;
  }

  .module11 .function-list .function-item .func-pic-box picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 10.67708vw;
    height: 22.86458vw;
  }

  .module11 .function-list .function-item .name {
    margin-top: 1.04167vw;
    font-size: 1.04167vw;
    line-height: 1.66667vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module11 .function-list .function-item .text {
    margin-top: 0.41667vw;
    font-size: 0.83333vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 1.45833vw;
  }

  .module11 .function-list .function-item:nth-child(3) {
    margin-right: 0;
  }

  .module11 .swiper-wrapper .function-item:nth-child(2) .text {
    width: 21.875vw;
    letter-spacing: -0.02083vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module11 {
    padding: 5vw 0;
    background: #fffaf2;
  }

  .module11 .function-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 3.20313vw;
  }

  .module11 .function-list .function-item {
    margin-right: 2.1875vw;
    width: 15.625vw;
    height: 26.44531vw;
  }

  .module11 .function-list .function-item .func-pic-box {
    position: relative;
    height: 20.82031vw;
    background: #fff0d5;
  }

  .module11 .function-list .function-item .func-pic-box picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 8.00781vw;
    height: 17.14844vw;
  }

  .module11 .function-list .function-item .name {
    margin-top: 0.78125vw;
    font-size: 0.78125vw;
    line-height: 1.25vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module11 .function-list .function-item .text {
    margin-top: 0.3125vw;
    font-size: 0.625vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    line-height: 1.09375vw;
  }

  .module11 .function-list .function-item:nth-child(3) {
    margin-right: 0;
  }

  .module11 .swiper-wrapper .function-item:nth-child(2) .text {
    width: 16.40625vw;
    letter-spacing: -0.01563vw;
  }
}

@media only screen and (max-width: 1023px) {
  .module12 {
    background: #f5f5f5;
  }

  .module12 .module-inner {
    padding-top: 22.22222vw;
  }

  .module12 .base-title {
    text-align: center;
  }

  .module12 .question-list {
    margin-top: 8.88889vw;
  }

  .module12 .question-list .question-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 17.5vw;
    padding-left: 2.77778vw;
    font-size: 3.88889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background-color: #fff;
    border-bottom: 0.27778vw solid #bcbcbc;
  }

  .module12 .question-list .question-item .question {
    width: 73.61111vw;
  }

  .module12 .question-list .question-item .icon-arrow {
    position: absolute;
    right: 2.91667vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .module12 .question-list .question-item .icon-arrow picture {
    width: 2.22222vw;
    height: 4.16667vw;
  }

  .module12 .question-list .question-item:nth-child(5) {
    border-bottom: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module12 {
    background: #f5f5f5;
  }

  .module12 .module-inner {
    padding-top: 8.88889vw;
  }

  .module12 .question-list {
    margin-top: 5.55556vw;
  }

  .module12 .question-list .question-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 8.40278vw;
    padding-left: 3.47222vw;
    font-size: 1.38889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background-color: #fff;
    border-bottom: 0.06944vw solid #bcbcbc;
  }

  .module12 .question-list .question-item .icon-arrow {
    position: absolute;
    right: 6.04167vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .module12 .question-list .question-item .icon-arrow picture {
    width: 0.55556vw;
    height: 1.04167vw;
  }

  .module12 .question-list .question-item:nth-child(5) {
    border-bottom: none;
  }
}

@media only screen and (min-width: 1600px) {
  .module12 {
    background: #f5f5f5;
  }

  .module12 .module-inner {
    padding-top: 6.66667vw;
  }

  .module12 .question-list {
    margin-top: 4.16667vw;
  }

  .module12 .question-list .question-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 6.30208vw;
    padding-left: 2.60417vw;
    font-size: 1.04167vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background-color: #fff;
    border-bottom: 0.05208vw solid #bcbcbc;
  }

  .module12 .question-list .question-item .icon-arrow {
    position: absolute;
    right: 4.53125vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .module12 .question-list .question-item .icon-arrow picture {
    width: 0.41667vw;
    height: 0.78125vw;
  }

  .module12 .question-list .question-item:nth-child(5) {
    border-bottom: none;
  }
}

@media only screen and (min-width: 1921px) {
  .module12 {
    background: #f5f5f5;
  }

  .module12 .module-inner {
    padding-top: 5vw;
  }

  .module12 .question-list {
    margin-top: 3.125vw;
  }

  .module12 .question-list .question-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 4.72656vw;
    padding-left: 1.95313vw;
    font-size: 0.78125vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    background-color: #fff;
    border-bottom: 0.03906vw solid #bcbcbc;
  }

  .module12 .question-list .question-item .icon-arrow {
    position: absolute;
    right: 3.39844vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .module12 .question-list .question-item .icon-arrow picture {
    width: 0.3125vw;
    height: 0.58594vw;
  }

  .module12 .question-list .question-item:nth-child(5) {
    border-bottom: none;
  }
}

@media only screen and (max-width: 1023px) {
  .module13 {
    background: #f5f5f5;
  }

  .module13 .module-inner {
    padding-top: 17.77778vw;
    text-align: center;
  }

  .module13 .base-title {
    font-size: 6.66667vw;
    letter-spacing: -0.27778vw;
    text-align: center;
  }

  .module13 .module-desc {
    margin-top: 3.33333vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.88889vw;
    text-align: center;
  }

  .module13 .service-list {
    background-color: #fff;
    height: 73.33333vw;
    margin-top: 8.88889vw;
  }

  .module13 .service-list .service-item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    height: 23.61111vw;
    padding: 0 4.16667vw;
    text-align: left;
    border-bottom: 0.27778vw solid #bcbcbc;
  }

  .module13 .service-list .service-item .service-introduce {
    width: 51.38889vw;
    margin-left: 3.88889vw;
  }

  .module13 .service-list .service-item .icon-service1 img {
    width: 10.55556vw;
    height: 10.55556vw;
  }

  .module13 .service-list .service-item .icon-service2 img {
    width: 10.27778vw;
    height: 8.61111vw;
  }

  .module13 .service-list .service-item .icon-service3 img {
    width: 9.86111vw;
    height: 8.61111vw;
  }

  .module13 .service-list .service-item .service-name {
    line-height: 6.66667vw;
    font-size: 3.88889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .service-dsec {
    margin-top: 1.11111vw;
    font-size: 3.88889vw;
    line-height: 5vw;
    color: #a1a1a1;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .icon-arrow {
    position: absolute;
    right: 4.16667vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .module13 .service-list .service-item .icon-arrow picture {
    width: 2.22222vw;
    height: 4.16667vw;
  }

  .module13 .service-list .service-item:last-child {
    border-bottom: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module13 {
    background: #f5f5f5;
  }

  .module13 .module-inner {
    padding-top: 8.88889vw;
  }

  .module13 .module-desc {
    margin-top: 1.11111vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.38889vw;
    text-align: center;
  }

  .module13 .service-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    height: 22.15278vw;
    padding: 0 11.31944vw;
    margin-top: 4.44444vw;
  }

  .module13 .service-list .service-item {
    width: 17.84722vw;
    height: 12.98611vw;
    text-align: center;
  }

  .module13 .service-list .service-item .icon-service1 {
    width: 2.91667vw;
    height: 2.91667vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service2 {
    width: 3.47222vw;
    height: 2.91667vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service3 {
    width: 3.33333vw;
    height: 2.91667vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .service-name {
    margin-top: 1.52778vw;
    line-height: 2.22222vw;
    font-size: 1.38889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .service-dsec {
    margin-top: 0.27778vw;
    font-size: 1.11111vw;
    line-height: 1.94444vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .icon-arrow {
    display: none;
  }
}

@media only screen and (min-width: 1600px) {
  .module13 {
    background: #f5f5f5;
  }

  .module13 .module-inner {
    padding-top: 6.66667vw;
  }

  .module13 .module-desc {
    margin-top: 0.83333vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 1.04167vw;
    text-align: center;
  }

  .module13 .service-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    height: 16.61458vw;
    padding: 0 8.48958vw;
    margin-top: 3.33333vw;
  }

  .module13 .service-list .service-item {
    width: 13.38542vw;
    height: 9.73958vw;
    text-align: center;
  }

  .module13 .service-list .service-item .icon-service1 {
    width: 2.1875vw;
    height: 2.1875vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service2 {
    width: 2.60417vw;
    height: 2.1875vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service3 {
    width: 2.5vw;
    height: 2.1875vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .service-name {
    margin-top: 1.14583vw;
    line-height: 1.66667vw;
    font-size: 1.04167vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .service-dsec {
    margin-top: 0.20833vw;
    font-size: 0.83333vw;
    line-height: 1.45833vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .icon-arrow {
    display: none;
  }
}

@media only screen and (min-width: 1921px) {
  .module13 {
    background: #f5f5f5;
  }

  .module13 .module-inner {
    padding-top: 5vw;
  }

  .module13 .module-desc {
    margin-top: 0.625vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.78125vw;
    text-align: center;
  }

  .module13 .service-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #fff;
    height: 12.46094vw;
    padding: 0 6.36719vw;
    margin-top: 2.5vw;
  }

  .module13 .service-list .service-item {
    width: 10.03906vw;
    height: 7.30469vw;
    text-align: center;
  }

  .module13 .service-list .service-item .icon-service1 {
    width: 1.64063vw;
    height: 1.64063vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service2 {
    width: 1.95313vw;
    height: 1.64063vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .icon-service3 {
    width: 1.875vw;
    height: 1.64063vw;
    margin: 0 auto;
  }

  .module13 .service-list .service-item .service-name {
    margin-top: 0.85938vw;
    line-height: 1.25vw;
    font-size: 0.78125vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .service-dsec {
    margin-top: 0.15625vw;
    font-size: 0.625vw;
    line-height: 1.09375vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module13 .service-list .service-item .icon-arrow {
    display: none;
  }
}

@media only screen and (max-width: 1023px) {
  .module14 {
    background: #f5f5f5;
  }

  .module14 .module-inner {
    padding-top: 17.77778vw;
  }

  .module14 .module-title {
    font-size: 6.66667vw;
    line-height: 10vw;
    text-align: center;
  }

  .module14 a {
    display: block;
  }

  .module14 .promotion-pic {
    width: 88.61111vw;
    height: 37.77778vw;
    margin: 8.88889vw auto 0;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module14 {
    background: #f5f5f5;
  }

  .module14 .module-inner {
    padding-top: 8.88889vw;
  }

  .module14 .promotion-pic {
    width: 91.11111vw;
    height: 38.88889vw;
    margin: 4.44444vw auto 0;
  }
}

@media only screen and (min-width: 1600px) {
  .module14 {
    background: #f5f5f5;
  }

  .module14 .module-inner {
    padding-top: 6.66667vw;
  }

  .module14 .promotion-pic {
    width: 68.33333vw;
    height: 29.16667vw;
    margin: 3.33333vw auto 0;
  }
}

@media only screen and (min-width: 1921px) {
  .module14 {
    background: #f5f5f5;
  }

  .module14 .module-inner {
    padding-top: 5vw;
  }

  .module14 .promotion-pic {
    width: 51.25vw;
    height: 21.875vw;
    margin: 2.5vw auto 0;
  }
}

@media only screen and (max-width: 1023px) {
  .module15 {
    background: #f5f5f5;
  }

  .module15 .module-inner {
    padding-top: 17.77778vw;
    height: 114.44444vw;
  }

  .module15 .interseting-list {
    position: absolute;
    left: -5.55556vw;
    margin-top: 8.88889vw;
    height: 75.83333vw;
    width: 134.44444vw;
  }

  .module15 .interseting-list .swiper-slide {
    text-align: center;
    font-size: 5vw;
    height: 100%;
    width: 65.55556vw;
    padding-left: 5.55556vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition-property: all;
    transition-property: all;
  }

  .module15 .interseting-list .interseting-item a {
    display: block;
  }

  .module15 .interseting-list .swiper-pagination {
    display: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module15 {
    background: #f5f5f5;
  }

  .module15 .module-inner {
    padding-top: 8.88889vw;
  }

  .module15 .interseting-list {
    margin-top: 4.44444vw;
    height: 25.27778vw;
  }

  .module15 .interseting-list .swiper-slide {
    text-align: center;
    font-size: 1.25vw;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition-property: all;
    transition-property: all;
  }

  .module15 .interseting-list #progressEffect {
    position: absolute;
    z-index: 10;
    top: 1.38889vw;
    left: 1.38889vw;
  }

  .module15 .swiper-pagination {
    display: none;
  }
}

@media only screen and (min-width: 1600px) {
  .module15 {
    background: #f5f5f5;
  }

  .module15 .module-inner {
    padding-top: 6.66667vw;
  }

  .module15 .interseting-list {
    margin-top: 3.33333vw;
    height: 18.95833vw;
  }

  .module15 .interseting-list .swiper-slide {
    text-align: center;
    font-size: 0.9375vw;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition-property: all;
    transition-property: all;
  }

  .module15 .interseting-list #progressEffect {
    position: absolute;
    z-index: 10;
    top: 1.04167vw;
    left: 1.04167vw;
  }

  .module15 .swiper-pagination {
    display: none;
  }
}

@media only screen and (min-width: 1921px) {
  .module15 {
    background: #f5f5f5;
  }

  .module15 .module-inner {
    padding-top: 5vw;
  }

  .module15 .interseting-list {
    margin-top: 2.5vw;
    height: 14.21875vw;
  }

  .module15 .interseting-list .swiper-slide {
    text-align: center;
    font-size: 0.70313vw;
    background: #fff;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition-property: all;
    transition-property: all;
  }

  .module15 .interseting-list #progressEffect {
    position: absolute;
    z-index: 10;
    top: 0.78125vw;
    left: 0.78125vw;
  }

  .module15 .swiper-pagination {
    display: none;
  }
}

@media only screen and (max-width: 1023px) {
  .module16 {
    background: #f5f5f5;
    height: 186.11111vw;
  }

  .module16 .module-title {
    font-size: 6.11111vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    letter-spacing: -0.02778vw;
  }

  .module16 .module-inner {
    padding-top: 24.44444vw;
    height: 186.11111vw;
  }

  .module16 .recommendation-list {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8.88889vw;
  }

  .module16 .recommendation-list .recommendation-item {
    height: 124.16667vw;
    text-align: center;
  }

  .module16 .recommendation-list .recommendation-item .item-bg {
    display: block;
    height: 100%;
    width: 88.88889vw;
    margin: 0 auto;
    background: #fff;
  }

  .module16 .recommendation-list .recommendation-item .recommendation-pic-box {
    position: relative;
    height: 97.5vw;
    width: 88.88889vw;
    margin: 0 auto;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img1 {
    width: 56.11111vw;
    height: 73.05556vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img2,
  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img3 {
    width: 51.94444vw;
    height: 73.05556vw;
  }

  .module16 .recommendation-list .recommendation-item .name {
    width: 88.88889vw;
    margin: 0 auto;
    font-size: 5.55556vw;
    line-height: 8.88889vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item .text {
    width: 88.88889vw;
    margin: 1.11111vw auto 0;
    font-size: 4.44444vw;
    line-height: 7.77778vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .swiper-pagination {
    bottom: 5.55556vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 20.27778vw;
    height: 1.11111vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet {
    background: #7f7d79;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet-active {
    background: #000;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module16 {
    background: #f5f5f5;
  }

  .module16 .module-inner {
    padding-top: 8.88889vw;
    height: 60.27778vw;
  }

  .module16 .recommendation-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 4.44444vw;
  }

  .module16 .recommendation-list .recommendation-item {
    width: 28.88889vw;
    height: 38.88889vw;
    margin-right: 2.22222vw;
    background: #fff;
    text-align: center;
  }

  .module16 .recommendation-list .recommendation-item .recommendation-pic-box {
    position: relative;
    height: 31.11111vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img1 {
    width: 18.33333vw;
    height: 23.88889vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img2,
  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img3 {
    width: 17.08333vw;
    height: 23.88889vw;
  }

  .module16 .recommendation-list .recommendation-item .name {
    font-size: 1.38889vw;
    line-height: 2.22222vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item .text {
    margin-top: 0.27778vw;
    font-size: 1.11111vw;
    line-height: 2.22222vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item:nth-child(3) {
    margin-right: 0vw;
  }

  .module16 .swiper-pagination {
    bottom: 0.69444vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 4.16667vw;
    height: 0.27778vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet {
    width: 0.55556vw;
    height: 0.55556vw;
    background: #7f7d79;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet-active {
    background: #000;
  }
}

@media only screen and (min-width: 1600px) {
  .module16 {
    background: #f5f5f5;
  }

  .module16 .module-inner {
    padding-top: 6.66667vw;
    height: 45.83333vw;
  }

  .module16 .recommendation-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 3.33333vw;
  }

  .module16 .recommendation-list .recommendation-item {
    width: 21.66667vw;
    height: 29.16667vw;
    margin-right: 1.66667vw;
    text-align: center;
  }

  .module16 .recommendation-list .recommendation-item .item-bg {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .module16 .recommendation-list .recommendation-item .recommendation-pic-box {
    position: relative;
    height: 23.33333vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img1 {
    width: 13.75vw;
    height: 17.91667vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img2,
  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img3 {
    width: 12.8125vw;
    height: 17.91667vw;
  }

  .module16 .recommendation-list .recommendation-item .name {
    font-size: 1.04167vw;
    line-height: 1.66667vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item .text {
    margin-top: 0.20833vw;
    font-size: 0.83333vw;
    line-height: 1.66667vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item:nth-child(3) {
    margin-right: 0vw;
  }

  .module16 .swiper-pagination {
    bottom: 0.52083vw;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 3.125vw;
    height: 0.20833vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet {
    width: 0.41667vw;
    height: 0.41667vw;
    background: #7f7d79;
  }

  .module16 .swiper-pagination .swiper-pagination-bullet-active {
    background: #000;
  }
}

@media only screen and (min-width: 1921px) {
  .module16 {
    background: #f5f5f5;
  }

  .module16 .module-inner {
    padding-top: 5vw;
    height: 34.21875vw;
  }

  .module16 .recommendation-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 2.5vw;
  }

  .module16 .recommendation-list .recommendation-item {
    width: 16.25vw;
    height: 21.875vw;
    margin-right: 1.25vw;
    text-align: center;
  }

  .module16 .recommendation-list .recommendation-item .item-bg {
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
  }

  .module16 .recommendation-list .recommendation-item .recommendation-pic-box {
    position: relative;
    height: 17.5vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    picture {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img1 {
    width: 10.3125vw;
    height: 13.4375vw;
  }

  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img2,
  .module16
    .recommendation-list
    .recommendation-item
    .recommendation-pic-box
    .recommendation-img3 {
    width: 9.60938vw;
    height: 13.4375vw;
  }

  .module16 .recommendation-list .recommendation-item .name {
    font-size: 0.78125vw;
    line-height: 1.25vw;
    font-family: 'OPPOSans-Medium', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item .text {
    margin-top: 0.15625vw;
    font-size: 0.625vw;
    line-height: 1.25vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
  }

  .module16 .recommendation-list .recommendation-item:nth-child(3) {
    margin-right: 0vw;
  }
}

@media only screen and (max-width: 1023px) {
  .module17 {
    background: #f5f5f5;
  }

  .module17 .module-inner {
    padding-top: 22.22222vw;
    padding-bottom: 22.22222vw;
  }

  .module17 .remark-item {
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 3.33333vw;
    line-height: 5.55556vw;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1599px) {
  .module17 {
    background: #f5f5f5;
  }

  .module17 .module-inner {
    padding-top: 8.88889vw;
    padding-bottom: 8.88889vw;
  }

  .module17 .remark-item {
    width: 69.44444vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.83333vw;
    line-height: 1.38889vw;
    margin-bottom: 0.34722vw;
  }
}

@media only screen and (min-width: 1600px) {
  .module17 {
    background: #f5f5f5;
  }

  .module17 .module-inner {
    padding-top: 6.66667vw;
    padding-bottom: 6.66667vw;
  }

  .module17 .remark-item {
    width: 54.6875vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.625vw;
    line-height: 1.04167vw;
    margin-bottom: 0.26042vw;
  }
}

@media only screen and (min-width: 1921px) {
  .module17 {
    background: #f5f5f5;
  }

  .module17 .module-inner {
    padding-top: 5vw;
    padding-bottom: 5vw;
  }

  .module17 .remark-item {
    width: 41.01563vw;
    font-family: 'OPPOSans-Regular', 'PingFang SC', 'Microsoft YaHei',
      'Helvetica Neue', 'Helvetica', 'Arial';
    font-size: 0.46875vw;
    line-height: 0.78125vw;
    margin-bottom: 0.19531vw;
  }
}

@-webkit-keyframes kv-circle {
  0% {
    -webkit-transform: scale(2.2);
    transform: scale(2.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes kv-circle {
  0% {
    -webkit-transform: scale(2.2);
    transform: scale(2.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes kv-person {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes kv-person {
  0% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes picScale {
  0% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes picScale {
  0% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@media screen and (min-width: 1024px) {
  @-webkit-keyframes kv-left-text {
    0% {
      -webkit-transform: translateX(-3.47222vw);
      transform: translateX(-3.47222vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      opacity: 1;
    }
  }

  @keyframes kv-left-text {
    0% {
      -webkit-transform: translateX(-3.47222vw);
      transform: translateX(-3.47222vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      opacity: 1;
    }
  }

  @-webkit-keyframes kv-right-text {
    0% {
      -webkit-transform: translateX(3.47222vw);
      transform: translateX(3.47222vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      opacity: 1;
    }
  }

  @keyframes kv-right-text {
    0% {
      -webkit-transform: translateX(3.47222vw);
      transform: translateX(3.47222vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateX(0vw);
      transform: translateX(0vw);
      opacity: 1;
    }
  }
}

@media screen and (max-width: 1023px) {
  @-webkit-keyframes kv-title-fadeIn {
    0% {
      -webkit-transform: translateY(13.88889vw);
      transform: translateY(13.88889vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0vw);
      transform: translateY(0vw);
      opacity: 1;
    }
  }

  @keyframes kv-title-fadeIn {
    0% {
      -webkit-transform: translateY(13.88889vw);
      transform: translateY(13.88889vw);
      opacity: 0;
    }

    100% {
      -webkit-transform: translateY(0vw);
      transform: translateY(0vw);
      opacity: 1;
    }
  }
}