/*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: #fff;
    background: url(../image/xbg-content1.jpg) no-repeat;
    background-size: auto 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;
}
50% {
    background-position: 75% 0;
}
100% {
    background-position: 0 0;
}
  }
 
/* 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('../image/kefu.png') no-repeat;
         background-size: 100% 100%;
     }

     .logo {
         width:140px;
         height: 140px;
         margin: 0 auto;
         background: url('../image/logo.jpg') no-repeat;
         background-size: 100% 100%;
         border-radius: 3vh;
     }
     
     .main-title {
         width: 370px;
         height: 107px;
         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;
     
       
     }
     .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,#7e36eb,#b9a1eb);
        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('../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('../image/logo.jpg') no-repeat;
        background-size: 100% 100%;
        border-radius: 3vh;
    }
     
    .service a{
         display: block;
         width: 24vw;
         height: 8vw;
         background: url('../image/kefu.png') no-repeat;
         background-size: 100% 100%;
         margin-left: 6vw;
    }
     
    .main-title {
         width: 66vw;
         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;
    }
    .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, #7e36eb,#b9a1eb);
        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('../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%;
    }
    
}




























  .column > * {
    column-count: 1;
    flex-grow: 1;
    flex-shrink: 0;
    text-align: center;
  }
  a,
  body,
  button,
  dd,
  dl,
  dt,
  h1,
  h2,
  h3,
  h4,
  h5,
  i,
  img,
  input,
  li,
  p,
  select,
  span,
  strong,
  textarea,
  ul {
    margin: 0;
    padding: 0;
  }
  b,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong {
    font-weight: 400;
  }
  table {
    border-spacing: 0;
  }
  body {
    font-family: "microsoft yahei", Arial;
    font-size: 0.26rem;
    line-height: 1;
    color: #333;
    -webkit-user-select: none;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  li {
    list-style-type: none;
    float: left;
  }
  a {
    text-decoration: none;
    color: #333;
    outline: 0;
  }
  img {
    border: none;
    vertical-align: middle;
  }
  em,
  i,
  var {
    font-style: normal;
  }
  button {
    font-family: "microsoft yahei", Arial;
    outline: 0;
    cursor: pointer;
    font-size: 0.26rem;
    border: none;
  }
  iframe {
    border: none;
  }
  input,
  select,
  textarea {
    outline: 0;
    font-family: "microsoft yahei", Arial;
    font-size: 0.26rem;
    border-radius: 0;
    border: none;
    background: 0 0;
  }
  input:disabled {
    opacity: 1;
    color: #333;
  }
  button,
  input[type="button"],
  input[type="date"],
  input[type="number"],
  input[type="password"],
  input[type="reset"],
  input[type="submit"],
  input[type="text"],
  textarea {
    -webkit-appearance: none;
    border: none;
    background: 0 0;
  }
  textarea {
    resize: none;
  }
  .ico {
    display: inline-block;
    vertical-align: middle;
  }
  .fl {
    float: left;
  }
  .fr {
    float: right;
  }
  .clear {
    clear: both;
  }
  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .clearfix {
    zoom: 1;
  }
  .hide {
    display: none !important;
  }
  .mobile-wrap {
    position: relative;
    min-height: 100vh;
    width: 100%;
    float: left;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  .bg .mobile-wrap {
    background: url(../image/87e29e_750x2779.jpg) top center no-repeat;
    background-size: 100% auto;
  }
  .tops {
    width: 100%;
    padding: 0 0.36rem;
  }
  .tops .logo1 {
    height: 1.3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 0.2rem;
  }
  .tops .logo1 img {
    width: 9.54rem;
  }
  .tops .btns {
    width: auto;
    height: 1.3rem;
    display: flex;
    justify-content: space-between;
  }
  .tops .btns .txt {
    line-height: 1.3rem;
    color: #fde190;
    font-size: 1.28rem;
  }
  .tops .btns .ico {
    width: 9.64rem;
    height: 1.45rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tops .btns .ico img {
    width: 9.25rem;
  }
  .banner {
    width: 100%;
  }
  .banner img {
    width: 100%;
    position: relative;
    margin-top: -0.5rem;
  }
  .intr {
    width: 100%;
  }
  .intr img {
    width: 100%;
    position: relative;
    margin-top: -0.15rem;
  }
  .button {
    width: 100%;
    float: left;
    text-align: center;
    padding: 0.38rem 0;
  }
  .button button {
    width: 5.24rem;
    height: 1.36rem;
    background: url(../image/14c935_523x135.png) center no-repeat;
    background-size: 100% 100%;
    -webkit-animation: myfirst 1s infinite linear;
    animation: myfirst 1s infinite linear;
  }
  .labels {
    width: 100%;
    padding: 0 0.35rem;
    float: left;
  }
  .labels .conts {
    width: 100%;
    border-bottom: 1px solid #6a5b38;
    display: flex;
    padding: 0 0.15rem;
    padding-bottom: 0.44rem;
    justify-content: space-between;
  }
  .labels .conts .box {
    width: auto;
    display: flex;
    justify-content: space-between;
  }
  .labels .conts .box .ico {
    width: 0.49rem;
    height: 0.48rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .labels .conts .box .ico img {
    width: 0.5rem;
  }
  .labels .conts .box .txt {
    line-height: 0.48rem;
    color: #fcda80;
    font-size: 0.28rem;
  }
  .inform {
    width: 100%;
    padding: 0 0.35rem;
    float: left;
  }
  .inform .line {
    width: 100%;
  }
  .inform .line .title {
    width: 100%;
  }
  .inform .line .title .txt {
    line-height: 0.88rem;
    font-size: 0.3rem;
  }
  .inform .line .title .txt span {
    font-size: 0.3rem;
    color: #fde9a1;
  }
  .inform .line .title .txt em {
    font-size: 0.22rem;
    color: #fff9df;
  }
  .inform .line .title .course {
    height: 0.88rem;
    padding-top: 0.1rem;
    display: flex;
    justify-content: space-between;
  }
  .inform .line .title .course .ico {
    width: 0.54rem;
    height: 0.78rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .inform .line .title .course .ico img {
    width: 0.36rem;
  }
  .inform .line .title .course .txt {
    color: #fde9a1;
    font-size: 0.28rem;
    line-height: 0.78rem;
  }
  .inform .line .conts {
    width: 100%;
  }
  .inform .line .conts .list {
    width: 100%;
  }
  .inform .line .conts .list ul {
    width: 100%;
  }
  .inform .line .conts .list ul li {
    width: 100%;
    margin: 0.2rem 0;
  }
  .inform .line .conts .list ul li .btns {
    width: 1.98rem;
    height: 0.61rem;
    background: url(../image/62e022_198x61.png) center no-repeat;
    background-size: cover;
  }
  .inform .line .conts .list ul li .labs {
    width: calc(100% - 2.2rem);
    display: flex;
    justify-content: space-between;
  }
  .inform .line .conts .list ul li .labs .ms {
    width: 1.1rem;
    height: 0.61rem;
    border-radius: 0.1rem 0 0 0.1rem;
    background-color: #0bb6fc;
    text-align: center;
    line-height: 0.61rem;
    color: #fff;
  }
  .inform .line .conts .list ul li .labs .www {
    width: calc(100% - 1.1rem);
    height: 0.61rem;
    border-radius: 0 0.1rem 0.1rem 0;
    background-color: #292929;
    color: #fff;
    border: 1px solid #8a826d;
    text-align: center;
    line-height: 0.59rem;
    border-left: none;
  }
  .game {
    width: 100%;
    padding-top: 0.1rem;
    float: left;
  }
  .game .title {
    width: 100%;
    height: 0.78rem;
    line-height: 0.78rem;
    border-bottom: 1px solid #483d32;
    font-size: 0.3rem;
    color: #fde9a1;
  }
  .game .conts {
    width: 100%;
  }
  .game .conts .list {
    width: 100%;
  }
  .game .conts .list ul {
    width: 100%;
  }
  .game .conts .list ul li {
    width: 50%;
    height: 1.7rem;
    border-bottom: 1px solid #453c3c;
    position: relative;
  }
  .game .conts .list ul li:after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -0.66rem;
    width: 1px;
    height: 1.32rem;
    background-color: #4e3125;
  }
  .game .conts .list ul li .imgs {
    width: 1.4rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .game .conts .list ul li .imgs img {
    width: 1.4rem;
  }
  .game .conts .list ul li .text {
    width: calc(100% - 1.4rem);
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 0.1rem;
  }
  .game .conts .list ul li .text .tits {
    width: 100%;
    line-height: 0.56rem;
    font-size: 0.28rem;
    color: #fff4c7;
    margin-bottom: 0.1rem;
  }
  .game .conts .list ul li .text .btns {
    width: 100%;
  }
  .game .conts .list ul li .text .btns a {
    width: 1.24rem;
    height: 0.42rem;
    background-image: linear-gradient(to bottom, #d5bf99, #af9769);
    text-align: center;
    line-height: 0.42rem;
    border-radius: 0.21rem;
    display: inline-block;
  }
  .game .conts .list ul li:nth-child(2n) {
    padding-left: 0.2rem;
  }
  .game .conts .list ul li:nth-child(2n):after {
    display: none;
  }
  .photo {
    width: 100%;
    min-height: 1rem;
    float: left;
    padding-top: 0.3rem;
  }
  .photo .title {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.1rem;
  }
  .photo .title img {
    width: 1.91rem;
  }
  .photo .conts {
    width: 100%;
  }
  .photo .conts .imgs {
    width: 100%;
    padding-bottom: 0.5rem;
  }
  .photo .conts .imgs ul {
    width: 100%;
  }
  .photo .conts .imgs ul li {
    width: 100%;
  }
  .photo .conts .imgs ul li img {
    width: 100%;
  }
  .photo .conts .imgs .swiper-pagination .swiper-pagination-bullet {
    width: 0.12rem;
    height: 0.12rem;
    opacity: 1;
    background-color: #d4bd97;
  }
  .photo
    .conts
    .imgs
    .swiper-pagination
    .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #fff044;
  }
  .kf {
    width: 1.28rem;
    height: 1.95rem;
    position: fixed;
    right: 50%;
    z-index: 88;
    margin-right: -3.75rem;
    top: 50%;
    margin-top: -0.97rem;
  }
  .kf img {
    width: 100%;
    height: 100%;
  }
  .teachAlt {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    overflow-y: scroll;
    display: none;
    height: 100%;
    z-index: 99;
  }
  .teachAlt img {
    width: 100%;
  }
  @-webkit-keyframes myfirst {
    from {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }
  @keyframes myfirst {
    from {
      transform: scale(1.1);
    }
    50% {
      transform: scale(1);
    }
    to {
      transform: scale(1.1);
    }
  }