/* 65.48 */


.cover-index {
    background: url(/pc/images/index/cover-index.jpg) no-repeat bottom/100% 100%;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}





/* index1 */


.index1-slide .cover-index1 {
    background: url(/pc/images/index/bg1.jpg) no-repeat bottom/100% 100%;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}


.index1-slide.ani-slide .index1-ren {
    animation: slatex-no-opacity 1s ease-in-out forwards;

}

.index1-slide.ani-slide .index1-wenzi {
    animation: slatex3 1s ease-in-out forwards
}

.index1-slide.ani-slide .index1-yp1 {
    animation: slatex 1s ease-in-out forwards
}


.index1-slide.ani-slide .index1-yp2 {
    animation: slatey2 1s ease-in-out forwards
}

.index1-slide.ani-slide .index1-bottom {
    animation: slatex 1s ease-in-out forwards
}


.index1-slide .index1-ren {

    transform: translate(-1.5rem);
    width: 9.07rem;
    height: 7.66rem;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 6;
    opacity: 1;
    /* 始终可见 */
    transform: translateX(-1.5rem);
    /* 初始偏移位置 */
    transform: translateX(-1.5rem) translateZ(0);
    /* 开启合成层也可以 */
}


@keyframes greenSlideIn {
    to {
        transform: translateX(0);
    }
}


.index1-slide .index1-wenzi {

    opacity: 0;
    position: absolute;
    top: 56%;
    left: 56%;
    width: 8.29rem;
    height: 3.09rem;
    z-index: 9;
}

.index1-slide .index1-bottom {
    opacity: 0;
    position: absolute;
    bottom: 0;
    transform-origin: right bottom;
    width: 11.45rem;
    height: 7.99rem;
    z-index: 4;


}

.index1-slide .index1-bottom img {

    transform-origin: center;

    display: block;
    width: 100%;
    height: auto;
    backface-visibility: hidden;
    /* 防止合成错乱 */
}



.index1-slide .index1-yp1 {

    opacity: 0;
    position: absolute;
    top: 0;
    /* height: 4.26rem;
    width: 12.73rem; */
    width: 100%;
    z-index: 3;
}


.index1-slide .index1-yp2 {

    opacity: 0;
    position: absolute;
    width: 100%;
    top: -30%;
    /* height: 4.26rem;
    width: 12.73rem; */

    z-index: 2;
}


/* index2 */


.index2-slide.ani-slide .index2-ren {
    animation: slatex3-no-opacity 1s ease-in-out forwards
}

.index2-slide.ani-slide .index2-wenzi {
    animation: slatex 1s ease-in-out forwards
}

.index2-slide.ani-slide .index2-bottom {
    animation: slatex3 1s ease-in-out forwards
}

.index2-slide.ani-slide .index2-jy {
    animation: slatex3-no-opacity 1s ease-in-out 0.2s forwards
}


.index2-slide .index2-jy {
 
    transform: translate(-.5rem);
    width: 12.58rem;
    height: 7.71rem;
    position: absolute;
    right: 1.7rem;
    bottom: 1.7rem;
    z-index: 5;


    opacity: 1;
    /* 始终可见 */
    transform: translateX(0.5rem);
    /* 初始偏移位置 */
    transform: translateX(0.5rem) translateZ(0);
    /* 开启合成层也可以 */

}
.index2-slide .index2-ren {
    /* display: inline-flex;
    flex-direction: column;
   
    justify-content: flex-end;
    margin-left: .99rem;
    opacity: 0;
    transform: scale(.9) translateY(.5rem);
    position: absolute;
    z-index: 2; 
       
    */
    transform: translate(-.5rem);
    width: 12.14rem;
    height: 7.77rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;


    opacity: 1;
    /* 始终可见 */
    transform: translateX(0.5rem);
    /* 初始偏移位置 */
    transform: translateX(0.5rem) translateZ(0);
    /* 开启合成层也可以 */

}


.index2-slide .index2-wenzi {

    opacity: 0;
    position: absolute;
    top: 43%;
    left: 3%;
    width: 10.45rem;
    height: 3.88rem;

    z-index: 9;
}

.index2-slide .index2-bottom {

    opacity: 0;
    position: absolute;
    right: 0;
    bottom: 0;

    transform-origin: left bottom;
    width: 11.45rem;
    height: 7.99rem;
    z-index: 2;
}

.index2-slide .index2-bottom img {
    transform: scaleX(-1);
    transform-origin: center;
}




/* index3 */


.index3-slide.ani-slide .index3-ren {
    animation: slatex-no-opacity 1s ease-in-out forwards
}

.index3-slide.ani-slide .index3-wenzi {
    animation: slatex3 1s ease-in-out forwards
}

.index3-slide.ani-slide .index3-bottom {
    animation: slatex 1s ease-in-out forwards
}


.index3-slide .index3-ren {
    /* display: inline-flex;
    flex-direction: column;
   
    justify-content: flex-end;
    margin-left: .99rem;
    opacity: 0;
    transform: scale(.9) translateY(.5rem);
    position: absolute;
    z-index: 2;  */
    width: 9.43rem;
    height: 9.43rem;

    transform: translate(-1.5rem);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    opacity: 1;
    /* 始终可见 */
    transform: translateX(-1.5rem);
    /* 初始偏移位置 */
    transform: translateX(-1.5rem) translateZ(0);
    /* 开启合成层也可以 */
}


.index3-slide .index3-wenzi {

    opacity: 0;
    position: absolute;
    top: 40%;
    left: 50%;
    width: 8.34rem;
    height: 2.79rem;

    z-index: 9;
}

.index3-slide .index3-bottom {

    opacity: 0;
    position: absolute;
    left: -2rem;
    bottom: 0;

    transform-origin: right bottom;
    width: 11.45rem;
    height: 7.99rem;
    z-index: 2;
}


/* about */


.about-slide {
    align-items: center;
    display: flex;
}

.about-slide.ani-slide .about-html {
    animation: fadeUp .5s ease-in-out forwards
}


.about-slide.ani-slide .qx-bot .title {
    animation: slatex .4s ease-in-out forwards
}

.about-slide.ani-slide .qx-ctrl,
.about-slide.ani-slide .qx-swp {
    animation: slatey2 .4s ease-in-out forwards
}



@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-slide .cen-box {
    display: flex;
    flex-direction: column;
    height: 7.75rem;
    justify-content: flex-end;
    width: 100%
}


.about-slide .about-html {
    opacity: 0;
    width: 4.13rem;
    height: 7.17rem;
    top: 14.5%;
    position: absolute;
    left: 9%;
    bottom: 0;
    z-index: 4;


}


.about-slide .about-html .about-title {

    width: 4.13rem;
    height: 0.5rem;
    display: inline;
    margin-left: 1.05rem;
    letter-spacing: 0.05rem;
}

.about-slide .about-html .about-space {
    height: 0.2rem;
}

.about-slide .about-html .about-title span {
    font-size: 0.47rem;
    text-align: center;
    color: #ffffff;
    font-weight: bold;

}

.about-slide .about-html .about-tiao {

    width: 4.13rem;
    height: 0.06rem;
    display: inline;
}

.about-slide .about-html .about-content {

    width: 4.13rem;
    height: 6.24rem;
    display: inline;

    font-size: .14rem;
    line-height: .28rem;
    overflow: hidden;
    text-align: left;
    vertical-align: top;
    color: #ffffff;
}

.about-slide .about-html .about-content .sh {
    color: #02ff85;
    font-weight: bold;
}



.about-slide .about-video {

    position: absolute;
    /* top: 40%;
    left: 50%; */
    width: 70%;
    height: 80%;

    right: 0;
    bottom: 0;
    z-index: 3;

    /* border: 1px solid  #610000 !important; */
}


.about-slide .about-video .kvbox {
    height: 100%;
    position: relative;
    width: 100%
}

.about-slide .about-video .kvbox .kv-video {
    height: 100%;
    left: 0;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    top: 30%;
    transform: translateY(-30%);
    width: 100%
}



.about-scene {
    width: 70%;
    height: 100%;
    perspective: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 6rem;
    bottom: 0;
}

.tilt-wrapper {
    transform: rotateX(-10deg);
    transform-style: preserve-3d;
}

#about-carousel {
    position: relative;
    width: 6rem;
    height: 6rem;
    transform-style: preserve-3d;
}

.carousel-img {
    position: absolute;
    width: 4.14rem;
    height: 2.75rem;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    margin: -1.72rem 0 0 -2.59rem;
}


#centerImg {
    position: absolute;
    width: 6.36rem;
    height: 9.54rem;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    bottom: 0;
    /* box-shadow: 0 0 40px rgba(255,255,255,0.4); */
}

/* anli */



.rongyu-slide {
    align-items: center;
    display: flex;
}


.rongyu-slide .cover-index {
    background: url(/pc/images/anli/anlibg.jpg) no-repeat bottom/100% 100%;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}


.rongyu-slide.ani-slide .rongyu-bot .title {
    animation: slatex .4s ease-in-out forwards
}

.rongyu-slide.ani-slide .rongyu-ctrl,
.rongyu-slide.ani-slide .rongyu-swp {
    animation: slatey2 .4s ease-in-out forwards
}

.rongyu-slide .cen-box {
    display: flex;
    flex-direction: column;
    height: 7.75rem;
    justify-content: flex-end;
    width: 100%;

}

.rongyu-slide .rongyu-swp {
    height: 4.25rem;
    opacity: 0;
    transform: translateY(-.5rem);
    width: 100%;

    top: 10%;
}

.rongyu-slide .rongyu-swp .rongyu-wrap {
    height: 100%;
    width: 100%
}

.rongyu-slide .rongyu-swp .rongyu-slide2 {
    /* background: #244152; */
    width: 5rem;
    height: 4rem;
    /* mask: url(/pc/images/anli/anli-mask.png) no-repeat center center/cover; */

}

/* .rongyu-slide .rongyu-swp .rongyu-slide2:before {
    background: url(/pc/images/anli/anli-line.png) 50% no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5
}

.rongyu-slide .rongyu-swp .rongyu-slide2:after {
    background: url(/pc/images/anli/anli-shadow.png) bottom no-repeat;
    background-size: 100% 100%;
    bottom: 0;
    content: "";
    height: 1.35rem;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 100%
} */

.rongyu-slide .rongyu-swp .rongyu-slide2 img {
    opacity: .3;
    transition: all .3s ease;
    width: 100%;
    height: auto;
}

.rongyu-slide .rongyu-swp .rongyu-slide2 .tit {
    align-items: center;
    /* bottom: .1rem; */
    box-sizing: border-box;
    color: #fff;
    /* display: flex; */
    /* font-size: .28rem; */
    height: .45rem;
    left: -50%;
    /* opacity: 0; */
    text-align: center;
    /* padding: 0 0 .13rem .3rem; */
    padding-top: 0.13rem;
    position: absolute;
    width: 200%;
    z-index: 2
}


.rongyu-slide .rongyu-swp .rongyu-slide2 .btn-video {
    display: none;
    height: 1.07rem;
    left: 50%;
    margin: -.535rem 0 0 -.535rem;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 1.07rem;
    z-index: 10
}

.rongyu-slide .rongyu-swp .rongyu-slide2 .btn-video:before {
    animation: scale 3s linear infinite;
    background: url(/pc/imgs/vbtn.png) 50% no-repeat;
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.rongyu-slide .rongyu-swp .rongyu-slide2.swiper-slide-active .tit,
.rongyu-slide .rongyu-swp .rongyu-slide2.swiper-slide-active img {
    opacity: 1
}

.rongyu-slide .rongyu-swp .rongyu-slide2.swiper-slide-active .btn-video.show {
    animation: fade-in .3s ease-in-out forwards;
    display: block
}

.rongyu-slide .rongyu-bot {
    height: 1.72rem;
    margin: .29rem auto 0;
    position: relative;
    width: 13.86rem
}

.rongyu-slide .rongyu-bot .title {
    opacity: 0;
    padding-bottom: 0;
    transform: translateX(.5rem)
}

.rongyu-slide .rongyu-bot .title:after,
.rongyu-slide .rongyu-bot .title:before {
    display: none
}

.rongyu-slide .rongyu-bot .title span {
    margin: .16rem auto .11rem
}






.rongyu-slide .rongyu-ctrl .btn-next-yj {
    transform: rotate(180deg)
}


.rongyu-slide .rongyu-ctrl {
    align-items: center;
    display: flex;
    height: .35rem;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    width: 7.54rem;
    margin-top: 1rem;

    z-index: 2;
    /* 大于 .cover-index 的 z-index: 1 */
}



.rongyu-slide .rongyu-ctrl s {
    background-image: url(/pc/images/anli/dian.png);
    background-repeat: repeat-x;
    background-size: auto 100%;
    height: .08rem;
    width: 100%;
}



.rongyu-slide .rongyu-html {
    /* display: inline-flex;
    flex-direction: column;
   
    justify-content: flex-end;
    margin-left: .99rem;
    opacity: 0;
    transform: scale(.9) translateY(.5rem);
    position: absolute;
    z-index: 2;  */
    width: 4.13rem;
    height: 0.9rem;
    top: 17%;
    transform: translate(-.5rem);
    position: absolute;
    left: 41.9%;
    bottom: 0;
    z-index: 4;
    /* border: 1px solid  #00610f !important; */
}

.rongyu-slide .rongyu-html .rongyu-title {

    width: 4.13rem;
    height: 0.5rem;
    display: inline;
    margin-left: 1.17rem;

}

.rongyu-slide .rongyu-html .rongyu-title span {
    font-size: 0.45rem;
    font-weight: bold;
    text-align: center;
    color: white;

}

.rongyu-slide .rongyu-html .rongyu-tiao {

    width: 4.13rem;
    height: 0.06rem;
    display: inline;
}

.rongyu-slide .rongyu-html .rongyu-tiao img {
    margin-top: 0.06rem;
}



/* 1. 去掉原有背景图，显示图片 */
.rongyu-slide .rongyu-ctrl .indicator-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    height: auto;
    width: auto;
    position: relative;
    z-index: 3;
    padding: 0.1rem 0.2rem;
}

/* 2. 定义 dot 样式，替换文字为图片 */
.indicator-dots .dot {
    display: inline-block;
    height: .08rem;
    width: .08rem;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 0.05rem;

}

/* 3. 使用 white.png 和 black.png 替代 * 和 @ */
.indicator-dots .dot {
    background-image: url(/pc/images/anli/white.png);
    /* 默认使用 right.png */

}

.indicator-dots .dot.active {
    background-image: url(/pc/images/anli/black.png);
    /* 当 active 的时候，使用 black.png */

}

/* 4. hover 效果 */
.indicator-dots .dot:hover {
    transform: scale(1.2);
}

/* 5. 特别处理左右按钮外的样式 */
/* .rongyu-slide .rongyu-ctrl .btn-prev-yj,
.rongyu-slide .rongyu-ctrl .btn-next-yj {
    background-image: url(/pc/images/anli/right.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 25px;
    height: 25px;
} */

.rongyu-slide .rongyu-ctrl .btn-next-yj,
.rongyu-slide .rongyu-ctrl .btn-prev-yj {
    background: url(/pc/images/anli/left.png) 50% no-repeat;
    background-size: .2rem .33rem;
    height: .35rem;
    width: .27rem
}

/* game slide */


.games-slide .cen-box {
    bottom: 0;
    height: 32%;
    position: fixed;
    width: 100%;
    /* border: 1px solid  #610000 !important; */
}

.games-slide .cen-box div {
    height: 0.46rem;
}

.games-slide .cen-box p {
    font-size: 0.16rem;
    color: #fff;
    letter-spacing: 0.02rem;
}

.games-slide .cen-box .gamekinds {
    color: #02ff85;
    font-weight: bold;

}

.games-slide .cen-box .flex-align-top {
    display: flex;
    align-items: flex-start;
    /* 顶部对齐 */
}


.games-slide .cen-box .games-ticai {
    bottom: 0;
    width: 100%;
    left: 20%;
    float: left;
    margin-top: 0.2rem;
}

.games-slide .cen-box .games-shichang {
    bottom: 0;
    width: 100%;
    left: 20%;
    float: left;
}

.games-slide .cen-box .games-jianjie {
    bottom: 0;
    width: 100%;
    left: 20%;
    float: left;
}




.games-slide:before {
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2.17rem
}

.games-slide.ani-slide .games-box {
    animation: slatex .4s ease-in-out forwards
}

.games-slide.ani-slide .txt {
    animation: slatey .4s ease-in-out forwards
}

.games-slide.ani-slide .tab-box {
    animation: slatey .4s ease-in-out .2s forwards
}

.games-slide .games-box {

    margin-top: -2.8rem;
    margin-left: 1.35rem;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translateX(-.5rem);
    z-index: 2
}

.games-slide .games-box .games-grid {
    display: grid;
    grid-template-columns: repeat(3, 0.96rem);
    /* 图片边长建议一致 */
    grid-template-rows: repeat(3, 0.96rem);
    gap: 0;
    transform: rotate(45deg);
    /* 整体倾斜，使图片对角方向排列 */
}

.games-slide .games-box .games-grid .diamond {
    width: 1.44rem;
    height: 1.44rem;
    transform: rotate(-45deg);
    position: relative;
    transition: 0.3s;
    overflow: visible;
    display: block;
    cursor: pointer;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.games-slide .games-box .games-grid .diamond .inner {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.games-slide .games-box .games-grid .diamond .inner img {
    transform: scale(.8);
}


.games-slide .games-box .games-grid .diamond .inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 0.1rem solid transparent;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    transition: 0.3s;
}

.games-slide .games-box .games-grid .diamond.selected .inner::before {
    border-color: #02ff65;
}

.games-jianjie-txt {
    width: 40%;
    display: inline-block;
    vertical-align: middle;
}

/* .games-slide .games-box .games-bottom {
    animation: slatex  0.4s ease-in-out forwards
}


.games-slide .games-box .games-bottom
{
    opacity: 0;
    position: absolute;
    left: -2rem;
    bottom: 0; 
   
    transform-origin: right bottom;
    width: 11.45rem; 
    height: 7.99rem;
    z-index: 2;
} */




.games-slide .gm-bg {
    top: 0
}

.games-slide .gm-bg,
.games-slide .gm-bg video {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%
}

.games-slide .gm-bg video {
    object-fit: cover;
    object-position: center center;
    top: 50%;
    transform: translateY(-50%)
}


.games-slide .nobottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30%;
    margin-bottom: 0.4rem;
    background-color: rgba(0, 0, 0, 0.3);
    /* border: 1px solid  #610000 !important; */
}

/* 不能运动? */
.games-slide .nobottom .nobottommove {
    /* animation: slatey .4s ease-in-out .2s forwards */
}



.games-slide .tab-box {
    bottom: .98rem;
    display: flex;
    left: 50%;
    margin-left: -7rem;
    opacity: 0;
    position: absolute;
    transform: translateY(.5rem);
    width: 14rem;
    z-index: 30
}

.games-slide .tab-box,
.games-slide .tab-box .tab {
    align-items: center;
    height: .46rem;
    justify-content: center
}

.games-slide .tab-box .tab {
    background-size: 100% 100%;
    color: #fbfbfd;
    display: inline-flex;
    font-size: .32rem;
    margin: 0 .35rem;
    min-width: 1.35rem;
    padding: 0 .15rem
}



.games-slide .gm-swp,
.games-slide .gm-swp .gm-slide,
.games-slide .gm-swp .gm-wrap {
    height: 100%;
    width: 100%
}

.games-slide .gm-swp .gm-slide .gameimg {
    box-sizing: border-box;
    width: 5.12rem;
    position: absolute;
    left: 0.2rem;
    top: -0.2rem;
    transform: translateY(0.5rem);

}
.games-slide .gm-swp .gm-slide .gameimg img {
    width: 5.12rem;
}

/* 补充 */
/* 产品图标：鼠标移入绿框 + 点击时绿框放大缩小动画 */
.games-slide .games-grid .diamond .inner::before {
    /* 已有样式基础上加动画 */
    transition: border-color 0.3s, transform 0.3s;
}

.games-slide .games-grid .diamond:hover .inner::before {
    border-color: #02ff65;
}

.games-slide .games-grid .diamond.selected .inner::before {
    border-color: #02ff65;
    animation: scaleFlash 0.3s ease-in-out;
}

@keyframes scaleFlash {
    0% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }
}


/* 2. 下方 logo 放大 + 介绍文字左右滑动动画 */



/* 3. 增加左右翻按钮 */
.gm-nav-btns {
    position: absolute;
    top: 45%;
    left: 2%;
    right: 2%;
    display: flex;
    justify-content: space-between;
    z-index: 2;
}

.gm-btn-prev,
.gm-btn-next {
    font-size: 0.5rem;
    color: #fff;
    cursor: pointer;
    user-select: none;
    transition: transform 0.2s;
}

.gm-btn-prev:hover,
.gm-btn-next:hover {
    transform: scale(1.2);
}

.gm-fullplay-btn {
    background: url(/pc/images/game/play.png) 50% no-repeat;
    background-size: 1.75rem 0.44rem;
    width: 1.75rem;
    height: 0.44rem;
    position: relative;
    cursor: pointer;
}

.gm-fullplay-btn span {
    position: absolute;
    top: 49%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: .2rem;
    color: #000;
    font-weight: bold;
    white-space: nowrap;
}

.nobottommove {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  
  /* 左侧固定最大宽度 */
  .left-box {
    width: 5.12rem;
    max-width: 5.12rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem;
    box-sizing: border-box;
  }
  
  .left-box .gameimg img {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
  }
  
  /* 右边自动撑满剩余空间 */
  .right-box {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 0.3rem;
    box-sizing: border-box;
  }
  
  .right-box .cen-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    overflow: hidden;
  }
  

/* hezuo slide */

.hezuo-slide .cen-box {
    bottom: 0;
    height: 26%;
    position: fixed;
    width: 100%;
    left: 22.6%;
    /* border: 1px solid  #610000 !important; */
}

.hezuo-slide .stitle {
    width: 100%;
    font-size: .68rem;
    display: block;
    position: absolute;
    z-index: 2;
    left: 42%;
    top: 12%;
    color: white;
    font-weight: bold;
    letter-spacing: .1rem;
}


.hezuo-slide .ks-syzht {

    width: 100%;
    font-size: .48rem;
    display: block;
    position: absolute;
    z-index: 2;
    left: 1.6%;
    top: 29.3%;
    color: white;
    font-weight: bold;
    letter-spacing: .03rem;
}

.hezuo-slide .k-title {
    width: 5rem;
    height: 0.76rem;

}

.hezuo-slide .k-title img {
    width: 5rem;
    height: 0.76rem;
    display: block;
    position: absolute;
    margin-left: 0.1rem;
}

.hezuo-slide .k-title span {
    font-size: .54rem;
    color: white;
    font-weight: bold;
    letter-spacing: .14rem;
    position: absolute;
    margin-left: 0.96rem;
    text-align: center;
    width: 3.4rem;
    z-index: 3;
}

.hezuo-slide .ks-content1 {
    margin-left: 0.3rem;

}

.hezuo-slide .ks-content1 span {
    font-size: .3rem;
    color: white;
    font-weight: bold;
    letter-spacing: .01rem;

}

.hezuo-slide .ks-content2 {
    margin-left: 0.3rem;
    margin-top: 0.12rem;
}

.hezuo-slide .ks-content2 span {
    font-size: .3rem;
    color: white;
    font-weight: bold;
    letter-spacing: .01rem;
}

.hezuo-slide .linkshow {
    font-size: .17rem;
    color: #02ff85;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    top: -11.8%;
    left: 33%;
}


.hezuo-slide .ks-syzht .movenumber {
    font-size: 1.3rem;
    color: #000;
}

.hezuo-slide .ks-syzht .movenumber-gradient {
    background: linear-gradient(to bottom, #ffd700, #02ff65);
    /* 黄色到绿色 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hezuo-slide .ks-syzht .movenumber {
    font-size: 1.3rem;
    font-weight: bold;
    display: inline-block;
}


.hezuo-slide .ks-syzht .addnum {
    font-size: 0.6rem;
    background: linear-gradient(to bottom, #ffd700, #02ff65);
     /* 黄色到绿色 */
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     display: inline-block;
}



.hezuo-slide:before {
    background-size: 100% 100%;
    content: "";
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 2.17rem
}

.hezuo-slide.ani-slide .hezuo-box {
    animation: slatex .4s ease-in-out forwards
}

.hezuo-slide.ani-slide .txt {
    animation: slatey .4s ease-in-out forwards
}

.hezuo-slide.ani-slide .tab-box {
    animation: slatey .4s ease-in-out .2s forwards
}

.hezuo-slide .hezuo-box {

    /* margin-top: -2.8rem;
    margin-left: 1.35rem; */
    opacity: 0;
    position: absolute;
    transform: translateX(-.5rem);
    z-index: 2;
    width: 70%;
    bottom: 5.5%;
    top: 55.7%;

    background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.hezuo-slide .hezuo-box .hezuo-grid {
    margin-left: 0.3rem;
    margin-top: 0.3rem;
}


.hezuo-slide .hezuo-box .hezuo-grid .xtxt {
    position: absolute;
    bottom: 0.07rem;
    /* 你说的“比底部高20px” */
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    /* 默认黑色 */
    font-size: 0.24rem;
    z-index: 3;
    white-space: nowrap;
    pointer-events: none;
    transition: color 0.3s;
}

.hezuo-slide .hezuo-box .hezuo-grid .diamond.selected .xtxt {
    color: #fff;
}

.hezuo-slide .hezuo-box .hezuo-grid .diamond {
    width: 1.98rem;
    height: 1.72rem;
    position: relative;
    float: left;
    display: block;
    cursor: pointer;
}

.hezuo-slide .hezuo-box .hezuo-grid .diamond .inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
}

.hezuo-slide .hezuo-box .hezuo-grid .diamond .inner img {
    transform: scale(.96);
    /* margin-top: 0.05rem; */
    padding-top: 0.06rem;
    object-fit: cover;
    display: block;
}






/* 默认显示白框 */
.hezuo-slide .hezuo-box .hezuo-grid .diamond .inner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1.98rem;
    height: 1.72rem;
    background: url('/pc/images/hezuo/baikuang.png') 50% no-repeat;
    background-size: 100% 100%;
    background-position: center;
    opacity: 1;
    z-index: 1;
    transition: 0.3s;
}

/* 选中项显示绿色框 */
.hezuo-slide .hezuo-box .hezuo-grid .diamond.selected .inner::after {
    background: url('/pc/images/hezuo/lvkuang.png') 50% no-repeat;
    background-size: 100% 100%;

}

/* 不再需要 .before，也不要设置 background-image 给 .before */
.hezuo-slide .hezuo-box .hezuo-grid .diamond .inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.98rem;
    height: 1.72rem;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
    transition: 0.3s;
}

.hezuo-slide .hz-bg {
    top: 0
}

.hezuo-slide .hz-bg,
.hezuo-slide .hz-bg video {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%
}

.hezuo-slide .hz-bg video {
    object-fit: cover;
    object-position: center center;
    top: 50%;
    transform: translateY(-50%)
}



.hezuo-slide .tab-box {
    bottom: .98rem;
    display: flex;
    left: 50%;
    margin-left: -7rem;
    opacity: 0;
    position: absolute;
    transform: translateY(.5rem);
    width: 14rem;
    z-index: 30
}

.hezuo-slide .tab-box,
.hezuo-slide .tab-box .tab {
    align-items: center;
    height: .46rem;
    justify-content: center
}

.hezuo-slide .tab-box .tab {
    background-size: 100% 100%;
    color: #fbfbfd;
    display: inline-flex;
    font-size: .32rem;
    margin: 0 .35rem;
    min-width: 1.35rem;
    padding: 0 .15rem
}

.hezuo-slide .tab-box .tab.on,
.hezuo-slide .tab-box .tab:hover {}

.hezuo-slide .hz-swp,
.hezuo-slide .hz-swp .hz-slide,
.hezuo-slide .hz-swp .hz-wrap {
    height: 100%;
    width: 100%
}




/* biaodan提交 */
.lianxi-slide.ani-slide .form-container {
    animation: slideUpFadeIn 0.6s ease-out forwards;
}

@keyframes slideUpFadeIn {
    from {
        transform: translateY(2rem);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.lianxi-slide .cen-box {
    /* display: flex; */
    position: absolute;
    flex-direction: column;
    height: 7.75rem;
    justify-content: flex-end;
    width: 52%;
    left: 24%;
    top: 20%;
}



/* 若需兼容性更强的自定义样式，可以考虑以下伪类方式（可选） */
.lianxi-slide input[type="radio"] {
    appearance: none;
    width: .14rem;
    height: .14rem;
    border: .02rem solid #ffd700;
    border-radius: 50%;
    position: relative;
    margin-right: 0.04rem;
    vertical-align: middle;
}

.lianxi-slide input[type="radio"]:checked::after {
    content: "";
    width: 0.08rem;
    height: 0.08rem;
    background: #ffd700;
    border-radius: 50%;
    position: absolute;
    top: 0.015rem;
    left: 0.015rem;
}

/* select 框本体：字体白色，背景透明 */
.lianxi-slide select {
    color: #fff;
    background-color: transparent;
    border: 1px solid #ccc;
    padding: 0.1rem 0.2rem;
    appearance: none;
    /* 去除原生样式 */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    z-index: 1;
}

/* 伪元素可选：模拟下拉箭头（可选） */
.lianxi-slide select::after {
    content: "▼";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #fff;
}

/* 下拉选项样式（只能通过伪类影响部分浏览器）*/
.lianxi-slide select option {
    background-color: #000;
    /* 黑色背景 */
    color: #fff;
    /* 白色文字 */
}



.form-container {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem;
    padding: .2rem;
    opacity: 0;
}

.form-container .required-star {
    color: red;
    margin-left: 0.05rem;
}

.form-container form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: .2rem;
}

.form-container .form-left,
.form-container .form-right {
    flex: 1;
    min-width: 300px;
    margin-top: 0.67rem;
}

.shine-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(to right, #ffd700, #ffc107);
    /* 背景颜色可自定 */
    color: #000;
    font-size: 1rem;
    padding: 0.4rem 1.2rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
    border-radius: 0.2rem;
}

.shine-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    transform: skewX(-20deg);
}

.shine-btn:hover::before {
    animation: shine 1s forwards;
}

@keyframes shine {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

/* 鼠标移入放大 */
.shine-btn:hover {
    transform: scale(1.05);
}


.form-group-title .fazx {
    position: absolute;
    float: left;
    width: 20%;
    font-size: .3rem;
    color: #02ff85;
    /*margin-top: 0.2rem;*/
    /* border: 1px solid  #00610f !important; */
}

.form-group-title .lix-title-box {
    position: absolute;
    width: 45%;
    margin-left: 5.24rem;
    /* border: 1px solid  #a0f !important; */
}


.form-group-title .lix-title-box .lix-title {
    font-size: 0.18rem;
    width: 45%;
    float: left;
}

.form-group-title .lix-title-box .lix-title .hex2 {
    color: #02ff85;
}


.form-group-title .lix-title-box .lix-title .tpx {
    margin-top: .2rem;
}

.form-container h2 {
    color: #02ff65;
}

.form-container .form-group {
    background-color: #333943;
    /* 黄色背景 */
    border-radius: 0.2rem;
    /* 圆角 */
    padding: 0.1rem;
    margin-bottom: 0.1rem;
    position: relative;
}

.form-container .options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem;
    width: 70%;
}

.form-container .tcd3 {
    width: 21%;
    float: left;
}

.form-container .options label {
    width: 30%;
    /* 控制每个选项宽度 */
}

.form-group {
    color: #fff;
    font-size: .14rem;
    line-height: 0.5rem;
}

.form-group .lxtip {
    width: 0.12rem;
    height: 0.12rem;
    vertical-align: middle;
}

.form-group .lxtiptxt {
    display: inline-flex;
    align-items: center;
    /* 垂直居中对齐 */
    gap: 0.1rem;
    /* 图标与文字之间的间距 */
    font-size: 0.14rem;
    /* 可根据需要调 */
    color: #fff;
    /* 保持和你整体样式一致 */
}

.form-group select {
    background-image: url('/pc/images/lianxi/xialai.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.35rem auto;
    /* 根据图片大小调整 */

    padding-right: 0.3rem;
    /* 给图片留出空间 */
    background-color: transparent;
    appearance: none;
    /* 去除浏览器默认样式 */
    -webkit-appearance: none;
    -moz-appearance: none;

    color: #ffffff;
    border: none;
    border-radius: 0.04rem;
    padding: 0.06rem;
    margin-top: 0.05rem;
    box-sizing: border-box;
}

.form-container input[type="text"],
.form-container textarea {
    background-color: transparent;
    /* 背景透明 */
    border: none;
    outline: none;
    color: #ffffff;
    /* 字体颜色可见，否则用户看不到输入内容 */
    width: 90%;
    padding: 0.06rem;
    margin-top: 0.05rem;
    font-size: .15rem;
    border-radius: 0.04rem;
    box-sizing: border-box;
}

.form-container select {

    width: 25%;
    padding: 0.06rem;
    margin-top: 0.05rem;
    border-radius: 0.04rem;
    border: none;
    box-sizing: border-box;
}

.form-container textarea {
    height: 1.13rem;
}

.form-container button[type="submit"] {
    background: #02ff65;
    color: #000;
    border: none;
    padding: 0.2rem 0.5rem;
    font-size: 0.35rem;
    cursor: pointer;
    border-radius: 0.15rem;
}

.form-container .form-submit {
    width: 100%;
    text-align: center;
    margin-top: .1rem;
}

.form-container input::placeholder,
.form-container textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
    /* 占位符字体颜色（浅灰） */
}




/* 弹窗样式 */

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.4s ease forwards;
}

/* .cen-box  .modal-content {
    background: #fff;
    color: #000;
    margin: 10% auto;
    padding: 2rem;
    width: 80%;
    max-width: 500px;
    border-radius: 0.6rem;
    text-align: center;
    transform: scale(0.6);
    opacity: 0;
    animation: popupIn 0.4s ease forwards;
  } */


.modal-content {
    width: 50%;
    /* max-width: 8rem; */
    background-color: #fff;
    border-radius: 0.3rem;
    overflow: hidden;
    margin: 11% auto;
    font-size: 0.28rem;
    color: #000;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
    position: relative;
    transform: scale(0.6);
    opacity: 0;
    animation: popupIn 0.4s ease forwards;
}

/* 顶部背景条 */
.popup-header {
    background: url('/pc/images/lianxi/pupTtitle.png') no-repeat center/cover;
    height: 1.64rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-text {
    color: #00ff85;
    font-weight: bold;
    font-size: 0.32rem;
    text-align: center;
}

/* 关闭按钮 */
.popup-close {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    width: 0.8rem;
    height: 0.8rem;
    background: url('/pc/images/lianxi/pupClose.png') no-repeat center/contain;
    cursor: pointer;
}

/* 内容区域 */
.popup-content {
    padding: 0.4rem 0.3rem 0.6rem;
    text-align: center;
}

.popup-subtitle {
    font-size: 0.28rem;
    margin-bottom: 0.4rem;
    color: #000;
}

/* 二维码列表 */
.qr-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.qr-item {
    flex: 1 1 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.24rem;
    color: #000;
}

.qr-item img {
    width: 1.8rem;
    height: 1.8rem;
    margin-bottom: 0.2rem;
    object-fit: contain;
}





@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popupIn {
    from {
        transform: scale(0.6);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}




/* 底部/ */


.footer {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 9999
}

.footer.on .btn-copyright span {
    color: #fff
}

.footer.on .btn-copyright i {
    transform: rotate(180deg)
}

.footer.on #dq-copyRight {
    transform: translate(0)
}

.footer .btn-copyright {
    align-items: center;
    bottom: .3rem;
    display: flex;
    height: .32rem;
    justify-content: center;
    position: absolute;
    right: .4rem;
    width: 1.6rem;
    z-index: 3
}

.footer .btn-copyright span {
    color: #fff;
    font-family: "\5FAE\8F6F\96C5\9ED1", Microsoft YaHei;
    font-size: .12rem
}

.footer .btn-copyright i {
    background: url(/pc/imgs/c-zk.png) 50% no-repeat;
    background-size: 100% 100%;
    height: .18rem;
    margin-left: .1rem;
    width: .18rem
}

.footer #dq-copyRight {
    background: #000;
    bottom: 0;
    font-family: "\5FAE\8F6F\96C5\9ED1", Microsoft YaHei;
    left: 0;
    position: absolute;
    transform: translateY(100%);
    transition: all .1s;
    z-index: 1;
    width: 100%;
}


/* // */


.site-footer {
    background-color: #000;
    color: #ccc;
    font-size: 0.14rem;
    padding: 0.1rem 0.2rem;
    text-align: center;

}

.footer-top {
    display: flex;
    flex-direction: row;
    /* 将column改为row */
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 0.1rem;
    justify-content: center;
    /* 添加水平居中 */
}

.footer-info {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-info .icon {
    display: inline-block;
    width: 0.18rem;
    height: 0.18rem;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 0.05rem;
}

.footer-info .phone {
    background-image: url('/pc/images/lianxi/phoneicon.png');
}

.footer-info .email {
    background-image: url('/pc/images/lianxi/emailicon.png');
}

.footer-info .label {
    color: #999;
}

.footer-info .highlight {
    color: #fff;
    margin: 0 0.05rem;
}

.footer-address {
    color: #ccc;
    margin: 0.1rem auto;
    max-width: 80%;
    font-size: 0.13rem;
}

.footer-line {
    border: none;
    border-top: 1px solid #333;
    margin: 0.1rem auto;
    width: 40%;
}

.footer-bottom {
    font-size: 0.13rem;
    color: #fff;
}

.footer-bottom .icp {
    margin-left: 0.1rem;
    color: #fff;
}




/* 弹窗蒙层 */
.modalmd {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: .40rem .20rem;
    margin-top: 4.8%;
    height: 62%;
}

.modalmd.show {
    display: flex;
}

.modalmd-title {
    color: white;
    font-size: .5rem;
    margin-bottom: 0.3rem;
    font-weight: bold;
}

.close-btn {
    position: absolute;
    top: 0.1rem;
    right: 1rem;
    font-size: .6rem;
    color: white;
    cursor: pointer;
}



.scroll-row {
    overflow: hidden;
    width: 100%;
    height: 2.08rem;
    position: relative;
    margin-bottom: .4rem;
}

.scroll-track {
    display: flex;
    gap: .2rem;
    will-change: transform;
}

.scroll-track img {
    height: 100%;
    border-radius: .1rem;
    object-fit: cover;
    flex-shrink: 0;
    width: 3.18rem;
    height: 2.08rem;
}







/* 固定到底部中间 */
.mouse-float {
    position: fixed;
    bottom: 0.6rem;
    /* 可根据实际调整 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 8888;
    animation: floatUpDown 2s ease-in-out infinite;
    pointer-events: none;
}

/* 鼠标图标大小可自调 */
.mouse-float img {
    width: 0.87rem;
    height: auto;
}

/* 上下浮动动画：15px */
@keyframes floatUpDown {
    0% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-15px);
    }

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


/* lianxi方式的女 */

.contact-entry {
    position: fixed;
    right: 0.3rem;
    /* 距右边 0.3rem */
    top: 70%;
    transform: translateY(-50%);
    z-index: 999;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.contact-entry:hover {
    transform: translateY(-50%) scale(1.1);
}

.contact-entry img {
    width: 1.24rem;
    height: auto;
    display: block;
}