/* ************************ PC端 ************************ */
/* 锚点 */
.anchor {
  position: absolute;
  left: 0;
}
/* ========================= 无他相机 ========================= */
.pc-layout .wuta-cam {
  position: relative;
  width: 100%;
  height: 10.80rem;
}
#anchor-wuta-cam {
  top: 0;
}
.pc-layout .wc-bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  transition: all .3s;
}
.pc-layout .wc-bg.blue {
  background: linear-gradient(180deg, #D8ECFF 0%, #FFFFFF 60%);
}
.pc-layout .wc-bg.brown {
  background: linear-gradient(180deg, #FFF1E3 0%, #FFFFFF 60%);
}
.pc-layout .wuta-cam.blue .wc-bg.blue {
  opacity: 1;
}
.pc-layout .wuta-cam.blue .wc-bg.brown {
  opacity: 0;
}
.pc-layout .wuta-cam.brown .wc-bg.blue {
  opacity: 0;
}
.pc-layout .wuta-cam.brown .wc-bg.brown {
  opacity: 1;
}
.pc-layout .wuta-cam .inner {
  position: relative;
  max-width: 1920px;
  width: 100%;
  height: 100%;
}
.pc-layout .wc-left {
  padding-top: 2.72rem;
  padding-left: 2.3rem;
}
.pc-layout .wc-logo {
  width: 4.8rem;
  /* height: 1.5rem; */
  height: auto;
  transform: translateX(-.21rem);
}
.pc-layout .wc-slogan {
  margin-top: .06rem;
  font-size: .42rem;
  letter-spacing: .17rem;
  line-height: .6rem;
}
.en .pc-layout .wc-slogan {
  letter-spacing: .02rem;
}
.pc-layout .app-download {
  margin-top: .8rem;
  width: 4.36rem;
}
.pc-layout .app-download .btn {
  position: relative;
  width: 2.1rem;
  height: .64rem;
  border-radius: .12rem;
  background: #000;
  font-size: .18rem;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.pc-layout .app-download .btn .icon {
  width: .36rem;
  height: .36rem;
  margin-right: .03rem;
}
.pc-layout .app-download .btn a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pc-layout .vcam-download {
  position: relative;
  margin-top: .24rem;
  width: 4.36rem;
  height: .64rem;
  border: 2px solid #000;
  border-radius: .13rem;
  font-size: .19rem;
  color: #000;
  font-weight: 500;
}
.pc-layout .vcam-download .icon {
  width: .36rem;
  height: .36rem;
  margin-right: .1rem;
}
.pc-layout .vcam-download a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pc-layout .wc-right {
  position: absolute;
  right: .9rem;
  top: 1rem;
  width: 9rem;
  height: 9rem;
  overflow: hidden;
}
.pc-layout .wc-right-img {
  position: absolute;
  left: 2.74rem;
  top: 1.02rem;
  width: 3.72rem;
  height: 7.32rem;
  transition: background-image .3s;
}
.pc-layout .wuta-cam.blue .wc-right-img {
  background-image: url('../../images/v2/pc-wc-blue-1.png');
}
.pc-layout .wuta-cam.brown .wc-right-img {
  background-image: url('../../images/v2/pc-wc-brown-1.png');
}
.pc-layout .wc-right .brown-text {
  display: none;
}
.pc-layout .wc-right .text1 {
  position: absolute;
  left: 2.89rem;
  top: .33rem;
  font-size: .81rem;
  line-height: 1.14rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-4rem);
  animation: wcRightText1 .5s .8s ease-out forwards;
}
.pc-layout .wuta-cam.blue .wc-right .text1 {
  top: .2rem;
}
.en .pc-layout .wuta-cam.blue .wc-right .text1 {
  left: 1.8rem;
  top: .2rem;
  font-size: .52rem;
  white-space: nowrap;
}
.en .pc-layout .wuta-cam.brown .wc-right .text1 {
  left: 2.6rem;
  top: .2rem;
  font-size: .6rem;
  white-space: nowrap;
}
@keyframes wcRightText1 {
  to {
    opacity: 1;
    transform: translateX(0rem);
  }
}
.pc-layout .wc-right .text2 {
  position: absolute;
  left: .44rem;
  top: 2.38rem;
  font-size: .54rem;
  line-height: .75rem;
  opacity: 0;
  transform: translateX(-2rem);
  animation: wcRightText2 .3s 1.1s ease-out forwards;
}
.en .pc-layout .wuta-cam.blue .wc-right .text2 {
  font-size: .36rem;
  white-space: nowrap;
}
@keyframes wcRightText2 {
  to {
    opacity: 1;
    transform: translateX(0rem);
  }
}
.pc-layout .wc-right .text3 {
  position: absolute;
  left: 6.75rem;
  top: 4.31rem;
  font-size: .36rem;
  line-height: .5rem;
  opacity: 0;
  transform: translateX(1.5rem);
  animation: wcRightText3 .3s 1.2s ease-out forwards;
}
.en .pc-layout .wuta-cam.blue .wc-right .text3 {
  left: 6.5rem;
  font-size: .26rem;
  white-space: nowrap;
}
@keyframes wcRightText3 {
  to {
    opacity: 1;
    transform: translateX(0rem);
  }
}
.pc-layout .wuta-cam.blue .wc-right {
  color: #9FB8D0;
}
.pc-layout .wuta-cam.brown .wc-right {
  color: #DBBFA3;
}
.pc-layout .awards {
  position: absolute;
  left: .72rem;
  bottom: .55rem;
  width: 7rem;
  height: .72rem;
  transition: all .3s;
}
.pc-layout .wuta-cam.blue .awards {
  background-image: url('../../images/v2/awards-blue.png');
}
.pc-layout .wuta-cam.brown .awards {
  background-image: url('../../images/v2/awards-brown.png');
}
.en .pc-layout .wuta-cam.blue .awards {
  background-image: url('../../images/v2/awards-blue-en.png');
}
.en .pc-layout .wuta-cam.brown .awards {
  background-image: url('../../images/v2/awards-brown-en.png');
}
.pc-layout .download-num {
  position: absolute;
  right: .7rem;
  bottom: .6rem;
  font-size: .21rem;
  font-weight: 500;
  line-height: .3rem;
}
.pc-layout .download-num span {
  margin: 0 .1rem; 
  font-size: .39rem;
  line-height: .54rem;
  font-weight: 600;
  transition: all .3s;
}
.pc-layout .wuta-cam.blue .download-num span {
  color: #A1C2E1;
}
.pc-layout .wuta-cam.brown .download-num span {
  color: #DBBFA3;
}

/* ========================= 无他直播伴侣 ========================= */
.pc-layout .wuta-vcam {
  position: relative;
  width: 100%;
  height: 10.80rem;
}
#anchor-wuta-vcam {
  top: -.8rem;
}
.pc-layout .wuta-vcam .inner {
  position: relative;
  max-width: 1920px;
  width: 100%;
  height: 100%;
}
.pc-layout .vc-left {
  padding-top: 3.02rem;
  padding-left: 1.6rem;
}
.pc-layout .vc-title {
  font-size: .66rem;
  font-weight: 500;
  line-height: .92rem;
}
.pc-layout .vc-title .color {
  margin-left: .08rem;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pc-layout .vc-title .color {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: url('../../images/v2/color-bg.png');
  }
}
.pc-layout .vc-desc {
  margin-top: .18rem;
  font-size: .3rem;
  color: #222;
  line-height: .42rem;
}
.pc-layout .vc-download {
  margin-top: .3rem;
  width: 3.9rem;
}
.pc-layout .vc-download .btn {
  width: 1.8rem;
  height: .6rem;
  border-radius: .3rem;
  background: #000;
  font-size: .18rem;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
}
.pc-layout .vc-tutorial {
  position: relative;
  margin-top: .3rem;
  width: 3.86rem;
  height: .56rem;
  /* border: 2px solid #000; */
  border-radius: .28rem;
  font-size: .21rem;
  color: #222222;
  font-weight: 500;
  background: #fff;
}
.pc-layout .vc-tutorial::after {
  content: '';
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  border-radius: .3rem;
  background-image: url('../../images/v2/color-bg.png');
}
.pc-layout .vc-tutorial a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.pc-layout .vc-right .text-1 {
  position: absolute;
  left: 10.37rem;
  top: .6rem;
  font-size: .72rem;
  color: #CFD0DA;
  line-height: 1rem;
}
.pc-layout .vc-right .text-2 {
  position: absolute;
  right: 7.64rem;
  top: 4rem;
  font-size: .42rem;
  color: #CFD0DA;
  line-height: .6rem;
  text-align: right; 
}
.pc-layout .vc-right .text-3 {
  position: absolute;
  left: 15.96rem;
  top: 5.9rem;
  font-size: .42rem;
  color: #CFD0DA;
  line-height: .6rem;
}
.pc-layout .vc-video {
  position: absolute;
  left: 11.7rem;
  top: 1.5rem;
  width: 4.2rem;
  height: 7.8rem;
}
.pc-layout .vc-video video {
  position: absolute;
  left: .26rem;
  top: .32rem;
  width: 3.7rem;
  height: 7.16rem;
  object-fit: cover;
  border-radius: .6rem;
  cursor: pointer;
}
.pc-layout .vc-video .border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pc-layout .vc-video .play {
  position: absolute;
  left: 1.65rem;
  top: 3.45rem;
  width: .9rem;
  height: .9rem;
  pointer-events: none;
}

/* ========================= 功能展示 ========================= */
.pc-layout .wuta-features {
  position: relative;
  width: 100%;
}
#anchor-wuta-features {
  top: -.8rem;
}
.pc-layout .wuta-features .inner {
  position: relative;
  max-width: 1920px;
  width: 100%;
  padding: 1.5rem 0;
}
.pc-layout .features-video {
  width: 10.44rem;
  height: 5.85rem;
  cursor: pointer;
}
.pc-layout .p1-right {
  margin-left: .8rem;
  max-width: 5.5rem;
}
.pc-layout .p1-title {
  font-size: .66rem;
  line-height: .92rem;
  font-weight: 500;
}
.pc-layout .p1-desc {
  margin-bottom: .06rem;
  font-size: .3rem;
  color: #222222;
  line-height: .42rem;
}
.pc-layout .p1-desc.color {
  margin: .18rem 0;
  color: #A683EC; 
  font-weight: 600;
}
.pc-layout .p2-title {
  margin-top: 2.7rem;
  font-size: .66rem;
  font-weight: 500;
  line-height: .92rem;
}
.pc-layout .p2-title .color {
  margin-left: .06rem;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .pc-layout .p2-title .color {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-image: url('../../images/v2/color-bg.png');
  }
}
.pc-layout .p2-sub-title {
  margin-top: .36rem;
  font-size: .36rem;
  color: #010101;
  line-height: .5rem;
}
.pc-layout .p2-sub-title i {
  display: inline-block;
  width: .06rem;
  height: .06rem;
  border-radius: 50%;
  background: #AA95FD;
  margin: 0 .12rem;
  vertical-align: middle;
}
.pc-layout .features-img {
  margin-top: .45rem;
  width: 15.9rem;
  height: 6.89rem;
}

/* ========================= 模态框 ========================= */
@keyframes modalBg {
  from {
    background: rgba(0, 0, 0, 0);
  }
  to {
    background: rgba(0, 0, 0, .5);
  }
}
@keyframes modalDialog {
  0% {
    transform: scale(.8);
  }
  70% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.modal {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  animation: modalBg .3s forwards;
  display: none;
}
.modal .modal-dialog {
  position: relative;
  background: #fff;
  transform: scale(.8);
  animation: modalDialog .3s forwards;
}
.modal .modal-dialog .close {
  position: absolute;
  right: .24rem;
  top: .24rem;
  width: .5rem;
  height: .5rem;
  text-align: center;
  font-size: .28rem;
  line-height: .5rem;
  cursor: pointer;
}
/* 无他相机iOS二维码模态框 */
#apple-modal .modal-dialog {
  width: 6rem;
  border-radius: .45rem;
  padding-top: .9rem;
  padding-bottom: .75rem;
}
.apple-qr {
  width: 3.6rem;
  height: 3.6rem;
}
.apple-tips {
  margin-top: .42rem;
  font-size: .24rem;
  line-height: .33rem;
  font-weight: 500;
}
/* 直播伴侣1080p版本提醒模态框 */
#vcam-modal .modal-dialog {
  width: 6rem;
  border-radius: .45rem;
  padding-top: .42rem;
  padding-bottom: .4rem;
}
#vcam-modal .modal-dialog p {
  padding: 0 .46rem;
  font-size: .21rem;
  line-height: .42rem;
  font-weight: 500;
  
}
#vcam-modal .modal-dialog .btn-wrap {
  margin-top: .18rem;
}
#vcam-modal .modal-dialog .btn {
  width: 2.1rem;
  height: .64rem;
  border-radius: .12rem;
  font-size: .18rem;
  font-weight: 500;
  cursor: pointer;
}
#vcam-modal .modal-dialog .cancel {
  border: .02rem solid #000;
}
#vcam-modal .modal-dialog .download {
  margin-left: .15rem;
  color: #fff;
  background: #000;
}