/* kv */
.cbcn-pc-kv-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  bottom: 0;
}

.cbcn-pc-kv-img-bg1 {
  width: 100%;
  position: absolute;
  left: 0;
}

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

.cbcn-pc-kv-logo {
  position: absolute;
  right: 2em;
  top: 6em;
  z-index: 2;
  width: 10em;
}

.cbcn-pc-kv-desc {
  position: absolute;
  left: 2em;
  bottom: 3em;
  z-index: 2;
  height: 1.15em;
}

.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;
}


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

.cbcn-pc-navigation-content {
  display: flex;
  justify-content: space-between;
  gap: 0.4em;
}

.cbcn-pc-navigation-card-item {
  width: 17em;
  height: 22em;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0px 4px 30px 0px rgba(255, 255, 255, 0.15);
  cursor: pointer;
  position: relative;
  transform-origin: 50% 50%;
  transition: all 0.5s;
  overflow: hidden;
  bottom: 0em;
  /* opacity: 0; */
  background: #000;
  border-radius: 1em;
}


.cbcn-pc-navigation-card-item:hover {
  width: 19em;
}

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

.cbcn-pc-navigation-card-txt {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  box-sizing: border-box;
  position: absolute;
  left: 1em;
  bottom: 1em;
  margin-bottom: -5em;
  transition: all 0.5s;
}


.cbcn-pc-navigation-card-item:hover .cbcn-pc-navigation-card-txt {
  margin-bottom: -1.2em;
}

.cbcn-pc-navigation-card-icon {
  position: absolute;
  width: 1em;
  right: 0.6em;
  bottom: 0.8em;
}

/* light */
.cbcn-pc-light-screen {
  position: sticky;
  top: 0;
  left: 0;
}

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

.cbcn-pc-light-txt1 {
  margin-top: 15em;
  opacity: 0;
}

.cbcn-pc-light-txt2 {
  margin-top: 15em;
  opacity: 0;
}

.cbcn-pc-light-txt3 {
  margin-top: 15em;
  opacity: 0;
}

.cbcn-pc-light-txt3 .cbcn-pc-h2 {
  line-height: 160%;
}

/* quality */
.cbcn-pc-quality-txt1 {
  gap: 0.4em;
}

.cbcn-pc-quality-txt1 .cbcn-pc-quality-txt1-1 {
  margin-top: 1em;
}

.cbcn-pc-quality-txt1 .cbcn-pc-quality-txt1-2 {
  margin-top: 0.3em;
}

.cbcn-pc-quality-txt {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  left: 0;
  z-index: 2;
}

.cbcn-pc-quality-pageList {
  height: 100%;
  overflow: hidden;
  width: 600vw;
}

.cbcn-pc-quality-pageList .cbcn-pc-quality-page {
  float: left;
  position: relative;
  height: 100%;
  margin-right: 18em;
  justify-content: center;
  align-items: center;
}

.cbcn-pc-quality-page1 {
  width: 96em;
}

.cbcn-pc-quality-page2 {
  width: 62.4em;
}

.cbcn-pc-quality-page3 {
  width: 79.6em;
}

.cbcn-pc-quality-page4 {
  width: 71.7em;
}

.cbcn-pc-quality-page5 {
  width: 65.9em;
}


.cbcn-pc-quality-txt1 {
  margin-top: 30px;
}

.cbcn-pc-quality-txt1 .cbcn-pc-title maintitle {
  -webkit-background-clip: text;
  color: transparent;
  background-position: 50% 50%;
  background-size: 300% 600%;
  background-image: radial-gradient(50% 50% at 50% 50%, #fff 33%, transparent 66%);
  background-repeat: no-repeat;
  text-align: center;
}

.cbcn-pc-quality-txt3 {
  gap: 2.5em;
}

.cbcn-pc-quality-txt3-row {
  gap: 1.2em;
}

.cbcn-pc-quality-video1 {
  width: 45.55em;
  height: auto;
  left: calc(50% - 13em);
}

.cbcn-pc-quality-video2 {
  width: 59.7em;
  height: auto;
  left: calc(50% - 20em);
}

.cbcn-pc-quality-video3 {
  width: 59.7em;
  height: auto;
  left: calc(50% - 20em);
  margin-top: 3em;
}


.cbcn-pc-quality-video4 {
  width: 59.7em;
  height: auto;
  left: calc(50% - 20em);
}

.cbcn-pc-quality-bar {
  position: absolute;
  bottom: 4em;
  left: 4em;
  z-index: 999;
  width: 13.25em;
  height: 2px;
  background: #464646;
}

.cbcn-pc-quality-bar-content {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
}

.cbcn-pc-quality-laiyin {
  gap: 0.95em;
}

.cbcn-pc-quality-laiyin>div {
  gap: 0.25em;
}

.cbcn-pc-quality-txt1>div {
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.cbcn-pc-quality-logo {
  width: 2.15em;
  height: 2.2em;
}

.cbcn-pc-quality-logo3 {
  width: 3.45em;
  height: 3.45em;
}

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

.cbcn-pc-color-btnList {
  gap: 4.55em;
  position: absolute;
  top: calc(50% - 15.15em);
  left: 15.3em;
}

.cbcn-pc-color-btn {
  gap: 1.51em;
  align-items: center;
  cursor: pointer;
}

.cbcn-pc-color-btn p {
  opacity: 0.6;
}

.cbcn-pc-color-btn.active p {
  opacity: 1;
}

.cbcn-pc-color-btn1 span {
  display: block;
  width: 1.0945em;
  height: 1.0945em;
  border-radius: 50%;
  border: 3px solid #101010;
  background: linear-gradient(142deg, #FFF 30.55%, #888 87.18%);
}

.cbcn-pc-color-btn1.active span {
  box-shadow: 0 0 0 2px #999;
}

.cbcn-pc-color-btn2 span {
  display: block;
  width: 1.0945em;
  height: 1.0945em;
  border-radius: 50%;
  border: 3px solid #101010;
  background: linear-gradient(142deg, #535353 30.55%, #1B1B1B 87.18%);
}

.cbcn-pc-color-btn2.active span {
  box-shadow: 0 0 0 2px #535353;
}

.cbcn-pc-color-videoDiv {
  width: 38.5em;
  height: 28.55em;
  position: relative;
  overflow: hidden;
  border-radius: 1.25em;
  margin-top: 3.975em;
  left: 15em;
}

.cbcn-pc-color-img-group1Div {
  z-index: 9;
}

.cbcn-pc-color-imgDiv {
  width: 26.5em;
  height: 28.55em;
  left: 54.5em;
  margin-top: 3.975em;
  justify-content: space-between;
}


.cbcn-pc-color-imgDivItem1 {
  width: 26.5em;
  background: #000;
  border-radius: 1.25em;
  height: 18.9em;
  position: relative;
}

.cbcn-pc-color-img-group2 {
  bottom: 0;
  width: 15.75em;
}

.cbcn-pc-color-img-group3 {
  position: absolute;
  width: 24.5em;
  top: 1.75em;
  right: 0;
}


.cbcn-pc-color-imgDivItem2 {
  width: 26.5em;
  background: #000;
  border-radius: 1.25em;
  height: 8.65em;
  position: relative;
}


.cbcn-pc-color-txt1,
.cbcn-pc-color-txt2 {
  position: absolute;
  left: 2em;
  bottom: 1.5em;
}


.cbcn-pc-color-img-group1-2,
.cbcn-pc-color-img-group2-2,
.cbcn-pc-color-img-group3-2,
.cbcn-pc-color-txt2 {
  opacity: 0;
}


/* display */
.cbcn-pc-display-txt1 {
  gap: 2em;
  top: 3em;
}

.cbcn-pc-display-img1 {
  height: 30.8em;
  left: 26em;
  margin-top: 12em;
  margin-left: 8.2em;
}

.cbcn-pc-display-img2 {
  height: 30.8em;
  left: 56em;
  opacity: 0;
}

.cbcn-pc-display-txt2 {
  left: 56em;
  gap: 2.25em;
}

.cbcn-pc-display-txt-col {
  gap: 2em;
}

.cbcn-pc-display-txt-row {
  align-items: center;
}

.cbcn-pc-display-txt-row .cbcn-pc-param:first-child {
  width: 12.6em;
}


.cbcn-pc-display-txt-line {
  width: 100%;
  height: 1px;
  background: #373737;
}

.cbcn-pc-display-txt-row2 {
  justify-content: space-between;
  align-items: center;
}


.cbcn-pc-display-imglogo1 {
  width: 4.9983em;
  height: 2.1806em;
}

.cbcn-pc-display-imglogo2 {
  width: 4.8em;
  height: 1.8em;
}

.cbcn-pc-display-imglogo3 {
  width: 6.05em;
  height: 1.35em;
}

.cbcn-pc-display-txt3 {
  right: calc(50% - 3em);
  gap: 2.25em;
  opacity: 0;
}

/* batteryTitle */
.cbcn-pc-batteryTitle-screen {
  padding-top: 14.05em;
  padding-bottom: 1.25em;
}

.cbcn-pc-batteryTitle-p1 {
  background-position: 50% 50%;
  background-size: 100% 500%;
  -webkit-background-clip: text;
  background-image: radial-gradient(50% 50% at 50% 50%, #fff 33%, transparent 66%);
  background-repeat: no-repeat;
  color: transparent;
  text-align: center;
  color: transparent;
}

/* battery */
.cbcn-pc-battery-txt {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cbcn-pc-battery-plist {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.cbcn-pc-battery-pageList {
  display: flex;
  flex-direction: row;
  width: 300vw;
  height: 100%;
}

.cbcn-pc-battery-pageList .cbcn-pc-battery-page {
  width: 100vw;
  position: relative;
  height: 100%;
}

.cbcn-pc-battery-txt {
  position: absolute;
  top: 4.5em;
  width: 100%;
}

.cbcn-pc-battery-txt1 {
  opacity: 0;
}

.cbcn-pc-battery-video1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cbcn-pc-battery-video2 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cbcn-pc-battery-video3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cbcn-pc-battery-video4 {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cbcn-pc-battery-txt4 {
  opacity: 0;
  width: 53.65em;
}

.cbcn-pc-battery-txt5 {
  gap: 1.65em;
}

.cbcn-pc-battery-txt5-row {
  gap: 1.85em;
}

.cbcn-pc-battery-txt5 ul li {
  list-style: disc;
}

/* batteryLife */
.cbcn-pc-batteryLife-title {
  margin-top: 3em;
}

.cbcn-pc-batteryLife-cardList {
  display: flex;
  flex-direction: row;
  gap: 3em;
  left: 50%;
  margin-left: -25em;
}

.cbcn-pc-batteryLife-cardItem {
  width: 50em;
  height: 24.9em;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #000000;
  border-radius: 0.9em;
  position: relative;
}

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

.cbcn-pc-batteryLife-videoDiv {
  width: 17.75em;
  height: 19.86755em;
  position: absolute;
  top: 2.5em;
  right: 7.3em;
}

.cbcn-pc-batteryLife-videobg {
  width: 100%;
  height: 100%;
  z-index: 9;
  position: absolute;
  top: 0;
  left: 0;
}

.cbcn-pc-batteryLife-video3 {
  width: 96%;
  height: 96%;
  z-index: 8;
}

.cbcn-pc-batteryLife-txt1 {
  left: 7.5em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.cbcn-pc-batteryLife-txt2 {
  left: 8.5em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.cbcn-pc-batteryLife-txt-row {
  display: flex;
  flex-direction: row;
  gap: 1.7em;
}

.cbcn-pc-batteryLife-cardBtnDiv {
  top: calc(50% + 15.3em);
  border-bottom: 1px solid #454545;
  padding-bottom: 1.05em;
}

.cbcn-pc-batteryLife-cardBtnList {
  display: flex;
  flex-direction: row;
  gap: 2.5em;
}

.cbcn-pc-batteryLife-cardBtn {
  text-wrap: nowrap;
  opacity: 0.3;
}

.cbcn-pc-batteryLife-cardBtn1 {
  opacity: 1;
}

.cbcn-pc-batteryLife-cardBtnLine {
  width: 7.5em;
  height: 1px;
  background: #FFF;
  position: absolute;
  bottom: 0;
  left: 0;
}


/* cameraTitle */
.cbcn-pc-cameraTitle-screen {
  padding-top: 12em;
  padding-bottom: 5em;
  box-sizing: border-box;
}

.cbcn-pc-cameraTitle-p1 {
  background-position: 50% 50%;
  background-size: 100% 500%;
  -webkit-background-clip: text;
  background-image: radial-gradient(50% 50% at 50% 50%, #fff 33%, transparent 66%);
  background-repeat: no-repeat;
  color: transparent;
  text-align: center;
  color: transparent;
}

/* camera */
.cbcn-pc-camera-img {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.cbcn-pc-camera-lineBorder1 {
  width: 26em;
  height: 1px;
  border-top: 1px solid #FFFFFF;
  position: absolute;
  z-index: 99;
  bottom: 27.8em;
  right: 48.1em;
  overflow: visible;
}

.cbcn-pc-camera-lineBorder2 {
  width: 26em;
  height: 1px;
  border-top: 1px solid #FFFFFF;
  position: absolute;
  z-index: 99;
  bottom: 22em;
  right: 48.1em;
  overflow: visible;
}

.cbcn-pc-camera-lineBorder3 {
  width: 24em;
  height: 1px;
  border-top: 1px solid #FFFFFF;
  position: absolute;
  z-index: 99;
  bottom: 27.5em;
  left: 52em;
  overflow: visible;
}

.cbcn-pc-camera-txt2,
.cbcn-pc-camera-txt3 {
  gap: 1em;
  position: absolute;
  left: 0;
  top: -3.5em;
}

.cbcn-pc-camera-txt4 {
  gap: 1em;
  position: absolute;
  right: 0;
  top: -3.5em;
}

.cbcn-pc-camera-txt1 {
  opacity: 0;
  justify-content: space-between;
  width: 60em;
}

.cbcn-pc-camera-content {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin-top: 15em;
}

.cbcn-pc-camera-content .cbcn-pc-h5 {
  line-height: 126.667%;
}

.cbcn-pc-camera-content .cbcn-pc-p3 {
  line-height: 180.952%;
}

/* sensor */
.cbcn-pc-sensor-content {
  width: 100%;
  position: absolute;
  left: 0;
  top: 5em;
  z-index: 99;
  justify-content: space-between;
}

.cbcn-pc-sensor-img {
  width: 75.4em;
  margin-left: 6.15em;
}

.cbcn-pc-sensor-txt {
  gap: 1.8em;
}

.cbcn-pc-sensor-paramGroup {
  display: flex;
  flex-direction: row;
  gap: 3em;
}

.cbcn-pc-sensor-paramGroup paramstr {
  background: linear-gradient(90deg, #E59332 4.01%, #E63248 44.79%, #223CF7 93.97%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* nightView */
.cbcn-pc-nightView-img {
  width: 41.45em;
  height: 24.25em;
  left: 11.3em;
  overflow: hidden;
}

.cbcn-pc-nightView-txtDiv {
  gap: 2em;
  right: calc(50% - 26em);
  opacity: 0;
}

.cbcn-pc-nightView-txt {
  gap: 1em;
}

/* starry */
.cbcn-pc-starry-content {
  align-items: center;
  gap: 2em;
}

.cbcn-pc-starry-img {
  width: 50em;
  height: 24.75em;
  object-fit: cover;
}

.cbcn-pc-starry-txt1{
  gap: 1em;
}

/* capture */
.cbcn-pc-capture-content {
  padding-top: 5em;
  padding-bottom: 5em;
}

.cbcn-pc-capture-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  margin-top: 4.05em;
}

.cbcn-pc-capture-item {
  width: calc(50% - 1.1em);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4em;
}

.cbcn-pc-capture-img1 {
  height: 30.15em;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.cbcn-pc-capture-img2 {
  height: 28.4em;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: relative;
}


/* zoom */
.cbcn-pc-zoom-imgDiv {
  margin-top: 2em;
  width: 50em;
  height: 26.55em;
  position: relative;
  overflow: hidden;
  margin-bottom: 1em;
}

.cbcn-pc-zoom-img {
  width: 50em;
}

.cbcn-pc-zoom-desc {
  width: 100%;
}

/* wide */
.cbcn-pc-wide-screen {
  height: 40.5em;
}

.cbcn-pc-wide-img {
  display: block;
  width: 50em;
  height: 40.5em;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.cbcn-pc-wide-txtDiv {
  left: 22.5em;
}

.cbcn-pc-wide-txt1 {
  gap: 1em;
  margin-top: 2em;
}

.cbcn-pc-wide-txtDiv .cbcn-pc-title subtitle {
  color: #FFF;
}

/* wide2 */

.cbcn-pc-wide2-content {
  align-items: center;
  margin: 9.15em 0;
}

.cbcn-pc-wide2-img {
  width: 50em;
  height: 23.55em;
  margin-bottom: 1.25em;
  position: relative;
}

.cbcn-pc-wide2-content .cbcn-pc-title-txt {
  align-items: center;
  gap: 1em;
}

/* fullFocus */
.cbcn-pc-fullFocus-content {
  width: 100%;
}

.cbcn-pc-fullFocus-txt {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cbcn-pc-fullFocus-pList {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.cbcn-pc-fullFocus-imageSwiper {
  width: 100%;
  height: 25.35em;
  margin-top: 2em;
  position: relative;
  overflow: visible;
}

.cbcn-pc-fullFocus-imageBox {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #000;
}

.cbcn-pc-fullFocus-imageItem {
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.cbcn-pc-fullFocus-imageItem1 {
  height: 100%;
}

.cbcn-pc-fullFocus-img {
  width: 100%;
  height: 25.35em;
  object-fit: cover;
  object-position: center;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cbcn-pc-fullFocus-btnDiv {
  position: absolute;
  left: calc(100% + 2.9em);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

.cbcn-pc-fullFocus-btnRow {
  display: flex;
  flex-direction: row;
  gap: 1.8em;
  justify-content: left;
  align-items: center;
  height: 3em;
}

.cbcn-pc-fullFocus-btnLine {
  height: 3em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 0.7511em;
}

.cbcn-pc-fullFocus-btnLine hr {
  width: 100%;
  height: 1px;
  background-color: #C3C3C3;
  margin: 0;
  border: 0;
}

.cbcn-pc-fullFocus-btnTxt {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  opacity: 0.3;
}

.cbcn-pc-fullFocus-btnTxt1 {
  opacity: 1;
}

.cbcn-pc-fullFocus-redLine {
  position: absolute;
  left: 0;
  top: 1.5em;
  width: 1.6em;
  height: 2px;
  background-color: #F00;
  margin-top: -1px;
}

/* portrait */
.cbcn-pc-portrait-txt1 {
  gap: 0.85em;
  position: absolute;
  left: 18.55em;
  bottom: 3em;
}

.cbcn-pc-portrait-imgDiv {
  width: 43.65em;
  height: 21.5em;
  position: relative;
  margin: 2em auto 0;
}

.cbcn-pc-portrait-imgBg {
  width: 100%;
  height: 100%;
}

.cbcn-pc-portrait-imgListDiv {
  width: 27.75em;
  height: 15.3em;
  position: absolute;
  top: 0.6em;
  left: 8.0em;
  overflow: hidden;
}

.cbcn-pc-portrait-imgList {
  width: calc(27.75em * 6);
  height: 15.3em;
  position: absolute;
  top: 0;
  left: 0;
}

.cbcn-pc-portrait-img {
  width: 27.75em;
  height: 15.3em;
  position: relative;
  overflow: hidden;
}

/* hover */
.cbcn-pc-hover-content {
  width: 67.2em;
}

.cbcn-pc-hover-videoDiv {
  margin-top: 4em;
  justify-content: space-between;
}

.cbcn-pc-hover-videoItem {
  width: 33em;
  height: 22.45em;
  position: relative;
  overflow: hidden;
}

/* memoryColor */
.cbcn-pc-memoryColor-content {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  gap: 3.2em;
}

.cbcn-pc-memoryColor-imgDiv {
  width: 36.95em;
  height: 29.85em;
}

.cbcn-pc-memoryColor-imgDiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none;
}

img.cbcn-pc-memoryColor-img1 {
  display: block;
}

.cbcn-pc-memoryColor-txt {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  text-wrap: nowrap;
}

/* chip */
.cbcn-pc-chip-imgbg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.cbcn-pc-chip-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
}

.cbcn-pc-chip-txt1 {
  padding-top: 5em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.cbcn-pc-chip-txt2 {
  right: calc(50% + 24em);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  opacity: 0;
}

.cbcn-pc-chip-txt3 {
  left: calc(50% + 24em);
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  opacity: 0;
}

.cbcn-pc-chip-plist {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

/* ai */
.cbcn-pc-ai-title {
  margin-top: 14.15em;
  margin-bottom: 8.85em;
}

.cbcn-pc-ai-p1 {
  background-position: 50% 50%;
  background-size: 100% 500%;
  -webkit-background-clip: text;
  background-image: radial-gradient(50% 50% at 50% 50%, #fff 33%, transparent 66%);
  background-repeat: no-repeat;
  color: transparent;
  text-align: center;
  color: transparent;
}

.cbcn-pc-ai-cardList {
  margin-top: 2.95em;
  display: flex;
  flex-direction: row;
  gap: 1em;
  justify-content: center;
}

.cbcn-pc-ai-cardItem {
  width: 24.5em;
  height: 29.75em;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #19191D;
  border-radius: 0.9em;
  position: relative;
  padding: 2em;
  box-sizing: border-box;
}

.cbcn-pc-ai-cardBtnList {
  display: flex;
  width: max-content;
  flex-direction: row;
  gap: 0.6em;
  border-bottom: 1px solid #797979;
  cursor: pointer;
  user-select: none;
  margin: 1.2em auto 0;
}

.cbcn-pc-ai-cardBtn {
  color: #616161;
  padding-bottom: 0.5em;
}

.cbcn-pc-ai-cardBtn.active {
  color: #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
}

.cbcn-pc-ai-cardContnet {
  width: 100%;
  margin-top: 0.5em;
  display: flex;
  flex-direction: row;
  gap: 2em;
}

.cbcn-pc-ai-cardContnet1 {
  width: calc(20.5em * 3 + 4em);
}

.cbcn-pc-ai-cardContnet2 {
  width: calc(20.5em * 4 + 6em);
}

.cbcn-pc-ai-cardContnet3 {
  width: calc(20.5em * 3 + 4em);
}

.cbcn-pc-ai-cardContnetItem {
  position: relative;
  width: 20.5em;
}

.cbcn-pc-ai-cardItemBtn {
  user-select: none;
  cursor: pointer;
}

.cbcn-pc-ai-cardItemBtn.active {
  color: #FFFFFF;
}

.cbcn-pc-ai-itemimg {
  display: none;
}

.cbcn-pc-ai-itemimg1 {
  display: block;
}

.cbcn-pc-ai-img {
  top: 4.75em;
  height: 15.95em;
}

.cbcn-pc-ai-videoDiv {
  width: 14.25em;
  height: 15.95em;
}

.cbcn-pc-ai-videobg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.cbcn-pc-ai-videoDiv video {
  width: 95%;
  height: 95%;
  z-index: 8;
  object-fit: contain;
}

.cbcn-pc-ai-videoDiv .cbcn-pc-ai-imgin {
  object-fit: contain;
  width: 95%;
  height: 95%;
  z-index: 8;
}

/* efficiency */
.cbcn-pc-efficiency-content {
  display: flex;
  flex-direction: column;
  gap: 3.25em;
  width: 100%;
  margin-top: 30px;
}

.cbcn-pc-efficiency-cardDiv {
  width: 100%;
  height: 24.45em;
  position: relative;
}

.cbcn-pc-efficiency-cardList {
  position: absolute;
  left: 50%;
  display: flex;
  gap: 1em;
  margin-left: -20.75em;
  width: calc(41.5em * 3 + 2em);
}

.cbcn-pc-efficiency-cardItem {
  width: 41.5em;
  height: 24.45em;
  border-radius: 0.9em;
  background: #19191D;
  overflow: hidden;
  position: relative;
}

.cbcn-pc-efficiency-cardItem-title {
  margin-top: 2em;
  margin-left: 2em;
  position: relative;
  z-index: 99;
}

.cbcn-pc-efficiency-cardItem-content {
  margin-top: 3em;
  position: relative;
  width: 100%;
}


.cbcn-pc-efficiency-cardItem-txtDiv {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin-left: 2em;
  border-left: 1px solid #797979;
  box-sizing: border-box;
}

.cbcn-pc-efficiency-cardItem-txtDiv2 {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  margin-left: 2em;
  box-sizing: border-box;
}

.cbcn-pc-efficiency-cardItem-txtItem {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-left: 1.05em;
  cursor: pointer;
  box-sizing: border-box;
}

.cbcn-pc-efficiency-cardItem-txtItem.active {
  border-left: 1px solid #FFFFFF;
}


.cbcn-pc-efficiency-cardItem-txtItem .cbcn-pc-p4 {
  display: none;
}

.cbcn-pc-efficiency-cardItem-txtItem.active .cbcn-pc-p4 {
  display: block;
}

.cbcn-pc-efficiency-img {
  display: none;
}

.cbcn-pc-efficiency-img1 {
  display: block;
}

.cbcn-pc-efficiency-videoDiv {
  width: 14.25em;
  height: 15.95em;
  position: absolute;
  top: 4.25em;
  right: 4.95em;
}

.cbcn-pc-efficiency-videobg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}

.cbcn-pc-efficiency-videoDiv video {
  width: 95%;
  height: 95%;
  z-index: 8;
}

.cbcn-pc-efficiency-videoDiv2 {
  width: 17.9em;
  height: 13.45em;
  position: absolute;
  top: 6.9em;
  right: 3.1em;
}

.cbcn-pc-efficiency-videoDiv2 video {
  width: 100%;
}

.cbcn-pc-efficiency-cardBtnDiv {
  position: relative;
  left: 50%;
  margin: 0 auto;
  margin-left: -20.75em;
  width: 50em;
  align-items: center;
  justify-content: space-between;
}

.cbcn-pc-efficiency-cardBtnList {
  width: calc(6.45em * 3);
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.cbcn-pc-efficiency-cardBtn {
  width: 6.45em;
  height: 1px;
  background: #464646;
}

.cbcn-pc-efficiency-cardBtnLine {
  width: 6.45em;
  height: 1px;
  background: #FFFFFF;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cbcn-pc-efficiency-cardSwitchBtnList {
  gap: 1.25em;
}

.cbcn-pc-efficiency-cardSwitchBtn {
  width: 4em;
  height: 4em;
  cursor: pointer;
}

.cbcn-pc-efficiency-cardSwitchBtn-left {
  transform: rotate(180deg);
}

.cbcn-pc-efficiency-cardSwitchBtn.disabled {
  opacity: 0.3;
}

/* signal */
.cbcn-pc-signal-screen {
  padding-top: 14em;
}

.cbcn-pc-signal-content {
  margin-top: 7.65em;
  margin-bottom: 5em;
  display: flex;
  flex-direction: row;
  gap: 2.4em;
  justify-content: center;
  align-items: center;
}

.cbcn-pc-signal-h1 {
  background-position: 50% 50%;
  background-size: 100% 500%;
  -webkit-background-clip: text;
  background-image: radial-gradient(50% 50% at 50% 50%, #fff 33%, transparent 66%);
  background-repeat: no-repeat;
  color: transparent;
  text-align: center;
  color: transparent;
}

.cbcn-pc-signal-content-col {
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.cbcn-pc-signal-txt {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.cbcn-pc-signal-img {
  width: 38.6em;
  height: 38.35em;
  position: relative;
  z-index: 9;
}

@keyframes signalImg {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  50% {
    transform: scale(0.95);
    opacity: 1;
  }

  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

.cbcn-pc-signal-img-item1 {
  position: absolute;
  width: 9.35em;
  top: 3em;
  left: 4.65em;
  transform-origin: center center;
  z-index: -1;
  animation: signalImg 5s infinite;
}

.cbcn-pc-signal-img-item2 {
  position: absolute;
  width: 10.45em;
  top: 6.3em;
  right: 3em;
  transform-origin: center center;
  z-index: -1;
  animation: signalImg 5s infinite;
}

.cbcn-pc-signal-img-item3 {
  position: absolute;
  width: 13.55em;
  bottom: 1em;
  left: 2.15em;
  transform-origin: center center;
  z-index: -1;
  animation: signalImg 5s infinite;
}

/* privacy */
.cbcn-pc-privacy-screen {
  height: 46.45em;
}

.cbcn-pc-privacy-txt1 {
  z-index: 9;
  left: calc(50% + 6.1em);
}

.cbcn-pc-privacy-txtGroup {
  z-index: 9;
  left: calc(50% + 6.1em);
  gap: 2em;
}

.cbcn-pc-privacy-txt {
  gap: 1em;
}

.cbcn-pc-privacy-imgIcon {
  width: 2.7em;
}

/* originOS */
.cbcn-originOS-title {
  margin-top: 6em;
}

.cbcn-originOS-cardDiv {
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 100%;
  margin-top: 3.25em;
}

.cbcn-originOS-cardRow {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.cbcn-originOS-card {
  position: relative;
  border-radius: 0.9em;
  background: #101010;
  overflow: hidden;
  width: 100%;
}

.cbcn-originOS-card1 {
  height: 13.46975em;
}

.cbcn-originOS-txt1 {
  position: absolute;
  top: 3em;
  left: 4em;
  z-index: 99;
}

.cbcn-pc-originOS-img1 {
  width: 13.05em;
  margin-bottom: 0.65em;
}

.cbcn-pc-originOS-link {
  display: block;
  margin-top: 2.22222em;
}

.cbcn-originOS-card2 {
  padding: 1.6em 0;
}

.cbcn-pc-originOS-imgIcon {
  display: block;
  height: 4.35em;
  margin: 2.15em auto 2.35em;
}

.cbcn-originOS-card-desc {
  margin-top: 1.1111111em;
}

.cbcn-pc-zeiss-img {
  width: 69.06285em;
  display: block;
  margin: 0 auto;
}

.cbcn-pc-zeiss-img img {
  width: 69.1em;
  display: block;
  margin: 0 auto;
}

/* note */
.cbcn-pc-note-content {
  margin-top: 2.85em;
  margin-bottom: 8em;
}

.cbcn-pc-note-desc {
  font-size: 0.8em;
  color: #898989;
  font-weight: 500;
  line-height: 200%;
}

.cbcn-pc-note-desc ol li {
  list-style: auto;
  list-style-position: outside;
  margin-left: 1.5em;
}

@media screen and (min-width: 1440px) and (max-width: 1600px) {}

@media screen and (max-width: 1030px) {}