.g--container,
.g--container-ls,
.g--container-pt,
.g--wrapper {
  margin: 0 auto;
}
.g--container,
.g--container-ls {
}
@media (min-width: 1800px) {
  .g--container,
  .g--container-ls {
    width: 1312px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  .g--container,
  .g--container-ls {
    width: 1100px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .g--container,
  .g--container-ls {
    width: 896px;
  }
}
@media (max-width: 720px) {
  .g--container,
  .g--container-pt {
    width: 88.89vw;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .g--container,
  .g--container-pt {
    width: 89.58vw;
  }
}
@media (max-width: 1023px) {
  .g--pt-hidden {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .g--ls-hidden {
    display: none !important;
  }
}
@media (max-width: 720px) {
  .g--mb-hidden {
    display: none !important;
  }
}
@media not screen and (max-width: 720px) {
  .g--mb-show {
    display: none !important;
  }
}
.zn--wrapper .g--black {
  color: #000;
}
.zn--wrapper .g--white {
  color: #fff;
}
.zn--wrapper .g--yellow {
  color: #fed701;
}
.zn--wrapper .font-regular {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .fontpc-regular {
    font-family: OPPOSans-Regular;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .fontmo-regular {
    font-family: OPPOSans-Regular;
  }
}
.zn--wrapper .font-medium {
  font-family: OPPOSans-Medium;
}
@media (min-width: 1024px) {
  .zn--wrapper .fontpc-medium {
    font-family: OPPOSans-Medium;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .fontmo-medium {
    font-family: OPPOSans-Medium;
  }
}
.zn--wrapper .font-bold {
  font-family: OPPOSans-Bold;
}
@media (min-width: 1024px) {
  .zn--wrapper .fontpc-bold {
    font-family: OPPOSans-Bold;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .fontmo-bold {
    font-family: OPPOSans-Bold;
  }
}
.zn--wrapper .g--36-20 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--36-20 {
    line-height: 1.19;
    font-size: 34px;
    letter-spacing: -0.005em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--36-20 {
    line-height: 1.3;
    font-size: 18px;
    letter-spacing: -0.006em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--36-20 {
    font-size: 28px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--36-20 {
    font-size: 23px;
  }
}
.zn--wrapper .g--20-14 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--20-14 {
    line-height: 1.5;
    font-size: 18px;
    letter-spacing: -0.0045em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--20-14 {
    line-height: 1.71;
    font-size: 12px;
    letter-spacing: -0.0043em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--20-14 {
    font-size: 15px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--20-14 {
    font-size: 12px;
  }
}
.zn--wrapper .g--14-12 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--14-12 {
    line-height: 1.71;
    font-size: 14px;
    letter-spacing: 0;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--14-12 {
    line-height: 1.67;
    font-size: 12px;
    letter-spacing: 0;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--14-12 {
    font-size: 14px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--14-12 {
    font-size: 14px;
  }
}
.zn--wrapper .g--24-16 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--24-16 {
    line-height: 1.5;
    font-size: 22px;
    letter-spacing: -0.0021em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--24-16 {
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: -0.0062em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--24-16 {
    font-size: 18px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--24-16 {
    font-size: 14px;
  }
}
.zn--wrapper .g--24-18 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--24-18 {
    line-height: 1.5;
    font-size: 22px;
    letter-spacing: -0.0021em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--24-18 {
    line-height: 1.44;
    font-size: 16px;
    letter-spacing: -0.0061em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--24-18 {
    font-size: 18px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--24-18 {
    font-size: 14px;
  }
}
.zn--wrapper .g--24-20 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--24-20 {
    line-height: 1.5;
    font-size: 22px;
    letter-spacing: -0.0021em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--24-20 {
    line-height: 1.3;
    font-size: 18px;
    letter-spacing: -0.006em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--24-20 {
    font-size: 18px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--24-20 {
    font-size: 14px;
  }
}
.zn--wrapper .g--22-16 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--22-16 {
    line-height: 1.36;
    font-size: 20px;
    letter-spacing: -0.0045em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--22-16 {
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: -0.0062em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--22-16 {
    font-size: 16px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--22-16 {
    font-size: 13px;
  }
}
.zn--wrapper .g--18-14 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--18-14 {
    line-height: 1.5;
    font-size: 16px;
    letter-spacing: 0;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--18-14 {
    line-height: 1.71;
    font-size: 12px;
    letter-spacing: -0.0064em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--18-14 {
    font-size: 13px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--18-14 {
    font-size: 12px;
  }
}
.zn--wrapper .g--16-10 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--16-10 {
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: -0.0062em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--16-10 {
    line-height: 1.8;
    font-size: 8px;
    letter-spacing: -0.009em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--16-10 {
    font-size: 12px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--16-10 {
    font-size: 12px;
  }
}
.zn--wrapper .g--16-14 {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--16-14 {
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: -0.0062em;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--16-14 {
    line-height: 1.71;
    font-size: 12px;
    letter-spacing: -0.0043em;
  }
}
@media (min-width: 1024px) and (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--16-14 {
    font-size: 12px;
  }
}
@media (min-width: 1024px) and (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--16-14 {
    font-size: 12px;
  }
}
.zn--wrapper .g--remark {
  font-family: OPPOSans-Regular;
}
@media (min-width: 1024px) {
  .zn--wrapper .g--remark {
    opacity: 0.65;
    letter-spacing: 0;
  }
}
@media (min-width: 1800px) {
  .zn--wrapper .g--remark {
    font-size: 9px;
    line-height: 18px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  .zn--wrapper .g--remark {
    font-size: 7px;
    line-height: 15px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  .zn--wrapper .g--remark {
    font-size: 6px;
    line-height: 12px;
  }
}
@media (max-width: 1023px) {
  .zn--wrapper .g--remark {
    opacity: 0.5;
    line-height: 1.64;
    font-size: 11px;
    letter-spacing: -0.0045em;
  }
}
.zn--wrapper {
  font-size: 16px;
  font-family: OPPOSans-Regular, "PingFang SC", "Hiragino Sans GB", "STHeiti",
    "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", "Helvetica",
    "Arial", sans-serif;
}
.zn--wrapper * {
  box-sizing: border-box;
}
.zn--wrapper a {
  text-decoration: none;
}
.zn--wrapper img {
  display: block;
  max-width: initial;
  opacity: 0;
}
.zn--wrapper img.loaded {
  opacity: 1;
}
.zn--wrapper canvas img {
  display: none;
}
.zn--wrapper video {
  display: block;
  max-width: initial;
}
.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 {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  border: none;
  margin: 0;
  padding: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0 0 99.9%);
  clip-path: inset(0 0 99.9%);
}
@media (max-width: 768px) {
  #oc-header {
    overflow: hidden;
  }
}
#oc-wrapper {
  overflow: visible;
}
#footer {
  overflow-x: hidden;
}
body.no-scroll {
  overflow-y: hidden;
}
.zn--wrapper {
  background: #000;
  color: #fff;
}
.zn--wrapper a {
  color: #fff;
}
.zn--wrapper .flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.zn--wrapper .vertical-center {
  display: flex;
  align-items: center;
}
.zn--wrapper .vertical-center > * {
  width: 100%;
}
.zn--wrapper .horizontal-center {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.zn--wrapper .horizontal-center > * {
  height: 100%;
}
.zn--wrapper .text-center {
  text-align: center;
}
.zn--wrapper .pointer {
  cursor: pointer;
}
.zn--wrapper .hidden-w {
  width: 100%;
  overflow: hidden;
}
.zn--wrapper .full {
  width: 100%;
  height: 100%;
}
.zn--wrapper .g--sticky-container,
.zn--wrapper .sticky-container {
  position: relative;
}
.zn--wrapper .g--sticky-item,
.zn--wrapper .sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.zn--wrapper .fixed,
.zn--wrapper .absolute {
  left: 0;
  top: 0;
}
.zn--wrapper .fixed {
  position: fixed;
}
.zn--wrapper .absolute {
  position: absolute;
}
.zn--wrapper .relative {
  position: relative;
}
@media (max-width: 1023px) {
  .zn--wrapper .fixed-pt,
  .zn--wrapper .absolute-pt {
    left: 0;
    top: 0;
  }
  .zn--wrapper .fixed-pt {
    position: fixed;
  }
  .zn--wrapper .absolute-pt {
    position: absolute;
  }
}
@media (min-width: 1024px) {
  .zn--wrapper .fixed-ls,
  .zn--wrapper .absolute-ls {
    left: 0;
    top: 0;
  }
  .zn--wrapper .fixed-ls {
    position: fixed;
  }
  .zn--wrapper .absolute-ls {
    position: absolute;
  }
}
.g--popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(100 * var(--vh, 1vh));
  z-index: 9999;
  -webkit-transform: translateY(100vh);
  transform: translateY(100vh);
  -webkit-transform: translateY(calc(100 * var(--vh, 1vh)));
  transform: translateY(calc(100 * var(--vh, 1vh)));
}
.g--popup.show {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.g--popup.disappear {
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
}
.g--popup .g--popup-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  .g--popup .g--popup-container {
    padding: 0;
  }
}
.g--popup .g--video-wrapper {
  position: relative;
  margin-top: -12px;
  width: 75%;
  height: auto;
}
@media (min-width: 2400px) {
  .g--popup .g--video-wrapper {
    margin-top: -24px;
  }
}
@media (max-width: 1023px) {
  .g--popup .g--video-wrapper {
    width: 100vw;
  }
}
.video-portrait.g--popup .g--video-wrapper {
  width: 100%;
  height: 100%;
  padding: 32px 0;
  margin-top: 0;
}
.g--popup .g--video-wrapper video {
  width: 100%;
  height: 100%;
  outline: none;
}
.video-portrait.g--popup .g--video-wrapper video {
  object-fit: contain;
}
.g--popup .g--video-wrapper video[src=""] {
  display: none;
}
.g--popup .g--popup-close {
  top: -32px;
  right: 0;
  width: 12px;
  height: 12px;
  position: absolute;
  margin-left: auto;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 1023px) {
  .g--popup .g--popup-close {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 720px) {
  .g--popup .g--popup-close {
    right: 16px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .g--popup .g--popup-close {
    right: 32px;
  }
}
.video-portrait.g--popup .g--popup-close {
  top: 8px;
}
.g--popup .g--popup-close .inner {
  width: 100%;
  height: 100%;
}
@media (max-width: 1023px) {
  .g--popup .g--popup-close .inner {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}
.g--popup-container {
  background: #000;
}
.g--popup-close polygon {
  fill: #fff;
}
[data-theme="white"] .g--popup-container {
  background: #fff;
}
[data-theme="white"] .g--popup-close polygon {
  fill: #000;
}
.g--video-converter .wrapper {
  height: 100%;
  position: relative;
}
.g--video-converter .wrapper .video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#section-kv .kv-container {
  width: 100%;
}
#section-kv .kv-container .kv {
  width: 100%;
  height: 56.25vw;
}
@media (max-width: 1023px) {
  #section-kv .kv-container .kv {
    height: 177.77vw;
  }
}
#section-highlights .font-medium {
  font-family: OPPOSans-Medium;
}
#section-highlights .font-bold {
  font-family: OPPOSans-Bold;
}
#section-highlights .banner-0 {
  width: 100%;
  background: #1a1a1a;
}
#section-highlights .banner-0 .g--container {
}
@media (min-width: 1800px) {
  #section-highlights .banner-0 .g--container {
    padding: 182px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .banner-0 .g--container {
    padding: 153px 0;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .banner-0 .g--container {
    padding: 124px 0;
  }
}
@media (max-width: 1023px) {
  #section-highlights .banner-0 .g--container {
  }
}
@media (max-width: 720px) {
  #section-highlights .banner-0 .g--container {
    padding: 96px 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .banner-0 .g--container {
    padding: 192px 0;
  }
}
#section-highlights .banner-0 .desc {
  color: #fff;
  opacity: 0.7;
}
@media (min-width: 1800px) {
  #section-highlights .banner-0 .desc {
    margin-top: 20px;
    width: 886px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .banner-0 .desc {
    margin-top: 17px;
    width: 743px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .banner-0 .desc {
    margin-top: 14px;
    width: 605px;
  }
}
#section-highlights .title-container {
}
@media (min-width: 1800px) {
  #section-highlights .title-container {
    width: 960px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .title-container {
    width: 805px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .title-container {
    width: 656px;
  }
}
#section-highlights .title-container .detail {
  color: #fff;
  opacity: 0.8;
}
@media (min-width: 1800px) {
  #section-highlights .title-container .detail {
    margin-top: 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .title-container .detail {
    margin-top: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .title-container .detail {
    margin-top: 8px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .title-container .detail {
  }
}
@media (max-width: 720px) {
  #section-highlights .title-container .detail {
    margin-top: 4px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .title-container .detail {
    margin-top: 8px;
  }
}
#section-highlights .part1 .bg-container {
  width: 100%;
  height: 59.114583333333336vw;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
#section-highlights .part1 .bg-container .slick-container-2 {
  width: 100%;
  height: 100%;
}
#section-highlights .part1 .bg-container .slick-container-2 .bg {
  width: 100%;
  height: 59.114583333333336vw;
}
#section-highlights .part1 .g--container {
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container {
    padding: 182px 0 0;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container {
    padding: 153px 0 0;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container {
    padding: 124px 0 0;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part1 .g--container {
  }
}
@media (max-width: 720px) {
  #section-highlights .part1 .g--container {
    padding: 80px 0 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part1 .g--container {
    padding: 160px 0 0;
  }
}
#section-highlights .part1 .g--container .title-container {
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container .title-container {
    margin-bottom: 20px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container .title-container {
    margin-bottom: 17px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container .title-container {
    margin-bottom: 14px;
  }
}
#section-highlights .part1 .g--container .desc-container {
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container .desc-container {
    margin-bottom: 30px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container .desc-container {
    margin-bottom: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container .desc-container {
    margin-bottom: 20px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part1 .g--container .desc-container {
  }
}
@media (max-width: 720px) {
  #section-highlights .part1 .g--container .desc-container {
    margin-bottom: 24px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part1 .g--container .desc-container {
    margin-bottom: 48px;
  }
}
#section-highlights .part1 .g--container .desc-container .desc-wrapper .title {
  font-family: OPPOSans-Medium;
}
#section-highlights .part1 .g--container .desc-container .desc-wrapper .desc {
  opacity: 0.8;
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container .desc-container .desc-wrapper .desc {
    margin-top: 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container .desc-container .desc-wrapper .desc {
    margin-top: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container .desc-container .desc-wrapper .desc {
    margin-top: 8px;
  }
}
#section-highlights .part1 .g--container .color-selectors {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
@media (max-width: 1023px) {
  #section-highlights .part1 .g--container .color-selectors {
    flex-direction: column;
    justify-content: flex-start;
  }
}
#section-highlights .part1 .g--container .color-selectors .left {
  flex-shrink: 0;
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container .color-selectors .left {
    width: 451px;
    height: 451px;
    margin-left: 65px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container .color-selectors .left {
    width: 378px;
    height: 378px;
    margin-left: 54px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container .color-selectors .left {
    width: 308px;
    height: 308px;
    margin-left: 44px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part1 .g--container .color-selectors .left {
    width: 100%;
    height: 88.89vw;
  }
}
#section-highlights .part1 .g--container .color-selectors .left .big-container {
  width: 100%;
  height: 100%;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .left
  .big-container
  .slick-container-1 {
  width: 100%;
  height: 100%;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .left
  .big-container
  .big {
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .left
    .big-container
    .big {
    width: 451px;
    height: 451px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .left
    .big-container
    .big {
    width: 378px;
    height: 378px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .left
    .big-container
    .big {
    width: 308px;
    height: 308px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .left
    .big-container
    .big {
    width: 100%;
    height: 88.89vw;
  }
}
#section-highlights .part1 .g--container .color-selectors .right {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1800px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    padding: 128px 0 25px;
    width: 687px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    padding: 107px 0 21px;
    width: 576px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    padding: 87px 0 17px;
    width: 469px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    width: 100%;
  }
}
@media (max-width: 720px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    padding: 20px 0 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part1 .g--container .color-selectors .right {
    padding: 40px 0 0;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container {
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container {
    width: 687px;
    height: 170px;
    margin-bottom: 30px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container {
    width: 576px;
    height: 143px;
    margin-bottom: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container {
    width: 469px;
    height: 116px;
    margin-bottom: 20px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  > * {
  flex: 0 0 auto;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .pic {
  transition: opacity 0.5s ease;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-wrapper-manual {
  z-index: 2;
  overflow: hidden;
  display: flex;
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual {
    width: 620px;
    margin-left: 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual {
    width: 520px;
    margin-left: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual {
    width: 423px;
    margin-left: 8px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-wrapper-manual
  .mask {
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual
    .mask {
    width: 40px;
    height: 170px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual
    .mask {
    width: 34px;
    height: 143px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-wrapper-manual
    .mask {
    width: 27px;
    height: 116px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container {
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container {
    width: 200px;
    height: 170px;
    -webkit-transform: translateX(-200px);
    transform: translateX(-200px);
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container {
    width: 168px;
    height: 143px;
    -webkit-transform: translateX(-168px);
    transform: translateX(-168px);
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container {
    width: 137px;
    height: 116px;
    -webkit-transform: translateX(-137px);
    transform: translateX(-137px);
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-slider {
  position: relative;
  display: block;
  outline: none;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: initial !important;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list:focus {
  outline: none;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list.dragging {
  cursor: pointer;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list
  .slick-track {
  height: 100%;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list
  .slick-track
  .slick-slide {
  outline: none;
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list
  .slick-track
  .slick-slide
  > * {
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    > * {
    width: 170px;
    height: 170px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    > * {
    width: 143px;
    height: 143px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    > * {
    width: 116px;
    height: 116px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .pic-container
  .slick-container
  .slick-list
  .slick-track
  .slick-slide
  .pic {
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    .pic {
    width: 170px;
    height: 170px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    .pic {
    width: 143px;
    height: 143px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .pic-container
    .slick-container
    .slick-list
    .slick-track
    .slick-slide
    .pic {
    width: 116px;
    height: 116px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .arrow-container {
  display: flex;
  align-items: center;
  z-index: 3;
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
    height: 55px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
    height: 46px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
    height: 38px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
    margin-bottom: 32px;
    height: 55px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container {
    margin-bottom: 64px;
    height: 110px;
  }
}
#section-highlights
  .part1
  .g--container
  .color-selectors
  .right
  .arrow-container
  img {
  opacity: 0.5;
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    width: 55px;
    height: 46px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    width: 46px;
    height: 39px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    width: 38px;
    height: 31px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    opacity: 1;
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    width: 55px;
    height: 55px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img {
    width: 110px;
    height: 110px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:first-child {
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:first-child {
    margin-right: 15px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:first-child {
    margin-right: 30px;
  }
}
@media (min-width: 1024px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:hover {
    opacity: 1;
  }
}
@media (min-width: 1800px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:hover {
    height: 55px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:hover {
    height: 46px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part1
    .g--container
    .color-selectors
    .right
    .arrow-container
    img:hover {
    height: 38px;
  }
}
#section-highlights .banner-1 {
  width: 100%;
  height: 19.375vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1800px) {
  #section-highlights .banner-1 {
    margin-top: 140px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .banner-1 {
    margin-top: 117px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .banner-1 {
    margin-top: 96px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .banner-1 {
    height: 81.11111111111111vw;
  }
}
@media (max-width: 720px) {
  #section-highlights .banner-1 {
    margin-top: 80px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .banner-1 {
    margin-top: 160px;
  }
}
#section-highlights .banner-1 .banner1 {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
@media (min-width: 1024px) {
  #section-highlights .banner-1 .g--container {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
  }
}
#section-highlights .banner-1 .g--container .desc {
  text-align: center;
  font-weight: 600;
}
@media (max-width: 1023px) {
  #section-highlights .banner-1 .g--container .desc {
  }
}
@media (max-width: 720px) {
  #section-highlights .banner-1 .g--container .desc {
    width: 320px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .banner-1 .g--container .desc {
    width: 640px;
  }
}
#section-highlights .banner-1 .g--container .join {
  background: #fff;
  border-radius: 2px;
}
@media (min-width: 1800px) {
  #section-highlights .banner-1 .g--container .join {
    padding: 9px 24px 12px;
    margin-top: 40px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .banner-1 .g--container .join {
    padding: 8px 20px 10px;
    margin-top: 34px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .banner-1 .g--container .join {
    padding: 6px 16px 8px;
    margin-top: 27px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .banner-1 .g--container .join {
  }
}
@media (max-width: 720px) {
  #section-highlights .banner-1 .g--container .join {
    padding: 8px 24px;
    margin-top: 24px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .banner-1 .g--container .join {
    padding: 16px 48px;
    margin-top: 48px;
  }
}
#section-highlights .part2 {
}
@media (min-width: 1800px) {
  #section-highlights .part2 {
    padding-top: 182px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 {
    padding-top: 153px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 {
    padding-top: 124px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 {
    width: 100%;
    overflow: hidden;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 {
    padding-top: 80px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 {
    padding-top: 160px;
  }
}
#section-highlights .part2 .g--container .billion-colours {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .billion-colours {
    margin-top: 50px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .billion-colours {
    margin-top: 42px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .billion-colours {
    margin-top: 34px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours {
    flex-direction: column;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours {
    margin-top: 40px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours {
    margin-top: 80px;
  }
}
#section-highlights .part2 .g--container .billion-colours .mask {
  pointer-events: none;
  top: unset;
  bottom: 0;
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .mask {
    width: 80px;
    height: 120px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .mask {
    width: 160px;
    height: 240px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .mask {
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .mask {
    width: 60px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .mask {
    width: 120px;
  }
}
#section-highlights .part2 .g--container .billion-colours .mask.mask-right {
  right: -5.556vw;
  left: unset;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #000);
}
#section-highlights .part2 .g--container .billion-colours .mask.mask-left {
  left: -5.556vw;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), #000);
}
#section-highlights .part2 .g--container .billion-colours .left {
  background: #272727;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    width: 600px;
    height: 640px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    width: 503px;
    height: 537px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    width: 410px;
    height: 437px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    width: 100%;
    border-radius: 6.4px;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    height: calc(100vw - 18px);
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left {
    height: calc(100vw - 36px);
  }
}
#section-highlights .part2 .g--container .billion-colours .left .desc-title {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: OPPOSans-Medium;
  font-weight: 600;
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    top: 7px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    top: 6px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    top: 5px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    white-space: nowrap;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    top: 1px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-title {
    top: 2px;
  }
}
#section-highlights .part2 .g--container .billion-colours .left .desc-name {
  opacity: 0;
  top: unset;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: OPPOSans-Medium;
  font-weight: 600;
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    bottom: 7px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    bottom: 6px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    bottom: 5px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    white-space: nowrap;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    bottom: 1px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .left .desc-name {
    bottom: 2px;
  }
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .left
  .desc-name.active {
  opacity: 1;
}
#section-highlights .part2 .g--container .billion-colours .left .pic-container {
}
@media (min-width: 1800px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
    width: 560px;
    height: 560px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
    width: 470px;
    height: 470px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
    width: 382px;
    height: 382px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
    width: calc(100vw - 60px);
    height: calc(100vw - 60px);
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .left
    .pic-container {
    width: calc(100vw - 120px);
    height: calc(100vw - 120px);
  }
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .left
  .pic-container
  .animal {
  width: 100%;
  height: 100%;
  opacity: 0;
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .left
  .pic-container
  .animal.active {
  opacity: 1;
}
#section-highlights .part2 .g--container .billion-colours .right {
  display: flex;
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    width: 654px;
    height: 639px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    width: 548px;
    height: 536px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    width: 447px;
    height: 436px;
  }
}
@media (min-width: 1024px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    width: 100vw;
    overflow: scroll;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right::-webkit-scrollbar {
    display: none;
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    height: 120px;
    padding-left: 20px;
    margin-left: -20px;
    margin-top: 24px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .billion-colours .right {
    height: 240px;
    padding-left: 40px;
    margin-left: -40px;
    margin-top: 48px;
  }
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .right
  .film-container {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.4;
}
@media (min-width: 1800px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    width: 202px;
    height: 197px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    width: 169px;
    height: 165px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    width: 138px;
    height: 135px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    flex-shrink: 0;
  }
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child {
  }
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child
    .animal {
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child
    .animal {
    left: calc(50% - 10px);
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child
    .animal {
    left: calc(50% - 20px);
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child {
    padding-right: 20px;
    width: 118px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container:last-child {
    padding-right: 40px;
    width: 236px;
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    width: 98px;
    height: 120px;
    margin-right: 8px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container {
    width: 196px;
    height: 240px;
    margin-right: 16px;
  }
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .right
  .film-container.active {
  opacity: 1;
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .right
  .film-container
  .film {
  width: 100%;
  height: 100%;
}
#section-highlights
  .part2
  .g--container
  .billion-colours
  .right
  .film-container
  .animal {
}
@media (min-width: 1800px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    width: 148px;
    height: 148px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    width: 124px;
    height: 124px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    width: 101px;
    height: 101px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    width: 86px;
    height: 86px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part2
    .g--container
    .billion-colours
    .right
    .film-container
    .animal {
    width: 172px;
    height: 172px;
  }
}
#section-highlights .part2 .g--container .remark-wrapper {
}
@media (min-width: 1800px) {
  #section-highlights .part2 .g--container .remark-wrapper {
    margin-top: 30px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part2 .g--container .remark-wrapper {
    margin-top: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part2 .g--container .remark-wrapper {
    margin-top: 20px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part2 .g--container .remark-wrapper {
  }
}
@media (max-width: 720px) {
  #section-highlights .part2 .g--container .remark-wrapper {
    margin-top: 32px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part2 .g--container .remark-wrapper {
    margin-top: 64px;
  }
}
#section-highlights .part3 .g--container {
}
@media (min-width: 1800px) {
  #section-highlights .part3 .g--container {
    padding: 182px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part3 .g--container {
    padding: 153px 0;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part3 .g--container {
    padding: 124px 0;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part3 .g--container {
  }
}
@media (max-width: 720px) {
  #section-highlights .part3 .g--container {
    padding: 80px 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part3 .g--container {
    padding: 160px 0;
  }
}
#section-highlights
  .part3
  .g--container
  .video-container
  .video-wrapper
  .play-button {
  top: unset;
}
@media (min-width: 1800px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    bottom: 28px;
    left: 28px;
    padding: 11px 26px 13px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    bottom: 23px;
    left: 23px;
    padding: 9px 22px 11px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    bottom: 19px;
    left: 19px;
    padding: 8px 18px 9px;
  }
}
@media (max-width: 1023px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@media (max-width: 720px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    bottom: 10px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights
    .part3
    .g--container
    .video-container
    .video-wrapper
    .play-button {
    bottom: 20px;
  }
}
#section-highlights .part3 .g--container .video-container .text-wrapper {
}
@media (min-width: 1800px) {
  #section-highlights .part3 .g--container .video-container .text-wrapper {
    width: 960px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part3 .g--container .video-container .text-wrapper {
    width: 805px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part3 .g--container .video-container .text-wrapper {
    width: 656px;
  }
}
#section-highlights .part4 {
}
@media (min-width: 1800px) {
  #section-highlights .part4 {
    padding-bottom: 182px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part4 {
    padding-bottom: 153px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part4 {
    padding-bottom: 124px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part4 {
  }
}
@media (max-width: 720px) {
  #section-highlights .part4 {
    padding-bottom: 80px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part4 {
    padding-bottom: 160px;
  }
}
#section-highlights .part4 .details-container {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1023px) {
  #section-highlights .part4 .details-container {
    flex-direction: column;
  }
}
#section-highlights .part4 .details-container .video-container {
}
@media (min-width: 1800px) {
  #section-highlights .part4 .details-container .video-container {
    width: 416px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part4 .details-container .video-container {
    width: 349px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part4 .details-container .video-container {
    width: 284px;
  }
}
#section-highlights .part4 .details-container .video-container .pic {
}
@media (min-width: 1800px) {
  #section-highlights .part4 .details-container .video-container .pic {
    height: 279px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part4 .details-container .video-container .pic {
    height: 234px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part4 .details-container .video-container .pic {
    height: 191px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part4 .details-container .video-container .pic {
  }
}
@media (max-width: 720px) {
  #section-highlights .part4 .details-container .video-container .pic {
    height: calc((100vw - 40px) * (215 / 320));
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part4 .details-container .video-container .pic {
    height: calc((100vw - 80px) * (215 / 320));
  }
}
#section-highlights .part4 .details-container .video-container .play-button {
  top: unset;
}
@media (min-width: 1800px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    left: 22px;
    bottom: 22px;
    padding: 10px 19px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    left: 18px;
    bottom: 18px;
    padding: 8px 16px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    left: 15px;
    bottom: 15px;
    padding: 6px 13px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}
@media (max-width: 720px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    bottom: 10px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part4 .details-container .video-container .play-button {
    bottom: 20px;
  }
}
#section-highlights .part5 {
  background: #fff;
}
@media (min-width: 1800px) {
  #section-highlights .part5 {
    padding: 182px 0;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part5 {
    padding: 153px 0;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part5 {
    padding: 124px 0;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part5 {
  }
}
@media (max-width: 720px) {
  #section-highlights .part5 {
    padding: 80px 0 0;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part5 {
    padding: 160px 0 0;
  }
}
#section-highlights .part5 .g--container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#section-highlights .part5 .g--container .title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
@media (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper {
    text-align: start;
  }
}
#section-highlights .part5 .g--container .title-wrapper .title {
}
@media (min-width: 1800px) {
  #section-highlights .part5 .g--container .title-wrapper .title {
    width: 359px;
    height: 36px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part5 .g--container .title-wrapper .title {
    width: 301px;
    height: 30px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part5 .g--container .title-wrapper .title {
    width: 245px;
    height: 25px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper .title {
    width: 239px;
    height: 24px;
  }
}
#section-highlights .part5 .g--container .title-wrapper .detail {
  font-family: OPPOSans-Medium;
  font-weight: 600;
}
@media (min-width: 1800px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
    margin-top: 32px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
    margin-top: 27px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
    margin-top: 22px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
  }
}
@media (max-width: 720px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
    margin-top: 24px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper .detail {
    margin-top: 48px;
  }
}
#section-highlights .part5 .g--container .title-wrapper .more {
  background: #000;
  display: inline-block;
  border-radius: 2px;
}
@media (min-width: 1800px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    margin-top: 40px;
    padding: 9px 24px 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    margin-top: 34px;
    padding: 8px 20px 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    margin-top: 27px;
    padding: 6px 16px 8px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    padding: 8px 24px;
  }
}
@media (max-width: 720px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    margin-top: 24px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part5 .g--container .title-wrapper .more {
    margin-top: 48px;
  }
}
#section-highlights .part5 .g--container .phone {
  width: 100%;
}
@media (min-width: 1800px) {
  #section-highlights .part5 .g--container .phone {
    height: 267px;
    margin-top: 80px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .part5 .g--container .phone {
    height: 224px;
    margin-top: 67px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .part5 .g--container .phone {
    height: 182px;
    margin-top: 55px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .part5 .g--container .phone {
  }
}
@media (max-width: 720px) {
  #section-highlights .part5 .g--container .phone {
    width: 173px;
    height: 323px;
    margin-top: 73px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .part5 .g--container .phone {
    width: 346px;
    height: 646px;
    margin-top: 146px;
  }
}
#section-highlights .video-container.re .text-wrapper {
  margin-top: 0;
}
@media (max-width: 1023px) {
  #section-highlights .video-container.re .text-wrapper {
    margin-top: 0;
  }
}
#section-highlights .video-container.re .text-wrapper .detail {
}
@media (min-width: 1800px) {
  #section-highlights .video-container.re .text-wrapper .detail {
    margin-top: 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container.re .text-wrapper .detail {
    margin-top: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container.re .text-wrapper .detail {
    margin-top: 8px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container.re .text-wrapper .detail {
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container.re .text-wrapper .detail {
    margin-top: 4px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container.re .text-wrapper .detail {
    margin-top: 8px;
  }
}
#section-highlights .video-container .video-wrapper {
  width: 100%;
}
@media (min-width: 1800px) {
  #section-highlights .video-container .video-wrapper {
    margin-top: 50px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper {
    margin-top: 42px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper {
    margin-top: 34px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper {
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container .video-wrapper {
    margin-top: 40px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper {
    margin-top: 80px;
  }
}
#section-highlights .video-container .video-wrapper .pic {
  width: 100%;
}
@media (min-width: 1800px) {
  #section-highlights .video-container .video-wrapper .pic {
    height: 738px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper .pic {
    height: 619px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper .pic {
    height: 504px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper .pic {
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container .video-wrapper .pic {
    height: calc((100vw - 40px) * (180 / 320));
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper .pic {
    height: calc((100vw - 80px) * (180 / 320));
  }
}
#section-highlights .video-container .video-wrapper .play-button {
  background: #fff;
  border-radius: 2px;
}
@media (min-width: 1800px) {
  #section-highlights .video-container .video-wrapper .play-button {
    padding: 11px 26px 13px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper .play-button {
    padding: 9px 22px 11px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper .play-button {
    padding: 8px 18px 9px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper .play-button {
    padding: 6px 14px;
  }
}
#section-highlights .video-container .video-wrapper .play-button .play-icon {
}
@media (min-width: 1800px) {
  #section-highlights .video-container .video-wrapper .play-button .play-icon {
    width: 14px;
    height: 18px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper .play-button .play-icon {
    width: 12px;
    height: 15px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper .play-button .play-icon {
    width: 10px;
    height: 12px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper .play-button .play-icon {
    width: 12px;
    height: 16px;
  }
}
#section-highlights .video-container .video-wrapper .play-button .play {
  line-height: 1;
  font-size: 18px;
  letter-spacing: -0.0022em;
}
@media (min-width: 1800px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    margin-left: 12px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    margin-left: 10px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    margin-left: 8px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    font-size: 15px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    font-size: 14px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .video-wrapper .play-button .play {
    line-height: 1.71;
    font-size: 14px;
    letter-spacing: -0.0021em;
    margin-left: 14px;
  }
}
#section-highlights .video-container .text-wrapper {
}
@media (min-width: 1800px) {
  #section-highlights .video-container .text-wrapper {
    margin-top: 20px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .text-wrapper {
    margin-top: 17px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .text-wrapper {
    margin-top: 14px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .text-wrapper {
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container .text-wrapper {
    margin-top: 12px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container .text-wrapper {
    margin-top: 24px;
  }
}
#section-highlights .video-container .text-wrapper .title {
  line-height: 1.67;
  font-size: 16px;
  letter-spacing: -0.0056em;
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .text-wrapper .title {
    font-size: 13px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .text-wrapper .title {
    font-size: 12px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .text-wrapper .title {
    line-height: 1.71;
    font-size: 12px;
    letter-spacing: -0.0043em;
  }
}
#section-highlights .video-container .text-wrapper .detail {
  color: #c7c7c7;
  line-height: 1.67;
  font-size: 18px;
  letter-spacing: -0.0056em;
}
@media (min-width: 1800px) {
  #section-highlights .video-container .text-wrapper .detail {
    margin-top: 10px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .text-wrapper .detail {
    margin-top: 8px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .text-wrapper .detail {
    margin-top: 7px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .text-wrapper .detail {
    font-size: 15px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .text-wrapper .detail {
    font-size: 14px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .text-wrapper .detail {
    line-height: 1.54;
    font-size: 13px;
    letter-spacing: -0.0046em;
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container .text-wrapper .detail {
    margin-top: 4px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container .text-wrapper .detail {
    margin-top: 8px;
  }
}
#section-highlights .video-container .g--remark {
}
@media (min-width: 1800px) {
  #section-highlights .video-container .g--remark {
    margin-top: 30px;
  }
}
@media (min-width: 1400px) and (max-width: 1799px) {
  #section-highlights .video-container .g--remark {
    margin-top: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1399px) {
  #section-highlights .video-container .g--remark {
    margin-top: 20px;
  }
}
@media (max-width: 1023px) {
  #section-highlights .video-container .g--remark {
  }
}
@media (max-width: 720px) {
  #section-highlights .video-container .g--remark {
    margin-top: 32px;
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  #section-highlights .video-container .g--remark {
    margin-top: 64px;
  }
}
body:not(.no-scroll) {
  color: #fff;
}
.zn--wrapper img:not([src]):not([srcset]) {
  visibility: hidden;
}
.zn--wrapper .g--popup-user {
  display: none;
}