*{margin: 0;padding: 0; box-sizing: border-box;}
ul li, ol l {list-style: none}
em, i {font-style: normal; display: inline-block;}
button, input, select, img {outline:0; border:0}
table {border-collapse: collapse;border-spacing: 0}
.clearfix:after {clear: both;display: block;visibility: hidden;height: 0; content: "."}
.clearfix {*zoom: 1;}
.fl {float: left}
.fr {float: right}
.flex1{flex: 1;}
a {text-decoration: none!important;}
a:hover {color: #55a1f7;transition: all .3s ease-out;}
a:link, a:hover, a:visited, a:active, a:focus {outline: none!important;text-decoration: none; transition:all .3s ease;}
html, body, .main{
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
flex: 1;
}
@media screen and (min-width:768px) {
   #hide_h5{
      display: none ;
   }
   #Img_h5{
      display: none;
   }
   html{
      height: auto;
      background: url(../img/sy_logo.png)#0b8a74 repeat;
      background-attachment: fixed;
   }
   body {
      width: 100%;
      height: 100%;
      max-width: 540px;
      min-width: 320px;
      margin: 0 auto;
      font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
      color: #202224;
      background: #e7edfb;
      overflow-x: hidden;
      -webkit-tap-highlight-color:transparent; 
      }
   .wrap{
      display: flex;
      max-width: 540px;
      min-height: 100vh;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      box-shadow: 0 0px 80px 0 rgb(7 17 27 / 24%);
   }
   .header{
      max-width: 540px;
      position: fixed;
      /* position: -webkit-sticky;
      position: sticky; */
      top: 0;
      z-index: 99;
      display: flex;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      transition: background-color 0.8s ease-in-out;
      flex-direction: column;
      backdrop-filter: blur(12px);
      padding: 0 15px;
   }
   .header_c{
      display: flex;
      height: 62px;
      justify-content: space-between;
      align-items: center;
     
   }
   .header_c .logo{
      display: flex;
      
   }
   .header_c .logo img{
      width: 65%;
   }
   .header_c .info-box{
      display: flex;
   }
   .header_c .info-box >a:hover{
      background-color: #0c9f86;
      color: #fff;
      transition: all .3s ease;
   }
   .header_c .Log_in{
      display: flex;
      color: #25324b;
      flex-direction: row-reverse;
      justify-content: center;
   }
   .header_c .info-box>a{
      margin-left: 7.8px;
      width: 93px;
      border-radius: 3750px;
      color: #000;
      text-align: center;
      font-size: 18px;
      line-height: 34px;
   }
   .Log_in{
      background-color: #fff;
   }
   .register{
      color: #fff!important;
      background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
   }
  
   .exhibiti_bg{
      text-align: center;
      z-index: 1;
   }
   .exhibiti_bg img{
      width: 100%;
   }
   @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
      0%{
          transform: scale(1);  /*开始为原始大小*/
      }
      25%{
          transform: scale(1.1); /*放大1.1倍*/
      }
      50%{
          transform: scale(1);
      }
      75%{
          transform: scale(1.1);
      }
  }
.exhibiti_bg{
      -webkit-animation-name: scaleDraw; /*关键帧名称*/
      -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
      -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
      -webkit-animation-duration: 12s; /*动画所花费的时间*/
  }
.title_Img{
   margin-top: 90px;
   text-align: center;
   position: absolute;
   z-index: 9;
}
.title_Img img{
   width: 97%;
}

.content{
   padding: 0 20px;
   z-index: 3;
}
.content .sports_bet{
   border-radius: 12px;
   border: solid 3px #fff;
   background: no-repeat right / auto 100% url(../img/zuqui.png) #f5f8fb;
   padding: 19px 0 15px 23px;
   box-shadow: 0 10px 20px 0 rgb(7 17 27 / 24%);
}

.content .sports_bet h1 {
   display: flex;
   color: #4d4f54;
   font-size: 28px;
   margin-bottom: 6px;
}
.content .sports_bet>p {
   font-size: 16px;
   display: flex;
   color: #1e2021;
}
.content .sports_bet ul li {
   padding: 3px;
    font-size: 13px;
}
.content .sports_bet ul {
   display: flex;
   color: #0c9e86;
   align-items: center;
}
.betBnt{
    margin-top: 11px;
    width: 151px;
    border-radius: 6px;
    background: #fff;
    line-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
    cursor:pointer;
}
}
.betBnt>a {
   padding: 0 2px;
   color: #fff;
   font-size: 16px;
}
.betBnt>i {
   padding-left: 4px;
   font-size: 8px;
   color: #fff;
}
.imgIcon_box{
   display: flex;
   padding: 15px 0 15px 15px;
}
.plate_bg{
   margin: 32px 0;
   border-radius: 12x;
   /* border: solid 3px #fff; */
   background-color: #f5f8fb;
   box-shadow: 0 10px 20px 0 rgb(7 17 27 / 24%);
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-radius: 10px;
   cursor:pointer;
}
.imgIcon{
   width: 180px;
   margin-right: 18px;
   border-radius: 9px;
}
.img_hg{
   background: no-repeat center / auto 100% url(../img/hg.png) #f5f8fb;
}
.img_sb{
   background: no-repeat center / auto 100% url(../img/sb.png) #f5f8fb;
}

.bnt_box{
   display: flex;
}
.bnt_bg{
   width: 45px;
   height: 114px;
   background: no-repeat center / auto 18% url(../img/jiantou.png) rgba(11, 162, 136);
   display: flex;
   border-top-right-radius: 12px;
   border-bottom-right-radius: 12px;
}
.title_box h2{
   color: #4d4f54;
}
.title_box p{
   font-size: 20px;
   color: #4d4f54;
}
.title_box span{
   font-size:15px; 
   color:#8b8b8b;
}

 .detect_bg {
   padding: 30px 35px;
   border: solid 3px #fff;
   width: 100%;
   border-radius: 11px;
   background-color: #f5f8fb;
   box-shadow: 0 10px 20px 0 rgb(7 17 27 / 24%);
}
.detect_w>h2 {
   color: #4d4f54;
   text-align: center;
   font-size: 32px;
   line-height: 53px;
}
.sign_l{
   background: no-repeat left / auto 88% url(../img/zs_r.png);
}
.sign_r{
   background: no-repeat right / auto 88% url(../img/zs_l.png);
}
.hint {
   display: flex;
   margin-bottom: 32px;
   justify-content: center;
   align-items: center;
}
.hint>p {
   color: #7a7b7c;
   text-align: center;
   font-size: 18px;
}
.hint>span{
   width: 128px;
   height:15px;
}
 .lineBox h3{
   padding-top: 20px;
   color: #393f4f;
   text-align: center;
   font-weight: 600;
   font-size: 27px;
   line-height:45px;
}
.lineBox p{
   padding: 15px 11px 15px;
   color: #fff;
   text-align: center;
   font-size: 15px;
}
.lineBox ul{
   position: relative;
   margin: 0 auto;
   width: 100%;
}
.lineBox>ul>li{
   position: relative;
   margin: 15px auto;
   height: 45px;
   border: solid 1px #dfe3eb;
   background-color: #ebf2f4;
   border-radius: 50px;
}
.clearfix>li{
   box-sizing: border-box;
   padding: 0 23px;
}
.lineBox ul li>span{
   float: left;
    color: #058f78;
    font-size: 16px;
    line-height: 45px;
}
.lineBox ol{
   float: left;
   padding-left: 15px;
   border-radius:50px;
}
.lineBox ul li ol li{
    float: left;
    margin: 16px 2px;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
}

.signal {
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
}

.lineBox ul li a{
   position: absolute;
   top: -1px;
   right: -1px;
   float: right;
   width: 110px;
   border-radius: 50px;
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
   color: #fff;
   text-align: center;
   font-size: 16px;
   line-height: 45px;
}
.lineBox a:hover{
   background-color: #058f78;
   color: #fff;
   transition: all .3s ease-out;
}
.lineBox .bnt{
   display: flex;
    margin-top: 29px;
    margin-bottom: 18px;
    color: #058f78;
    font-size: 18px;
    cursor: pointer;
    justify-content: center;
    background-color: #e3e9ef;
    line-height: 50px;
    border-radius: 50px;
    width: 68%;
}
.lineBox .bnt:hover{
   background-color: #d6ece8;
}
.lineBox .bnt>span>img{
   width: 54%;
   text-align: center;
}
.bewrite_box_t{
   position: absolute;
   top: 13px;
   left: 206px;
   display: flex;
   flex-direction: column;
}
.bewrite_box_t>h3{
   display: flex;
   color: #fff;
   font-size: 26px;
}
.bewrite_box_t p{
   display: flex;
   font-size: 0.14px;
}
.d_wei{
   display: flex;
   align-items: center;
   justify-content: center;
}
.title{
   margin-top: 15px;
   color: #fff;
   font-size: 20px;
   line-height: 54px;
}
.bnt_c{
   display: flex;
   justify-content: space-evenly;
}
 .banner{
   display: flex;
   justify-content: center;
 }
 .carousel1{
   width: 505px;
   height: 135px;
   display: flex;
   justify-content: center;
   position: relative;
   overflow:hidden;
   margin-top: 38px;
   box-shadow: 0 10px 20px 0 rgb(7 17 27 / 24%);
   border-radius: 11px;
   }
.viewportA{
   width: 505px;
   height: 135px;
 position: relative;
 overflow: hidden;
 z-index: 1;
}
.parentA{
 width:1000%;
 position: absolute;
}
.parentA .item{
 float:left;
}
.parentA .item img{
 display: block;
 width: 505px;
 height: 135px;
}
.carousel1 .prevA{
position:absolute;
height:20%;
width:auto;
left:0;
top:45%;
z-index:3;
opacity:0;
cursor: pointer;
}
.carousel1 .nextA{
position:absolute;
height:20%;
width:auto;
right:0;
top:45%;
z-index:3;
opacity:0;
cursor: pointer;
}
.carousel1 .prevA:hover {
 opacity:0.9;
}
.carousel1 .nextA:hover {
 opacity:0.9;
}
.circleListA{
 position:absolute;
  z-index: 3;
  bottom:8px;
  width:79px;
  height:11px;
  left:50%;
  margin-left:-39px;
  padding-top:2px;
  padding-bottom:2px;
 zoom:1;
 border-radius:8px;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
}
.circleListA span{
 float:left;
 height:6px;
 width:24px;
 border-radius:50px;
 margin-right:5px;
 background-color:rgba(255, 255, 255, 0.623);
 cursor: pointer;
}
.circleListA span:hover{
 background:#ffd700;
}
.circleListA .active{
 background:#fff!important;
}
.interfaceImg{
   text-align: center;
}
.interfaceImg img{
   width: 100%;
}
.down_box{
   max-width: 540px;
   position: fixed;
   /* position: -webkit-sticky;
   position: sticky; */
   bottom: 0;
   z-index: 99;
   display: flex;
   padding: 14px 14px;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.5);
   transition: background-color 0.8s ease-in-out;
   flex-direction: column;
   backdrop-filter: blur(12px);
}

.footer{
   display: flex;
   padding-bottom: 38px;
   font-weight: lighter;
   font-size: 15px;
   line-height: 49px;
   line-height: 75px;
   cursor: pointer; 
   justify-content: center;
   align-items: center;
}
.down_box{
   display: flex;
   flex-direction: row;
   align-items: center;
}
.title_left>img{
   display: flex;
   width: 90%;
   cursor: pointer;
}
.down_btn{
   display: flex;
   flex-direction: row-reverse;
}
.down_btn>img{
   display: flex;
   width: 100%;
}
.service_box{
   width: 195px;
   height: 195px;
   position: fixed;
   right: 24%;
   bottom: -4%;
   z-index: 99;
   cursor: pointer;
}
.service{
   position: relative;
   text-align: center;
}
.service>img{
   width: 55%;
} 
.zuqui{
   position: relative;
}
.zuqui>img{
   width: 21%;
    position: absolute;
    top: -87px;
    left: 33px;
}
.imgs{
   -webkit-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -moz-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -ms-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -moz-animation:rotateVbtn 5s linear infinite;
   -webkit-animation:rotateVbtn 5s linear infinite;
   -o-animation:rotateVbtn 5s linear infinite;
   -ms-animation:rotateVbtn 5s linear infinite;
   animation:rotateVbtn 5s linear infinite;
 }
 @-webkit-keyframes rotateVbtn {
   0% {
   -webkit-transform:rotate(0);
   -moz-transform:rotate(0);
   -ms-transform:rotate(0);
   -o-transform:rotate(0);
   transform:rotate(0)
 }
 100% {
   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   -o-transform:rotate(360deg);
   transform:rotate(360deg)
 }}

@media screen and (max-width:768px) {
   #hide_pc{
      display: none;
   }
   #Img_pc{
      display: none;
   }
  
   body {
      width: 100%;
      height: 100%;
      max-width: 540px;
      min-width: 320px;
      margin: 0 auto;
      font:normal 14px/1.5 Tahoma,"Lucida Grande",Verdana,"Microsoft Yahei",STXihei,hei;
      color: #202224;
      background: #e7edfb;
      overflow-x: hidden;
      -webkit-tap-highlight-color:transparent; 
      }
   .wrap{
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      position: relative;
   }
   .header{
      position: fixed;
      /* position: -webkit-sticky;
      position: sticky; */
      top: 0;
      left: 0;
      z-index: 99;
      display: flex;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      transition: background-color 0.8s ease-in-out;
      flex-direction: column;
      backdrop-filter: blur(12px);
      padding: 0 0.2rem;
   }
   .header_c{
      display: flex;
      height: 1rem;
      justify-content: space-between;
      align-items: center;
     
   }
   .header_c .logo{
      display: flex;
      
   }
   .header_c .logo img{
      width: 65%;
   }
   .header_c .info-box{
      display: flex;
   }
   .header_c .info-box >a:hover{
      background-color: #0c9f86;
      color: #fff;
      transition: all .3s ease;
   }
   .header_c .Log_in{
      display: flex;
      color: #25324b;
      flex-direction: row-reverse;
      justify-content: center;
   }
   .header_c .info-box>a{
      margin-left: 0.1rem;
      width: 1.5rem;
      border-radius: 50rem;
      color: #000;
      text-align: center;
      font-size: 0.28rem;
      line-height: 0.6rem;
   }
   .Log_in{
      background-color: #fff;
   }
   .register{
      color: #fff!important;
      background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
   }
   .exhibiti_bg{
      text-align: center;
      z-index: 1;
   }
   .exhibiti_bg img{
      width: 106%;
   }
   @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
      0%{
          transform: scale(1);  /*开始为原始大小*/
      }
      25%{
          transform: scale(1.1); /*放大1.1倍*/
      }
      50%{
          transform: scale(1);
      }
      75%{
          transform: scale(1.1);
      }
  }
.exhibiti_bg{
      -webkit-animation-name: scaleDraw; /*关键帧名称*/
      -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
      -webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
      -webkit-animation-duration: 12s; /*动画所花费的时间*/
  }
.title_Img{
   margin-top: 1.5rem;
   text-align: center;
   position: absolute;
   z-index: 9;
}
.title_Img img{
   width: 95%;
}
.content{
   padding: 0 0.26rem;
   z-index: 3;
}
.content .sports_bet{
   border-radius: 0.16rem;
   border: solid 0.036rem #fff;
   background: no-repeat right / auto 100% url(../img/zuqui.png) #f5f8fb;
   padding: 0.24rem 0 0.33rem 0.33rem;
   box-shadow: 0 6px 33px 0 rgb(7 17 27 / 24%);
}

.content .sports_bet h1 {
   display: flex;
   color: #4d4f54;
   font-size: 0.45rem;
   margin-bottom: 0.08rem;
}
.content .sports_bet>p {
   font-size: 0.25rem;
   display: flex;
   color: #1e2021;
}
.content .sports_bet ul li {
   padding: 0.03rem;
   font-size: 0.22rem;
}
.content .sports_bet ul {
   display: flex;
   color: #0c9e86;
   align-items: center;
}
.betBnt{
   margin-top: 0.15rem;
   width: 2.4rem;
   border-radius: 0.1rem;
   background: #fff;
   line-height: 0.66rem;
   display: flex;
   align-items: center;
   justify-content: center;
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
}
.betBnt>a {
   padding: 0 0.02rem;
   color: #fff;
   font-size: 0.26rem;
}
.betBnt>i {
   padding-left: 0.05rem;
   font-size: 0.1rem;
   color: #fff;
}
.imgIcon_box{
   display: flex;
   padding: 0.2rem 0 0.2rem 0.2rem;
}
.plate_bg{
   margin: 0.4rem 0;
   border-radius: 0.16rem;
   /* border: solid 0.036rem #fff; */
   background-color: #f5f8fb;
   box-shadow: 0 6px 33px 0 rgb(7 17 27 / 24%);
   display: flex;
   justify-content: space-between;
    align-items: center;
}
.imgIcon{
   width: 2.4rem;
   margin-right: 0.24rem;
   border-radius: 0.12rem;
}
.img_hg{
   background: no-repeat center / auto 100% url(../img/hg.png) #f5f8fb;
}
.img_sb{
   background: no-repeat center / auto 100% url(../img/sb.png) #f5f8fb;
}

.bnt_box{
   display: flex;
}
.bnt_bg{
   width: 0.6rem;
   height: 1.79rem;
   background: no-repeat center / auto 22% url(../img/jiantou.png) rgba(11, 162, 136);
   display: flex;
   border-top-right-radius: 0.16rem;
   border-bottom-right-radius: 0.16rem;
}
.title_box h2{
   color: #4d4f54;
}
.title_box p{
   font-size: 0.26rem;
   color: #4d4f54;
}
.title_box span{
   font-size:0.2rem; 
   color:#8b8b8b;
}
 .detect_bg {
   border: solid 0.04rem #fff;
   padding: 0.4rem 0.46rem;
   width: 100%;
   border-radius: 0.15rem;
   background-color: #f5f8fb;
   box-shadow: 0 6px 33px 0 rgb(7 17 27 / 24%);
}
.detect_w>h2 {
   color: #4d4f54;
   text-align: center;
   font-size: 0.46rem;
   line-height: 0.7rem;
}
.sign_l{
   background: no-repeat left / auto 88% url(../img/zs_r.png);
}
.sign_r{
   background: no-repeat right / auto 88% url(../img/zs_l.png);
}
.hint {
   display: flex;
   margin-bottom: 0.42rem;
   justify-content: center;
   align-items: center;
}
.hint>p {
   color: #7a7b7c;
   text-align: center;
   font-size: 0.26rem;
}
.hint>span{
   width: 1.7rem;
   height: 0.2rem;
}
 .lineBox h3{
   padding-top: 20px;
   color: #393f4f;
   text-align: center;
   font-weight: 600;
   font-size: 0.36rem;
   line-height:0.6rem;
}
.lineBox p{
   padding: 0.2rem 0.15rem 0.2rem;
   color: #fff;
   text-align: center;
   font-size: 0.2rem;
}
.lineBox ul{
   position: relative;
   margin: 0 auto;
   width: 100%;
}
.lineBox>ul>li{
   position: relative;
   margin: 0.2rem auto;
   height: 0.66rem;
   border: solid 1px #dfe3eb;
   background-color: #ebf2f4;
   border-radius: 50rem;
}
.clearfix>li{
   box-sizing: border-box;
   padding: 0 0.3rem;
}
.lineBox ul li>span{
   float: left;
    color: #058f78;
    font-size: 0.28rem;
    line-height: 0.65rem;
}
.lineBox ol{
   float: left;
   padding-left: 0.2rem;
   border-radius: 50rem;
}
.lineBox ul li ol li{
   float: left;
   margin: 0.22rem 0.03rem;
   width: 0.2rem;
   height: 0.2rem;
   border-radius: 50rem;
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
}

.signal {
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
}

.lineBox ul li a{
   position: absolute;
   top: -0.01rem;
   right: -0.01rem;
   float: right;
   width: 1.46rem;
   border-radius: 50rem;
   background-image: linear-gradient(to top, rgba(12, 159, 134), rgba(2, 209, 174));
   color: #fff;
   text-align: center;
   font-size: 0.26rem;
   line-height: 0.66rem;
}
.lineBox a:hover{
   background-color: #058f78;
   color: #fff;
   transition: all .3s ease-out;
}
.lineBox .bnt{
   display: flex;
   margin-top: 0.38rem;
   margin-bottom: 0.38rem;
   color: #058f78;
   font-size: 0.32rem;
   cursor: pointer;
   justify-content: center;
   background-color: #e3e9ef;
   line-height: 0.8rem;
   border-radius: 50rem;
   width: 75%;
}
.lineBox .bnt>span>img{
   width: 54%;
   text-align: center;
}
.bewrite_box_t{
   position: absolute;
   top: 13px;
   left: 206px;
   display: flex;
   flex-direction: column;
}
.bewrite_box_t>h3{
   display: flex;
   color: #fff;
   font-size: 26px;
}
.bewrite_box_t p{
   display: flex;
   font-size: 0.14px;
}
.d_wei{
   display: flex;
   align-items: center;
   justify-content: center;
}
.title{
   margin-top: 15px;
   color: #fff;
   font-size: 20px;
   line-height: 54px;
}
.bnt_c{
   display: flex;
   justify-content: space-evenly;
}
 .banner{
   display: flex;
   justify-content: center;
 }
 .carousel1{
   width: 7rem;
   height: 1.8rem;
   display: flex;
   justify-content: center;
   position: relative;
   overflow:hidden;
   margin-top: 0.5rem;
   box-shadow: 0 12px 33px 0 rgb(7 17 27 / 24%);
   border-radius: 0.15rem;
   }
.viewportA{
   width: 7rem;
   height: 1.8rem;
 position: relative;
 overflow: hidden;
 z-index: 1;
}
.parentA{
 width:1000%;
 position: absolute;
}
.parentA .item{
 float:left;
}
.parentA .item img{
 display: block;
 width: 7rem;
 height: 1.8rem;
}
.carousel1 .prevA{
position:absolute;
height:20%;
width:auto;
left:0;
top:45%;
z-index:3;
opacity:0;
cursor: pointer;
}
.carousel1 .nextA{
position:absolute;
height:20%;
width:auto;
right:0;
top:45%;
z-index:3;
opacity:0;
cursor: pointer;
}
.carousel1 .prevA:hover {
 opacity:0.9;
}
.carousel1 .nextA:hover {
 opacity:0.9;
}
.circleListA{
 position:absolute;
  z-index: 3;
  bottom:0.1rem;
  width:1.05rem;
  height:0.15rem;
  left:50%;
  margin-left:-0.525rem;
  padding-top:0.03rem;
  padding-bottom:0.03rem;
 zoom:1;
 border-radius:0.1rem;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
}
.circleListA span{
 float:left;
 height:0.08rem;
 width:0.32rem;
 border-radius:50rem;
 margin-right:0.07rem;
 background-color:rgba(255, 255, 255, 0.623);
 cursor: pointer;
}
.circleListA span:hover{
 background:#ffd700;
}
.circleListA .active{
 background:#fff!important;
}
.interfaceImg{
   text-align: center;
}
.interfaceImg img{
   width: 100%;
}
.down_box{
   position: -webkit-sticky;
   position: sticky;
   bottom: 0;
   left: 0;
   z-index: 99;
   display: flex;
   padding: 0.18rem 0.18rem;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.5);
   transition: background-color 0.8s ease-in-out;
   flex-direction: column;
   backdrop-filter: blur(12px);
}
.footer{
   display: flex;
   padding-bottom: 0.5rem;
   font-weight: lighter;
   font-size: 0.2rem;
   line-height: 0.65rem;
   line-height: 1rem;
   cursor: pointer; 
   justify-content: center;
   align-items: center;
}
.down_box{
   display: flex;
   flex-direction: row;
   align-items: center;
}
.title_left>img{
   display: flex;
   width: 90%;
}
.down_btn{
   display: flex;
   flex-direction: row-reverse;
}
.down_btn>img{
   display: flex;
   width: 100%;
}
.service_box{
   width: 2.6rem;
   height: 2.6rem;
   position: fixed;
   right: -1.2rem;
   bottom: 0.5rem;
   z-index: 99;
}
.service{
   position: relative;
   text-align: center;
}
.service>img{
   width: 55%;
} 
.zuqui{
   position: relative;
}
.zuqui>img{
   width: 21%;
    position: absolute;
    top: -1.2rem;
    left: 0.44rem;
}
.imgs{
   -webkit-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -moz-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -ms-animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   animation:rotateVbtn 5s linear infinite 800ms 0 ease;
   -moz-animation:rotateVbtn 5s linear infinite;
   -webkit-animation:rotateVbtn 5s linear infinite;
   -o-animation:rotateVbtn 5s linear infinite;
   -ms-animation:rotateVbtn 5s linear infinite;
   animation:rotateVbtn 5s linear infinite;
 }
 @-webkit-keyframes rotateVbtn {
   0% {
   -webkit-transform:rotate(0);
   -moz-transform:rotate(0);
   -ms-transform:rotate(0);
   -o-transform:rotate(0);
   transform:rotate(0)
 }
 100% {
   -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -ms-transform:rotate(360deg);
   -o-transform:rotate(360deg);
   transform:rotate(360deg)
 }}
}