@charset "utf-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
}
/** 清除内外边距 **/
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td,
img {
  border: medium none;
  margin: 0;
  padding: 0;
}
/** 设置默认字体 **/
body,
button,
input,
select,
textarea {
  font: 12px/1.5, tahoma, Srial, helvetica, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}
em {
  font-style: normal;
}
/** 重置列表元素 **/
ul,
ol {
  list-style: none;
}
/** 重置超链接元素 **/
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  text-decoration: underline;
  color: #f40;
}
/** 重置图片元素 **/
img {
  border: 0px;
}
/** 重置表格元素 **/
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.button {
  transition: transform 0.2s ease; /* 平滑过渡 */
}
.yinzi {
  animation: fade 0.5s infinite alternate;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.button:hover {
  transform: scale(1.05); /* 放大 10% */
}
@media (min-width: 751px) {
  .bg {
    width: 100%;
    height: 100vh;
    background: url(../images/PC.jpg) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  .bg .register {
    width: 100%;
    height: 87px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg .register .shequ {
    width: 9%;
    height: 38px;
    display: block;
    position: absolute;
    right: 26%;
    top: 28px;
  }
  .bg .register .yaoqingurl {
    width: 7%;
    height: 38px;
    display: block;
    position: absolute;
    right: 18.5%;
    top: 28px;
  }
  .bg .android {
    left: 70%;
    top: 53.43%;
    width: 12.77%;
    height: 6.94%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
    cursor: pointer;
        /* transform: translate(-50%, -50%); */
  }

  .bg .apple {
    left: 85%;
    top: 53.43%;
    width: 12.77%;
    height: 6.94%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
    cursor: pointer;
        /* transform: translate(-50%, -50%); */
  }


  .bg .tg {
    left: 63%;
    top: 84.43%;
    width: 15.77%;
    height: 7.94%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
    cursor: pointer;
        /* transform: translate(-50%, -50%); */
  }


    .bg .fb {
    left: 81%;
    top: 84.43%;
    width: 15.77%;
    height: 7.94%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
    cursor: pointer;
    /* transform: translate(-50%, -50%); */
  }


  .bg .customer {
    left: 21.04%;
    top: 87%;
    width: 10.95%;
    height: 6.84%;
    background: url(../images/pcbtnfb.png) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    /* transform: translate(0, 50%); */
  }
  .bg .ios {
    left: 27.96%;
    top: 75.43%;
    width: 14.77%;
    height: 7.94%;

    background: url(../images/ios.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
  }
  .bg .cafe {
    width: 19.8%;
    height: 75px;
    max-height: 8%;
    background: url(../images/pcbtngoogle.png) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 8%;
    left: 17.8%;
  }
  .bg .yaoqingurl {
    width: 9%;
    height: 55px;
    position: absolute;
    bottom: 11%;
    left: 28.5%;
  }
  .bg .scroll {
    width: 62px;
    height: 55px;
    background: url(../images/down.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  #bg2 {
    width: 100%;
    height: 100vh;
    background: url(../images/pcbg2.png) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  #bg2 .text {
    padding: 10px;
    background: #f00;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 17px;
    position: absolute;
    top: 32%;
    left: 50%;
    transform: translate(-50%, 0);
  }
  #bg2 .text span {
    font-size: 31px;
    font-style: italic;
    color: #fff000;
  }
  #bg2 #lpContainer {
    width: 70%;
    position: absolute;
    top: 40%;
    left: 51%;
    transform: translate(-50%, 0);
  }
  #bg2 #lpContainer img {
    width: 17%;
    max-height: 250px;
    margin-right: 2%;
  }
  #bg2 #lpContainer img:last-child {
    width: 24%;
    max-height: 300px;
    margin-right: 0;
    position: relative;
    top: 30px;
  }
  #bg2 .ios {
    width: 19%;
    height: 105px;
    position: absolute;
    bottom: 14%;
    left: 40.7%;
  }
}

@media (max-width: 750px) {
  .bg {
    width: 100%;
    height: 100%;
    background: url(../images/mobile_01.jpg) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  .bg .register {
    width: 100%;
    height: 7.5%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg .register .shequ {
    width: 9%;
    height: 83px;
    display: block;
    position: absolute;
    right: 3%;
    top: 18px;
  }
  .bg .register .yaoqingurl {
    display: none;
  }
  .bg .android {
   left: 30%;
   transform: translate(-50%, -50%);
  top: 72.5%;
  width: 38.33%;
  height: 6.09%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
  }

  .bg .apple {
   left: 71%;
   transform: translate(-50%, -50%);
  top: 72.5%;
  width: 38.33%;
  height: 6.09%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
  }

  .bg .tg {
     left: 27%;
   transform: translate(-50%, -50%);
  top: 93.5%;
  width: 38.33%;
  height: 6.09%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
        cursor: pointer;
  }


    .bg .fb {
    left: 75%;
   transform: translate(-50%, -50%);
  top: 93.5%;
  width: 38.33%;
  height: 6.09%;
    /* background: url(../images/google.gif) no-repeat center top; */
    background-size: 100% 100%;
    position: absolute;
        cursor: pointer;
  }

  .bg .customer {
    left: 34.48%;
  top: 92.55%;
  width: 27.63%;
  height: 4.80%;
    background: url(../images/Moblebtnfb.png) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
  
  }
  .bg .ios {
    left: 52.67%;
  top: 85.04%;
  width: 36.72%;
  height: 6.13%;
    background: url(../images/ios.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;

  }
  .bg .cafe {
    width: 39.5%;
    height: 6.5%;
    position: absolute;
    bottom: 8.2%;
    right: 6%;
    background: url(../images/apkMobile.gif) no-repeat center top;
    background-size: 100% 100%;
  }
  .bg .yaoqingurl {
    display: none;
  }
  .bg .scroll {
    width: 100px;
    height: 95px;
    background: url(../images/down.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 1%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  #bg2 {
    width: 100%;
    height: 100vh;
    background: url(../images/mbg2.png) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  #bg2 .text {
    padding: 10px;
    background: #f00;
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    border-radius: 17px;
    position: absolute;
    top: 23%;
    left: 50%;
    transform: translate(-50%, 0);
    white-space: nowrap;
  }
  #bg2 .text span {
    font-size: 33px;
    font-style: italic;
    color: #fff000;
  }
  #bg2 #lpContainer {
    width: 65%;
    position: absolute;
    top: 29%;
    left: 51%;
    transform: translate(-50%, 0);
  }
  #bg2 #lpContainer img {
    width: 38%;
    height: 14vh; /* 使用视口高度单位 */
    max-height: 250px;
    min-height: 120px; /* 设置最小高度 */
    object-fit: contain; /* 保持图片比例 */
    margin-bottom: 5%;
    margin-right: 23%;
  }
  #bg2 #lpContainer img:nth-child(2n) {
    margin-right: 0;
  }
  #bg2 #lpContainer img:last-child {
    width: 52%;
    height: 18vh; /* 使用视口高度单位 */
    max-height: 300px;
    min-height: 150px; /* 设置最小高度 */
    margin: 0;
    position: relative;
    top: 10px;
    left: 49%;
    transform: translate(-50%, 0);
  }
  #bg2 .ios {
    width: 49%;
    height: 7%;
    position: absolute;
    bottom: 11%;
    left: 24.7%;
  }
}