* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.all_content {
    width: 100vw;
    height: 100vh;
    background-color: #F0F0F0;
    overflow: hidden;
}

.nav_content {
    width: 62.5vw;
    height: 3.96vw;
    background: rgba(253, 253, 253, 0.5);
    margin: 1.46vw auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.78vw;
}

.logo-img {
    display: block;
    width: 9.9vw;
    height: 2.4vw;
    margin-left: 1.15vw;
}

.logo-img > img {
    width: 100%;
}

.nav_content > ul {
    float: right;
    margin-right: 2vw;
}

.nav_content > ul > li {
    list-style: none;
    display: inline-block;
    margin: 0 2.11vw;
    height: 1.04vw;
    line-height: 1.04vw;
    font-size: 1.04vw;
    color: #878787;
    font-weight: 400;
}

.nav_content > ul > li a.active {
    font-weight: 600;
    color: #000;
}

.nav_content > ul > li a {
    cursor: pointer;

}

.main_content {
    margin-top: 1.61vw;
    width: 100vw;
    height: 39vw;
    background: url("https://ruiqu-1304540262.woodsdating.com/408c4f082b5cd47ea6444458dfdb72b6.png") no-repeat;
    background-size: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ys {
    display: flex;
    flex-direction: row;
}

.main_content .left_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-page .main_content .left_content .downloads {
    width: 24.5vw;
}

.home-page .main_content .left_content .downloads_url,
.home-page .main_content .left_content .downloads_qrcode {
    width: 33vw;
    height: 8.13vw;
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-top: 2.34vw;
}

.home-page .main_content .left_content .downloads_url {
    /*animation: fadeIn 1s;*/
}

.home-page .main_content .left_content .downloads_qrcode {
    /*animation: fadeOut 1s;*/
    display: none;
}

.home-page .main_content .left_content .downloads a {
    width: 11.56vw;
    height: 3.13vw;
    display: block;
    position: relative;
}

.home-page .main_content .left_content .downloads a:last-child {
    margin-left: 1.2vw;
}

.home-page .main_content .left_content .downloads a img {
    width: 100%;

}

.home-page .main_content .left_content .downloads a img.downs_qr {
    width: 6vw;
    position: absolute;
    top: 4.13vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 1vw;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 1vw;
}
.home-page .main_content .left_content .downloads_qrcode a {
    width: 9.5vw;
    height: 9.5vw;
    border-radius: 1.17vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DEDEDE;
}

.home-page .main_content .left_content .downloads_qrcode a img {
    width: 8vw;
    height: 8vw;
    border-radius: 0.38vw;

}

.home-page .main_content .left_content .downloads_qrcode a:last-child {
    margin-left: 2.2vw;
}

.main_content .left_content .main_font {
    width: 33.33vw;
    height: 18.16vw;
    display: block;
}

.main_content .right_content {
    width: 30vw;
    /*height: 50.52vw;*/
}

.main_content .right_content img {
    width: 100%;
}

.all_content .live-page {
    width: 100vw;
    /*height: 50vw;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

.all_content .live-page .live-page-title {
    width: 35.83vw;
    height: 9.22vw;
    background: url("https://ruiqu-1304540262.woodsdating.com/0af5c1fd7a7b8856fbb46e40ac4e5e16.png") no-repeat;
    background-size: 100%;
}

.all_content .live-page .live-page-content {
    width: 62.5vw;
    /*height: 54vw;*/
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* 新增的属性 */
    position: relative; /* 新增的属性 */

}

/*.all_content .live-page .live-page-content::after{*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 40%;*/
/*    background: linear-gradient(transparent,black);*/
/*    z-index: 2;*/
/*    cursor: pointer;*/
/*}*/

.all_content .live-page .live-page-content .live-box {
    width: 14.37vw;
    height: 13.37vw;
    margin: 0.7vw 0; /* 修改后的属性 */
    border-radius: 0.73vw;
    position: relative;
    cursor: pointer;
    z-index: 1; /* 确保小盒子在伪元素之下 */
}

.all_content .live-page .live-page-content .live-box .live-item-img {
    width: 14.37vw;
    height: 13.37vw;
}

.all_content .live-page .live-page-content .live-box .live-item-img img {
    width: 100%;
    height: 100%;
    border-radius: 0.73vw;
}

.all_content .live-page .live-page-content .live-box .label1 {
    width: 5.94vw;
    height: 2.02vw;
    position: absolute;
    top: 0.57vw;
    left: .47vw;
}

.all_content .live-page .live-page-content .live-box .label2 {
    width: 14.69vw;
    height: 3.8vw;
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background: url("https://ruiqu-1304540262.woodsdating.com/22fc8d749ff5056c09dd0e9cb78cb390.png") no-repeat;
    background-size: 100%;
    /* 渐变色*/
    /*background: linear-gradient(to top, #020201 0%,#020201 20%,transparent 60%);*/
}

.all_content .live-page .live-page-content .live-box .label2 .label-info,
.all_content .live-page .live-page-content .live-box .label2 .label-value {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-evenly;
}

.all_content .live-page .live-page-content .live-box .label2 span {
    color: #FFFFFF;
    font-size: 0.94vw;
    font-weight: 500;
}

.all_content .live-page .live-page-content .live-box .label2 .liver-label {
    font-size: 0.73vw;
    border-radius: 0.36vw;
    background: rgba(2, 2, 1, 0.1);
    text-align: center;
}

.all_content .live-page .live-page-content .live-box .label2 .label-value span:first-child {
    font-size: .83vw;
}

.all_content .live-page .live-page-content .live-box .label2 .label-value span:last-child {
    font-size: .63vw;
}

.all_content .live-page .live-page-content .live-box .label1 img,
.all_content .live-page .live-page-content .live-box .label2 img {
    width: 100%;
}

/* 关于我们 */

.about-page .main_content .left_content .main_font {
    width: 27.19vw;
    height: 23.39vw;
}

.about-page .main_content .left_content .downloads {
    width: 33vw;
    height: 8.13vw;
    display: flex;
    flex-direction: row;
    justify-content: start;
    /*margin-top: 2.34vw;*/
}

.about-page .main_content .left_content .downloads a {
    width: 11.56vw;
    height: 3.13vw;
    display: block;
}

.about-page .main_content .left_content .downloads a:last-child {
    margin-left: 1.2vw;
}

.about-page .main_content .left_content .downloads a img {
    width: 100%;

}

.about-page .main_content .left_content .downloads {
    width: 24.5vw;
}

.about-page .main_content .left_content .downloads_url,
.about-page .main_content .left_content .downloads_qrcode {
    width: 33vw;
    height: 3.13vw;
    display: flex;
    flex-direction: row;
    justify-content: start;
    margin-top: 2.34vw;
}

.about-page .main_content .left_content .downloads_qrcode {
    position: absolute;
    /*bottom: 7vw;*/
}

.about-page .main_content .left_content .downloads_url {
    /*animation: fadeIn 1s;*/
}

.about-page .main_content .left_content .downloads_qrcode {
    /*animation: fadeOut 1s;*/
    display: none;
}


.about-page .main_content .left_content .downloads a {
    width: 11.56vw;
    height: 3.13vw;
    display: block;
}


.about-page .main_content .left_content .downloads_qrcode a {
    width: 9.5vw;
    height: 9.5vw;
    border-radius: 1.17vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DEDEDE;
}

.about-page .main_content .left_content .downloads_qrcode a img {
    width: 8vw;
    height: 8vw;
    border-radius: 0.38vw;

}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/*
special css
*/
/* 直播tab 黑色底 */
.dark {
    background-color: #000;
}

.all_content.dark .nav_content > ul > li a {
    color: #7d7d7d;
    font-weight: 400;
}

.all_content.dark .nav_content > ul > li a.active {
    color: #fff;
    font-weight: 600;
}

.all_content.dark .nav_content {
    background: rgba(253, 253, 253, 0.15);
}


/* 切换显示隐藏 */
/*.all_content .home-page{*/
/*    display:none;*/
/*}*/
/*.all_content .live-page{*/
/*    display:none;*/
/*}*/

/*遮罩层*/
.mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明的黑色背景 */
    display: none; /* 初始状态下，遮罩层是隐藏的 */
    z-index: 999;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 让子元素垂直排列 */
}

.mask-content {
    width: 16vw;
    height: 20vw;
    background: url("https://ruiqu-1304540262.woodsdating.com/8edc1715b231cb0e37c3c54c089c6c9a.png") no-repeat;
    background-size: 100%;
    /*background-color: #ffffff;*/
    margin-bottom: 2vw;
    border-radius: 1.88vw;
    display: flex;
    justify-content: center;

}

.mask-content .qr-img {
    width: 11.67vw;
    height: 11.67vw;
    margin-top: 2vw;
}

.close-btn {
    cursor: pointer;
    width: 1.82vw;
    height: 1.82vw;
    border-radius: 50%;
    color: #fff;
    line-height: 1.82vw;
    text-align: center;
    background: rgba(255, 255, 255, 0.41);


}

/* 直播tab 黑色底 */
.dark {
    background-color: #000;
}

/*.all_content .home-page{*/
/*    display: none;*/
/*}*/
.all_content .live-page {
    display: none;
}

.all_content .about-page {
    display: none;
}

.all_content .home-page .swiper-button-prev,
.all_content .home-page .swiper-button-next {
    opacity: 0.1;
    transition: all 1s;
}

.all_content .home-page .swiper-button-prev:hover,
.all_content .home-page .swiper-button-next:hover {
    opacity: 1;
}
.about-page .main_content .left_content .downloads a{
    position: relative;
}
.about-page .main_content .left_content .downloads a img.downs_qr {
    width: 6vw;
    position: absolute;
    top: 3.13vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 1vw;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 1vw;
}
.about-page .main_content .left_content .downloads_qrcode a {
    width: 9.5vw;
    height: 9.5vw;
    border-radius: 1.17vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #DEDEDE;
}

.about-page .main_content .left_content .downloads_qrcode a img {
    width: 8vw;
    height: 8vw;
    border-radius: 0.38vw;

}
.downs_qr {
    opacity: 0;
    transition: opacity .5s;
}

/*.iosDownImage,.AndroidDownImage{*/
/*    position: relative;*/
/*}*/
/*.downs_img,.downs_qr{*/
/*    transition: opacity .5s;*/
/*    position: absolute;*/
/*    top:0;*/
/*}*/
/*.downs_qr{*/
/*    display: none;*/
/*}*/
