@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%;}

@media (min-width:751px){
  .bg{
    width: 100%;
    height: 100vh;
    background: url(../images/pcbg.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: 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{
    width: 19.8%;
    height: 75px;
    background: url(../images/PCgicon.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 18%;
    left: 17.8%;
  }
  .bg .ios{
    width: 10.5%;
    height: 48px;
    background: url(../images/PCaicon.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 11%;
    left: 39.2%;
  }
  .bg .cafe{
    width: 9%;
    height: 55px;
    position: absolute;
    bottom: 11%;
    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/mbg.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: 9%;
    height: 83px;
    display: block;
    position: absolute;
    right: 3%;
    top: 18px;
  }
  .bg .register .yaoqingurl{
    display: none;
  }
  .bg .android{
    width: 39.5%;
    height: 6.5%;
    background: url(../images/Mgicon.gif) no-repeat center top;
    background-size: 100% 100%;
    position: absolute;
    bottom: 8.2%;
    left: 6%;
  }
  .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%;
  }
  .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%;
  }
}