@font-face {
    font-family: "SerifCN-SemiBold";
    src: url('//game.gtimg.cn/images/bpm/act/a20250717download/SourceHanSerifCN-SemiBold.ttf');
}
@font-face {
    font-family: "SerifCN-Bold";
    src: url('//game.gtimg.cn/images/bpm/act/a20250717download/SourceHanSerifCN-Bold.ttf');
}
@font-face {
    font-family: "SerifCN-Medium";
    src: url('//game.gtimg.cn/images/bpm/act/a20250717download/SourceHanSerifCN-Medium.ttf');
}
video{
    object-fit: contain;
    overflow-clip-margin: content-box;
    overflow: clip;
}
.gray-dom{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}
.row-box{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.column-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scroll-view{
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    padding-right: 0.1rem;
    box-sizing: border-box;
}

.container,.page-swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.page-swiper .page {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.bg-img{
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    -o-object-fit: cover;
    object-fit: cover;
}
.bg-mask{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    -o-object-fit: cover;
    object-fit: cover;
}
.foot a{
    display: unset;
}
/* 设置滚动条的样式 */
.scroll-view::-webkit-scrollbar {
    width: 0.05rem;
    background: #4795ff;
}

/* 滚动槽 */
.scroll-view::-webkit-scrollbar-track {
    background: #a7c9f7;
}

/* 滚动条滑块 */
.scroll-view::-webkit-scrollbar-thumb {
    background: #4795ff;
}

.scroll-view::-webkit-scrollbar-thumb:window-inactive {
    background: #4795ff;
}

.scale-slow{
    animation-timing-function:linear;
    animation-duration: 2s;/*动画持续的时间长*/
    animation-iteration-count: infinite;/*动画循环播放的次数为1 infinite为无限次*/
    animation-name: scaleAni; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-fill-mode: both; /*动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
}
@keyframes scaleAni {
    0% { transform: scale(1,1)}
    50%{ transform: scale(1.1,1.1)}
    100%{ transform: scale(1,1)}
}
.slow-show{
    animation-timing-function: linear;
    animation-duration: 1.5s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
    animation-name: slowShow; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-fill-mode: both; /*动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
}
@keyframes slowShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.slow-hide{
    animation-timing-function: linear;
    animation-duration: 1.5s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
    animation-name: slowHide; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-fill-mode: both; /*动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
}
@keyframes slowHide {
    0% {
        opacity: 1;
    }
    20% {
        opacity: 0.2;
    }
    100% {
        opacity: 0;
    }
}
.fast-show{
    animation-timing-function: linear;
    animation-duration: 0.5s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
    animation-name: fastShow; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-fill-mode: both; /*动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
}
@keyframes fastShow {
    0% {
        opacity: 0;
    }
    80% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}
.rotate-90{
    animation-timing-function:linear;
    animation-duration: 0.5s;/*动画持续的时间长*/
    animation-iteration-count: 1;/*动画循环播放的次数为1 infinite为无限次*/
    animation-name: rotate90; /*动画名称，需要跟@keyframes定义的名称一致*/
    animation-fill-mode: both; /*动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
}
@keyframes rotate90 {
    0% { transform: rotate(0deg)}
    20%{ transform: rotate(50deg)}
    100%{ transform: rotate(90deg)}
}