body{position: relative;}

.modal
{
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;

    display: none; 

    width: 100vw;
    height: 100vh;
}
.modal .modal-bg
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    opacity: .8;
    background: #000;

    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
}
.modal .modal-inner
{
    position: absolute;
    z-index: 1; 
    top: 0;
    left: 50%;

    width: 100%;
    max-width: 1024px;
    height: 100%;

    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.modal #player
{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 90%;
    padding-top: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}
@media screen and (min-width: 0) and (max-width: 1024px)
{
    .modal #player
    {
        min-width: 0;
        padding-top: 0%;
        height: 50vh;
    }
}
.modal #player iframe,
.modal #player video
{
    position: absolute;
    top: 0;
    right: 0;
    border: 0 none;
    width: 100% !important;
    height: 100% !important;
    display: none;
    background-color: #000;
}
.modal .modal-close
{
    position: absolute;
    z-index: 10;
    top: -70px;
    right: -10px;

    width: 50px;
    height: 50px;

    background-color: rgba(0,0,0,0);

    cursor: pointer;
    -webkit-transition: all .5s ease;
            transition: all .5s ease; 
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
@media screen and (min-width: 0) and (max-width: 1024px)
{
    .modal .modal-close
    {
        top: -60px;
        right: 0;

        width: 40px;
        height: 40px;
    }
}
.modal .modal-close:hover
{
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
}
.modal .modal-close:before
{
    position: absolute;
    top: 25px;
    right: 0;

    width: 100%;
    height: 2px;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 1024px)
{
    .modal .modal-close:before
    {
        top: 20px;
        height: 1px;
    }
}
.modal .modal-close:after
{
    position: absolute;
    top: 0;
    left: 25px;

    width: 2px;
    height: 100%;

    content: '';

    background: #fff;
}
@media screen and (min-width: 0) and (max-width: 1024px)
{
    .modal .modal-close:after
    {
        left: 20px;
        width: 1px;
    }
}
.login-container{display: none;opacity: 0; width: 100vw;height: 100vh;background-color: #c6c2bf;background-image: linear-gradient(-180deg,rgba(0,0,0,.3),rgba(0,0,0,.07) 29%,transparent 69%,rgba(0,0,0,.5));position: absolute;top: 0;left: 0;z-index: 9999;}
.login{width: 300px;height: 400px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.share-container,
.plan-list{
  display: none;
  position: absolute;
  width: 800px;height: 340px;
  top: 50%;left: 50%;transform: translate(-50%,-50%); 
  background-image: linear-gradient(180deg, rgba(97, 101, 105, 0.4) 0%, rgba(97, 101, 105, 0.7) 98%);
  -webkit-backdrop-filter: blur(5px);    backdrop-filter: blur(5px);
  border-radius: 8px;padding: 28px 3rem;
} 
.plan-list .swiper{
  height: 100%;
}
.plan-list .myswiper-button-prev, 
.plan-list .myswiper-button-next{
  position: absolute;
  top: 50%;
  width: 27px;
  height: 44px;
  margin-top: -22px;
  z-index: 10;
  cursor: pointer;
  background-size: 27px 44px;
  background-position: center;
  background-repeat: no-repeat;
} 
.plan-list .myswiper-button-prev{
  left: 10px;
  right: auto;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E");
}
.plan-list .myswiper-button-next{
  right: 10px;
  left: auto;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23fff'%2F%3E%3C%2Fsvg%3E")
}
.plan-list .swiper-slide{
  /*background-color: #fff;*/
  background-position: bottom; background-size: auto 101%; background-repeat: no-repeat;
  border:2px solid transparent;
  cursor: pointer;
}

.plan-list .swiper-slide.current{
  border:2px solid #fff;
}
.plan-list .swiper-slide .title{text-align: center;padding: 0.5rem 0;margin: 0;margin-top: 1rem;display: none;}
.plan-list .swiper-button-disabled{opacity: 0.2}




@media screen and (max-width:640px) {
  .plan-list{width: 80vw; height: 48vh;}

}




.share-container{width: 180px;height: 180px;padding: 10px}
.share-container .title{text-align: center;color: #fff;width: 100%; display: inline-block;}
.share-container .qrcode-container{
  width: 120px;
  height: 120px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
}