* {
    margin:0;
    padding:0;
    outline:0;
      /* -webkit-user-select:none;
      user-select:none; */
      -webkit-backface-visibility: hidden;
      -webkit-tap-highlight-color:rgba(0,0,0,0);
  }
  *:not(input),
  *:not(textarea) {
    /* -webkit-touch-callout:inherit;
    -webkit-user-select:none;
      user-select:none; */
  }
  .clear{clear:both;height:0px;font-size: 1px;line-height: 0px;}

    @font-face{font-family:qkss;src:url(../font2/ht.ttf)}
    @font-face{font-family:qks;src:url(../font2/hy.ttf)}
  body {
      position: absolute;
      width:100%;
      height: 100%;
      -webkit-touch-callout:inherit;
      -webkit-user-select:auto;
      user-select:auto;
      overflow: hidden;
      background: #fff;
  }
  #canvas{
      position: absolute;
      transform-origin: 0 0;
      transform:scale(.66666666);
  }
  video{
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  #poster{
      position: absolute;
      width: 100%;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
  }
  img{
      /* position: absolute; */
  }
  .hide{
    display: none;
  }
  .event-no{
      pointer-events: none;
  }
  
  @media all and (orientation : landscape) { 
  
          #orientLayer {
              display: block;
          }
  
  } 
  
  @media all and (orientation : portrait){ 
          #orientLayer {
              display: none;
          }
  
  } 
  .mod-orient-layer {
      display: none;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background: #fff;
      z-index: 1000000000000000000000;
      overflow: hidden;
  }
  .mod-orient-layer__content {
      position: absolute;
      width: 100%;
      top: 45%;
      margin-top: -75px;
      text-align: center;
  }
  .mod-orient-layer__icon-orient {
      background-image: url(../img/heng.png);
      display: inline-block;
      width: 9rem;
      height: 7.14rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  .mod-orient-layer__desc {
      margin-top: 20px;
      font-size: 15px;
      color: #000;
  }
  
  html {
      font-size : 20px;
  }
  @media screen and (min-width: 320px) and (min-height: 368px) {
      html {
          font-size: 18px;
      }
  }
  @media screen and (min-width: 320px) and (min-height: 414px) {
      html {
          font-size: 18px;
      }
  }
  @media screen and (min-width: 320px) and (min-height: 458px) {
      html {
          font-size: 20px;
      }
  }
  @media screen and (min-width: 320px) and (min-height: 504px) {
      html {
          font-size: 18px;
      }
  }
  @media screen and (min-width: 360px) and (min-height: 524px) {
      html {
          font-size: 18.7px;
      }
  }
  @media screen and (min-width: 360px) and (min-height: 567px) {
      html {
          font-size: 20.8px;
      }
  }
  
  @media screen and (min-width: 360px) and (min-height: 570px) {
      html {
          font-size: 20.8px;
      }
  }
  
  @media screen and (min-width: 375px) and (min-height: 557px) {
      html {
          font-size: 20px;
      }
  }
  @media screen and (min-width: 375px) and (min-height: 603px) {
      html {
          font-size: 22px;
      }
  }
  @media screen and (min-width: 375px) and (min-height: 724px) {
      html {
          font-size: 21px;
      }
  }
  @media screen and (min-width: 393px) and (min-height: 579px) {
      html {
          font-size: 22px;
      }
  }
  @media screen and (min-width: 393px) and (min-height: 631px) {
      html {
          font-size: 23.3px;
      }
  }
  @media screen and (min-width: 393px) and (min-height: 671px) {
      html {
          font-size: 22.3px;
      }
  }
  @media screen and (min-width: 414px) and (min-height: 626px) {
      html {
          font-size: 22px;
      }
  }
  @media screen and (min-width: 480px) and (min-height: 650px) {
      html {
          font-size: 22px;
      }
  }
  @media screen and (min-width: 412px) and (min-height: 658px) {
      html {
          font-size: 21px;
      }
  }
  @media screen and (min-width: 412px) and (min-height: 668px) {
      html {
          font-size: 22px;
      }
  }
  @media screen and (min-width: 414px) and (min-height: 672px) {
      html {
          font-size: 22px;
      }
  }
  #loading{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #fff;
      background-image: url(../img/loading_bg.jpg);
      background-size: cover;
      background-position: top center;
  }
  #loading .building {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    clip: rect(0px,0,0,0px);  
  }
  #loading .building2 {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    /* clip: rect(0px,20px,0,20px); */
  }
  .rate-outer {
    position: absolute;
    width: 3rem;
    height: 25rem;
    top: 0;
    left: -4.5rem;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .loading_car {
    position: absolute;
    width: 2rem;
    top: 0rem;
    left: 0rem;
    right: 0;
    margin: auto;
    margin-top: 0;
    z-index: 10;
    transition: all;
  }
  
  #rate-wrap{
    
    background-image: url(../img/loading_bar.png);
    background-size: cover;
    overflow: hidden;
    height: 25rem;
    width: 0.5rem;
  }
  #rate{
    width: 100%;
    height: 0;
    /* top: 0; */
    /* left: 0; */
    background: #cc3c26;
  }
  .loading_progress {
    position: absolute;
    top: 0;
    bottom: 0;
    left:-80vw;
    transform: rotate(90deg);
    font-size: 1rem;
    font-family: qkss;
  }
  .start_elem {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
    background-image: url(../img/start_bgnew.jpg);
    background-size: cover;
  }
  .start_title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8rem;
    right: 0;
    z-index: 10;
    animation: fadeInRight 2s 1;
    transform-origin: center center;
  }
  @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;  
            -webkit-transform: translate3d(100%, 0, 0) translateY(-50%);   
            transform: translate3d(100%, 0, 0) translateY(-50%);    
        }   
        100% {
            opacity: 1;  
            -webkit-transform: translateY(-50%);  
            transform: translateY(-50%);  
        }   
    }
    
    @keyframes fadeInRight {
        0% {
            opacity: 0;  
            -webkit-transform: translate3d(100%, 0, 0) translateY(-50%);   
            transform: translate3d(100%, 0, 0) translateY(-50%);    
        }   
        100% {
            opacity: 1;  
            -webkit-transform: translateY(-50%);  
            transform: translateY(-50%);  
        }     
    }

    @-webkit-keyframes fadeInDown {
        0% {
            opacity: 0;  
            -webkit-transform: translate3d(0, -100%, 0);   
            transform: translate3d(0, -100%, 0);  
        }   
        100% {
            opacity: 1;  
            -webkit-transform: none
            transform: none
        }   
    }
    
    @keyframes fadeInDown {
        0% {
            opacity: 0;  
            -webkit-transform: translate3d(0, -100%, 0);   
            transform: translate3d(0, -100%, 0);  
        }   
        100% {
            opacity: 1;  
            -webkit-transform: none
            transform: none
        }      
    }
    
  @keyframes star {
      0%{transform: scale(1)}
      25%{transform: scale(1.2)}
      50%{transform: scale(1)}
      75%{transform: scale(1.2)}
  }
  @keyframes wiggle {
    0% { transform: rotate(0deg) }
   80% { transform: rotate(0deg) }
   85% { transform: rotate(5deg) }
   95% { transform: rotate(-5deg) }
  100% { transform: rotate(0deg) }
}
  .start_car {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 68%;
    left:1rem;
    animation: fadeInDown 2s 1;
  }
  .start_btn {
    position: absolute;
    width: 2.5rem;
    left: 1.8rem;
    bottom: 1rem;
    animation: wiggle 2s infinite;
  }
  .fade-end{
      animation: fade-in ease-in-out 1.2s both;
  }
  .fade-in{
      animation: fade-in ease-in-out .4s both;
  }
  @keyframes fade-in{
      0% {opacity: 0}
      100% {opacity: 1}
  }
  .fade-out-snow{
      animation: fade-out-snow ease-in-out .6s both;
  }
  .fade-out{
      animation: fade-out ease-in-out .4s both;
  }
  .fade-out-end{
      animation: fade-out ease-in-out 0.8s both;
  }
  @keyframes fade-out{
      0% {opacity: 1}
      100% {opacity: 0}
  }
  @keyframes fade-out-snow{
      0% {opacity: 1;}
      100% {opacity: 0;}
  }
  .end-logo{
      width: 0.8rem;
      top: 0;
      left: 6rem;
      bottom: 0;
      margin: auto;
  }
  .end-ce{
      width: 1rem;
      top: 0;
      left: -14.2rem;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  #play{
      position: absolute;
      width: 1.5rem;
      top: 0;
      left: -4rem;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  #blank{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #000;
  }
  .delay-end{
      animation-delay: 0.8s;
  }
  .delay-0{
      animation-delay: 1s;
  }
  .delay-1{
      animation-delay: 1.6s;
  }
  #end{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #3a3b48;
  }
  #snow{
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100000;
  }
  .end-0{
      height: 40rem;
      top: 50%;
      margin-top: -20rem;
      left: 50%;
      margin-left: -3rem;
      animation: end-1 linear 2s both;
  }
  .end-2{
      height: 30rem;
      top: 50%;
      margin-top: -15rem;
      left: 50%;
      margin-left: -0.3rem;
      animation: end-2 linear 3s both;
  }
  @keyframes end-2{
      0% {transform: scale(1);}
      
      100% {transform: scale(0.8) translate3d(-0.5rem,0,0);}
  }
  .end-1{
      height: 41rem;
      top: 50%;
      margin-top: -19rem;
      left: 50%;
      margin-left: -11rem;
      animation: end-1 linear 2s both;
  }
  @keyframes end-1{
      0% {transform: scale(1);}
      
      100% {transform: scale(0.9);}
  }
  .end-3{
      width: 8rem;
      left: -0.6rem;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: end-3 ease-in-out 1.8s infinite;
  }
  @keyframes end-3{
      0%,80% {transform: translate3d(0,0,0);}
      40%{transform: translate3d(.5rem,0,0);}
      100% {transform: translate3d(0,0,0);}
  }
  .head-0{
      height: 5rem;
      top: 0;
      left: 6rem;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  .head-1{
      height: 5rem;
      top: 11rem;
      left: 6rem;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  .head-2{
      height: 5rem;
      top: 0;
      left: 6rem;
      right: 0;
      bottom: 11rem;
      margin: auto;
  }
  .arrow{
     position: absolute;
      width: 1.2rem;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  .hand{
      width: 2rem;
      top: 5rem;
      left: -4.5rem;
      right: 0;
      bottom: 0;
      margin: auto;
      animation: hand 3s ease-in-out infinite;
  }
  @keyframes hand{
      0%{transform: translate3d(0,0,0);opacity: 0}
      80% {transform: translate3d(0,-5rem,0);opacity: 1}
      100% {transform: translate3d(0,-5rem,0);opacity: 0}
  }
  .arrow-wrap{
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
  }
  .play-hand{
      position: absolute;
      width: 2rem;
      top: -0.15rem;
      left: -6.3rem;
      right: 0;
      bottom: 0;
      margin: auto;
      
  }
  .phr{
      animation: play-hand 1.5s ease-in-out infinite;
  }
  @keyframes play-hand{
      0%{transform: scale(1.1);opacity: 0}
      20%{transform: scale(1.1);opacity: 1}
      60% {opacity: 1}
      100% {transform: scale(0.9);opacity: 0}
  }
  .btn-0{
      width: 1.35rem;
      top: -7rem;
      left: -10rem;
      right: 0;
      bottom: 0;
      margin: auto;
  }
  .btn-1{
      width: 1.35rem;
      top: 0;
      left: -10rem;
      right: 0;
      bottom: -7rem;
      margin: auto;
  }
  #con{
      position: absolute;
      width: 1.3rem;
      right: 0.5rem;
      bottom: 0.5rem;
      z-index: 1000000000000000000000000000000000000000000;
      height: 1.3rem;
      overflow: hidden;
      background-image: url(../img/music.png);
      background-size: 100% 100%;
      opacity: .5;
  }
  .bg-y{
    background-image: url(../img/music2.png) !important;
  }
  #end-text{
      position: absolute;
      width: 2.2rem;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
  }
  .long_img_btns {
    display: none;
  }
  .long_img_btns .img_col {
    position: absolute;
    left: 0.6rem;
    top: 1rem;
    width: 2.2rem;
  }
  .route_img_btns .img_col {
    position: absolute;
    left: 0.6rem;
    bottom: 1rem;
    width: 3rem;
  }

  .check_num {
    position: absolute;
    top: 2.9rem;
    left: 2.4rem;
    width: 1rem;
    height: 1rem;
    background-color: #75acee;
    border-radius: 50%;
    color: #fff;
    font-size: .7rem;
    text-align: center;
    line-height: 1rem;
    transform: rotate(90deg);
  }
  .check_num2 {
    position: absolute;
    bottom: 0.7rem;
    left: 3.1rem;
    width: 1.5rem;
    height: 1.5rem;
    background-color: #75acee;
    border-radius: 50%;
    color: #fff;
    font-size: .9rem;
    text-align: center;
    line-height: 1.5rem;
    transform: rotate(90deg);
  }
  .checkin_btn {
    position: absolute;
    left: 10px;
    bottom: 8rem;
    width: 2.5rem;
  }
  .back_btn {
    position: absolute;
    left: 10px;
    bottom: 2rem;
    width: 2.5rem;
  }
  .help_tips {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,.7);
      display: none;
  }
  .help_tips .help_img {
    position: absolute;
    width: 72%;
    left: 0.6rem;
    top: 1rem 
  }
  .help_tips2 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.7);
    display: none;
    z-index: 10;
}
.help_tips2 .help_img2 {
    position: absolute;
    width: 50%;
    left: 50%;
    /* margin-left: -25%; */
    top: 50%;
    transform: translate(-81%,-50%);
}
  .route_img_btns {
    display: none;
  }
  .swiper_back {
    position: absolute;
    left: 10px;
    width: 2.5rem;
    bottom: 3rem;
    z-index: 9;
  }
  .end_btn {
    position: absolute;
    left: 10px;
    width: 2.5rem;
    bottom: 8rem;
    z-index: 9;
    display: none;
  }
  .checkin_title {
    position: absolute;
    right: 4rem;
    top:4%;
    width: 0.8rem;
    z-index: 9;
  }
  .checkin_tips {
    position: absolute;
    left: 20%;
    top:50%;
    transform: translateY(-50%);
    width: 0.8rem;
    z-index: 9;
  }

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.7);
  z-index: 10;
  display: none;
}

.swiper-outer {
  position: absolute;
  width: 100%;
  top: 0%;
  bottom: 0%;
  padding:4% 0;
  background-image: url(../img/checkin_img/bg.jpg);
  background-size: cover;
  display: none;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
 .swiper-wrapper {
    height: auto;
}
 .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    transition: transform 300ms ;
    transform: scale(0.9);
   
  }
 .swiper-slide .img1{
    width: 32%;
    background-image: url(../img/checkin_img/tu_bg.png);
    background-size: cover;
    padding:.4rem
}



.preview_img_outer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 20;
  background-color: rgba(0,0,0,.7);
}
.preview_img_pos {
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
 
}
.preview_img_pos .preview_img {
    display: block;
    background-image: url(../img/checkin_img/tu_bg.png);
    padding: 0.2rem;
    width: 60%;
    float: right;
    margin-right: 1rem;
}
.preview_img_pos .desc {
    position: absolute;
    top: 0;
    left: 5.2rem;
    font-size: .8rem;
    transform: rotate(90deg);
    transform-origin: left top;
    color: #fff;
    border-left: solid 2px #76a4dc;
    padding-left: 0.4rem;
    /* width: 100%; */
    width: 26rem;
    overflow-y: auto;
    max-height: 4rem;
}
.checkin_img_outer {
  position: absolute;
  width: 80%;
  height: 80%;
  right: 4%;
  top: 0%;
  display: none;
  z-index: 20;
}
.checkin_img {
  position: absolute;
  width: 100%;
  right: 0%;
  top: 0%;
  z-index: 100;
}
.poster_card {
  /* position: absolute; */
  width: 100%;
  /* right: 0%;
  top: 0%; */
  z-index: 100;
}
.flex_poster {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    display: none;
    opacity: 0;
    position: absolute;
    /* transform: rotate(90deg);
    z-index: 100; */
    /* transform-origin: left top;
    transform: rotate(90deg) translateY(-7.5rem); */
}
.poster_card_outer {
    position: relative;
    /* position: absolute; */
    width: 100%;
    /* right: 4%; */
    display: none;
    z-index: 100;
}
.flex_poster_show {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    display: none;
}
.poster_card_outer_show {
    position: relative;
    width: 80%;
    /* right: 4%; */
    margin-left: 15%;
    display: none;
    z-index: 100;
}
.poster_card_show {
    width: 100%;
    z-index: 100;
}
.poster_card_outer_show .p{
    position: absolute;
    font-weight: 100;
    font-size: 0.5rem;
    color: #a2471d;
    top: 21%;
    left: 16.5%;
    width: 100%;
    z-index: 100;
    font-family: qks;
    transform-origin: left top;
    transform: rotate(90deg);
    margin:0
  }
  .poster_card_outer_show .p span {
    font-size: 0.9rem;
  }
.tap_save {
  position: absolute;
  align-items: center;
  width: 100%;
  height: 100%;
  left:0;
  top: 0%;
  display: none;
  z-index: 100;
  opacity: 0;
  
}


.save_img {
    /* align-items: center;
    align-content: center;
    position: absolute; */
    display: block;
    width: 100%;
    /* height: 100%; */
    /* left: 0;
    top: 0; */
    /* height: 3rem; */
    /* transform: translateY(-50%); */
    /* z-index: 100; */
    /* opacity: 0; */
    /* transform: rotate(90deg); */
    /* transform-origin: center; */
    /* transform: rotate(90deg); */
    /* display: none; */
}
.poster_card_outer .p{
    position: absolute;
    font-weight: 100;
    font-size: 0.4rem;
    color: #a2471d;


    bottom: 10%;
    left: 21%;
    /* width: 33%; */
    z-index: 100;
    font-family: qks;
}
.poster_card_outer .p span {
    font-size: 0.6rem;
}
.swiper-slide .p {
    display: none;
    position: absolute;
    font-weight: 700;
    font-size: 0.1rem;
    color: red;
    transform: rotate(90deg);
    top: 67%;
    left: 30%;
    width: 4rem;
    text-align: left;
}
.save_canvas {
	position: absolute;
	top: 0;
	z-index: -10;
	top: 100%;
    opacity: 0;
    display: none;
}

.save_canvas canvas {
	display: none
}

.poster_tips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 11;
}

.poster_tips .long_tap_tips {
  position: absolute;
  left:.5rem;
  width: 1rem;
  top: 50%;
  transform: translateY(-50%);
}
.poster_close {
  position: absolute;
  bottom: 1rem;
  width: 1.5rem;
  left: 50%;
  margin-left: -.4rem;
  z-index: 110;
  display: none;
}
.preview_close {
    position: absolute;
    width: 1.2rem;
    /* left: 50%; */
    /* margin-left: -0.4rem; */
    /* display: none; */
    bottom: -1.5rem;
    right: 1rem;
}
.end_page {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: none;
  z-index: 110;
  background-image: url(../img/end_save.jpg);
  background-position: top center;
  background-size: cover;
  align-items: center;
}
.end_page .end_img {
    width: 100%;
    /* height: 100%; */
    opacity: 0;
    /* transform-origin: left top; */
}
.end_page .long_tap_tips {
  position: absolute;
  right: .5rem;
  width: .8rem;
  top: 50%;
  transform: translateY(-50%);
}
.end_page .refresh_btn {
  position: absolute;
  left: .5rem;
  width: 2rem;
  top: 50%;
  transform: translateY(-100%);
}
.end_page .share_btn {
  position: absolute;
  left: .5rem;
  width: 2rem;
  top: 50%;
  transform: translateY(20%);
}
/* .circle_tips {
  position: absolute;
  display: none;
  width: 2rem;
} */
.share_outer {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left:0;
  display: none;
  background-color: rgba(0,0,0,.7);
  z-index: 200;
}
.share_outer .sharetips {
  position: absolute;
  right:0;
  top: 0;
  width: 6rem;
}
/* iphonex */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .swiper-slide .img1{
        width: 44%;
    }
    /* .poster_card_outer_show .p {

        left: -33%;
    } */
}
/* iphone 6/7/8 plus */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 2) {
    .swiper-slide .img1{
        width: 44%;
    }
    /* .poster_card_outer_show .p {

        left: -31%;
    } */
}

@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    .swiper-slide .img1{
        width: 44%;
    }
    /* .poster_card_outer_show .p {

        left: -31%;
    } */
}
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    .swiper-slide .img1{
        width: 44%;
    }
    /* .poster_card_outer_show .p {

        left: -31%;
    } */
   
}
    /* iphone13 */
@media only screen and (device-width: 375px) and (device-height: 844px) and (-webkit-device-pixel-ratio:3) {
        .swiper-slide .img1{
            width: 42%;
        }
        /* .poster_card_outer_show .p {

            left: -31%;
        } */
        .preview_img_pos .desc {
            font-size: 0.6rem
        }
    }
@media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio:3)  {
        .swiper-slide .img1{
            width: 42%;
        }
        /* .poster_card_outer_show .p {
    
            left: -31%;

        } */
        .preview_img_pos .desc {
            font-size: 0.6rem
        }
    }
@media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio:3) {
        .swiper-slide .img1{
            width: 42%;
        }
        /* .poster_card_outer_show .p {

            left: -31%;
        } */
        .preview_img_pos .desc {
            font-size: 0.6rem
        }
    }