[ani-scroll-container] {
  will-change: transform;
}
.g--popup {
  height: 100vh;
  height: -webkit-calc(var(--vh, 1vh) * 100);
  height: -moz-calc(var(--vh, 1vh) * 100);
  height: calc(var(--vh, 1vh) * 100);
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transform: translateY(120vh);
  -moz-transform: translateY(120vh);
  -ms-transform: translateY(120vh);
  -o-transform: translateY(120vh);
  transform: translateY(120vh);
  -webkit-transform: translateY(-webkit-calc(var(--vh, 1vh) * 120));
  -moz-transform: translateY(-moz-calc(var(--vh, 1vh) * 120));
  -ms-transform: translateY(calc(var(--vh, 1vh) * 120));
  -o-transform: translateY(calc(var(--vh, 1vh) * 120));
  transform: translateY(calc(var(--vh, 1vh) * 120));
  width: 100%;
  z-index: 9999;
}
.g--popup.show {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.g--popup.disappear,
.g--popup.show {
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  -moz-transition: transform 0.5s, -moz-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s, -moz-transform 0.5s,
    -o-transform 0.5s;
}
.g--popup .g--popup-container {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-justify-content: center;
  justify-content: center;
  position: relative;
  width: 100%;
}
.g--popup .g--video-wrapper {
  margin-top: -12px;
  position: relative;
}
.video-portrait.g--popup .g--video-wrapper {
  height: 100%;
  margin-top: 0;
  padding: 32px 0;
  width: 100%;
}
.g--popup .g--video-wrapper video {
  height: 100%;
  max-height: 75vh;
  max-height: -webkit-calc(var(--vh, 1vh) * 75);
  max-height: -moz-calc(var(--vh, 1vh) * 75);
  max-height: calc(var(--vh, 1vh) * 75);
  outline: none;
  width: 100%;
}
.video-portrait.g--popup .g--video-wrapper video {
  -o-object-fit: contain;
  object-fit: contain;
}
.g--popup .g--video-wrapper video[src=""] {
  display: none;
}
.g--popup .g--popup-close.v1 {
  cursor: pointer;
  height: 24px;
  margin-left: auto;
  opacity: 1 !important;
  position: absolute;
  right: 0;
  top: -36px;
  width: 24px;
  z-index: 2;
}
.g--popup .g--popup-close.v1 .inner {
  height: 100%;
  width: 100%;
}
.g--popup .g--popup-close.v2 {
  cursor: pointer;
  height: 32px;
  margin-left: auto;
  opacity: 1 !important;
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  z-index: 2;
}
.video-portrait.g--popup .g--popup-close.v2 {
  top: 8px;
}
.g--popup-container.v2.v2 {
  background: #201f1c;
}
.g--popup-close.v2 polygon {
  fill: #fff;
}
.g--popup-container.v1 {
  background: #000;
}
.g--popup-close.v1 polygon {
  fill: #fff;
}
.light-theme :not(.dark-theme) .g--popup-container.v1 {
  background: #fff;
}
.light-theme :not(.dark-theme) .g--popup-close.v1 polygon {
  fill: #000;
}
.light-theme :not(.dark-theme) .g--popup-container.v2 {
  background: #fafafa;
}
.light-theme :not(.dark-theme) .g--popup-close.v2 circle {
  fill: #efede9;
}
.light-theme :not(.dark-theme) .g--popup-close.v2 path {
  fill: #000;
}
@media (min-width: 1024px) {
  :root {
    --rpx: -webkit-calc(0.07622vw - 0.09756px);
    --rpx: -moz-calc(0.07622vw - 0.09756px);
    --rpx: calc(0.07622vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 1312 - 0.09756px);
  }
  .g--popup .g--video-wrapper.v1 {
    max-width: 75vw;
    max-width: -webkit-calc(var(--vw, 1vw) * 75);
    max-width: -moz-calc(var(--vw, 1vw) * 75);
    max-width: calc(var(--vw, 1vw) * 75);
  }
  .g--popup .g--video-wrapper.v2 {
    width: 60.65vw;
    width: -webkit-calc(var(--vw, 1vw) * 60.65);
    width: -moz-calc(var(--vw, 1vw) * 60.65);
    width: calc(var(--vw, 1vw) * 60.65);
  }
}
@media (max-width: 649px) {
  :root {
    --rpx: -webkit-calc(0.30488vw - 0.09756px);
    --rpx: -moz-calc(0.30488vw - 0.09756px);
    --rpx: calc(0.30488vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 328 - 0.09756px);
  }
  .g--popup .g--popup-container {
    padding: 0;
  }
  .g--popup .g--video-wrapper.v1 {
    width: 100vw;
    width: -webkit-calc(var(--vw, 1vw) * 100);
    width: -moz-calc(var(--vw, 1vw) * 100);
    width: calc(var(--vw, 1vw) * 100);
  }
  .g--popup .g--video-wrapper.v2 {
    max-width: 86.67vw;
    max-width: -webkit-calc(var(--vw, 1vw) * 86.67);
    max-width: -moz-calc(var(--vw, 1vw) * 86.67);
    max-width: calc(var(--vw, 1vw) * 86.67);
  }
  .g--popup .g--popup-close.v1 {
    height: 28px;
    right: 16px;
    top: -48px;
    width: 28px;
  }
  .g--popup .g--popup-close.v2 {
    right: -webkit-calc(50% - 16px);
    right: -moz-calc(50% - 16px);
    right: calc(50% - 16px);
    top: -webkit-calc(var(--window-height) - 59px);
    top: -moz-calc(var(--window-height) - 59px);
    top: calc(var(--window-height) - 59px);
  }
}
@media (min-width: 650px) and (max-width: 1023px) {
  :root {
    --rpx: -webkit-calc(0.13889vw - 0.06667px);
    --rpx: -moz-calc(0.13889vw - 0.06667px);
    --rpx: calc(0.13889vw - 0.06667px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: calc(var(--vw, 1vw) * 100 / 720 - 0.06667px);
  }
  .g--popup .g--video-wrapper.v1 {
    max-width: 75vw;
    max-width: -webkit-calc(var(--vw, 1vw) * 75);
    max-width: -moz-calc(var(--vw, 1vw) * 75);
    max-width: calc(var(--vw, 1vw) * 75);
  }
  .g--popup .g--video-wrapper.v2 {
    width: 70vw;
    width: -webkit-calc(var(--vw, 1vw) * 70);
    width: -moz-calc(var(--vw, 1vw) * 70);
    width: calc(var(--vw, 1vw) * 70);
  }
}
.bg-\[\#FAFAFA\] {
  --tw-bg-opacity: 1;
  background-color: rgba(250, 250, 250, var(--tw-bg-opacity));
}
.bg-\[rgba\(0\,0\,0\,0\.05\)\] {
  --tw-bg-opacity: 0.05;
}
.bg-\[rgba\(0\,0\,0\,0\.05\)\],
.bg-black {
  background-color: rgba(0, 0, 0, var(--tw-bg-opacity));
}
.bg-\[\#201F1C\],
.bg-black {
  --tw-bg-opacity: 1;
}
.bg-\[\#201F1C\] {
  background-color: rgba(32, 31, 28, var(--tw-bg-opacity));
}
.bg-\[\#131312\] {
  --tw-bg-opacity: 1;
  background-color: rgba(19, 19, 18, var(--tw-bg-opacity));
}
.bg-\[\#1C1C1C\] {
  --tw-bg-opacity: 1;
  background-color: rgba(28, 28, 28, var(--tw-bg-opacity));
}
.bg-\[\#9E9A94\] {
  --tw-bg-opacity: 1;
  background-color: rgba(158, 154, 148, var(--tw-bg-opacity));
}
.bg-\[\#F9F9F9\] {
  --tw-bg-opacity: 1;
  background-color: rgba(249, 249, 249, var(--tw-bg-opacity));
}
.bg-\[rgba\(255\,255\,255\,0\.3\)\] {
  --tw-bg-opacity: 0.3;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-\[\#1B1B1B80\] {
  --tw-bg-opacity: 0.5019607843137255;
  background-color: rgba(27, 27, 27, var(--tw-bg-opacity));
}
.bg-\[\#484540\] {
  --tw-bg-opacity: 1;
  background-color: rgba(72, 69, 64, var(--tw-bg-opacity));
}
.bg-\[\#FFF\] {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.bg-\[\#F5F4F0\] {
  --tw-bg-opacity: 1;
  background-color: rgba(245, 244, 240, var(--tw-bg-opacity));
}
.bg-\[\#F6F6F6\] {
  --tw-bg-opacity: 1;
  background-color: rgba(246, 246, 246, var(--tw-bg-opacity));
}
.rounded-60rpx {
  -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 60);
  -moz-border-radius: -moz-calc(var(--rpx, 1px) * 60);
  border-radius: calc(var(--rpx, 1px) * 60);
}
.rounded-24rpx {
  -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 24);
  -moz-border-radius: -moz-calc(var(--rpx, 1px) * 24);
  border-radius: calc(var(--rpx, 1px) * 24);
}
.rounded-1\/2 {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.cursor-pointer {
  cursor: pointer;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
}
.contents {
  display: contents;
}
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -moz-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -moz-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -moz-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.h-full {
  height: 100%;
}
.h-24px {
  height: 24px;
}
.h-1px {
  height: 1px;
}
.h-2px {
  height: 2px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-0 {
  opacity: 0;
}
.overflow-hidden {
  overflow: hidden;
}
.p-2rpx {
  padding: calc(var(--rpx, 1px) * 2);
}
.pt-4rpx {
  padding-top: calc(var(--rpx, 1px) * 4);
}
.pb-4rpx {
  padding-bottom: calc(var(--rpx, 1px) * 4);
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-0 {
  left: 0;
}
.top-0 {
  top: 0;
}
.right-20px {
  right: 20px;
}
.-left-1px {
  left: -1px;
}
.bottom-0 {
  bottom: 0;
}
.right-0 {
  right: 0;
}
.text-center {
  text-align: center;
}
.text-\[rgba\(0\,0\,0\,0\.95\)\] {
  --tw-text-opacity: 0.95;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.text-\[rgba\(255\,255\,255\,0\.95\)\] {
  --tw-text-opacity: 0.95;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-\[rgba\(0\,0\,0\,0\.75\)\] {
  --tw-text-opacity: 0.75;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}
.invisible {
  visibility: hidden;
}
.w-screen {
  width: 100vw;
  width: -webkit-calc(var(--vw, 1vw) * 100);
  width: -moz-calc(var(--vw, 1vw) * 100);
  width: calc(var(--vw, 1vw) * 100);
}
.w-full {
  width: 100%;
}
.w-24px {
  width: 24px;
}
.w-49px {
  width: 49px;
}
.z-2 {
  z-index: 2;
}
.z-1 {
  z-index: 1;
}
.origin-top {
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  -moz-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
}
.full {
  height: 100%;
  width: 100%;
}
@media (min-width: 650px) and (max-width: 1023px) {
  .pad\:rounded-4rpx {
    -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 4);
    -moz-border-radius: -moz-calc(var(--rpx, 1px) * 4);
    border-radius: calc(var(--rpx, 1px) * 4);
  }
  .pad\:rounded-8rpx {
    -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 8);
    -moz-border-radius: -moz-calc(var(--rpx, 1px) * 8);
    border-radius: calc(var(--rpx, 1px) * 8);
  }
  .pad\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
  }
  .pad\:flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .pad\:flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .pad\:items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .pad\:justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .pad\:justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .pad\:flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
  }
  .pad\:h-auto {
    height: auto;
  }
  .pad\:h-full {
    height: 100%;
  }
  .pad\:h-460rpx {
    height: -webkit-calc(var(--rpx, 1px) * 460);
    height: -moz-calc(var(--rpx, 1px) * 460);
    height: calc(var(--rpx, 1px) * 460);
  }
  .pad\:h-128rpx {
    height: -webkit-calc(var(--rpx, 1px) * 128);
    height: -moz-calc(var(--rpx, 1px) * 128);
    height: calc(var(--rpx, 1px) * 128);
  }
  .pad\:h-274\.5rpx {
    height: -webkit-calc(var(--rpx, 1px) * 274.5);
    height: -moz-calc(var(--rpx, 1px) * 274.5);
    height: calc(var(--rpx, 1px) * 274.5);
  }
  .pad\:h-27rpx {
    height: -webkit-calc(var(--rpx, 1px) * 27);
    height: -moz-calc(var(--rpx, 1px) * 27);
    height: calc(var(--rpx, 1px) * 27);
  }
  .pad\:h-277rpx {
    height: -webkit-calc(var(--rpx, 1px) * 277);
    height: -moz-calc(var(--rpx, 1px) * 277);
    height: calc(var(--rpx, 1px) * 277);
  }
  .pad\:h-46rpx {
    height: -webkit-calc(var(--rpx, 1px) * 46);
    height: -moz-calc(var(--rpx, 1px) * 46);
    height: calc(var(--rpx, 1px) * 46);
  }
  .pad\:h-54rpx {
    height: -webkit-calc(var(--rpx, 1px) * 54);
    height: -moz-calc(var(--rpx, 1px) * 54);
    height: calc(var(--rpx, 1px) * 54);
  }
  .pad\:h-298rpx {
    height: -webkit-calc(var(--rpx, 1px) * 298);
    height: -moz-calc(var(--rpx, 1px) * 298);
    height: calc(var(--rpx, 1px) * 298);
  }
  .pad\:h-135rpx {
    height: -webkit-calc(var(--rpx, 1px) * 135);
    height: -moz-calc(var(--rpx, 1px) * 135);
    height: calc(var(--rpx, 1px) * 135);
  }
  .pad\:h-166rpx {
    height: -webkit-calc(var(--rpx, 1px) * 166);
    height: -moz-calc(var(--rpx, 1px) * 166);
    height: calc(var(--rpx, 1px) * 166);
  }
  .pad\:h-420px {
    height: 420px;
  }
  .pad\:h-425rpx {
    height: -webkit-calc(var(--rpx, 1px) * 425);
    height: -moz-calc(var(--rpx, 1px) * 425);
    height: calc(var(--rpx, 1px) * 425);
  }
  .pad\:h-413rpx {
    height: -webkit-calc(var(--rpx, 1px) * 413);
    height: -moz-calc(var(--rpx, 1px) * 413);
    height: calc(var(--rpx, 1px) * 413);
  }
  .pad\:h-280rpx {
    height: -webkit-calc(var(--rpx, 1px) * 280);
    height: -moz-calc(var(--rpx, 1px) * 280);
    height: calc(var(--rpx, 1px) * 280);
  }
  .pad\:h-160rpx {
    height: -webkit-calc(var(--rpx, 1px) * 160);
    height: -moz-calc(var(--rpx, 1px) * 160);
    height: calc(var(--rpx, 1px) * 160);
  }
  .pad\:h-40rpx {
    height: -webkit-calc(var(--rpx, 1px) * 40);
    height: -moz-calc(var(--rpx, 1px) * 40);
    height: calc(var(--rpx, 1px) * 40);
  }
  .pad\:h-157rpx {
    height: -webkit-calc(var(--rpx, 1px) * 157);
    height: -moz-calc(var(--rpx, 1px) * 157);
    height: calc(var(--rpx, 1px) * 157);
  }
  .pad\:h-30px {
    height: 30px;
  }
  .pad\:h-24px {
    height: 24px;
  }
  .pad\:h-420rpx {
    height: -webkit-calc(var(--rpx, 1px) * 420);
    height: -moz-calc(var(--rpx, 1px) * 420);
    height: calc(var(--rpx, 1px) * 420);
  }
  .pad\:h-320rpx {
    height: -webkit-calc(var(--rpx, 1px) * 320);
    height: -moz-calc(var(--rpx, 1px) * 320);
    height: calc(var(--rpx, 1px) * 320);
  }
  .pad\:mt-16rpx {
    margin-top: calc(var(--rpx, 1px) * 16);
  }
  .pad\:mt-24rpx {
    margin-top: calc(var(--rpx, 1px) * 24);
  }
  .pad\:mt-2rpx {
    margin-top: calc(var(--rpx, 1px) * 2);
  }
  .pad\:mt-4rpx {
    margin-top: calc(var(--rpx, 1px) * 4);
  }
  .pad\:mt-20rpx {
    margin-top: calc(var(--rpx, 1px) * 20);
  }
  .pad\:mb-4rpx {
    margin-bottom: calc(var(--rpx, 1px) * 4);
  }
  .pad\:mt-12rpx {
    margin-top: calc(var(--rpx, 1px) * 12);
  }
  .pad\:mt-40rpx {
    margin-top: calc(var(--rpx, 1px) * 40);
  }
  .pad\:mt-18rpx {
    margin-top: calc(var(--rpx, 1px) * 18);
  }
  .pad\:mt-8rpx {
    margin-top: calc(var(--rpx, 1px) * 8);
  }
  .pad\:mt-64rpx {
    margin-top: calc(var(--rpx, 1px) * 64);
  }
  .pad\:mr-20rpx {
    margin-right: calc(var(--rpx, 1px) * 20);
  }
  .pad\:mr-12rpx {
    margin-right: calc(var(--rpx, 1px) * 12);
  }
  .pad\:mb-12rpx {
    margin-bottom: calc(var(--rpx, 1px) * 12);
  }
  .pad\:mt-32rpx {
    margin-top: calc(var(--rpx, 1px) * 32);
  }
  .pad\:mt-6rpx {
    margin-top: calc(var(--rpx, 1px) * 6);
  }
  .pad\:object-cover {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .pad\:p-8rpx {
    padding: calc(var(--rpx, 1px) * 8);
  }
  .pad\:p-12rpx {
    padding: calc(var(--rpx, 1px) * 12);
  }
  .pad\:pt-48rpx {
    padding-top: calc(var(--rpx, 1px) * 48);
  }
  .pad\:pb-48rpx {
    padding-bottom: calc(var(--rpx, 1px) * 48);
  }
  .pad\:pt-80rpx {
    padding-top: calc(var(--rpx, 1px) * 80);
  }
  .pad\:pb-80rpx {
    padding-bottom: calc(var(--rpx, 1px) * 80);
  }
  .pad\:pt-16rpx {
    padding-top: calc(var(--rpx, 1px) * 16);
  }
  .pad\:pb-16rpx {
    padding-bottom: calc(var(--rpx, 1px) * 16);
  }
  .pad\:pl-20rpx {
    padding-left: calc(var(--rpx, 1px) * 20);
  }
  .pad\:pr-20rpx {
    padding-right: calc(var(--rpx, 1px) * 20);
  }
  .pad\:pt-64rpx {
    padding-top: calc(var(--rpx, 1px) * 64);
  }
  .pad\:pb-64rpx {
    padding-bottom: calc(var(--rpx, 1px) * 64);
  }
  .pad\:pl-24px {
    padding-left: 24px;
  }
  .pad\:pr-24px {
    padding-right: 24px;
  }
  .pad\:pt-20rpx {
    padding-top: calc(var(--rpx, 1px) * 20);
  }
  .pad\:pb-8rpx {
    padding-bottom: calc(var(--rpx, 1px) * 8);
  }
  .pad\:pt-24rpx {
    padding-top: calc(var(--rpx, 1px) * 24);
  }
  .pad\:pb-24rpx {
    padding-bottom: calc(var(--rpx, 1px) * 24);
  }
  .pad\:pb-247rpx {
    padding-bottom: calc(var(--rpx, 1px) * 247);
  }
  .pad\:pl-112rpx {
    padding-left: calc(var(--rpx, 1px) * 112);
  }
  .pad\:pr-8rpx {
    padding-right: calc(var(--rpx, 1px) * 8);
  }
  .pad\:pt-153rpx {
    padding-top: calc(var(--rpx, 1px) * 153);
  }
  .pad\:pt-132rpx {
    padding-top: calc(var(--rpx, 1px) * 132);
  }
  .pad\:pb-68rpx {
    padding-bottom: calc(var(--rpx, 1px) * 68);
  }
  .pad\:pb-20rpx {
    padding-bottom: calc(var(--rpx, 1px) * 20);
  }
  .pad\:pl-12rpx {
    padding-left: calc(var(--rpx, 1px) * 12);
  }
  .pad\:pr-12rpx {
    padding-right: calc(var(--rpx, 1px) * 12);
  }
  .pad\:pb-36rpx {
    padding-bottom: calc(var(--rpx, 1px) * 36);
  }
  .pad\:pb-100rpx {
    padding-bottom: calc(var(--rpx, 1px) * 100);
  }
  .pad\:left-24px {
    left: 24px;
  }
  .pad\:bottom-83rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 83);
    bottom: -moz-calc(var(--rpx, 1px) * 83);
    bottom: calc(var(--rpx, 1px) * 83);
  }
  .pad\:top-116rpx {
    top: -webkit-calc(var(--rpx, 1px) * 116);
    top: -moz-calc(var(--rpx, 1px) * 116);
    top: calc(var(--rpx, 1px) * 116);
  }
  .pad\:-left-158rpx {
    left: -webkit-calc(var(--rpx, 1px) * -158);
    left: -moz-calc(var(--rpx, 1px) * -158);
    left: calc(var(--rpx, 1px) * -158);
  }
  .pad\:bottom-40rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 40);
    bottom: -moz-calc(var(--rpx, 1px) * 40);
    bottom: calc(var(--rpx, 1px) * 40);
  }
  .pad\:left-82rpx {
    left: -webkit-calc(var(--rpx, 1px) * 82);
    left: -moz-calc(var(--rpx, 1px) * 82);
    left: calc(var(--rpx, 1px) * 82);
  }
  .pad\:bottom-23rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 23);
    bottom: -moz-calc(var(--rpx, 1px) * 23);
    bottom: calc(var(--rpx, 1px) * 23);
  }
  .pad\:left-25rpx {
    left: -webkit-calc(var(--rpx, 1px) * 25);
    left: -moz-calc(var(--rpx, 1px) * 25);
    left: calc(var(--rpx, 1px) * 25);
  }
  .pad\:-top-20rpx {
    top: -webkit-calc(var(--rpx, 1px) * -20);
    top: -moz-calc(var(--rpx, 1px) * -20);
    top: calc(var(--rpx, 1px) * -20);
  }
  .pad\:left-0 {
    left: 0;
  }
  .pad\:top-0 {
    top: 0;
  }
  .pad\:bottom-0 {
    bottom: 0;
  }
  .pad\:left-7rpx {
    left: -webkit-calc(var(--rpx, 1px) * 7);
    left: -moz-calc(var(--rpx, 1px) * 7);
    left: calc(var(--rpx, 1px) * 7);
  }
  .pad\:left-276rpx {
    left: -webkit-calc(var(--rpx, 1px) * 276);
    left: -moz-calc(var(--rpx, 1px) * 276);
    left: calc(var(--rpx, 1px) * 276);
  }
  .pad\:top-156rpx {
    top: -webkit-calc(var(--rpx, 1px) * 156);
    top: -moz-calc(var(--rpx, 1px) * 156);
    top: calc(var(--rpx, 1px) * 156);
  }
  .pad\:-left-99px {
    left: -99px;
  }
  .pad\:-top-15px {
    top: -15px;
  }
  .pad\:top-213rpx {
    top: -webkit-calc(var(--rpx, 1px) * 213);
    top: -moz-calc(var(--rpx, 1px) * 213);
    top: calc(var(--rpx, 1px) * 213);
  }
  .pad\:-left-98px {
    left: -98px;
  }
  .pad\:left-238rpx {
    left: -webkit-calc(var(--rpx, 1px) * 238);
    left: -moz-calc(var(--rpx, 1px) * 238);
    left: calc(var(--rpx, 1px) * 238);
  }
  .pad\:right-10rpx {
    right: -webkit-calc(var(--rpx, 1px) * 10);
    right: -moz-calc(var(--rpx, 1px) * 10);
    right: calc(var(--rpx, 1px) * 10);
  }
  .pad\:bottom-10rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 10);
    bottom: -moz-calc(var(--rpx, 1px) * 10);
    bottom: calc(var(--rpx, 1px) * 10);
  }
  .pad\:left-3px {
    left: 3px;
  }
  .pad\:top-3px {
    top: 3px;
  }
  .pad\:w-full {
    width: 100%;
  }
  .pad\:w-720rpx {
    width: -webkit-calc(var(--rpx, 1px) * 720);
    width: -moz-calc(var(--rpx, 1px) * 720);
    width: calc(var(--rpx, 1px) * 720);
  }
  .pad\:w-237rpx {
    width: -webkit-calc(var(--rpx, 1px) * 237);
    width: -moz-calc(var(--rpx, 1px) * 237);
    width: calc(var(--rpx, 1px) * 237);
  }
  .pad\:w-478rpx {
    width: -webkit-calc(var(--rpx, 1px) * 478);
    width: -moz-calc(var(--rpx, 1px) * 478);
    width: calc(var(--rpx, 1px) * 478);
  }
  .pad\:w-362rpx {
    width: -webkit-calc(var(--rpx, 1px) * 362);
    width: -moz-calc(var(--rpx, 1px) * 362);
    width: calc(var(--rpx, 1px) * 362);
  }
  .pad\:w-281rpx {
    width: -webkit-calc(var(--rpx, 1px) * 281);
    width: -moz-calc(var(--rpx, 1px) * 281);
    width: calc(var(--rpx, 1px) * 281);
  }
  .pad\:w-350rpx {
    width: -webkit-calc(var(--rpx, 1px) * 350);
    width: -moz-calc(var(--rpx, 1px) * 350);
    width: calc(var(--rpx, 1px) * 350);
  }
  .pad\:w-722rpx {
    width: -webkit-calc(var(--rpx, 1px) * 722);
    width: -moz-calc(var(--rpx, 1px) * 722);
    width: calc(var(--rpx, 1px) * 722);
  }
  .pad\:w-358rpx {
    width: -webkit-calc(var(--rpx, 1px) * 358);
    width: -moz-calc(var(--rpx, 1px) * 358);
    width: calc(var(--rpx, 1px) * 358);
  }
  .pad\:w-50vw {
    width: 50vw;
    width: -webkit-calc(var(--vw, 1vw) * 50);
    width: -moz-calc(var(--vw, 1vw) * 50);
    width: calc(var(--vw, 1vw) * 50);
  }
  .pad\:w-254rpx {
    width: -webkit-calc(var(--rpx, 1px) * 254);
    width: -moz-calc(var(--rpx, 1px) * 254);
    width: calc(var(--rpx, 1px) * 254);
  }
  .pad\:w-52rpx {
    width: -webkit-calc(var(--rpx, 1px) * 52);
    width: -moz-calc(var(--rpx, 1px) * 52);
    width: calc(var(--rpx, 1px) * 52);
  }
  .pad\:w-728rpx {
    width: -webkit-calc(var(--rpx, 1px) * 728);
    width: -moz-calc(var(--rpx, 1px) * 728);
    width: calc(var(--rpx, 1px) * 728);
  }
  .pad\:w-566rpx {
    width: -webkit-calc(var(--rpx, 1px) * 566);
    width: -moz-calc(var(--rpx, 1px) * 566);
    width: calc(var(--rpx, 1px) * 566);
  }
  .pad\:w-645rpx {
    width: -webkit-calc(var(--rpx, 1px) * 645);
    width: -moz-calc(var(--rpx, 1px) * 645);
    width: calc(var(--rpx, 1px) * 645);
  }
  .pad\:w-705rpx {
    width: -webkit-calc(var(--rpx, 1px) * 705);
    width: -moz-calc(var(--rpx, 1px) * 705);
    width: calc(var(--rpx, 1px) * 705);
  }
  .pad\:w-100rpx {
    width: -webkit-calc(var(--rpx, 1px) * 100);
    width: -moz-calc(var(--rpx, 1px) * 100);
    width: calc(var(--rpx, 1px) * 100);
  }
  .pad\:w-98rpx {
    width: -webkit-calc(var(--rpx, 1px) * 98);
    width: -moz-calc(var(--rpx, 1px) * 98);
    width: calc(var(--rpx, 1px) * 98);
  }
  .pad\:w-420rpx {
    width: -webkit-calc(var(--rpx, 1px) * 420);
    width: -moz-calc(var(--rpx, 1px) * 420);
    width: calc(var(--rpx, 1px) * 420);
  }
  .pad\:w-312rpx {
    width: -webkit-calc(var(--rpx, 1px) * 312);
    width: -moz-calc(var(--rpx, 1px) * 312);
    width: calc(var(--rpx, 1px) * 312);
  }
  .pad\:w-292rpx {
    width: -webkit-calc(var(--rpx, 1px) * 292);
    width: -moz-calc(var(--rpx, 1px) * 292);
    width: calc(var(--rpx, 1px) * 292);
  }
  .pad\:w-240rpx {
    width: -webkit-calc(var(--rpx, 1px) * 240);
    width: -moz-calc(var(--rpx, 1px) * 240);
    width: calc(var(--rpx, 1px) * 240);
  }
  .pad\:w-210rpx {
    width: -webkit-calc(var(--rpx, 1px) * 210);
    width: -moz-calc(var(--rpx, 1px) * 210);
    width: calc(var(--rpx, 1px) * 210);
  }
  .pad\:w-176rpx {
    width: -webkit-calc(var(--rpx, 1px) * 176);
    width: -moz-calc(var(--rpx, 1px) * 176);
    width: calc(var(--rpx, 1px) * 176);
  }
  .pad\:w-40rpx {
    width: -webkit-calc(var(--rpx, 1px) * 40);
    width: -moz-calc(var(--rpx, 1px) * 40);
    width: calc(var(--rpx, 1px) * 40);
  }
  .pad\:w-30px {
    width: 30px;
  }
  .pad\:w-24px {
    width: 24px;
  }
}
@media (min-width: 1024px) {
  .pc\:rounded-8rpx {
    -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 8);
    -moz-border-radius: -moz-calc(var(--rpx, 1px) * 8);
    border-radius: calc(var(--rpx, 1px) * 8);
  }
  .pc\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
  }
  .pc\:flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .pc\:flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .pc\:items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .pc\:justify-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .pc\:justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .pc\:flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
  }
  .pc\:flex-shrink-0 {
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
  }
  .pc\:h-auto {
    height: auto;
  }
  .pc\:h-full {
    height: 100%;
  }
  .pc\:h-44\.44vw {
    height: 44.44vw;
    height: -webkit-calc(var(--vw, 1vw) * 44.44);
    height: -moz-calc(var(--vw, 1vw) * 44.44);
    height: calc(var(--vw, 1vw) * 44.44);
  }
  .pc\:h-234rpx {
    height: -webkit-calc(var(--rpx, 1px) * 234);
    height: -moz-calc(var(--rpx, 1px) * 234);
    height: calc(var(--rpx, 1px) * 234);
  }
  .pc\:h-500rpx {
    height: -webkit-calc(var(--rpx, 1px) * 500);
    height: -moz-calc(var(--rpx, 1px) * 500);
    height: calc(var(--rpx, 1px) * 500);
  }
  .pc\:h-49rpx {
    height: -webkit-calc(var(--rpx, 1px) * 49);
    height: -moz-calc(var(--rpx, 1px) * 49);
    height: calc(var(--rpx, 1px) * 49);
  }
  .pc\:h-505rpx {
    height: -webkit-calc(var(--rpx, 1px) * 505);
    height: -moz-calc(var(--rpx, 1px) * 505);
    height: calc(var(--rpx, 1px) * 505);
  }
  .pc\:h-175rpx {
    height: -webkit-calc(var(--rpx, 1px) * 175);
    height: -moz-calc(var(--rpx, 1px) * 175);
    height: calc(var(--rpx, 1px) * 175);
  }
  .pc\:h-485rpx {
    height: -webkit-calc(var(--rpx, 1px) * 485);
    height: -moz-calc(var(--rpx, 1px) * 485);
    height: calc(var(--rpx, 1px) * 485);
  }
  .pc\:h-220rpx {
    height: -webkit-calc(var(--rpx, 1px) * 220);
    height: -moz-calc(var(--rpx, 1px) * 220);
    height: calc(var(--rpx, 1px) * 220);
  }
  .pc\:h-269rpx {
    height: -webkit-calc(var(--rpx, 1px) * 269);
    height: -moz-calc(var(--rpx, 1px) * 269);
    height: calc(var(--rpx, 1px) * 269);
  }
  .pc\:h-640px {
    height: 640px;
  }
  .pc\:h-572rpx {
    height: -webkit-calc(var(--rpx, 1px) * 572);
    height: -moz-calc(var(--rpx, 1px) * 572);
    height: calc(var(--rpx, 1px) * 572);
  }
  .pc\:h-626rpx {
    height: -webkit-calc(var(--rpx, 1px) * 626);
    height: -moz-calc(var(--rpx, 1px) * 626);
    height: calc(var(--rpx, 1px) * 626);
  }
  .pc\:h-1317rpx {
    height: -webkit-calc(var(--rpx, 1px) * 1317);
    height: -moz-calc(var(--rpx, 1px) * 1317);
    height: calc(var(--rpx, 1px) * 1317);
  }
  .pc\:h-560rpx {
    height: -webkit-calc(var(--rpx, 1px) * 560);
    height: -moz-calc(var(--rpx, 1px) * 560);
    height: calc(var(--rpx, 1px) * 560);
  }
  .pc\:h-324rpx {
    height: -webkit-calc(var(--rpx, 1px) * 324);
    height: -moz-calc(var(--rpx, 1px) * 324);
    height: calc(var(--rpx, 1px) * 324);
  }
  .pc\:h-452rpx {
    height: -webkit-calc(var(--rpx, 1px) * 452);
    height: -moz-calc(var(--rpx, 1px) * 452);
    height: calc(var(--rpx, 1px) * 452);
  }
  .pc\:h-48rpx {
    height: -webkit-calc(var(--rpx, 1px) * 48);
    height: -moz-calc(var(--rpx, 1px) * 48);
    height: calc(var(--rpx, 1px) * 48);
  }
  .pc\:h-301rpx {
    height: -webkit-calc(var(--rpx, 1px) * 301);
    height: -moz-calc(var(--rpx, 1px) * 301);
    height: calc(var(--rpx, 1px) * 301);
  }
  .pc\:h-40px {
    height: 40px;
  }
  .pc\:h-32px {
    height: 32px;
  }
  .pc\:h-640rpx {
    height: -webkit-calc(var(--rpx, 1px) * 640);
    height: -moz-calc(var(--rpx, 1px) * 640);
    height: calc(var(--rpx, 1px) * 640);
  }
  .pc\:h-460rpx {
    height: -webkit-calc(var(--rpx, 1px) * 460);
    height: -moz-calc(var(--rpx, 1px) * 460);
    height: calc(var(--rpx, 1px) * 460);
  }
  .pc\:mt-24rpx {
    margin-top: calc(var(--rpx, 1px) * 24);
  }
  .pc\:mt-36rpx {
    margin-top: calc(var(--rpx, 1px) * 36);
  }
  .pc\:mt-4rpx {
    margin-top: calc(var(--rpx, 1px) * 4);
  }
  .pc\:mt-8rpx {
    margin-top: calc(var(--rpx, 1px) * 8);
  }
  .pc\:mt-40rpx {
    margin-top: calc(var(--rpx, 1px) * 40);
  }
  .pc\:mb-8rpx {
    margin-bottom: calc(var(--rpx, 1px) * 8);
  }
  .pc\:mr-8rpx {
    margin-right: calc(var(--rpx, 1px) * 8);
  }
  .pc\:mt-20rpx {
    margin-top: calc(var(--rpx, 1px) * 20);
  }
  .pc\:mb-60rpx {
    margin-bottom: calc(var(--rpx, 1px) * 60);
  }
  .pc\:mt-8px {
    margin-top: 8px;
  }
  .pc\:mt-12rpx {
    margin-top: calc(var(--rpx, 1px) * 12);
  }
  .pc\:mt-80rpx {
    margin-top: calc(var(--rpx, 1px) * 80);
  }
  .pc\:mt-23rpx {
    margin-top: calc(var(--rpx, 1px) * 23);
  }
  .pc\:mr-64rpx {
    margin-right: calc(var(--rpx, 1px) * 64);
  }
  .pc\:mr-20rpx {
    margin-right: calc(var(--rpx, 1px) * 20);
  }
  .pc\:mb-24rpx {
    margin-bottom: calc(var(--rpx, 1px) * 24);
  }
  .pc\:mr-24rpx {
    margin-right: calc(var(--rpx, 1px) * 24);
  }
  .pc\:mt-48rpx {
    margin-top: calc(var(--rpx, 1px) * 48);
  }
  .pc\:max-w-1440px {
    max-width: 1440px;
  }
  .pc\:max-w-754px {
    max-width: 754px;
  }
  .pc\:min-h-640rpx {
    min-height: -webkit-calc(var(--rpx, 1px) * 640);
    min-height: -moz-calc(var(--rpx, 1px) * 640);
    min-height: calc(var(--rpx, 1px) * 640);
  }
  .pc\:min-w-520px {
    min-width: 520px;
  }
  .pc\:min-w-230px {
    min-width: 230px;
  }
  .pc\:min-w-460px {
    min-width: 460px;
  }
  .pc\:min-w-700px {
    min-width: 700px;
  }
  .pc\:p-20rpx {
    padding: calc(var(--rpx, 1px) * 20);
  }
  .pc\:p-24rpx {
    padding: calc(var(--rpx, 1px) * 24);
  }
  .pc\:pt-80px {
    padding-top: 80px;
  }
  .pc\:pb-80px {
    padding-bottom: 80px;
  }
  .pc\:pt-12rpx {
    padding-top: calc(var(--rpx, 1px) * 12);
  }
  .pc\:pb-12rpx {
    padding-bottom: calc(var(--rpx, 1px) * 12);
  }
  .pc\:pl-20rpx {
    padding-left: calc(var(--rpx, 1px) * 20);
  }
  .pc\:pr-20rpx {
    padding-right: calc(var(--rpx, 1px) * 20);
  }
  .pc\:pt-184rpx {
    padding-top: calc(var(--rpx, 1px) * 184);
  }
  .pc\:pb-184rpx {
    padding-bottom: calc(var(--rpx, 1px) * 184);
  }
  .pc\:pt-80rpx {
    padding-top: calc(var(--rpx, 1px) * 80);
  }
  .pc\:pl-64px {
    padding-left: 64px;
  }
  .pc\:pb-80rpx {
    padding-bottom: calc(var(--rpx, 1px) * 80);
  }
  .pc\:pr-64px {
    padding-right: 64px;
  }
  .pc\:pt-24rpx {
    padding-top: calc(var(--rpx, 1px) * 24);
  }
  .pc\:pb-24rpx {
    padding-bottom: calc(var(--rpx, 1px) * 24);
  }
  .pc\:pb-329rpx {
    padding-bottom: calc(var(--rpx, 1px) * 329);
  }
  .pc\:pr-44rpx {
    padding-right: calc(var(--rpx, 1px) * 44);
  }
  .pc\:pl-208rpx {
    padding-left: calc(var(--rpx, 1px) * 208);
  }
  .pc\:pr-164rpx {
    padding-right: calc(var(--rpx, 1px) * 164);
  }
  .pc\:pt-180rpx {
    padding-top: calc(var(--rpx, 1px) * 180);
  }
  .pc\:pt-160rpx {
    padding-top: calc(var(--rpx, 1px) * 160);
  }
  .pc\:pr-64rpx {
    padding-right: calc(var(--rpx, 1px) * 64);
  }
  .pc\:pt-64rpx {
    padding-top: calc(var(--rpx, 1px) * 64);
  }
  .pc\:pb-64rpx {
    padding-bottom: calc(var(--rpx, 1px) * 64);
  }
  .pc\:pb-128rpx {
    padding-bottom: calc(var(--rpx, 1px) * 128);
  }
  .pc\:left-64px {
    left: 64px;
  }
  .pc\:bottom-5\.97vw {
    bottom: 5.97vw;
    bottom: -webkit-calc(var(--vw, 1vw) * 5.97);
    bottom: -moz-calc(var(--vw, 1vw) * 5.97);
    bottom: calc(var(--vw, 1vw) * 5.97);
  }
  .pc\:top-211rpx {
    top: -webkit-calc(var(--rpx, 1px) * 211);
    top: -moz-calc(var(--rpx, 1px) * 211);
    top: calc(var(--rpx, 1px) * 211);
  }
  .pc\:-left-288rpx {
    left: -webkit-calc(var(--rpx, 1px) * -288);
    left: -moz-calc(var(--rpx, 1px) * -288);
    left: calc(var(--rpx, 1px) * -288);
  }
  .pc\:top-0 {
    top: 0;
  }
  .pc\:bottom-40rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 40);
    bottom: -moz-calc(var(--rpx, 1px) * 40);
    bottom: calc(var(--rpx, 1px) * 40);
  }
  .pc\:left-134rpx {
    left: -webkit-calc(var(--rpx, 1px) * 134);
    left: -moz-calc(var(--rpx, 1px) * 134);
    left: calc(var(--rpx, 1px) * 134);
  }
  .pc\:bottom-37rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 37);
    bottom: -moz-calc(var(--rpx, 1px) * 37);
    bottom: calc(var(--rpx, 1px) * 37);
  }
  .pc\:left-40rpx {
    left: -webkit-calc(var(--rpx, 1px) * 40);
    left: -moz-calc(var(--rpx, 1px) * 40);
    left: calc(var(--rpx, 1px) * 40);
  }
  .pc\:-top-32rpx {
    top: -webkit-calc(var(--rpx, 1px) * -32);
    top: -moz-calc(var(--rpx, 1px) * -32);
    top: calc(var(--rpx, 1px) * -32);
  }
  .pc\:bottom-0 {
    bottom: 0;
  }
  .pc\:left-0 {
    left: 0;
  }
  .pc\:-top-81rpx {
    top: -webkit-calc(var(--rpx, 1px) * -81);
    top: -moz-calc(var(--rpx, 1px) * -81);
    top: calc(var(--rpx, 1px) * -81);
  }
  .pc\:right-14rpx {
    right: -webkit-calc(var(--rpx, 1px) * 14);
    right: -moz-calc(var(--rpx, 1px) * 14);
    right: calc(var(--rpx, 1px) * 14);
  }
  .pc\:right-773rpx {
    right: -webkit-calc(var(--rpx, 1px) * 773);
    right: -moz-calc(var(--rpx, 1px) * 773);
    right: calc(var(--rpx, 1px) * 773);
  }
  .pc\:top-160rpx {
    top: -webkit-calc(var(--rpx, 1px) * 160);
    top: -moz-calc(var(--rpx, 1px) * 160);
    top: calc(var(--rpx, 1px) * 160);
  }
  .pc\:-left-138px {
    left: -138px;
  }
  .pc\:-top-24px {
    top: -24px;
  }
  .pc\:top-262rpx {
    top: -webkit-calc(var(--rpx, 1px) * 262);
    top: -moz-calc(var(--rpx, 1px) * 262);
    top: calc(var(--rpx, 1px) * 262);
  }
  .pc\:-right-44rpx {
    right: -webkit-calc(var(--rpx, 1px) * -44);
    right: -moz-calc(var(--rpx, 1px) * -44);
    right: calc(var(--rpx, 1px) * -44);
  }
  .pc\:right-20rpx {
    right: -webkit-calc(var(--rpx, 1px) * 20);
    right: -moz-calc(var(--rpx, 1px) * 20);
    right: calc(var(--rpx, 1px) * 20);
  }
  .pc\:bottom-20rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 20);
    bottom: -moz-calc(var(--rpx, 1px) * 20);
    bottom: calc(var(--rpx, 1px) * 20);
  }
  .pc\:left-4px {
    left: 4px;
  }
  .pc\:top-4px {
    top: 4px;
  }
  .pc\:w-full {
    width: 100%;
  }
  .pc\:w-1312rpx {
    width: -webkit-calc(var(--rpx, 1px) * 1312);
    width: -moz-calc(var(--rpx, 1px) * 1312);
    width: calc(var(--rpx, 1px) * 1312);
  }
  .pc\:w-432rpx {
    width: -webkit-calc(var(--rpx, 1px) * 432);
    width: -moz-calc(var(--rpx, 1px) * 432);
    width: calc(var(--rpx, 1px) * 432);
  }
  .pc\:w-872rpx {
    width: -webkit-calc(var(--rpx, 1px) * 872);
    width: -moz-calc(var(--rpx, 1px) * 872);
    width: calc(var(--rpx, 1px) * 872);
  }
  .pc\:w-632rpx {
    width: -webkit-calc(var(--rpx, 1px) * 632);
    width: -moz-calc(var(--rpx, 1px) * 632);
    width: calc(var(--rpx, 1px) * 632);
  }
  .pc\:w-520rpx {
    width: -webkit-calc(var(--rpx, 1px) * 520);
    width: -moz-calc(var(--rpx, 1px) * 520);
    width: calc(var(--rpx, 1px) * 520);
  }
  .pc\:w-637rpx {
    width: -webkit-calc(var(--rpx, 1px) * 637);
    width: -moz-calc(var(--rpx, 1px) * 637);
    width: calc(var(--rpx, 1px) * 637);
  }
  .pc\:w-322rpx {
    width: -webkit-calc(var(--rpx, 1px) * 322);
    width: -moz-calc(var(--rpx, 1px) * 322);
    width: calc(var(--rpx, 1px) * 322);
  }
  .pc\:w-508rpx {
    width: -webkit-calc(var(--rpx, 1px) * 508);
    width: -moz-calc(var(--rpx, 1px) * 508);
    width: calc(var(--rpx, 1px) * 508);
  }
  .pc\:w-408rpx {
    width: -webkit-calc(var(--rpx, 1px) * 408);
    width: -moz-calc(var(--rpx, 1px) * 408);
    width: calc(var(--rpx, 1px) * 408);
  }
  .pc\:w-172rpx {
    width: -webkit-calc(var(--rpx, 1px) * 172);
    width: -moz-calc(var(--rpx, 1px) * 172);
    width: calc(var(--rpx, 1px) * 172);
  }
  .pc\:w-1183rpx {
    width: -webkit-calc(var(--rpx, 1px) * 1183);
    width: -moz-calc(var(--rpx, 1px) * 1183);
    width: calc(var(--rpx, 1px) * 1183);
  }
  .pc\:w-919rpx {
    width: -webkit-calc(var(--rpx, 1px) * 919);
    width: -moz-calc(var(--rpx, 1px) * 919);
    width: calc(var(--rpx, 1px) * 919);
  }
  .pc\:w-1048rpx {
    width: -webkit-calc(var(--rpx, 1px) * 1048);
    width: -moz-calc(var(--rpx, 1px) * 1048);
    width: calc(var(--rpx, 1px) * 1048);
  }
  .pc\:w-707rpx {
    width: -webkit-calc(var(--rpx, 1px) * 707);
    width: -moz-calc(var(--rpx, 1px) * 707);
    width: calc(var(--rpx, 1px) * 707);
  }
  .pc\:w-\[calc\(50\%-34rpx\)\] {
    width: -webkit-calc(50% - var(--rpx, 1px) * 34);
    width: -moz-calc(50% - var(--rpx, 1px) * 34);
    width: calc(50% - var(--rpx, 1px) * 34);
  }
  .pc\:w-\[calc\(50\%\+34rpx\)\] {
    width: -webkit-calc(50% + var(--rpx, 1px) * 34);
    width: -moz-calc(50% + var(--rpx, 1px) * 34);
    width: calc(50% + var(--rpx, 1px) * 34);
  }
  .pc\:w-1317rpx {
    width: -webkit-calc(var(--rpx, 1px) * 1317);
    width: -moz-calc(var(--rpx, 1px) * 1317);
    width: calc(var(--rpx, 1px) * 1317);
  }
  .pc\:w-169rpx {
    width: -webkit-calc(var(--rpx, 1px) * 169);
    width: -moz-calc(var(--rpx, 1px) * 169);
    width: calc(var(--rpx, 1px) * 169);
  }
  .pc\:w-141px {
    width: 141px;
  }
  .pc\:w-860rpx {
    width: -webkit-calc(var(--rpx, 1px) * 860);
    width: -moz-calc(var(--rpx, 1px) * 860);
    width: calc(var(--rpx, 1px) * 860);
  }
  .pc\:w-416rpx {
    width: -webkit-calc(var(--rpx, 1px) * 416);
    width: -moz-calc(var(--rpx, 1px) * 416);
    width: calc(var(--rpx, 1px) * 416);
  }
  .pc\:w-428rpx {
    width: -webkit-calc(var(--rpx, 1px) * 428);
    width: -moz-calc(var(--rpx, 1px) * 428);
    width: calc(var(--rpx, 1px) * 428);
  }
  .pc\:w-234rpx {
    width: -webkit-calc(var(--rpx, 1px) * 234);
    width: -moz-calc(var(--rpx, 1px) * 234);
    width: calc(var(--rpx, 1px) * 234);
  }
  .pc\:w-48rpx {
    width: -webkit-calc(var(--rpx, 1px) * 48);
    width: -moz-calc(var(--rpx, 1px) * 48);
    width: calc(var(--rpx, 1px) * 48);
  }
  .pc\:w-\[calc\(50\%\)\] {
    width: 50%;
  }
  .pc\:w-40px {
    width: 40px;
  }
  .pc\:w-32px {
    width: 32px;
  }
  .pc\:w-720rpx {
    width: -webkit-calc(var(--rpx, 1px) * 720);
    width: -moz-calc(var(--rpx, 1px) * 720);
    width: calc(var(--rpx, 1px) * 720);
  }
  .pc\:w-647rpx {
    width: -webkit-calc(var(--rpx, 1px) * 647);
    width: -moz-calc(var(--rpx, 1px) * 647);
    width: calc(var(--rpx, 1px) * 647);
  }
  .pc\:w-754rpx {
    width: -webkit-calc(var(--rpx, 1px) * 754);
    width: -moz-calc(var(--rpx, 1px) * 754);
    width: calc(var(--rpx, 1px) * 754);
  }
}
@media (max-width: 649px) {
  .mo\:rounded-4rpx {
    -webkit-border-radius: -webkit-calc(var(--rpx, 1px) * 4);
    -moz-border-radius: -moz-calc(var(--rpx, 1px) * 4);
    border-radius: calc(var(--rpx, 1px) * 4);
  }
  .mo\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
  }
  .mo\:flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .mo\:flex-wrap {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .mo\:items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -moz-box-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
  }
  .mo\:items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .mo\:justify-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  .mo\:flex-1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 0%;
    -webkit-flex: 1 1 0%;
    flex: 1 1 0%;
  }
  .mo\:order-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    order: 2;
  }
  .mo\:order-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    -moz-box-ordinal-group: 2;
    -webkit-order: 1;
    order: 1;
  }
  .mo\:h-auto {
    height: auto;
  }
  .mo\:h-full {
    height: 100%;
  }
  .mo\:h-480rpx {
    height: -webkit-calc(var(--rpx, 1px) * 480);
    height: -moz-calc(var(--rpx, 1px) * 480);
    height: calc(var(--rpx, 1px) * 480);
  }
  .mo\:h-299rpx {
    height: -webkit-calc(var(--rpx, 1px) * 299);
    height: -moz-calc(var(--rpx, 1px) * 299);
    height: calc(var(--rpx, 1px) * 299);
  }
  .mo\:h-140rpx {
    height: -webkit-calc(var(--rpx, 1px) * 140);
    height: -moz-calc(var(--rpx, 1px) * 140);
    height: calc(var(--rpx, 1px) * 140);
  }
  .mo\:h-128rpx {
    height: -webkit-calc(var(--rpx, 1px) * 128);
    height: -moz-calc(var(--rpx, 1px) * 128);
    height: calc(var(--rpx, 1px) * 128);
  }
  .mo\:h-137rpx {
    height: -webkit-calc(var(--rpx, 1px) * 137);
    height: -moz-calc(var(--rpx, 1px) * 137);
    height: calc(var(--rpx, 1px) * 137);
  }
  .mo\:h-13rpx {
    height: -webkit-calc(var(--rpx, 1px) * 13);
    height: -moz-calc(var(--rpx, 1px) * 13);
    height: calc(var(--rpx, 1px) * 13);
  }
  .mo\:h-139rpx {
    height: -webkit-calc(var(--rpx, 1px) * 139);
    height: -moz-calc(var(--rpx, 1px) * 139);
    height: calc(var(--rpx, 1px) * 139);
  }
  .mo\:h-444rpx {
    height: -webkit-calc(var(--rpx, 1px) * 444);
    height: -moz-calc(var(--rpx, 1px) * 444);
    height: calc(var(--rpx, 1px) * 444);
  }
  .mo\:h-156rpx {
    height: -webkit-calc(var(--rpx, 1px) * 156);
    height: -moz-calc(var(--rpx, 1px) * 156);
    height: calc(var(--rpx, 1px) * 156);
  }
  .mo\:h-72rpx {
    height: -webkit-calc(var(--rpx, 1px) * 72);
    height: -moz-calc(var(--rpx, 1px) * 72);
    height: calc(var(--rpx, 1px) * 72);
  }
  .mo\:h-86rpx {
    height: -webkit-calc(var(--rpx, 1px) * 86);
    height: -moz-calc(var(--rpx, 1px) * 86);
    height: calc(var(--rpx, 1px) * 86);
  }
  .mo\:h-360rpx {
    height: -webkit-calc(var(--rpx, 1px) * 360);
    height: -moz-calc(var(--rpx, 1px) * 360);
    height: calc(var(--rpx, 1px) * 360);
  }
  .mo\:h-300rpx {
    height: -webkit-calc(var(--rpx, 1px) * 300);
    height: -moz-calc(var(--rpx, 1px) * 300);
    height: calc(var(--rpx, 1px) * 300);
  }
  .mo\:h-240rpx {
    height: -webkit-calc(var(--rpx, 1px) * 240);
    height: -moz-calc(var(--rpx, 1px) * 240);
    height: calc(var(--rpx, 1px) * 240);
  }
  .mo\:h-340rpx {
    height: -webkit-calc(var(--rpx, 1px) * 340);
    height: -moz-calc(var(--rpx, 1px) * 340);
    height: calc(var(--rpx, 1px) * 340);
  }
  .mo\:h-30px {
    height: 30px;
  }
  .mo\:h-24px {
    height: 24px;
  }
  .mo\:h-38rpx {
    height: -webkit-calc(var(--rpx, 1px) * 38);
    height: -moz-calc(var(--rpx, 1px) * 38);
    height: calc(var(--rpx, 1px) * 38);
  }
  .mo\:h-344rpx {
    height: -webkit-calc(var(--rpx, 1px) * 344);
    height: -moz-calc(var(--rpx, 1px) * 344);
    height: calc(var(--rpx, 1px) * 344);
  }
  .mo\:h-400rpx {
    height: -webkit-calc(var(--rpx, 1px) * 400);
    height: -moz-calc(var(--rpx, 1px) * 400);
    height: calc(var(--rpx, 1px) * 400);
  }
  .mo\:mt-36rpx {
    margin-top: calc(var(--rpx, 1px) * 36);
  }
  .mo\:mt-2rpx {
    margin-top: calc(var(--rpx, 1px) * 2);
  }
  .mo\:mt-12rpx {
    margin-top: calc(var(--rpx, 1px) * 12);
  }
  .mo\:mt-18rpx {
    margin-top: calc(var(--rpx, 1px) * 18);
  }
  .mo\:mt-24rpx {
    margin-top: calc(var(--rpx, 1px) * 24);
  }
  .mo\:mb-24rpx {
    margin-bottom: calc(var(--rpx, 1px) * 24);
  }
  .mo\:mb-4rpx {
    margin-bottom: calc(var(--rpx, 1px) * 4);
  }
  .mo\:mt-8rpx {
    margin-top: calc(var(--rpx, 1px) * 8);
  }
  .mo\:-ml-16px {
    margin-left: -16px;
  }
  .mo\:mt-4rpx {
    margin-top: calc(var(--rpx, 1px) * 4);
  }
  .mo\:mt-30rpx {
    margin-top: calc(var(--rpx, 1px) * 30);
  }
  .mo\:mt-16rpx {
    margin-top: calc(var(--rpx, 1px) * 16);
  }
  .mo\:mt-48rpx {
    margin-top: calc(var(--rpx, 1px) * 48);
  }
  .mo\:mt-20rpx {
    margin-top: calc(var(--rpx, 1px) * 20);
  }
  .mo\:mr-20rpx {
    margin-right: calc(var(--rpx, 1px) * 20);
  }
  .mo\:mt-6rpx {
    margin-top: calc(var(--rpx, 1px) * 6);
  }
  .mo\:ml-16px {
    margin-left: 16px;
  }
  .mo\:mr-16px {
    margin-right: 16px;
  }
  .mo\:mt-9rpx {
    margin-top: calc(var(--rpx, 1px) * 9);
  }
  .mo\:object-cover {
    -o-object-fit: cover;
    object-fit: cover;
  }
  .mo\:overflow-hidden {
    overflow: hidden;
  }
  .mo\:p-8rpx {
    padding: calc(var(--rpx, 1px) * 8);
  }
  .mo\:p-12rpx {
    padding: calc(var(--rpx, 1px) * 12);
  }
  .mo\:pt-48rpx {
    padding-top: calc(var(--rpx, 1px) * 48);
  }
  .mo\:pb-48rpx {
    padding-bottom: calc(var(--rpx, 1px) * 48);
  }
  .mo\:pt-80rpx {
    padding-top: calc(var(--rpx, 1px) * 80);
  }
  .mo\:pb-80rpx {
    padding-bottom: calc(var(--rpx, 1px) * 80);
  }
  .mo\:pl-16px {
    padding-left: 16px;
  }
  .mo\:pr-16px {
    padding-right: 16px;
  }
  .mo\:pb-64rpx {
    padding-bottom: calc(var(--rpx, 1px) * 64);
  }
  .mo\:pb-209rpx {
    padding-bottom: calc(var(--rpx, 1px) * 209);
  }
  .mo\:pt-19rpx {
    padding-top: calc(var(--rpx, 1px) * 19);
  }
  .mo\:pb-19rpx {
    padding-bottom: calc(var(--rpx, 1px) * 19);
  }
  .mo\:pl-12rpx {
    padding-left: calc(var(--rpx, 1px) * 12);
  }
  .mo\:pr-12rpx {
    padding-right: calc(var(--rpx, 1px) * 12);
  }
  .mo\:pb-40rpx {
    padding-bottom: calc(var(--rpx, 1px) * 40);
  }
  .mo\:pt-64rpx {
    padding-top: calc(var(--rpx, 1px) * 64);
  }
  .mo\:pt-96rpx {
    padding-top: calc(var(--rpx, 1px) * 96);
  }
  .mo\:pb-24rpx {
    padding-bottom: calc(var(--rpx, 1px) * 24);
  }
  .mo\:pt-24rpx {
    padding-top: calc(var(--rpx, 1px) * 24);
  }
  .mo\:pt-100rpx {
    padding-top: calc(var(--rpx, 1px) * 100);
  }
  .mo\:pb-100rpx {
    padding-bottom: calc(var(--rpx, 1px) * 100);
  }
  .mo\:relative {
    position: relative;
  }
  .mo\:left-16px {
    left: 16px;
  }
  .mo\:right-16px {
    right: 16px;
  }
  .mo\:bottom-13rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 13);
    bottom: -moz-calc(var(--rpx, 1px) * 13);
    bottom: calc(var(--rpx, 1px) * 13);
  }
  .mo\:top-58rpx {
    top: -webkit-calc(var(--rpx, 1px) * 58);
    top: -moz-calc(var(--rpx, 1px) * 58);
    top: calc(var(--rpx, 1px) * 58);
  }
  .mo\:left-\[calc\(-61rpx-16px\)\] {
    left: -webkit-calc(var(--rpx, 1px) * -61 - 16px);
    left: -moz-calc(var(--rpx, 1px) * -61 - 16px);
    left: calc(var(--rpx, 1px) * -61 - 16px);
  }
  .mo\:bottom-50rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 50);
    bottom: -moz-calc(var(--rpx, 1px) * 50);
    bottom: calc(var(--rpx, 1px) * 50);
  }
  .mo\:left-43rpx {
    left: -webkit-calc(var(--rpx, 1px) * 43);
    left: -moz-calc(var(--rpx, 1px) * 43);
    left: calc(var(--rpx, 1px) * 43);
  }
  .mo\:bottom-12rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 12);
    bottom: -moz-calc(var(--rpx, 1px) * 12);
    bottom: calc(var(--rpx, 1px) * 12);
  }
  .mo\:left-13rpx {
    left: -webkit-calc(var(--rpx, 1px) * 13);
    left: -moz-calc(var(--rpx, 1px) * 13);
    left: calc(var(--rpx, 1px) * 13);
  }
  .mo\:-top-10rpx {
    top: -webkit-calc(var(--rpx, 1px) * -10);
    top: -moz-calc(var(--rpx, 1px) * -10);
    top: calc(var(--rpx, 1px) * -10);
  }
  .mo\:left-0 {
    left: 0;
  }
  .mo\:top-0 {
    top: 0;
  }
  .mo\:right-0 {
    right: 0;
  }
  .mo\:right-176rpx {
    right: -webkit-calc(var(--rpx, 1px) * 176);
    right: -moz-calc(var(--rpx, 1px) * 176);
    right: calc(var(--rpx, 1px) * 176);
  }
  .mo\:top-85rpx {
    top: -webkit-calc(var(--rpx, 1px) * 85);
    top: -moz-calc(var(--rpx, 1px) * 85);
    top: calc(var(--rpx, 1px) * 85);
  }
  .mo\:-left-78px {
    left: -78px;
  }
  .mo\:-top-26px {
    top: -26px;
  }
  .mo\:top-128rpx {
    top: -webkit-calc(var(--rpx, 1px) * 128);
    top: -moz-calc(var(--rpx, 1px) * 128);
    top: calc(var(--rpx, 1px) * 128);
  }
  .mo\:-top-15px {
    top: -15px;
  }
  .mo\:right-10rpx {
    right: -webkit-calc(var(--rpx, 1px) * 10);
    right: -moz-calc(var(--rpx, 1px) * 10);
    right: calc(var(--rpx, 1px) * 10);
  }
  .mo\:bottom-10rpx {
    bottom: -webkit-calc(var(--rpx, 1px) * 10);
    bottom: -moz-calc(var(--rpx, 1px) * 10);
    bottom: calc(var(--rpx, 1px) * 10);
  }
  .mo\:left-3px {
    left: 3px;
  }
  .mo\:top-3px {
    top: 3px;
  }
  .mo\:w-full {
    width: 100%;
  }
  .mo\:w-screen {
    width: 100vw;
    width: -webkit-calc(var(--vw, 1vw) * 100);
    width: -moz-calc(var(--vw, 1vw) * 100);
    width: calc(var(--vw, 1vw) * 100);
  }
  .mo\:w-328rpx {
    width: -webkit-calc(var(--rpx, 1px) * 328);
    width: -moz-calc(var(--rpx, 1px) * 328);
    width: calc(var(--rpx, 1px) * 328);
  }
  .mo\:w-162rpx {
    width: -webkit-calc(var(--rpx, 1px) * 162);
    width: -moz-calc(var(--rpx, 1px) * 162);
    width: calc(var(--rpx, 1px) * 162);
  }
  .mo\:w-360rpx {
    width: -webkit-calc(var(--rpx, 1px) * 360);
    width: -moz-calc(var(--rpx, 1px) * 360);
    width: calc(var(--rpx, 1px) * 360);
  }
  .mo\:w-175rpx {
    width: -webkit-calc(var(--rpx, 1px) * 175);
    width: -moz-calc(var(--rpx, 1px) * 175);
    width: calc(var(--rpx, 1px) * 175);
  }
  .mo\:w-380rpx {
    width: -webkit-calc(var(--rpx, 1px) * 380);
    width: -moz-calc(var(--rpx, 1px) * 380);
    width: calc(var(--rpx, 1px) * 380);
  }
  .mo\:w-295rpx {
    width: -webkit-calc(var(--rpx, 1px) * 295);
    width: -moz-calc(var(--rpx, 1px) * 295);
    width: calc(var(--rpx, 1px) * 295);
  }
  .mo\:w-337rpx {
    width: -webkit-calc(var(--rpx, 1px) * 337);
    width: -moz-calc(var(--rpx, 1px) * 337);
    width: calc(var(--rpx, 1px) * 337);
  }
  .mo\:w-64rpx {
    width: -webkit-calc(var(--rpx, 1px) * 64);
    width: -moz-calc(var(--rpx, 1px) * 64);
    width: calc(var(--rpx, 1px) * 64);
  }
  .mo\:w-30px {
    width: 30px;
  }
  .mo\:w-24px {
    width: 24px;
  }
}
@media (min-width: 1024px) {
  .pct\:text-42 {
    font-size: 42px;
    line-height: 50.4px;
  }
  .pct\:text-16 {
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
  }
  .pct\:text-68 {
    font-size: 68px;
    line-height: 76px;
  }
  .pct\:text-48 {
    font-size: 48px;
    letter-spacing: 0.02em;
    line-height: 60px;
  }
  .pct\:text-18 {
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 26px;
  }
  .pct\:text-32 {
    font-size: 32px;
    letter-spacing: 0.5px;
    line-height: 40px;
  }
  .pct\:text-24 {
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 32px;
  }
  .pct\:text-40 {
    font-size: 40px;
    letter-spacing: 0.02em;
    line-height: 48px;
  }
  .pct\:text-28 {
    font-size: 28px;
    letter-spacing: 0.5px;
    line-height: 36px;
  }
  .pct\:text-12 {
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 20px;
  }
  .pct\:text-36 {
    font-size: 36px;
    line-height: 40px;
  }
  .pct\:text-16v1 {
    font-size: 16px;
    line-height: 24px;
  }
  .pct\:text-14 {
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 22px;
  }
}
@media (max-width: 1023px) {
  .mot\:text-30m {
    font-size: 30px;
    letter-spacing: 0.5px;
    line-height: 38px;
  }
  .mot\:text-14m {
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 22px;
  }
  .mot\:text-48m {
    font-size: 48px;
    line-height: 56px;
  }
  .mot\:text-26m {
    font-size: 26px;
    letter-spacing: 0.5px;
    line-height: 32px;
  }
  .mot\:text-16m {
    font-size: 16px;
    letter-spacing: 0.5px;
    line-height: 24px;
  }
  .mot\:text-22m {
    font-size: 22px;
    letter-spacing: 0.5px;
    line-height: 30px;
  }
  .mot\:text-12m {
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 20px;
  }
  .mot\:text-24m {
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 32px;
  }
  .mot\:text-20m {
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 28px;
  }
}
/* @font-face {
  font-family: swiper-icons;
  src: url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);
  font-weight: 400;
  font-style: normal;
} */
:root {
  --swiper-theme-color: #007aff;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0);
}
.swiper-pointer-events {
  touch-action: pan-y;
}
.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0)
  );
}
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-horizontal.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-vertical.swiper-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-centered > .swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999;
}
.swiper-centered.swiper-horizontal
  > .swiper-wrapper
  > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-horizontal > .swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-centered.swiper-vertical > .swiper-wrapper:before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.zn--wrapper {
  font-size: 16px;
}
.zn--wrapper img:not(.loaded):not([src^="https://via.placeholder.com/"]),.zn--wrapper img:not([src]):not([src^="https://via.placeholder.com/"]),.zn--wrapper img[src=""]:not([src^="https://via.placeholder.com/"])
{
  opacity: 0;
}
.zn--wrapper img[src^="https://via.placeholder.com/"]
{
  opacity: 0.5;
}
.zn--wrapper * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.zn--wrapper a {
  text-decoration: none;
}
.zn--wrapper img {
  display: block;
  max-width: none;
}
.zn--wrapper canvas img {
  display: none;
}
.zn--wrapper video {
  display: block;
  max-width: none;
}
.zn--wrapper div[data-ll-status],
.zn--wrapper figure[data-ll-status] {
  background-repeat: no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}
.zn--wrapper br {
  font-family: Open Sans, -apple-system, BlinkMacSystemFont, Helvetica Neue,
    Helvetica, Roboto, Arial, PingFang SC, Hiragino Sans GB, Microsoft Yahei,
    Microsoft Jhenghei, "sans-serif";
}
.zn--wrapper h1 {
  clip: rect(1px, 1px, 1px, 1px);
  border: none;
  -webkit-clip-path: inset(0 0 99.9%);
  clip-path: inset(0 0 99.9%);
  height: 1px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.zn--wrapper #section-footer a {
  color: #000000bf;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.zn--wrapper sub,
.zn--wrapper sup {
  font-size: 65%;
}
.zn--wrapper .abs-center-x {
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translate(-50%);
}
.zn--wrapper .abs-center-y {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.zn--wrapper .abs-center {
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translate(-50%) translateY(-50%);
}
.zn--wrapper .swiper-button-disabled {
  opacity: 0.3;
}
.zn--wrapper[data-status="1"] [nfc-grid] {
  display: none;
}
.zn--replacement-tool {
  --p-6: #4c3fb3;
  --p-5: #6a5ecc;
  --p-4: #968dda;
  --k-2: #e5e5e5;
  --k-3: #a9a9b5;
  --white: #fff;
  --border-radius: 12ex;
}
.zn--wrapper[mode="EDITING"] .zn-text-inner:hover {
  background: #4c3fb3;
  color: #fff;
}
.zn--wrapper .zn-text-inner {
  font-size: inherit;
  line-height: inherit;
}
.zn--wrapper [contenteditable="true"] {
  caret-color: #4c3fb3;
  outline: none;
}
.zn--replacement-tool-wrapper .zn--replacement-tool .Toastify__toast {
  margin: 0 auto 10px;
  width: 140ex;
  width: -webkit-calc(var(--rpx, 1px) * 320);
  width: -moz-calc(var(--rpx, 1px) * 320);
  width: calc(var(--rpx, 1px) * 320);
}
.zn--replacement-tool-wrapper .zn--replacement-tool .Toastify__toast-container {
  bottom: 0;
  left: -webkit-calc(50vw - 20px) !important;
  left: -moz-calc(50vw - 20px) !important;
  left: calc(50vw - 20px) !important;
  left: -webkit-calc(var(--vw, 1vw) * 50 - 20px) !important;
  left: -moz-calc(var(--vw, 1vw) * 50 - 20px) !important;
  left: calc(var(--vw, 1vw) * 50 - 20px) !important;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translate(-50%);
}
#section-ksp [ksp-card] .mask {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
#section-ksp [ksp-card] img {
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  -o-transition: -o-transform 0.5s ease;
  -moz-transition: transform 0.5s ease, -moz-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease,
    -moz-transform 0.5s ease, -o-transform 0.5s ease;
}
#section-ksp [ksp-card] .arrow-wrapper {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#section-ksp [ksp-card] .arrow-wrapper .arrow {
  opacity: 0;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#section-exp .linear-top {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#000),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(top, #000 0, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(top, #000 0, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(180deg, #000, rgba(0, 0, 0, 0));
}
#section-exp .linear-left {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#000),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(left, #000 0, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, #000 0, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0));
}
#section-exp .linear-bottom {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#000),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(bottom, #000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(bottom, #000 0, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(0deg, #000, rgba(0, 0, 0, 0));
}
#section-exp .linear-right {
  background: -webkit-gradient(
    linear,
    right top,
    left top,
    from(#000),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(right, #000, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(right, #000 0, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(right, #000 0, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(-90deg, #000, rgba(0, 0, 0, 0));
}
#section-exp [cable-linear] {
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#000),
    color-stop(50%, #000),
    to(rgba(0, 0, 0, 0))
  );
  background: -webkit-linear-gradient(left, #000, #000 50%, rgba(0, 0, 0, 0));
  background: -moz-linear-gradient(
    left,
    #000 0,
    #000 50%,
    rgba(0, 0, 0, 0) 100%
  );
  background: -o-linear-gradient(left, #000 0, #000 50%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(90deg, #000, #000 50%, rgba(0, 0, 0, 0));
}
#section-photo [ani-pro-scale] {
  -webkit-transform-origin: 90% 0;
  -moz-transform-origin: 90% 0;
  -ms-transform-origin: 90% 0;
  -o-transform-origin: 90% 0;
  transform-origin: 90% 0;
}
#section-photo [progress-bar] {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#section-photo [ani-grid-1] {
  background: -webkit-linear-gradient(268.31deg, #fff 2.64%, #f3f1e0 98.64%);
  background: -moz-linear-gradient(268.31deg, #fff 2.64%, #f3f1e0 98.64%);
  background: -o-linear-gradient(268.31deg, #fff 2.64%, #f3f1e0 98.64%);
  background: linear-gradient(181.69deg, #fff 2.64%, #f3f1e0 98.64%);
}
#section-photo [switch-img] {
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#section-photo [switch-img].active {
  opacity: 1;
}
#section-photo [switch-button] {
  background: transparent;
  color: #fffffff2;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#section-photo [switch-button].active {
  background: #fff;
  color: #000000f2;
}
#section-design [black-circle-inner] {
  background: -webkit-linear-gradient(131.71deg, #212121 7.54%, #a9a9a9 108.3%);
  background: -moz-linear-gradient(131.71deg, #212121 7.54%, #a9a9a9 108.3%);
  background: -o-linear-gradient(131.71deg, #212121 7.54%, #a9a9a9 108.3%);
  background: linear-gradient(318.29deg, #212121 7.54%, #a9a9a9 108.3%);
}
#section-design [black-circle-outer] {
  border: 1px solid #2e2e2e;
}
#section-design [gold-circle-inner] {
  background: -webkit-linear-gradient(131.71deg, #e0d8ac 7.54%, #faf8e5 108.3%);
  background: -moz-linear-gradient(131.71deg, #e0d8ac 7.54%, #faf8e5 108.3%);
  background: -o-linear-gradient(131.71deg, #e0d8ac 7.54%, #faf8e5 108.3%);
  background: linear-gradient(318.29deg, #e0d8ac 7.54%, #faf8e5 108.3%);
}
#section-design [gold-circle-outer] {
  border: 1px solid #e4ddb3;
}
#section-design [gold-bg] {
  background: -webkit-linear-gradient(
      321.69deg,
      hsla(48, 88%, 97%, 0.5),
      rgba(255, 243, 197, 0.5)
    ),
    -webkit-linear-gradient(bottom, #fff, #fff);
  background: -moz-linear-gradient(
      321.69deg,
      hsla(48, 88%, 97%, 0.5) 0,
      rgba(255, 243, 197, 0.5) 100%
    ),
    -moz-linear-gradient(bottom, #fff, #fff);
  background: -o-linear-gradient(
      321.69deg,
      hsla(48, 88%, 97%, 0.5) 0,
      rgba(255, 243, 197, 0.5) 100%
    ),
    -o-linear-gradient(bottom, #fff, #fff);
  background: linear-gradient(
      128.31deg,
      hsla(48, 88%, 97%, 0.5),
      rgba(255, 243, 197, 0.5)
    ),
    linear-gradient(0deg, #fff, #fff);
}
#section-design [black-bg] {
  background: -webkit-linear-gradient(321.69deg, #fafafa, #a2a2a2);
  background: -moz-linear-gradient(321.69deg, #fafafa 0, #a2a2a2 100%);
  background: -o-linear-gradient(321.69deg, #fafafa 0, #a2a2a2 100%);
  background: linear-gradient(128.31deg, #fafafa, #a2a2a2);
}
#section-design [black-item],
#section-design [gold-item] {
  -webkit-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#section-quality [progress-bar] {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#section-quality [spec-card] {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#section-quality .swiper {
  padding-left: 16px;
  padding-right: 16px;
}
#section-quality .swiper .swiper-slide {
  margin-right: calc(var(--rpx, 1px) * 4);
  width: auto;
}
#section-quality .swiper .swiper-slide:last-child {
  margin-right: 0;
}
#section-os [progress-bar] {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
#section-os .swiper {
  padding-left: 24px;
  padding-right: 24px;
}
#section-os .swiper .swiper-slide {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: auto;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin-right: calc(var(--rpx, 1px) * 4);
  width: -webkit-calc(var(--rpx, 1px) * 358);
  width: -moz-calc(var(--rpx, 1px) * 358);
  width: calc(var(--rpx, 1px) * 358);
}
#section-os .swiper .swiper-slide:last-child {
  margin-right: 0;
}
body.no-scroll {
  overflow-y: hidden;
}
body.zn--body-fixed {
  position: fixed;
}
#webpack-dev-server-client-overlay {
  display: none;
}
@media (min-width: 1024px) {
  :root {
    --rpx: -webkit-calc(0.07622vw - 0.09756px);
    --rpx: -moz-calc(0.07622vw - 0.09756px);
    --rpx: calc(0.07622vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 1312 - 0.09756px);
  }
  #section-ksp [ksp-card]:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
  }
  #section-ksp [ksp-card]:hover .mask {
    opacity: 1;
  }
  #section-ksp [ksp-card]:hover .arrow-wrapper .arrow {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  #section-photo [ani-grid-3] .swiper {
    padding-left: calc(var(--vw, 1vw) * 50 - var(--rpx, 1px) * 656);
    padding-right: calc(var(--vw, 1vw) * 50 - var(--rpx, 1px) * 656);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide {
    height: -webkit-calc(var(--rpx, 1px) * 426);
    height: -moz-calc(var(--rpx, 1px) * 426);
    height: calc(var(--rpx, 1px) * 426);
    margin-right: calc(var(--rpx, 1px) * 8);
    width: -webkit-calc(var(--rpx, 1px) * 322);
    width: -moz-calc(var(--rpx, 1px) * 322);
    width: calc(var(--rpx, 1px) * 322);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(2),
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(4) {
    width: -webkit-calc(var(--rpx, 1px) * 576);
    width: -moz-calc(var(--rpx, 1px) * 576);
    width: calc(var(--rpx, 1px) * 576);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:last-child {
    margin-right: 0;
  }
}
@media (max-width: 649px) {
  :root {
    --rpx: -webkit-calc(0.30488vw - 0.09756px);
    --rpx: -moz-calc(0.30488vw - 0.09756px);
    --rpx: calc(0.30488vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 328 - 0.09756px);
  }
  #section-kv [kv-title] {
    font-size: 48px;
    line-height: 56px;
  }
  #section-kv [kv-specs] {
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 18px;
  }
  #section-photo [ani-pro-scale] {
    -webkit-transform-origin: 80% 55%;
    -moz-transform-origin: 80% 55%;
    -ms-transform-origin: 80% 55%;
    -o-transform-origin: 80% 55%;
    transform-origin: 80% 55%;
  }
  #section-photo [ani-grid-3] .swiper {
    padding-left: 16px;
    padding-right: 16px;
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide {
    height: -webkit-calc(var(--rpx, 1px) * 438);
    height: -moz-calc(var(--rpx, 1px) * 438);
    height: calc(var(--rpx, 1px) * 438);
    margin-right: calc(var(--rpx, 1px) * 4);
    width: -webkit-calc(var(--rpx, 1px) * 328);
    width: -moz-calc(var(--rpx, 1px) * 328);
    width: calc(var(--rpx, 1px) * 328);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(2),
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(4) {
    width: -webkit-calc(var(--rpx, 1px) * 576);
    width: -moz-calc(var(--rpx, 1px) * 576);
    width: calc(var(--rpx, 1px) * 576);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:last-child {
    margin-right: 0;
  }
}
@media (min-width: 650px) and (max-width: 1023px) {
  :root {
    --rpx: -webkit-calc(0.13889vw - 0.06667px);
    --rpx: -moz-calc(0.13889vw - 0.06667px);
    --rpx: calc(0.13889vw - 0.06667px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: calc(var(--vw, 1vw) * 100 / 720 - 0.06667px);
  }
  #section-kv [kv-title] {
    font-size: 66px;
    line-height: 72px;
  }
  #section-kv [kv-specs] {
    font-size: 10px;
    letter-spacing: 0.5px;
    line-height: 12px;
  }
}
@media (orientation: portrait) and (max-width: 1023px) {
  #oc-header.fixed {
    visibility: hidden;
  }
  .zn--wrapper .pc-only,
  .pc-only {
    display: none;
  }
}
@media (min-width: 1201px) {
  .zn--wrapper .small-pc-only {
    display: none;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .small-pc-only {
    display: none;
  }
  #section-photo [ani-grid-1] {
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#fff),
      to(#f3f1e0)
    );
    background: -webkit-linear-gradient(top, #fff, #f3f1e0);
    background: -moz-linear-gradient(top, #fff 0, #f3f1e0 100%);
    background: -o-linear-gradient(top, #fff 0, #f3f1e0 100%);
    background: linear-gradient(180deg, #fff, #f3f1e0);
  }
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .zn--wrapper .small-pc-hidden {
    display: none;
  }
  #section-kv {
    height: 67vw;
    height: -webkit-calc(var(--vw, 1vw) * 67);
    height: -moz-calc(var(--vw, 1vw) * 67);
    height: calc(var(--vw, 1vw) * 67);
  }
  #section-exp [spec-card] {
    width: -webkit-calc(var(--rpx, 1px) * 652);
    width: -moz-calc(var(--rpx, 1px) * 652);
    width: calc(var(--rpx, 1px) * 652);
  }
  #section-exp [spec-card]:first-child {
    margin-bottom: calc(var(--rpx, 1px) * 8);
  }
  #section-exp [spec-card]:nth-child(2) {
    margin-bottom: calc(var(--rpx, 1px) * 8);
    margin-right: 0;
  }
  #section-exp [spec-card]:nth-child(4) {
    margin-right: 0;
  }
  #section-photo [camera-spec-1] {
    -webkit-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -o-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}
@media (min-width: 1440px) {
  :root {
    --rpx: 1px;
  }
  #section-quality [spec-card] {
    width: -webkit-calc(var(--rpx, 1px) * 256);
    width: -moz-calc(var(--rpx, 1px) * 256);
    width: calc(var(--rpx, 1px) * 256);
  }
}
@media (min-width: 1024px) and (max-width: 2200px) {
  #section-kv [kv-title] {
    font-size: 120px;
    line-height: 128px;
  }
  #section-kv [kv-specs] {
    font-size: 24px;
    letter-spacing: 0.5px;
    line-height: 32px;
  }
}
@media (min-width: 2201px) {
  #section-kv [kv-title] {
    font-size: 200px;
    line-height: 208px;
  }
  #section-kv [kv-specs] {
    font-size: 32px;
    letter-spacing: 0.5px;
    line-height: 40px;
  }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  #section-kv [kv-text] {
    -webkit-transform: translateY(30px) translateX(-50px);
    -moz-transform: translateY(30px) translateX(-50px);
    -ms-transform: translateY(30px) translateX(-50px);
    -o-transform: translateY(30px) translateX(-50px);
    transform: translateY(30px) translate(-50px);
  }
}
@media (max-width: 1440px) {
  #section-exp .linear-right {
    display: none;
  }
}
@media (min-width: 650px) {
  #section-photo [grid-2-text] {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}
@media (max-width: 1023px) and (min-width: 650px) {
  #section-photo [ani-grid-3] .swiper {
    padding-left: 24px;
    padding-right: 24px;
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide {
    height: -webkit-calc(var(--rpx, 1px) * 438);
    height: -moz-calc(var(--rpx, 1px) * 438);
    height: calc(var(--rpx, 1px) * 438);
    margin-right: calc(var(--rpx, 1px) * 8);
    width: -webkit-calc(var(--rpx, 1px) * 328);
    width: -moz-calc(var(--rpx, 1px) * 328);
    width: calc(var(--rpx, 1px) * 328);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(2),
  #section-photo [ani-grid-3] .swiper .swiper-slide:nth-child(4) {
    width: -webkit-calc(var(--rpx, 1px) * 576);
    width: -moz-calc(var(--rpx, 1px) * 576);
    width: calc(var(--rpx, 1px) * 576);
  }
  #section-photo [ani-grid-3] .swiper .swiper-slide:last-child {
    margin-right: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  #section-quality [spec-card] {
    width: -webkit-calc(var(--rpx, 1px) * 430);
    width: -moz-calc(var(--rpx, 1px) * 430);
    width: calc(var(--rpx, 1px) * 430);
  }
  #section-quality [spec-card]:nth-child(4),
  #section-quality [spec-card]:nth-child(5) {
    margin-top: calc(var(--rpx, 1px) * 8);
    width: -webkit-calc(var(--rpx, 1px) * 650);
    width: -moz-calc(var(--rpx, 1px) * 650);
    width: calc(var(--rpx, 1px) * 650);
  }
}
#loader-fps {
  --point-color: transparent;
  --size: 2px;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -ms-flex-line-pack: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-align-items: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: var(--size);
  -webkit-justify-content: center;
  justify-content: center;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100vw;
  width: -webkit-calc(var(--vw, 1vw) * 100);
  width: -moz-calc(var(--vw, 1vw) * 100);
  width: calc(var(--vw, 1vw) * 100);
  z-index: 1000;
}
#loader-fps .loader-element {
  border: var(--size) solid var(--point-color);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  margin: calc(var(--size) * 2);
}
#loader-fps .loader-element:first-child {
  -webkit-animation: preloader 0.6s ease-in-out infinite alternate;
  -moz-animation: preloader 0.6s ease-in-out infinite alternate;
  animation: preloader 0.6s ease-in-out infinite alternate;
}
#loader-fps .loader-element:nth-child(2) {
  -webkit-animation: preloader 0.6s ease-in-out 0.2s infinite alternate;
  -moz-animation: preloader 0.6s ease-in-out 0.2s infinite alternate;
  animation: preloader 0.6s ease-in-out 0.2s infinite alternate;
}
#loader-fps .loader-element:nth-child(3) {
  -webkit-animation: preloader 0.6s ease-in-out 0.4s infinite alternate;
  -moz-animation: preloader 0.6s ease-in-out 0.4s infinite alternate;
  animation: preloader 0.6s ease-in-out 0.4s infinite alternate;
}
@-moz-keyframes preloader {
  to {
    -moz-transform: scale(2);
    transform: scale(2);
  }
}
@-webkit-keyframes preloader {
  to {
    -webkit-transform: scale(2);
    transform: scale(2);
  }
}
@keyframes preloader {
  to {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@media (min-width: 1024px) {
  :root {
    --rpx: -webkit-calc(0.07622vw - 0.09756px);
    --rpx: -moz-calc(0.07622vw - 0.09756px);
    --rpx: calc(0.07622vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/1312 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 1312 - 0.09756px);
  }
  .fade-in-pc {
    opacity: 0;
    -webkit-transform: translateY(-webkit-calc(var(--rpx, 1px) * 80));
    -moz-transform: translateY(-moz-calc(var(--rpx, 1px) * 80));
    -ms-transform: translateY(calc(var(--rpx, 1px) * 80));
    -o-transform: translateY(calc(var(--rpx, 1px) * 80));
    transform: translateY(calc(var(--rpx, 1px) * 80));
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, -webkit-transform 0.6s;
    -o-transition: opacity 0.6s, -o-transform 0.6s;
    -moz-transition: transform 0.6s, opacity 0.6s, -moz-transform 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s,
      -moz-transform 0.6s, -o-transform 0.6s;
  }
  .fade-in-pc[data-slight] {
    -webkit-transform: translateY(-webkit-calc(var(--rpx, 1px) * 50));
    -moz-transform: translateY(-moz-calc(var(--rpx, 1px) * 50));
    -ms-transform: translateY(calc(var(--rpx, 1px) * 50));
    -o-transform: translateY(calc(var(--rpx, 1px) * 50));
    transform: translateY(calc(var(--rpx, 1px) * 50));
  }
  .fade-in-pc[data-slow] {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    -moz-transition: transform 1s, opacity 1s, -moz-transform 1s;
    transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s, -webkit-transform 1s,
      -moz-transform 1s, -o-transform 1s;
  }
  .fade-in-pc.show,
  .fade-in-pc[data-slight].show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .fade-in {
    opacity: 0;
    -webkit-transform: translateY(-webkit-calc(var(--rpx, 1px) * 80));
    -moz-transform: translateY(-moz-calc(var(--rpx, 1px) * 80));
    -ms-transform: translateY(calc(var(--rpx, 1px) * 80));
    -o-transform: translateY(calc(var(--rpx, 1px) * 80));
    transform: translateY(calc(var(--rpx, 1px) * 80));
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, -webkit-transform 0.6s;
    -o-transition: opacity 0.6s, -o-transform 0.6s;
    -moz-transition: transform 0.6s, opacity 0.6s, -moz-transform 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s,
      -moz-transform 0.6s, -o-transform 0.6s;
  }
  .fade-in[data-slight] {
    -webkit-transform: translateY(-webkit-calc(var(--rpx, 1px) * 50));
    -moz-transform: translateY(-moz-calc(var(--rpx, 1px) * 50));
    -ms-transform: translateY(calc(var(--rpx, 1px) * 50));
    -o-transform: translateY(calc(var(--rpx, 1px) * 50));
    transform: translateY(calc(var(--rpx, 1px) * 50));
  }
  .fade-in[data-slow] {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    -moz-transition: transform 1s, opacity 1s, -moz-transform 1s;
    transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s, -webkit-transform 1s,
      -moz-transform 1s, -o-transform 1s;
  }
  .fade-in.show,
  .fade-in[data-slight].show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@media (max-width: 649px) {
  :root {
    --rpx: -webkit-calc(0.30488vw - 0.09756px);
    --rpx: -moz-calc(0.30488vw - 0.09756px);
    --rpx: calc(0.30488vw - 0.09756px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/328 - 0.09756px);
    --rpx: calc(var(--vw, 1vw) * 100 / 328 - 0.09756px);
  }
  .fade-in-mo {
    opacity: 0;
    -webkit-transform: translateY(50ex);
    -moz-transform: translateY(50ex);
    -ms-transform: translateY(50ex);
    -o-transform: translateY(50ex);
    transform: translateY(50ex);
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, -webkit-transform 0.6s;
    -o-transition: opacity 0.6s, -o-transform 0.6s;
    -moz-transition: transform 0.6s, opacity 0.6s, -moz-transform 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s,
      -moz-transform 0.6s, -o-transform 0.6s;
  }
  .fade-in-mo[data-slight] {
    -webkit-transform: translateY(30ex);
    -moz-transform: translateY(30ex);
    -ms-transform: translateY(30ex);
    -o-transform: translateY(30ex);
    transform: translateY(30ex);
  }
  .fade-in-mo[data-slow] {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    -moz-transition: transform 1s, opacity 1s, -moz-transform 1s;
    transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s, -webkit-transform 1s,
      -moz-transform 1s, -o-transform 1s;
  }
  .fade-in-mo.show,
  .fade-in-mo[data-slight].show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .fade-in {
    opacity: 0;
    -webkit-transform: translateY(50ex);
    -moz-transform: translateY(50ex);
    -ms-transform: translateY(50ex);
    -o-transform: translateY(50ex);
    transform: translateY(50ex);
    -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
    transition: opacity 0.6s, -webkit-transform 0.6s;
    -o-transition: opacity 0.6s, -o-transform 0.6s;
    -moz-transition: transform 0.6s, opacity 0.6s, -moz-transform 0.6s;
    transition: transform 0.6s, opacity 0.6s;
    transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s,
      -moz-transform 0.6s, -o-transform 0.6s;
  }
  .fade-in[data-slight] {
    -webkit-transform: translateY(30ex);
    -moz-transform: translateY(30ex);
    -ms-transform: translateY(30ex);
    -o-transform: translateY(30ex);
    transform: translateY(30ex);
  }
  .fade-in[data-slow] {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    -moz-transition: transform 1s, opacity 1s, -moz-transform 1s;
    transition: transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s, -webkit-transform 1s,
      -moz-transform 1s, -o-transform 1s;
  }
  .fade-in.show,
  .fade-in[data-slight].show {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@media (min-width: 650px) and (max-width: 1023px) {
  :root {
    --rpx: -webkit-calc(0.13889vw - 0.06667px);
    --rpx: -moz-calc(0.13889vw - 0.06667px);
    --rpx: calc(0.13889vw - 0.06667px);
    --rpx: -webkit-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: -moz-calc(var(--vw, 1vw) * 100/720 - 0.06667px);
    --rpx: calc(var(--vw, 1vw) * 100 / 720 - 0.06667px);
  }
}
@media (min-width: 1440px) {
  :root {
    --rpx: 1px;
  }
}
/* @font-face {
  font-display: swap;
  font-family: OPPOSans-Ver2-Bold;
  font-style: normal;
  font-variation-settings: "wght" 700;
  src: url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Bold.woff2)
      format("woff2"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Bold.woff)
      format("woff"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSansWOPPOSans3.0En-Boldeb2.ttf)
      format("truetype"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Bold.eot)
      format("embedded-opentype");
} */
/* @font-face {
  font-display: swap;
  font-family: OPPOSans-Ver2-Medium;
  font-style: normal;
  font-variation-settings: "wght" 500;
  src: url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Medium.woff2)
      format("woff2"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Medium.woff)
      format("woff"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Medium.ttf)
      format("truetype"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Medium.eot)
      format("embedded-opentype");
}
@font-face {
  font-display: swap;
  font-family: OPPOSans-Ver2-Regular;
  font-style: normal;
  font-variation-settings: "wght" 400;
  src: url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Regular.woff2)
      format("woff2"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Regular.woff)
      format("woff"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Regular.ttf)
      format("truetype"),
    url(https://www.oppo.com/content/dam/statics/fonts/en/OPPOSans3.0En-Regular.eot)
      format("embedded-opentype");
} */
.zn--wrapper {
  font-family: OPPOSans-Ver2-Regular, OPPOSans-Regular, PingFang SC,
    Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei,
    Helvetica Neue, Helvetica, Arial, sans-serif;
}
.zn--wrapper .font-b {
  font-family: OPPOSans-Ver2-Bold, OPPOSans-Bold, PingFang SC, Hiragino Sans GB,
    STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, Helvetica Neue, Helvetica,
    Arial, sans-serif;
  font-weight: 400;
}
.zn--wrapper .font-m {
  font-family: OPPOSans-Ver2-Medium, OPPOSans-Medium, PingFang SC,
    Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei,
    Helvetica Neue, Helvetica, Arial, sans-serif;
}
.zn--wrapper .font-l,
.zn--wrapper .font-r {
  font-family: OPPOSans-Ver2-Regular, OPPOSans-Regular, PingFang SC,
    Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei,
    Helvetica Neue, Helvetica, Arial, sans-serif;
}
html {
  overflow: unset !important;
}
*,
:after,
:before {
  -webkit-box-sizing: initial;
  -moz-box-sizing: initial;
  box-sizing: initial;
}
#oc-wrapper {
  overflow: visible;
}
#footer {
  overflow-x: hidden;
}
#oc-wrapper {
  -webkit-transition: none;
  -o-transition: none;
  -moz-transition: none;
  transition: none;
}
#oc-wrapper .header-v2 .header-main-pc .header-right .search {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#oc-header {
  -webkit-transition: none;
  -o-transition: none;
  -moz-transition: none;
  transition: none;
}
#contact-pop .contact-pop_icon,
#goback-top,
#nps .icon {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[ani-autoplay-video],
[ani-video-wrapper] {
  contain: paint;
  overflow: hidden;
  position: relative;
}
[ani-autoplay-video] canvas,
[ani-autoplay-video] img,
[ani-autoplay-video] video,
[ani-video-wrapper] canvas,
[ani-video-wrapper] img,
[ani-video-wrapper] video {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
[ani-autoplay-video] canvas,
[ani-video-wrapper] canvas {
  -o-object-fit: initial;
  object-fit: fill;
}
[ani-autoplay-video] img,
[ani-autoplay-video] video,
[ani-video-wrapper] img,
[ani-video-wrapper] video {
  -o-object-fit: cover;
  object-fit: cover;
}
@media (orientation: portrait) and (max-width: 1023px) and (min-width: 721px) {
  #oc-header {
    overflow: hidden;
  }
}
@media (orientation: portrait) and (max-width: 1023px) {
  #oc-header.fixed {
    visibility: hidden;
  }
}