@charset "UTF-8";

@font-face {
  font-family: 'HanyiVar-vivo-hwid-50';
  src: url('./HanyiVar-vivo-hwid-50.woff2?v=20230320_09') format('woff2'), url('./HanyiVar-vivo-hwid-50.woff?v=20230320_09') format('woff'),
    url('./HanyiVar-vivo-hwid-50.ttf?v=20230320_09') format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'HanyiVar-vivo-hwid-60';
  src: url('./HanyiVar-vivo-hwid-60.woff2?v=20230320_09') format('woff2'), url('./HanyiVar-vivo-hwid-60.woff?v=20230320_09') format('woff'),
    url('./HanyiVar-vivo-hwid-60.ttf?v=20230320_09') format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'HanyiVar-vivo-hwid-70';
  src: url('./HanyiVar-vivo-hwid-70.woff2?v=20230320_09') format('woff2'), url('./HanyiVar-vivo-hwid-70.woff?v=20230320_09') format('woff'),
    url('./HanyiVar-vivo-hwid-70.ttf?v=20230320_09') format('truetype');
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: 'HanyiVar-vivo-hwid-75';
  src: url('./HanyiVar-vivo-hwid-75.woff2?v=20230320_09') format('woff2'), url('./HanyiVar-vivo-hwid-75.woff?v=20230320_09') format('woff'),
    url('./HanyiVar-vivo-hwid-75.ttf?v=20230320_09') format('truetype');
  font-style: normal;
  font-weight: 400;
}

/* .vp-head-wrap {
	display: none;
} */

.debugBtn {
  width: 8em;
  height: 5em;
  line-height: 5em;
  text-align: center;
  background-color: #00000078;
  color: white;
  z-index: 999;
  position: fixed;
  top: 8em;
  right: 4em;
  display: flex;
  display: none;
  justify-content: center;
  align-items: center;
  border-radius: 2em;
  cursor: pointer;
}

html {
  font-family: HanyiVar-vivo-hwid-50, sans-serif;
}

video {
  object-fit: cover;
  object-position: center center;
}

video:focus {
  outline: none;
}

.cbcn-blackSpace {
  background-color: #fff;
  height: 100vh;
  width: 100vw;
}

.cbcn-blackSpace-img {
  background-color: #fff;
  width: 100vw;
}

.J_replace_content {
  min-height: 100vh;
}

.uimix-pc-mid-cbcn sup {
  font-size: 0.3em;
  position: relative;
  top: -0.5em;
}

.hoverScale:hover>img {
  transform: scale(1.2);
}

.hoverScale>img {
  transition: transform 0.5s;
}

.uimix-pc-mid-cbcn {
  font-size: 20px !important;
  font-size: 1.0416666667vw !important;
  font-family: HanyiVar-vivo-hwid-50;
  background: transparent;
  color: black;
  display: none;
}

.cbcn-pc-screen {
  position: relative;
  width: 100%;
  background-color: white;
  overflow: hidden;
}

.cbcn-pc-screen.fix {
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

/* 视频播放 */
.cbcn-pc-video-playDiv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  overflow: hidden;
  display: none;
}

.cbcn-pc-video-playDiv-wrapper {
  width: auto;
  height: 60%;
  overflow: hidden;
}

.cbcn-pc-video-playDiv-video {
  height: 100%;
  object-fit: fill;
}

.cbcn-pc-video-playDiv-closeBtn {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 2em;
  right: 2em;
  color: white;
  font-size: 2.5em;
  border-radius: 1em;
  cursor: pointer;
  background: #ffffff24;
  line-height: 1.4em;
  text-align: center;
}

/* kv */

.cbcn-pc-kv-page1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 1;
}

.cbcn-pc-kv-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cbcn-pc-kv-img-bg1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cbcn-pc-kv-img-bg2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.cbcn-pc-kv-desc {
  position: absolute;
  right: 3%;
  bottom: 3%;
  z-index: 2;
  width: 20em;
}

.cbcn-pc-kv-content-btn {
  position: absolute;
  right: 17em;
  top: calc(50% + 15vh);
  font-size: 1.3em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #000000;
  line-height: 2.8em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cbcn-pc-kv-content-btn-icon {
  display: block;
  position: relative;
  top: 0.05em;
  width: 1.04em;
  margin-left: 0.392857142857em;
  fill: currentColor;
}

.cbcn-pc-kv-content-btn:hover {
  color: #475ef6;
}

.cbcn-pc-kv2-screen {
  width: 100%;
  height: 100vh;
  position: relative;
}

.cbcn-pc-kv-card-item {
  width: 16.85em;
  height: 20.6em;
  box-sizing: border-box;
  border-radius: 1em;
  overflow: hidden;
  position: relative;
  float: left;
  position: absolute;
  top: calc(50% + 20px);
  cursor: pointer;
  display: block;
}

.cbcn-pc-kv-card-item1 {
  right: calc(50% + 26.875em);
}
.cbcn-pc-kv-card-item1 img:hover {
  transform: scale(1.2);
  transition:all 1s ease;
}

.cbcn-pc-kv-card-item2 {
  right: calc(50% + 9.225em);
}

.cbcn-pc-kv-card-item2 img:hover {
  transform: scale(1.2);
  transition:all 1s ease;
}
.cbcn-pc-kv-card-item3 {
  left: 50%;
}

.cbcn-pc-kv-card-item4 {
  left: calc(50% + 9.225em);
}
.cbcn-pc-kv-card-item4 img:hover {
  transform: scale(1.2);
  transition:all 1s ease;
}
.cbcn-pc-kv-card-item5 {
  left: calc(50% + 26.875em);
}
.cbcn-pc-kv-card-item5 img:hover {
  transform: scale(1.2);
  transition:all 1s ease;
}
.cbcn-pc-kv-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.9em;
}

.cbcn-pc-kv-card-div {
  box-sizing: border-box;
  position: absolute;
  top: 1.5em;
  left: 1.7em;
}

.cbcn-pc-kv-card-title {
  font-size: 1.4em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.25em;
}

.cbcn-pc-kv-card-desc {
  font-size: 0.9em;
  font-family: HanyiVar-vivo-hwid-70;
  font-weight: normal;
  text-align: left;
  color: #373737;
  line-height: 1.388888em;
}

/* kv3 */
.cbcn-pc-kv3-screen {
  width: 100%;
  height: 100vh;
  position: relative;
}

.cbcn-pc-kv-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cbcn-pc-kv-card-video-title {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 4.5em;
  font-family: HanyiVar-vivo-hwid-70;
  font-weight: normal;
  text-align: center;
  color: #ffffff;
  line-height: 1.277777em;
  margin-bottom: -5em;
  opacity: 0;
  text-shadow: 2px 2px 8px rgba(46, 54, 72, 0.7);
}

.cbcn-pc-kv-card-video-btn {
  position: absolute;
  bottom: 4em;
  left: 50%;
  z-index: 3;
  opacity: 0;
  transform: translateX(-50%);
}

.cbcn-pc-card-btn-img {
  width: 5em;
}

/* colorText */
.cbcn-pc-colorText-screen {
  padding-left: 18em;
}

.cbcn-pc-colorText-title {
  margin-top: 3.476em;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
}

/* color */
.cbcn-pc-color-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cbcn-pc-color-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

/* watchExterior */

.cbcn-pc-watchExterior-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cbcn-pc-watchExterior-txt1 {
  position: absolute;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
  left: 18em;
  top: calc(50% + 24.5px);
  transform: translateY(-50%);
  opacity: 0;
}

.cbcn-pc-watchExterior-txt2 {
  position: absolute;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
  bottom: calc(50% + 25vh);
  left: 49%;
  transform: translateX(-49%);
  opacity: 0;
}

.cbcn-pc-watchExterior-txt3 {
  position: absolute;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: center;
  color: #000000;
  line-height: 1.28em;
  top: calc(50% - 3em);
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

.cbcn-pc-watchExterior-txt4 {
  position: absolute;
  top: calc(50% - 14em);
  right: calc(50% - 6em);
  opacity: 0;
}

/* .cbcn-pc-watchExterior-txt4-txt1 {
  font-size: 1.1em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 3.2727em;
} */

.cbcn-pc-watchExterior-txt4-txt2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
}

.cbcn-pc-watchExterior-txt5 {
  position: absolute;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
  top: calc(50% - 4em);
  right: calc(50% - 0.5em);
  opacity: 0;
}

/* versatiledialText */
.cbcn-pc-versatiledialText-screen {
  padding-left: 18em;
}

.cbcn-pc-versatiledialText-title {
  margin-top: 2.47em;
  margin-bottom: 2.47em;
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.28em;
}

/* versatiledial */

.cbcn-pc-versatiledial-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cbcn-pc-versatiledial-txt {
  position: absolute;
  font-size: 1em;
  font-weight: normal;
  text-align: left;
  color: #818181;
  line-height: 1.5em;
  left: 52.35em;
  bottom: 6.5em;
  opacity: 0;
}

.cbcn-pc-versatiledial-title {
  font-size: 2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 0.75em;
  margin-bottom: 0.5em;
}

.cbcn-pc-versatiledial-desc {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
}

/* operatingsystem */
.cbcn-pc-operatingsystem-screen {
  position: relative;
  width: 100%;
  height: 80vh;
  background: #fff;
}

.cbcn-pc-operatingsystem-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 5;
  background-color: #000000;
}

.cbcn-pc-operatingsystem-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cbcn-pc-operatingsystem-txt {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc(50% + 20px - 10vh);
  transform: translateY(-50%);
  text-align: left;
  z-index: 10;
  text-align: center;
  opacity: 0;
  margin-top: 20em;
}

.cbcn-pc-operatingsystem-logo {
  width: 14.6em;
  margin: 0 auto;
}

.cbcn-pc-operatingsystem-txt2 {
  margin-top: 0.2em;
  line-height: 1.2em;
  font-size: 4.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  color: #ffffff;
}

.cbcn-pc-operatingsystem-txt3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  line-height: 1.5em;
  font-weight: normal;
  color: #ffffff;
  margin-top: 1em;
}

/* selfInnovate */
.cbcn-pc-selfInnovate-screen {
  position: relative;
  width: 100%;
  height: 27em;
  background: rgb(245, 245, 247);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cbcn-pc-selfInnovate-img-div {
  position: relative;
  width: 28.5em;
  height: 32em;
  overflow: hidden;
  margin-right: 1em;
}

.cbcn-pc-selfInnovate-img-div:last-of-type {
  margin-right: 0;
}

.cbcn-pc-selfInnovate-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cbcn-pc-selfInnovate-txt {
  position: absolute;
  bottom: 1em;
  left: 1.4em;
  text-align: left;
  font-weight: normal;
}

.cbcn-pc-selfInnovate-p1 {
  font-size: 1.4em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #ffffff;
  line-height: 1.9em;
}

.cbcn-pc-selfInnovate-p2 {
  font-size: 0.9em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #f1f1f1;
  line-height: 1.3888em;
  margin-top: 0.2em;
}

#selfInnovatePrev {
  position: absolute;
  bottom: 1.9em;
  right: 38.65em;
  cursor: pointer;
  user-select: none;
}

#selfInnovateNext {
  position: absolute;
  bottom: 1.9em;
  right: 36.7em;
  cursor: pointer;
  user-select: none;
}

.cbcn-pc-selfInnovate-circle-left,
.cbcn-pc-selfInnovate-circle-right {
  width: 1.55em;
  height: 1.55em;
  background-color: #000;
  border-radius: 50%;
}

.cbcn-pc-selfInnovate-circle-left {
  opacity: 0.5;
}

.cbcn-pc-selfInnovate-left-icon,
.cbcn-pc-selfInnovate-right-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.3em;
  object-fit: cover;
}

/* independentcall */
/* .cbcn-pc-independentcall-screen {
  background: #ffffff;
}

.cbcn-pc-independentcall-imgDiv {
  width: 96em;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.cbcn-pc-independentcall-img1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cbcn-pc-independentcall-txt {
  text-align: left;
  position: absolute;
  top: 50%;
  right: 96em;
  transform: translateY(-50%);
  white-space: nowrap;
  opacity: 0;
}

.cbcn-pc-independentcall-txt1 {
  font-size: 1.1em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 3.27272727em;
}

.cbcn-pc-independentcall-txt2 {
  font-size: 2.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1.24em;
}

.cbcn-pc-independentcall-txt3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1em;
} */

/* endurance */

.cbcn-pc-endurance-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cbcn-pc-endurance-text-div {
  position: absolute;
  top: 50%;
  left: calc(50% + 12em);
  text-align: left;
  background: transparent;
  transform: translateY(-50%);
}

.cbcn-pc-endurance-text-1 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
}

.cbcn-pc-endurance-text-2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  line-height: 1.28em;
}

.cbcn-pc-endurance-text-3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 2em;
}

.cbcn-pc-endurance-text-4 {
  font-size: 1.4em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
  margin-top: 2em;
}

.cbcn-pc-endurance-text-5 {
  font-size: 0.8em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1em;
}

.cbcn-pc-endurance-text-6,
.cbcn-pc-endurance-text-8 {
  font-size: 1.4em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
  margin-top: 1.2em;
}

.cbcn-pc-endurance-text-6 span:last-child {
  margin-left: 6.8em;
}

.cbcn-pc-endurance-text-8 span:last-child {
  margin-left: 7.6em;
}

.cbcn-pc-endurance-text-7,
.cbcn-pc-endurance-text-9 {
  font-size: 0.8em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1em;
}

.cbcn-pc-endurance-text-sp {
  display: inline-block;
}

.cbcn-pc-endurance-text-7 span:last-child {
  margin-left: 5.75em;
}

.cbcn-pc-endurance-text-9 span:last-child {
  margin-left: 5em;
}

/* experience */
.cbcn-pc-experience-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #FFF;
}

.cbcn-pc-experience-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cbcn-pc-experience-txt1 {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 60em;
  transform: translateY(-50%);
}

.cbcn-pc-experience-txt1-p1 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
  line-height: 1.28em;
}

.cbcn-pc-experience-txt1-p2 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 2em;
}

.cbcn-pc-experience-txt2 {
  text-align: left;
  position: absolute;
  top: 50%;
  left: 56.5em;
  transform: translateY(-50%);
}

.cbcn-pc-experience-txt2-p1 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-70;
  color: #000000;
  line-height: 1.5em;
}

.cbcn-pc-experience-txt2-p2 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-70;
  color: #818181;
  line-height: 1.5em;
}

/* efficientTxt */
.cbcn-pc-efficientTxt-screen {
  padding-top: 5.7em;
  text-align: center;
}

.cbcn-pc-efficientTxt-p1 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: center;
  color: #000000;
  line-height: 1em;
  margin-top: 2em;
}

.cbcn-pc-efficientTxt-p2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  line-height: 1.28em;
}

.cbcn-pc-efficientTxt-p3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1.5em;
}



/* efficient */
.cbcn-pc-efficient-screen-top-content {
  position: relative;
  width: 100%;
  height: 90vh;
  background: #fff;
}

.cbcn-pc-img-efficient-bg {
  position: absolute;
  bottom: -2.1em;
  left: 50%;
  height: 36.15em;
  z-index: 2;
  transform: translateX(-50%);
}

/* efficient */
.cbcn-pc-efficient-screen {
  position: relative;
  width: 100%;
  height: 27em;
  background: rgb(245, 245, 247);
}

.cbcn-pc-efficient-imgDiv {
  width: 100%;
  position: absolute;
  top: calc(50% + 20px);
  left: 0;
  transform: translateY(-50%);
}

.cbcn-pc-efficient-imgList {
  margin-left: 12.9em;
  width: 246.05em;
  display: flex;
}

.cbcn-pc-efficient-img-div {
  position: relative;
  width: 34.15em;
  height: 31.25em;
  margin: 0 0.5em;
  background: #fff;
}

.cbcn-pc-efficient-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cbcn-pc-efficient-txt {
  position: absolute;
  left: 2.5em;
  top: 2.5em;
  text-align: left;
}

.cbcn-pc-efficient-txt p:first-child {
  font-size: 1.4em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
  line-height: 1.25em;
}

.cbcn-pc-efficient-txt p:last-child {
  font-size: 0.9em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.388em;
  margin-top: 0.5em;
}

.cbcn-pc-efficient-btnDiv {
  margin-left: 48.55em;
  margin-top: 1.15em;
  display: flex;
  width: 3.5em;
  flex-direction: row;
  justify-content: space-between;
  user-select: none;
}

.cbcn-pc-efficient-btn {
  width: 1.55em;
  cursor: pointer;
}

.cbcn-pc-efficient-btn-left {
  opacity: 0.3;
}

.cbcn-pc-efficient-btn-right {
  transform: rotate(180deg);
}

/*  healthy */
.cbcn-pc-healthy-page1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 5;
}

.cbcn-pc-healthy-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cbcn-pc-healthy-page1-div1 {
  position: absolute;
  top: 2em;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}

.cbcn-pc-healthy-page1-div1-txt1 {
  font-size: 2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  color: #000000;
  margin-bottom: 0.5em;
}

.cbcn-pc-healthy-page1-div1-txt2 {
  font-size: 4.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  line-height: 1.2em;
}

.cbcn-pc-healthy-page1-txt1,
.cbcn-pc-healthy-page1-txt2 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
  position: absolute;
  top: calc(50% + 20px);
  transform: translateY(-50%);
  margin-left: calc(50% + 8em);
}

.uimix-pc-mid-cbcn sup.cbcn-pc-healthy-page1-sup {
  font-size: 0.7em;
  top: -0.2em;
}

.cbcn-pc-healthy-page1-txt1 span {
  color: #000000;
}

.cbcn-pc-healthy-page1-txt2 p:first-child {
  font-size: 2em;
  color: #000000;
  font-family: HanyiVar-vivo-hwid-70;
  line-height: 0.8em;
  margin-bottom: 0.9em;
}

.cbcn-pc-healthy-page1-div3 {
  position: absolute;
  right: calc(50% + 3em);
  top: calc(50% + 20px);
  transform: translateY(-50%);
  margin-top: 50vh;
}

.cbcn-pc-healthy-page1-div3-txt1 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  margin-bottom: 0.5em;
}

.cbcn-pc-healthy-page1-div3-txt2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  text-align: left;
  line-height: 1.28em;
}

.cbcn-pc-healthy-page1-div3-txt3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1.5em;
}

.cbcn-pc-healthy-page1-div4,
.cbcn-pc-healthy-page1-div5 {
  position: absolute;
  right: calc(50% + 3em);
  top: calc(50% + 20px);
  transform: translateY(-50%);
  margin-top: 50vh;
}

.cbcn-pc-healthy-page1-div5-txt1,
.cbcn-pc-healthy-page1-div5-txt2 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
}

.cbcn-pc-healthy-page1-div5-txt1 span,
.cbcn-pc-healthy-page1-div5-txt2 span {
  color: #000000;
  font-family: HanyiVar-vivo-hwid-70;
}

.cbcn-pc-healthy-page1-div5-txt1 {
  margin-top: 3em;
}

.cbcn-pc-healthy-page1-div5-txt2 {
  margin-top: 2em;
}


/* healthy2 */

.cbcn-pc-healthy2-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cbcn-pc-healthy2-content {
  position: absolute;
  bottom: calc(50% + 7em);
  left: 0%;
  width: 100%;
  text-align: center;
}

.cbcn-pc-healthy2-p1 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  line-height: 1.28em;
}

.cbcn-pc-healthy2-p2 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1.5em;
}

/* run */

.cbcn-pc-run-img {
  width: 24em;
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.cbcn-pc-run-text1 {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.cbcn-pc-run-text1-title {
  font-size: 2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  color: #010101;
  line-height: 1.2em;
}

.cbcn-pc-run-text1-desc {
  font-size: 4.5em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  color: #010101;
  line-height: 1.2em;
  margin-top: 0.3em;
}

.cbcn-pc-run-text2 {
  position: absolute;
  top: calc(50% + 20px);
  right: 47%;
  margin-right: 16em;
  margin-top: 100vh;
  transform: translateY(-50%);
}

.cbcn-pc-run-text2-title {
  font-size: 1.5em;
  font-family: HanyiVar-vivo-hwid-70;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 1em;
}

.cbcn-pc-run-text2-desc {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1em;
}

/* .cbcn-pc-run-text2-desc span {
  color: #818181;
} */

.cbcn-pc-run-text3 {
  position: absolute;
  /* bottom: 10em; */
  top: calc(50% + 20px);
  left: 47%;
  margin-left: 16em;
  margin-top: 100vh;
  transform: translateY(-50%);
}

.cbcn-pc-run-text4 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: 10em;
  transform: translateY(-50%);
  opacity: 0;
}

.cbcn-pc-run-text4-title1 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #000000;
  line-height: 3em;
}

.cbcn-pc-run-text4-title2 {
  font-size: 3em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  text-align: left;
  color: #1d1d1f;
  line-height: 1.2em;
  margin-top: 0.35em;
}

.cbcn-pc-run-text4-desc {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
  margin-top: 2.35em;
  white-space: nowrap;
}

/* fitness */
/* .cbcn-pc-fitness-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cbcn-pc-fitness-text {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: calc(50% + 2em);
  margin-bottom: -4em;
}

.cbcn-pc-fitness-p1 {
  font-size: 1.6em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  color: #010101;
  line-height: 2.25em;
}

.cbcn-pc-fitness-p2 {
  font-size: 3em;
  font-family: HanyiVar-vivo-hwid-75;
  font-weight: normal;
  color: #010101;
  line-height: 1.2em;
}

.cbcn-pc-fitness-p3 {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  font-weight: normal;
  color: #818181;
  line-height: 1.5em;
  margin-top: 1.5em;
} */

/* jointresearch */

.cbcn-pc-jointresearch-screen {
  background-color: rgb(245, 245, 247);
  height: 26.9em;
  width: 100%;
  position: relative;
}

.cbcn-pc-jointresearch-screen-concent {
  position: absolute;
  top: 8.1em;
  left: 11.35em;
  display: flex;
  justify-content: space-between;
  width: 73.3em;
}

.cbcn-pc-jointresearch-screen-concent-left {
  text-align: left;
  margin-right: 1.95em;
}

.cbcn-pc-jointresearch-screen-concent-right {
  position: relative;
  flex: 1;
}

.cbcn-pc-jointresearch-txt1 {
  font-size: 3em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #010101;
  line-height: 1.2em;
}

.cbcn-pc-jointresearch-txt2 {
  margin-top: 1.5em;
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #818181;
  line-height: 1.5em;
}

.cbcn-pc-jointresearch-screen-concent-right {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 1em;
}

.cbcn-pc-jointresearch-img {
  height: 5.7em;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* sports */
.cbcn-pc-sports-screen {
  position: relative;
  width: 100%;
  height: 100%;
}

.cbcn-pc-sports-video-box {
  width: 100%;
  height: 100%;
}

.cbcn-pc-sports-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.bcn-pc-sports-txt {
  position: absolute;
  left: calc(50% - 5em);
  top: 35%;
  text-align: left;
  opacity: 0;
  transform: translateX(-100%);
}

.bcn-pc-sports-txt-title1 {
  font-size: 1.2em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #000000;
  margin-bottom: 0.5em;
}

.bcn-pc-sports-txt-title2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #1d1d1f;
  line-height: 1.28em;
}

.bcn-pc-sports-txt-desc {
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #222222;
  line-height: 1.5em;
  margin-top: 1.5em;
}

/* achievementmotivation */
.cbcn-pc-achievementmotivation-screen {
  background-color: #ffffff;
}

.cbcn-pc-achievementmotivation-img {
  width: 134.4em;
}

.cbcn-pc-achievementmotivation-content {
  position: absolute;
  width: 100%;
  top: calc(50% + 20px);
  transform: translateY(-50%);
}
.cbcn-pc-achievementmotivation-txt{
  margin-bottom: 2em;
}
.cbcn-pc-achievementmotivation-txt1 {
  font-size: 1.6em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #010101;
  margin-bottom: 0.4em;
  text-align: center;
}

.cbcn-pc-achievementmotivation-txt2 {
  font-size: 3.5em;
  font-family: HanyiVar-vivo-hwid-75;
  color: #010101;
  text-align: center;
  line-height: 1.28em;
}

.cbcn-pc-achievementmotivation-txt3 {
  margin-top: 1em;
  font-size: 1em;
  font-family: HanyiVar-vivo-hwid-50;
  text-align: left;
  color: #222222;
  line-height: 1.5em;
  text-align: center;
}

/* note */

.cbcn-pc-note-screen {
  margin-top: 9.3em;
  margin-left: 17.85em;
  margin-bottom: 8em;
  width: 61.5em;
}

.cbcn-pc-note-title {
  font-size: 1.5em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #313131;
}

.cbcn-pc-note-desc {
  margin-top: 2.75em;
  font-size: 0.8em;
  font-family: HanyiVar-vivo-hwid-50;
  color: #9a9a9e;
  line-height: 1.625em;
}

@media screen and (min-width: 1440px) and (max-width: 1600px) {
  .cbcn-pc-screen-txt2-desc {
    margin-bottom: 1em;
  }
}

@media screen and (max-width: 1030px) {
  .cbcn-pc-note-content {
    padding-left: 8em;
  }

  .cbcn-pc-summary-video {
    margin-left: 1.5em;
  }

  .cbcn-pc-kv-img-bg1 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
  }

  .cbcn-pc-kv-img-bg2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}