/*common*/

* {

    padding: 0;

    margin: 0;

    letter-spacing: 0;

}



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(../images/bg-content.jpg) 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:rgba(0, 0, 0, 0.4);

    box-sizing: border-box;

}



 @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(../images/kefu.png) no-repeat;

         background-size: 100% 100%;

     }



     .logo {

         width:80px;

         height: 80px;

         margin: 0 auto;

         background: url(../images/logo.png) no-repeat;

         background-size: 100% 100%;

     }

     

     .main-title {

         width: 380px;

         height: 254px;

         background: url(../images/title.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(../images/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;

     

       

     }

     .timer i{

         display: inline-block;

         width: 20px;

         height: 20px;

         background: url(../images/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, #595296, #323761);

        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;

     }

     

     .down  i{

         display: block;

         width: 180px;

         height: 36px;

         background: url(../images/btn.png) no-repeat;

         background-size: 100% 100%;

      }



      .ios  i{

        display: block;

        width: 180px;

        height: 36px;

        background: url(../images/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:50vw;

        height: 50vw;

        margin: 2vw auto;

        background: url(../images/logo.png) no-repeat;

        background-size: 100% 100%;

    }

     

    .service a{

         display: block;

         width: 24vw;

         height: 8vw;

         background: url(../images/kefu.png) no-repeat;

         background-size: 100% 100%;

         margin-left: 6vw;

    }

     

    .main-title {

         width: 60vw;

         height: 36vw;

         background: url(../images/title.png) no-repeat;

         background-size: 100% 100%;

         margin: 0 auto;

    }

    

    .qrcode-wrap {

        display: none;

    }



    .timer{

         background: url(../images/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;

    }

    .timer i{

        display: inline-block;

        width: 14px;

        height: 14px;

        background: url(../images/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, #7464ff, #b40ce4);

        width: 85vw;

        height: 14vw;

        border-radius: 10vw;

        display: flex;

        justify-content: center;

        align-items: center;

        animation: scaleDrew 2.5s ease-in-out infinite;

    }

    

    .down  i{

        display: block;

        width: 24vw;

        height: 6vw;

        background: url(../images/btn.png) no-repeat;

        background-size: 100% 100%;

    }



    .ios  i{

        display: block;

        width: 24vw;

        height: 6vw;

        background: url(../images/btn1.png) no-repeat;

        background-size: 100% 100%;

    }

    

}