/*common*/
* {
    padding: 0;
    margin: 0;
    letter-spacing: 0;
    font-family: Arial, Helvetica, sans-serif;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

img {
    border-style: none;
}

.hide {
    display: none !important;
}

.app {
    overflow-y: hidden;
    height: 100vh;
    position: relative;
    color: #000;
    background: url(../image/xbg-content2.js) no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    animation: slideshow 10s linear infinite normal ;
    max-width: 750px;
}
.mask{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background:rgb(255 255 255 / 0%);
    box-sizing: border-box;
}
/*rgb(104 98 106 / 40%)
/*rgb(246 175 251 / 31%)*/
 @keyframes scaleDrew {
    0%{
        transform: scale(1);
    }
    25%{
        transform: scale(1.08);
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.08);
    }
 }

 @keyframes slideshow {
    0%    { background-position: 0 0; }
    100%  { background-position: 0 100%; }
  }
 
/* PC */
@media screen and (min-width: 750px) {
    .app{
        margin:  0 auto;
    }

    .mask{
        padding: 50px 0;
    }

    .service{
        width: 100%;
     }
     
     .service a{
         margin-left: -150px;
         display: block;
         width: 186px;
         height: 56px;
         background: url('') no-repeat;
         background-size: 100% 100%;
     }

     .logo {
         width:140px;
         height: 140px;
         margin: 5rem auto;
         
         background-size: 100% 100%;
         border-radius: 3vh;
     }
     
     .main-title {
         width: 385px;
         height: 131px;
         background: url('../image/217.png') no-repeat;
         background-size: 100% 100%;
         margin: 0 auto;
     }

     .qrcode-wrap {
        /*display: block;*/
        /*width: 150px;*/
        /*height: 150px;*/
        /*padding: 5px;*/
        background-color: #fff;
        margin-bottom: 20px;
    }
     
     .timer{
         background: url('../image/bubble.png') no-repeat;
         width: 320px;
         height: 40px;
         background-size: 100% 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         padding-bottom: 10px;
         margin:  0 auto;
        color : white;
        
     }
     .timer i{
         display: inline-block;
         width: 20px;
         height: 20px;
         background: url('../image/timer.png') no-repeat;
         background-size: 100% 100%;
         margin-right: 1px;
         
     }
     .timer p{
        font-size: 18px;
        margin: 0px 2px;
        display: inline-block;
     }
     .timer span{
         font-size: 18px;
         font-weight: bold;
         display: block;
         width: 50px;
      }
     .room{
         width: 480px;
         border:1px solid white;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         border-radius: 10vw;
         overflow: hidden;
         color: white;
         margin: 0 auto;
         padding: 5px 0;
     
     }
     .room p:first-child{
         font-size: 19px;
     }
     .room p:last-child{
        font-size: 12px;
        color: #ddd5d5;
     }
     .btn{
        margin-top: 25px;
        background-image: linear-gradient(to right, #a502f4,#e91c8b);
        width: 570px;
        height: 70px;
        border-radius: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: scaleDrew 2.5s ease-in-out infinite;
        cursor: pointer;
        color:white;font-weight:bold;font-size:2em
     }
     
     .down  i{
         display: block;
         width: 180px;
         height: 36px;
         background: url('../image/btn.png') no-repeat;
         background-size: 100% 100%;
      }

      .ios  i{
        display: block;
        width: 180px;
        height: 36px;
        background: url('../image/btn1.png') no-repeat;
        background-size: 100% 100%;
     }
    
}



/* H5 */
@media screen and (max-width: 750px) {
    .mask{
        padding: 8vw 0;
    }
    .service{
        width: 100vw;
        margin-bottom: 10vw;
    }

    .logo {
        width:30vw;
        height: 30vw;
        margin: 21vw auto;
        background: url('') no-repeat;
        background-size: 100% 100%;
        border-radius: 3vh;
    }
     
    .service a{
         display: block;
         width: 24vw;
         height: 8vw;
         background: url('') no-repeat;
         background-size: 100% 100%;
         margin-left: 6vw;
    }
     
    .main-title {
         width: 58vw;
         height: 20vw;
         background: url('../image/217.png') no-repeat;
         background-size: 100% 100%;
         margin: 0 auto;
    }
    
    .qrcode-wrap {
        display: none;
    }

    .timer{
         background: url('../image/bubble.png') no-repeat;
         width: 60vw;
         height: 9vw;
         background-size: 100% 100%;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: center;
         padding-bottom: 2vw;
         margin:  0 auto;
         color : white;
    }
    .timer i{
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../image/timer.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 1px;
    }
    .timer p{
        font-size: 13px;
        margin: 0px 2px;
        display: inline-block;
    }
    .timer span{
        font-size: 13px;
        font-weight: bold;
        display: block;
        width: 50px;
    }
    .room{
        width: 85vw;
        border:1px solid white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 10vw;
        overflow: hidden;
        color: white;
        padding: 1vw 0;
    }
    .room p:first-child{
        font-size: 18px;
    }
    .room p:last-child{
        font-size: 12px;
        color: #ddd5d5;
        transform: scale(0.8);
    }
    .btn{
        margin-top: 4vw;
        background-image: linear-gradient(to right, #be00eb,#f34a4a);
        width: 85vw;
        height: 14vw;
        border-radius: 10vw;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: scaleDrew 2.5s ease-in-out infinite;
        color:white;font-weight:bold;font-size:1.3em
    }
    
    .down  i{
        display: block;
        width: 24vw;
        height: 6vw;
        background: url('../image/btn.png') no-repeat;
        background-size: 100% 100%;
      
    }

    .ios  i{
        display: block;
        width: 24vw;
        height: 6vw;
        background: url('../image/btn1.png') no-repeat;
        background-size: 100% 100%;
    }
    
}