@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/pcbg.jpg) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  .bg .yinzi{
    width: 100%;
    height: 100vh;
    background: url(../images/mc2.png) 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: 50px;
        height: 50px;
        background: url(../images/facebook.png) no-repeat center top;
        background-size: 100% 100%;
        display: block;
        position: absolute;
        right: 2%;
        top: 15px;
  }
  .bg .register .yaoqingurl{
    width: 7%;
    height: 38px;
     
    display: block;
    position: absolute;
    right: 18.5%;
    top: 28px;
  }
  .bg .android{
   width: 17.6%;
        height: 120px;
        max-height: 11.9%;
        background: url(../images/PCbtn.gif) no-repeat center top;
        background-size: 100% 100%;
        position: absolute;
        bottom: 8%;
        left: 41.2%;
  }
  .bg .customer{
    width: 4%;
    height: 15%;
    background: url(../images/cumPC.png) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 50%;
    left: 1%;
    transform: translate(0, 50%);
  }
  .bg .ios{
    width: 19.8%;
    height: 75px;
    
    background: url(../images/PCaicon.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 11%;
    left: 39.2%;
  }
  .bg .cafe{
    width: 19.8%;
    height: 75px;
    max-height: 8%;
    background: url(../images/apkPC.gif) 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/Moblebg.jpg) no-repeat center top;
    background-size: 100% 100%;
    position: relative;
  }
  .bg .yinzi{
    width: 100%;
    height: 100%;
    background: url(../images/mc.png) 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: 11%;
        height: 55%;
        background: url(../images/facebook.png) no-repeat center top;
        background-size: 100% 100%;
        display: block;
        position: absolute;
        right: 3%;
        top: 13%;
  }
  .bg .register .yaoqingurl{
    display: none;
  }
  .bg .android{
            width: 50%;
        height: 90px;
        max-height: 10%;
        background: url(../images/Moblebtn.gif) no-repeat center top;
        background-size: 100% 100%;
        position: absolute;
        bottom: 8%;
        left: 50%;
        transform: translate(-50%, 0);
  }
  .bg .customer{
     width: 10%;
     max-width: 60px;
    height: 14%;
    background: url(../images/cumPC.png) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 50%;
    left: 1%;
    transform: translate(0, 50%);
  }
  .bg .ios{
    width: 40.5%;
    height: 6.5%;
    background: url(../images/Maicon.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 15.7%;
    left: 9%;
  }
  .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%;
  }
}