@charset "utf-8";
html{font-size: 50px;-webkit-text-size-adjust:none;height: 100%;}
body{min-height: 100%;font-family:"苹方","San Francisco","黑体","Helvetica Neue", Helvetica, Arial, sans-serif;  font-size: .28rem;color:#000;background: #f5f5f5;}
html,body,header,footer,a,select,section,div,p,span,img,input,textarea,li,ul,dl,dt,dd,table,th,tr,td,h1,h2,h3,h4,h5,h6{margin:0;padding:0;-webkit-tap-highlight-color:rgba(255,0,0,0);border:none;outline:none;-webkit-touch-callout: none}
.clearfix {*zoom: 1;}
.clearfix:before,
.clearfix:after {display: table;line-height: 0;content: "";}
.clearfix:after {clear: both;}
a{text-decoration: none;color: #000;}
img{max-width:100%;}
li{list-style: none;}
.fl{float:left;}
.fr{float:right;}
.radius5{border-radius: .1rem;}
.radius10{border-radius: .2rem;}
.hide{display: none;}
.show{display: block;}
.show-in{display: inline-block;}

/*head tip style*/
.header-tip{position:relative;display:block;font-size: .26rem;text-align: center;padding:.2rem .3rem;line-height: .36rem;background: #349bff;color:#fff;}
.header-tip .icon-point-right-white{position:absolute;right:.3rem;top:50%;margin-top:-7px;}
/*head tip end*/

.common-sec-title{font-size: .26rem;font-weight:bold;color:#a0a0a0;line-height: .34rem;margin:.28rem 0 .12rem;padding:0 .3rem;}

[v-cloak] { display: none; }
#root { height: 100vh; height: 100dvh; }
.freeze { overflow-y: hidden; }

body {
  font-size: 20px;
  background: white;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
}
body::-webkit-scrollbar { display: none; }

.top-part {
  width: 91.5%;
  height: 1.29rem;
  position: fixed;
  top: 0;
  z-index: 10;
  left: 4.25%;
}
.top-part .left-icon {
  position: absolute;
  display: block;
  width: 2rem;
  height: .6rem;
  top: .33rem;
  left: 0;
}
.top-part .right-icon {
  position: absolute;
  display: block;
  width: .48rem;
  height: .48rem;
  top: .33rem;
  right: 0;
  cursor: default;
}

.page-scroll {
  height: 100dvh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.page-scroll::-webkit-scrollbar { display: none; }

.slide {
  height: 100dvh;
  scroll-snap-align: start;
  overflow: hidden;
  position: relative;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  object-fit: cover;
}

.new-page1 {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 0.3rem;
  line-height: 0.42rem;
  color: #fff;
  z-index: 2;
}
.new-page1-content {
  margin-top: 2.93rem;
  width: 3.64rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.new-page1-title-bg {
  position: absolute;
  top: -0.06rem;
  left: 1.63rem;
  width: 2.18rem;
  height: 1.24rem;
  z-index: 1;
}
.new-page1-title-text {
  position: relative;
  z-index: 2;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.1rem;
  color: #fff;
}
.new-page1-content-text {
  margin-top: .2rem;
  font-size: .3rem;
  line-height: .42rem;
  color: #fff;
}
.new-download-btn {
  margin-top: .7rem;
  padding: .36rem 1.43rem;
  border-radius: .8rem;
  background: #fff;
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: .34rem;
  line-height: .4rem;
  color: #004ee2;
  cursor: pointer;
  border: none;
}
.new-download-btn-img {
  width: .48rem;
  height: .48rem;
  margin-right: .1rem;
}

.new-page-people {
  position: absolute;
  top: 8.18rem;
  left: -2.32rem;
  width: 10.93rem !important;
  height: 7.98rem;
  max-width: 10.93rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .5s;
  z-index: 1;
}
.new_active_first_people { transform: translateY(0) translateZ(0); }

.new-left-top-head {
  position: absolute; top: 1.66rem; left: -0.19rem;
  width: 1.43rem; height: 1.83rem; object-fit: cover;
  opacity: 0; scale: .5;
  transform: translateX(1rem) translateY(1rem) translateZ(0);
  transition: opacity .8s, scale .8s, transform .8s; z-index: 3;
}
.new_active_top_head { opacity: 1; scale: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-left-middle-momo {
  position: absolute; top: 5.53rem; left: -0.23rem;
  width: 1.89rem; height: .99rem; object-fit: cover;
  opacity: 0; scale: .5;
  transform: translateX(1rem) translateY(0) translateZ(0);
  transition: opacity .8s, scale .8s, transform .8s; z-index: 3;
}
.new_active_middle_momo { opacity: 1; scale: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-center-bottom-like {
  position: absolute; top: 9.99rem; left: 3.49rem;
  width: 1.48rem; height: 1.41rem; object-fit: cover;
  opacity: 0; scale: .5;
  transition: opacity .8s, scale .8s; z-index: 3;
}
.new_active_bottom_like { opacity: 1; scale: 1; }

.new-right-top-see {
  position: absolute; top: 1.31rem; right: -0.35rem;
  width: 1.96rem; height: 1.81rem; object-fit: cover;
  opacity: 0; scale: .5;
  transform: translateX(-1rem) translateY(1rem) translateZ(0);
  transition: opacity .8s, scale .8s, transform .8s; z-index: 3;
}
.new_active_top_see { opacity: 1; scale: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-right-middle-hello {
  position: absolute; top: 5.23rem; right: -0.5rem;
  width: 1.74rem; height: 1.6rem; object-fit: cover;
  opacity: 0; scale: .5;
  transform: translateX(-1rem) translateY(0) translateZ(0);
  transition: opacity .8s, scale .8s, transform .8s; z-index: 3;
}
.new_active_middle_hello { opacity: 1; scale: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-right-bottom-hello {
  position: absolute; top: 8.47rem; right: 0.27rem;
  width: 2.2rem; height: 1.15rem; object-fit: cover;
  opacity: 0; scale: .5;
  transform: translateX(-1rem) translateY(1rem) translateZ(0);
  transition: opacity .8s, scale .8s, transform .8s; z-index: 3;
}
.new_active_bottom_hello { opacity: 1; scale: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-2-phone {
  position: absolute; top: 1.85rem; left: 0.85rem;
  width: 5.8rem; height: 7.36rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .8s; z-index: 2;
}
.new_active_2_phone { transform: translateY(0) translateZ(0); }

.new-2-trumpet {
  position: absolute; top: 7.5rem; left: 5.4rem;
  width: 1.87rem; height: 2.03rem; object-fit: cover;
  scale: .5; opacity: 0;
  transition: scale .8s, opacity .8s; z-index: 2;
}
.new_active_2_trumpet { scale: 1; opacity: 1; }

.new-2-content {
  position: absolute; top: 10.01rem; left: 1.415rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .8s;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 4.67rem; z-index: 2;
}
.new_active_2_content { transform: translateY(0) translateZ(0); }

.new-2-content-bg {
  position: absolute; z-index: 1;
  top: -0.05rem; left: 2.485rem;
  height: 0.9rem; width: 1.72rem;
}
.new-2-content-title {
  font-weight: 600; font-size: .66rem; line-height: .8rem;
  color: #fff; position: relative; z-index: 2;
}
.new-2-content-text {
  margin-top: .2rem; font-size: .28rem; line-height: .39rem; color: #fff;
}

.new-3-people {
  position: absolute; top: 3.71rem; left: 0.54rem;
  width: 6.66rem; height: 5.53rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .8s; z-index: 2;
}
.new_active_3_people { transform: translateY(0) translateZ(0); }

.new-3-left-hello {
  position: absolute; top: 2.76rem; left: 1.31rem;
  width: 2.09rem; height: 1.25rem; object-fit: cover;
  scale: .5; opacity: 0;
  transform: translateX(1rem) translateY(1rem) translateZ(0);
  transition: scale .8s, opacity .8s, transform .8s; z-index: 3;
}
.new_active_3_left_hello { scale: 1; opacity: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-3-right-hello {
  position: absolute; top: 3.49rem; right: 0.37rem;
  width: 1.45rem; height: 1.10rem; object-fit: cover;
  scale: .5; opacity: 0;
  transform: translateX(-1rem) translateY(1rem) translateZ(0);
  transition: scale .8s, opacity .8s, transform .8s; z-index: 3;
}
.new_active_3_right_hello { scale: 1; opacity: 1; transform: translateX(0) translateY(0) translateZ(0); }

.new-3-content {
  position: absolute; top: 10.04rem; left: 0.48rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .8s;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 6.54rem; z-index: 2;
}
.new_active_3_content { transform: translateY(0) translateZ(0); }

.new-3-content-bg {
  position: absolute; z-index: 1;
  top: -0.05rem; left: 1.75rem;
  height: 0.9rem; width: 1.72rem;
}
.new-3-content-title {
  font-weight: 600; font-size: .66rem; line-height: .8rem;
  color: #fff; position: relative; z-index: 2;
}
.new-3-content-text {
  margin-top: .2rem; font-size: .26rem; line-height: .36rem; color: #fff;
}

.new-4-content {
  position: absolute; top: 4.67rem; left: 1.35rem;
  width: 4.8rem; height: 1.9rem;
  transform: translateY(1rem) translateZ(0);
  transition: transform .8s; z-index: 2;
}
.new_active_4_content { transform: translateY(0) translateZ(0); }

.new-4-download-btn {
  position: absolute; top: 10.68rem; left: 1.35rem;
  padding: .36rem 1.43rem;
  border-radius: .8rem;
  background: #fff;
  display: flex; align-items: center;
  font-weight: 600; font-size: .34rem; line-height: .4rem;
  color: #004ee2; cursor: pointer; border: none; z-index: 2;
}

.download-popup-wrapper {
  display: none;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.6);
  position: fixed; left: 0; top: 0; z-index: 9990;
}
.download-popup-wrapper.show-popup { display: block; }
.download-popup-wrapper .download-popup-content {
  background: #fff;
  width: fit-content; height: fit-content;
  color: #232323;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 10px;
  padding: 50px 30px;
  border: 1px solid #aaa;
  margin: 150px auto;
  position: relative;
}
.download-popup-wrapper .download-title {
  font-size: 28px; margin-bottom: 20px;
}
.download-popup-wrapper .download-item {
  font-size: 18px; margin: 10px auto;
  color: #8b8a8a; border-radius: 10px;
  padding: 10px 30px; background: #e3e3e3;
  cursor: pointer; border: none; width: 100%;
  text-align: center;
}
.download-popup-wrapper .download-item.active {
  color: #fff; background: #007bfa;
}
.download-popup-wrapper .close-icon {
  background-image: url("https://s.momocdn.com/s1/u/igccdecif/close_icon.png");
  width: 20px; height: 20px;
  background-size: 100%; background-repeat: no-repeat;
  position: absolute; top: 20px; right: 20px;
  cursor: pointer;
}