html {
    height: 100%;
}

body {
    position: relative;
    font-family: MicrosoftYaHei;
    font-size: .16rem;
    width: 100%;
}

li,
div,
a {
    user-select: none;
}

i {
    display: inline-block;

}

.main {
    width: 100%;
    height: 100%;
    overflow: hidden;
}


.head {
    background-color: rgba(0, 0, 0, 0.6);
    height: 1rem;
    line-height: .9rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
    padding: 0 .2rem;
    box-sizing: border-box;
}

.head__left {
    float: left;
}

.head__right {
    float: right;
}

.icon-7k7k {
    display: inline-block;
    background: url(../image/7k.png) center no-repeat;
    width: .73rem;
    height: .72rem;
    background-size: 100% auto;
    vertical-align: middle;
    margin-bottom: -.1rem;
}

.icon-4399 {
    display: inline-block;
    background: url(../image/4399.png) center no-repeat;
    width: .73rem;
    height: .72rem;
    background-size: 100% auto;
    vertical-align: middle;
    margin: 0 .1rem -.1rem .1rem;
}

.icon-logo {
    background: url(../image/logo.png) center no-repeat;
    width: 3.21rem;
    height: .7rem;
    vertical-align: middle;
    background-size: 100% auto;
}

.gwbox {
    position: absolute;
    top: .8rem;
    right: .95rem;
    box-sizing: border-box;
    width: 2.5rem;
    height: 1.5rem;
    padding-top: .1rem;
    text-align: right;
    z-index: 2;
    /* display: none; */
}

.icon-gw {
    background: url(../image/icon_home.png) center no-repeat;
    width: .65rem;
    height: .66rem;
    background-size: 100% auto;
    display: inline-block;
    vertical-align: middle;
}

.icon-seerpc {
    background: url(../image/btn_seerpc.png) center no-repeat;
    width: 2.49rem;
    height: .6rem;
    background-size: 100% auto;
    display: inline-block;
    vertical-align: middle;
}

.icon-seer {
    background: url(../image/btn_seer.png) center no-repeat;
    width: 2.5rem;
    height: .6rem;
    background-size: 100% auto;
    display: inline-block;
}


.icon-share {
    background: url(../image/icon_share.png) center no-repeat;
    width: .65rem;
    height: .66rem;
    background-size: 100% auto;
    display: inline-block;
    vertical-align: middle;
}

.sharebox {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    box-sizing: border-box;
    z-index: 3001;
    margin-top: 3.5rem;
    padding-top: 1rem;
    /* display: none; */
    width: 4.38rem;
    overflow: hidden;
}

.share-weibo {
    background: url(../image/share_weibo.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    animation: upShow linear .05s 1 normal forwards;
}

.share-qqzone {
    background: url(../image/share_qqzone.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    margin: 0 .5rem;
    animation: upShow linear .05s 1 .02s normal forwards;
}

.share-weixin {
    background: url(../image/share_weixin.png) center no-repeat;
    width: 1.12rem;
    height: 1.53rem;
    background-size: 100% auto;
    animation: upShow linear .05s 1 .04s normal forwards;
}

.sharebox .code1 {
    background: url(../image/code.PNG) center no-repeat;
    width: 2.73rem;
    height: 3.89rem;
    background-size: 100% auto;
    margin-left: 50%;
    transform: translateX(-50%);
}

.sharemask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    display: none;
}

.icon-music {
    background: url(../image/icon_music_0.png) center no-repeat;
    width: .67rem;
    height: .67rem;
    position: absolute;
    top: 1.1rem;
    right: .2rem;
    background-size: 100% auto;
    animation: rotateAnimation 6s linear infinite normal;
}

.icon-music--active {
    background: url(../image/icon_music_1.png) center no-repeat;
    background-size: 100% auto;
    animation: none;
}

.ztbox {
    width: 2.27rem;
    position: absolute;
    bottom: 1.5rem;
    left: 1.45rem;
}

.ztbox a {
    width: 2.27rem;
    height: .66rem;
    display: inline-block;
}

.swiper-container1 {
    height: 16.67rem;
}

.page1,
.page2,
.page3,
.page4,
.page5,
.page6,
.page7 {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.page1 {
    background: url(../image/bg_page1.jpg) top center no-repeat;
    background-size: 100% auto;
}

.titleplayer {
    position: absolute;
    bottom: 4.5rem;
    left: 1.6rem;
    width: 1.1rem;
    height: 1.1rem;
}

.slidemouse {
    width: 2.5rem;
    position: absolute;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
}

.tips-mouse {
    background: url(../image/tips_mouse.png) center no-repeat;
    background-size: 100% auto;
    width: 2rem;
    height: .5rem;
    margin: 0 auto;
    /* animation: mouseAnimation 1s linear infinite; */
}

.tips-slideL {
    border-bottom: .05rem solid black;
    width: .6rem;
    height: .2rem;
    margin-top: -.35rem;
    float: left;
}

.tips-slideR {
    border-bottom: .05rem solid black;
    width: .6rem;
    height: .2rem;
    margin-top: -.35rem;
    float: right;
}

.page2 {
    background: url(../image/bg_page2.jpg) top center no-repeat;
    background-size: 100% auto;
}

.page2 .container {
    padding-top: 10.35rem;
}

.entry {
    margin: 0 auto;
    width: 7.6rem;
    padding-left: .35rem;
}

.leftentry {
    background: url(../image/leftentry.png) center no-repeat;
    background-size: 100% auto;
    width: 3.35rem;
    height: 2.48rem;
    display: inline-block;
    cursor: pointer;
}

.rightentry {
    background: url(../image/rightentry.png) center no-repeat;
    background-size: 100% auto;
    width: 3.57rem;
    height: 2.47rem;
    display: inline-block;
    cursor: pointer;
}

.page3 {
    background: url(../image/bg_page3.jpg) top center no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.page3 .container {
    padding-top: 7.5rem;
}

.vedio__player {
    background: url(../image/vedioplayer.png) center no-repeat;
    background-size: 100% auto;
    width: 1.76rem;
    height: 1.74rem;
    margin: 0 auto;
    cursor: pointer;
}

.musicplayer {
    position: absolute;
    right: -1.8rem;
    bottom: 1rem;
    background: url(../image/albumcover.png) top right no-repeat;
    background-size: 100% auto;
    width: 4.88rem;
    height: 4.61rem;
    z-index: 16;
}

.music-player {
    position: absolute;
    display: inline-block;
    background: url(../image/icon_musicplayer_0.png) top right no-repeat;
    background-size: 100% auto;
    width: 1.04rem;
    height: 1.04rem;
    cursor: pointer;
    top: 2.7rem;
    left: 1.08rem;
    z-index: 18;
}

.music-player--active {
    background: url(../image/icon_musicplayer_1.png) top right no-repeat;
    background-size: 100% auto;
}

.music-record {
    position: relative;
    display: inline-block;
    background: url(../image/record.png) top right no-repeat;
    background-size: 100% auto;
    width: 2.77rem;
    height: 2.77rem;
    margin-top: 1.8rem;
    margin-left: .2rem;
}

.music-record--active {
    animation: rotateAnimation 6s linear infinite normal;
}

.lyricslide {
    position: absolute;
    left: 0;
    top: 0;
    background: url(../image/bg_lyric.png) top center no-repeat;
    background-size: 8.3rem auto;
    width: 100%;
    height: 16.67rem;
    margin-left: -16.67rem;
    z-index: 15;
    transition: all .5s;
}

.lyricslide--active {
    margin-left: 0;
}

.lyric__container {
    position: relative;
}

.lyricslide-hide {
    width: .6rem;
    height: .6rem;
    position: absolute;
    right: .7rem;
    top: 1.89rem;
    cursor: pointer;
    z-index: 2;
}

.lyric__box {
    box-sizing: border-box;
    padding: 3rem 0 0 0;
    color: white;
    font-size: .3rem;
}

.lyric {
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
}

.player-container .player-body {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    display: -ms-flex;
    display: -webkit-flex;
    margin: auto;
    width: 5rem;
}

.music-headline {
    font-size: .36rem;
    font-weight: bold;
}

.music-lyric-scrollBox {
    position: relative;
    width: 100%;
    height: 8rem;
    margin: 0 auto;
    overflow: hidden;
    margin-top: .5rem;
    line-height: .7rem;
    color: #a6b6f5;
    font-size: .24rem;
    font-weight: bold;
    text-align: center;
}

.music-lyric-list {
    position: absolute;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    top: 40% !important;
}

.lyricTimeVal {
    color: white;
}

.singer-name-cur {
    font-size: .24rem;
}

.lyricTimeLine {
    display: flex;
    position: absolute;
    top: 40%;
    visibility: hidden;
}

.lyricTimeLine.right {
    right: 0;
}

i.small-play-icon {
    transform: scale(.7);
    background-color: #f5b499;
    margin-top: .14rem;
    margin-left: .1rem;
}

i.play-paused-btn {
    display: block;
    position: relative;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    transition: filter .2s;
    cursor: pointer;
}

i.small-play-icon.paused::before {
    border-left: .15rem solid #fff;
}

i.play-paused-btn::before,
i.play-paused-btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

i.play-paused-btn.paused::before {
    width: 0;
    height: 0;
    border-right: none;
    border-top: .1rem solid transparent;
    border-bottom: .1rem solid transparent;
    margin-left: .02rem;
}

.time-schedule {
    display: none;
}

.page4 {
    background: url(../image/bg_page4.jpg) top center no-repeat;
    background-size: 100% auto;
    overflow: hidden;
    position: relative;
}

.page4 .container {
    padding-top: 10.8rem;
}

.chat1,
.chat2,
.chat3,
.chat4 {
    position: absolute;
    left: 100%;
    width: 100%;
}

.chat1 {
    top: 3rem;
    animation: chatAnimation linear 16s infinite normal;
}

.chat2 {
    top: 4.3rem;
    animation: chatAnimation linear 8s infinite normal;
}

.chat3 {
    top: 5.5rem;
    animation: chatAnimation linear 12s infinite normal;
}

.chat4 {
    top: 7rem;
    animation: chatAnimation linear 4s infinite normal;
}

.icon-chat1 {
    background: url(../image/chat1.png) top right no-repeat;
    background-size: 100% auto;
    width: 3.63rem;
    height: .77rem;
}

.icon-chat2 {
    background: url(../image/chat2.png) top right no-repeat;
    background-size: 100% auto;
    width: 2.73rem;
    height: .77rem;
}

.icon-chat3 {
    background: url(../image/chat3.png) top right no-repeat;
    background-size: 100% auto;
    width: 4.13rem;
    height: .77rem;
}

.icon-chat4 {
    background: url(../image/chat4.png) top right no-repeat;
    background-size: 100% auto;
    width: 3.63rem;
    height: .77rem;
}

.btn_douyu {
    width: 5.8rem;
    margin: 0 auto;
}

.btn_pc {
    float: left;
    width: 2.83rem;
    height: 1.03rem;
    background: url(../image/btn_pc.png) top right no-repeat;
    background-size: 100% auto;
}

.btn_m {
    float: right;
    width: 2.83rem;
    height: 1.03rem;
    background: url(../image/btn_m.png) top right no-repeat;
    background-size: 100% auto;
}

.page5 {
    background: url(../image/bg_page5.jpg) top center no-repeat;
    background-size: 100% auto;
    overflow: hidden;
}

.page5 .container {
    padding: 11rem 0 0 .3rem;
}

.post__title {
    background-color: #00ac77;
    color: #fff;
    font-size: .3rem;
    font-weight: bold;
    display: inline-block;
    padding: 0 .3rem;
    margin-bottom: .2rem;
}

.post__word {
    color: #b4c1ff;
    font-size: .24rem;
    margin-bottom: .1rem;
}

.post__word span {
    color: #00cd8e;
}

.page6 {
    background: url(../image/bg_page6.jpg) top center no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
}

.page6 .container {
    padding-top: 1.8rem;
}

.periphery {
    width: 100%;
    overflow: hidden;
    margin-bottom: .3rem;
}

.periphery img {
    width: 100%;
}

.swiper-container2 {
    width: 100%;
    height: 7.99rem;
    margin: 0 auto;
}

.swiper-container2 .swiper-slide {
    width: 100% !important;
    height: 7.99rem;
}

.swiper-container2 .swiper-slide>img {
    width: 100%;
}

.swiper-container2 .swiper-slide-active {
    transform: scale(1);
    /* transition: all .75s; */
}

.swiper-container2 .swiper-pagination {
    color: white;
    font-size: .3rem;
    font-family: SimSun;
}

.swiper-container2 .swiper-button-next {
    background-image: url(../image/icon_pageright.png);
    background-size: 100% auto;
    width: .92rem;
    height: .94rem;
    margin-top: -2.8rem;
}

.swiper-container2 .swiper-button-prev {
    background-image: url(../image/icon_pageleft.png);
    background-size: 100% auto;
    width: .92rem;
    height: .94rem;
    margin-top: -2.8rem;
}

.peripheryinf {
    margin: 0 auto;
    width: 7rem;
}

.periphery-shop {
    background: url(../image/btn_shop.png) top right no-repeat;
    background-size: 100% auto;
    width: 3.36rem;
    height: .91rem;
    cursor: pointer;
    margin: 0 auto 2rem auto;
    display: inline-block;
}

.periphery-shop1 {
    background: url(../image/btn_shop1.png) top right no-repeat;
    background-size: 100% auto;
    width: 3.36rem;
    height: .91rem;
    cursor: pointer;
    margin: 0 auto 2rem auto;
    display: inline-block;
    margin-right: .1rem;
}

.peripherytab {
    width: 6.1rem;
    margin: 0 auto;
}

.peripheryitem {
    background: url(../image/peripherytab.png) top right no-repeat;
    background-size: 100% auto;
    width: .2rem;
    height: .22rem;
    display: inline-block;
    cursor: pointer;
    margin: 0 .3rem;
}

.peripheryitem--active {
    background: url(../image/peripherytab--hover.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active::after {
    position: absolute;
    content: "";
    bottom: 4.3rem;
    left: 0;
    width: 2.93rem;
    height: 1.18rem;
}

.peripheryitem--active:nth-child(1)::after {
    background: url(../image/peripheryitem4.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(2)::after {
    background: url(../image/peripheryitem1.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(3)::after {
    background: url(../image/peripheryitem2.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(4)::after {
    background: url(../image/peripheryitem3.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(5)::after {
    background: url(../image/peripheryitem5.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(6)::after {
    background: url(../image/peripheryitem7.png) top right no-repeat;
    background-size: 100% auto;
}

.peripheryitem--active:nth-child(7)::after {
    background: url(../image/peripheryitem8.png) top right no-repeat;
    background-size: 100% auto;
}


.page7 {
    background: url(../image/bg_page7.jpg) top center no-repeat;
    background-size: 100% auto;
}

.blessing {
    background: url(../image/blessing.png) top right no-repeat;
    background-size: 100% auto;
    width: 6.01rem;
    height: 7.08rem;
    margin: 2.4rem 0 .7rem .3rem;
}

.btn-blessing {
    background: url(../image/btn_blessing.png) top right no-repeat;
    background-size: 100% auto;
    width: 3.03rem;
    height: .9rem;
    margin-left: .7rem;
    border: none;
    display: inline-block;
}

.bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    background: url(../image/bg_bottomnav.png) top left no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: .9rem;
    z-index: 2;
    font-size: 0;
}

.bottomnavitem {
    display: inline-block;
    font-size: .24rem;
    font-weight: bold;
    color: #a5a5a5;
    text-align: center;
    line-height: .9rem;
}

.bottomnavitem--active {
    color: #b1cde8;
    position: relative;
}

.bottomnavitem--active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: url(../image/bg_nav--active.png) top left no-repeat;
    background-size: 100% auto;
    width: .37rem;
    height: .19rem;
}

.bottomnavitembox3 {
    width: 1.86rem;
    height: 2rem;
    position: absolute;
    bottom: 1.2rem;
    right: 1.3rem;
    display: none;
}

.bottomnavitembox4 {
    width: 1.86rem;
    height: 2rem;
    position: absolute;
    bottom: 1.2rem;
    right: 0rem;
    display: none;
}

.bottomnavitembox3 div, .bottomnavitembox4 div, .bottomnavitembox3 a, .bottomnavitembox4 a {
    display: block;
    width: 1.86rem;
    height: .66rem;
    line-height: .66rem;
    margin-bottom: .1rem;
    font-size: .24rem;
    color: #b1cde8;
    text-align: center;
    box-sizing: border-box;
    border: .01rem solid #b1cde8;
    background: rgba(0, 0, 0, 0.5);
}

.current-display {
    color: white;
}

/* 弹窗 */
.vediomask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.vediodialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7rem;
    z-index: 1000;
    display: none;
}

.vedioplayer {
    width: 100%;
    height: 5rem;
    object-fit: contain;
}

/* 导航 */
.nav {
    width: 2.06rem;
    height: 10.6rem;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    box-sizing: border-box;
    display: none;
}

.nav img {
    position: absolute;
    width: 2.06rem;
    z-index: 30;
}

.nav .nav__box {
    position: absolute;
    margin-top: 1.69rem;
    height: 7rem;
    z-index: 20;
}

.nav .nav__click {
    position: absolute;
    margin-top: 1.69rem;
    height: 7rem;
    z-index: 40;
}

.navitem,
.navitem-click {
    width: 2.6rem;
    height: .66rem;
    margin-bottom: .36rem;
    box-sizing: border-box;
    cursor: pointer;
}

.navitem--active .bg_navitem2 {
    background: url(../image/bg_navigation2.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.navitem--active .bg_navitem3 {
    background: url(../image/bg_navigation3.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.navitem--active .bg_navitem4 {
    background: url(../image/bg_navigation4.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.navitem--active .bg_navitem5 {
    background: url(../image/bg_navigation5.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.navitem--active .bg_navitem6 {
    background: url(../image/bg_navigation6.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.navitem--active .bg_navitem7 {
    background: url(../image/bg_navigation7.png) top left no-repeat;
    background-size: 2.06rem auto;
    width: 2.6rem;
    height: .66rem;
}

.dialog-large .dialog-content {
    width: 5.44rem !important;
    height: 8.1rem;
    background: url(../image/bg_dialog.png) no-repeat top center;
    background-size: 100% auto;
    text-align: center;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: .3rem;
    margin-left: 0 !important;
}

.dialog-alert .dialog-content,
.dialog-confirm .dialog-content {
    width: 4rem !important;
    height: 2.2rem;
    background: url(../image/bg_dialogcommon.png) no-repeat top center;
    background-size: 100% auto;
    text-align: center;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 0rem;
    margin-left: 0 !important;
}

.dialog-alert .dialog-closebtn,
.dialog-confirm .dialog-closebtn {
    position: absolute !important;
    right: .2rem !important;
    top: .5 !important;
    background: url(../image/icon_close1.png) no-repeat center !important;
    background-size: 100% auto !important;
    font-size: 0 !important;
    width: .28rem !important;
    height: .28rem !important;
}

.dialog-large .dialog-header,
.dialog-large .dialog-body,
.dialog-large .dialog-footer,
.dialog-alert .dialog-header,
.dialog-alert .dialog-body,
.dialog-alert .dialog-footer,
.dialog-confirm .dialog-header,
.dialog-confirm .dialog-body,
.dialog-confirm .dialog-footer {
    background: none !important;
}

.dialog-large .dialog-header,
.dialog-alert .dialog-header,
.dialog-confirm .dialog-header {
    height: .8rem !important;
}

.dialog-large .dialog-header-title {
    color: white !important;
    font-weight: bold !important;
    line-height: .6rem !important;
    font-size: .3rem !important;
    letter-spacing: .1rem;
    padding-left: .2rem;
}

.dialog-large .dialog-closebtn {
    position: absolute !important;
    right: -1rem !important;
    top: 0 !important;
    background: url(../image/icon_close.png) no-repeat center !important;
    background-size: 100% auto !important;
    font-size: 0 !important;
    width: .63rem !important;
    height: .61rem !important;
}

.dialog-large .dialog-header-title,
.dialog-alert .dialog-header-title,
.dialog-confirm .dialog-header-title {
    line-height: .6rem !important;
    color: white !important;
}

.dialog-large .dialog-body,
.dialog-alert .dialog-body,
.dialog-confirm .dialog-body {
    padding: .1rem !important;
    min-height: .5rem !important;
}

.dialog-large .dialog-footer,
.dialog-alert .dialog-footer,
.dialog-confirm .dialog-footer {
    padding: 0rem !important;
}


@keyframes mouseAnimation {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0rem);
    }

    25% {
        -webkit-transform: translateY(.1rem);
        transform: translateY(.1rem);
    }

    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    75% {
        -webkit-transform: translateY(-.02rem);
        transform: translateY(-.02rem);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes rotateAnimation {
    0% {
        transform: 0;
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes chatAnimation {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}

.bgvedio {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute\9;
    min-width: 100%\9;
    min-height: 100%\9;
    width: auto\9;
    height: auto\9;
    left: 50%\9;
    top: 50%\9;
    transform: translate(-50%, -50%)\9;
}

_:-ms-lang(x),
.bgvedio {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mvvedio {
    width: 97%;
    height: 96%;
    object-fit: cover;
    margin-left: .2rem;
}

.vediopic {
    width: 94%;
    margin-left: .1rem;
}