@import url('font.css');
body,
dl,
dd,
ul,
ol,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer {
    margin: 0;
}

body,
button,
input,
select,
textarea {
    font: .12rem/1.5 tahoma, "\5FAE\8F6F\96C5\9ED1", sans-serif;
    -webkit-text-size-adjust: 100%; /* 禁止iOS文本缩放 */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
}

em,
b {
    font-style: normal;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 去除iOS点击高亮 */
}

img {
    border: 0;
    display: block;
}

html {
    width: 100%;
    -webkit-overflow-scrolling: touch; /* 启用iOS滚动回弹效果 */
}

body {
    background: #fff;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

button,
input,
select,
textarea {
    font-size: 100%;
    outline: none;
    -webkit-appearance: none; /* 去除iOS默认控件样式 */
    border-radius: 0; /* 去除默认圆角 */
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th,
ul,
ol {
    padding: 0;
}

ol,
ul {
    list-style: none;
}

.c:before,
.c:after {
    content: "";
    display: table;
}

.c:after {
    clear: both;
}


.hidden {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

.pr {
    position: relative;
}

.overh {
    overflow: hidden;
}

a {
    text-decoration: none;
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* footer */
#afooter {
  text-align: center;
  line-height: 0.2rem;
  color: #eff5fe;
  background-color: #000000;
  padding: 0.4rem 0;
  font-size: 0.12rem;
}

#afooter a {
  color: #eff5fe;
}

.swiper-wrapper .bg1{
    background-image: url('../ossweb-img/bg1.png');
}
.swiper-wrapper .bg2{
    background-image: url('../ossweb-img/bg2.png');
}
.swiper-wrapper .bg3{
    background-image: url('../ossweb-img/bg3.png');
}
.swiper-wrapper .bg4{
    background-image: url('../ossweb-img/bg4.png');
}

.swiper-wrapper .yearbg1{
    background-image: url('../ossweb-img/2024.png');
}
.swiper-wrapper .yearbg2{
    background-image: url('../ossweb-img/2023.png');
}
.swiper-wrapper .yearbg3{
    background-image: url('../ossweb-img/2022.png');
}
.swiper-wrapper .yearbg4{
    background-image: url('../ossweb-img/2021.png');
}

.year{
    width: 1.92rem;
    height: 0.8rem;
    position: absolute;
    top: 1rem;
    left: 0.5rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 999;
}

.swiper-wrapper{
    height: 100vh !important;
}
 /* .swiper-slide{
    height: 100vh;
 } */

 .line{
    width: 100%;
    height: .85rem;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -0.45rem;
    margin-bottom: -0.38rem;
    position: relative;
    z-index: 999;
 }

 .sty1{
    background-image: url('../ossweb-img/line1.png');
 }

 .sty2{
    background-image: url('../ossweb-img/line2.png');
 }

/* 默认样式（移动端优先） */
.box {
    background: url('../ossweb-img/bg.png');
    background-repeat: no-repeat;
    height: 100%;
    /* background-size: contain; */
    background-size: cover;
    background-position: center; /* 确保主体内容居中显示 */
    overflow: hidden;

}

    .head {
        width: 3.15rem;
        height: 0.67rem;
        background-image: url('../ossweb-img/name.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 1.68rem;
        display: flex;
        align-items: center;
    }

    .aitver {
        display: none;
        width: 0.49rem;
        height: 0.5rem;
        margin-left: 0.27rem;
    }

    .name {
        font-size: 0.2rem;
        font-weight: bold;
        color: #fff;
        margin-left: 0.4rem;
        width: 2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: "BeaufortforLOL-Bold";

    }

    .login {
        width: 0.3rem;
        height: 0.29rem;
        background-image: url('../ossweb-img/switch.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 0.22rem;
        margin-top: .03rem;

    }

    .title {
        width: 5.64rem;
        font-size: 0.58rem;
        text-align: center;
        margin: 0 auto;
        line-height: 0.56rem;
        margin-top: 0.3rem;
        font-family: "BeaufortforLOL-Bold";
    }
        .gradient-text {
            background: linear-gradient(0deg, #3C3CAE 20%, #3F4CC5 70%);
            -webkit-background-clip: text;
            /* WebKit兼容前缀 */
            background-clip: text;
            /* 标准属性 */
            color: transparent;
            /* 隐藏原文字颜色 */
            display: inline-block;
        }

    .time {
        font-size: 0.2rem;
        color: #4141B5;
        line-height: 0.19rem;
        text-align: center;
        font-style: normal;
        margin-top: 0.11rem;
        font-family: "BeaufortforLOL-Bold";
    }

    .text{
        font-size: 0.18rem;
        color: #3C3CAE;
        line-height: 0.19rem;
        width: 3.8rem;
        margin: 0 auto;
        text-align: center;
        font-style: normal;
        margin-top: 0.2rem;
        font-family: "BeaufortforLOL-Bold";
    }
    .content{
        display: flex;
        justify-content: space-between;
        padding: 0.25rem;
        position: absolute;
        left: 0;
        bottom: 1.58rem;
        width: 100%;
        box-sizing: border-box;
    }
    .play{
        margin: 0 auto;
        margin-top: 1.4rem;
        width: 1.51rem;
        height: 1.47rem;
        background-image: url('../ossweb-img/play-but.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .play-text{
        font-size: 0.24rem;
        color: #F2E3FF;
        text-align: center;
        font-family: "BeaufortforLOL-Bold";
    }
    .btn {
        width: 3.66rem;
        height: 1rem;
        background-image: url('../ossweb-img/menu.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0 auto;
        color: #4141B5;
        display: block;
        text-align: center;
        line-height: 0.9rem;
        margin-top: .2rem;
        font-size: 0.3rem;
        font-family: "BeaufortforLOL-Bold";
        letter-spacing: 0.02rem;
    }
    .reward-name{
        font-size: 0.18rem;
        color: #d6bd98;
        width: 1.3rem;
        text-align: center;
        margin: 0 auto;
        font-family: "BeaufortforLOL-Bold";
        padding-top: 1.4rem;
        line-height: 0.19rem;
        overflow: hidden;
        display: grid;
        place-items: center; /* 同时实现水平垂直居中 */
        height: .6rem;
    }
    .btn1{
        display: none;
        background-image: url('../ossweb-img/daimenu.png');
    }

    .btn2{
        display: none;
        background-image: url('../ossweb-img/nomenu.png');
        color: #939393;
    }

    .share {
        font-size: 0.18rem;
        color: #E6E6E6;
        line-height: 0.19rem;
        text-align: center;
        margin-top: -0.07rem;
        font-family: "Spiegel-Regular";
    }

    .reward {
        width: 1.78rem;
        height: 1.99rem;
        background-image: url('../ossweb-img/award.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin: 0.07rem .1rem;
        display: block;
        text-align: center;
        border-radius: 0.17rem 0.17rem 0.17rem 0.17rem;
        position: relative;
    }
        .mask{
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            background: url('../ossweb-img/awardk.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            top: 0;
            left: 0;
            border-radius: 0.17rem 0.17rem 0.17rem 0.17rem;
            z-index: 1000;
        }
            .yes{
                width: .82rem;
                height: .6rem;
                background: url('../ossweb-img/yes.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        .rewards{
            width: 1.29rem;
            /* width: .69rem; */
            height: 1.29rem;
            background: url('../ossweb-img/awa.gif');
            /* background: url('../ossweb-img/awaeds.png'); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

    .pop {
        outline: none;
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    .pop-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .pop-bg1{
        width: 4.73rem;
        height: 3.08rem;
        background-image: url('../ossweb-img/popbg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        text-align: center;
    }
    .pop-bg2{
        width: 4.73rem;
        height: 3.08rem;
        background-image: url('../ossweb-img/pc-pops.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        text-align: center;
    }
    .pop-bg2 .contents{
        width: 3.7rem;
        height: 1.12rem;
        text-align: center;
        overflow: hidden;
        font-size: 0.18rem;
        color: #3C3CAE;
        line-height: 0.22rem;
        margin:0 auto;
        margin-top: 1.05rem;
        font-family: "BeaufortforLOL-Bold";
    }
    .pop-close {
        background: url(../ossweb-img/close.png) no-repeat;
        background-size: 100% 100%;
        width: .17rem;
        height: .17rem;
        position: absolute;
        top: .24rem;
        right: 0rem;
        text-indent: -999999999px;
        z-index: 10;
    }
    .pop-alter-title{
        font-weight: bold;
        font-size: 0.23rem;
        color: #6132A1;
        line-height: 0.29rem;
        margin-top: 0.58rem;
        margin-bottom: 0.17rem;
        font-family: "BeaufortforLOL-Bold";
    }
    .pop-alter{
        width: 3.88rem;
        height: 0.52rem;
        background: url("../ossweb-img/logos.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        margin-top: .5rem;
        display: flex;
        justify-content: space-between;
    }
    .pop-alter-btn{
        width: 0.52rem;
        height: 0.52rem;
        border-radius: 50%;
    }


/* 屏幕宽度≥600px时生效（平板） */
@media (min-width: 768px) {

 .line{
    width: 100%;
    height: 1.2rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: -0.55rem;
    margin-bottom: -0.65rem;
    position: relative;
    z-index: 999;
 }

 .sty1{
    background-image: url('../ossweb-img/pc-line1.png');
 }

 .sty2{
    background-image: url('../ossweb-img/pc-line2.png');
 }

 .swiper-wrapper .bg1{
    background-image: url('../ossweb-img/pc-bg1.png');
}
.swiper-wrapper .bg2{
    background-image: url('../ossweb-img/pc-bg2.png');
}
.swiper-wrapper .bg3{
    background-image: url('../ossweb-img/pc-bg3.png');
}
.swiper-wrapper .bg4{
    background-image: url('../ossweb-img/pc-bg4.png');
}
.year{
    width: 3.6rem;
    height: 1.5rem;
    top: 1.3rem;
    left: 1rem;
}
/* 默认样式（移动端优先） */
.box {
    background: url('../ossweb-img/pc-bg.png');
    background-repeat: no-repeat;
    height: 100%;
    background-size: cover;
    background-position: center; /* 确保主体内容居中显示 */
    overflow: hidden;
    position: relative;

}
    

    .head {
        width: 4.71rem;
        height: 0.92rem;
        background-image: url('../ossweb-img/pc-name.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-top: 0.68rem;
        display: flex;
        align-items: center;
    }

    .aitver {
        display: none;
        width: 0.68rem;
        height: 0.68rem;
        margin-left: 0.69rem;
    }

    .name {
        font-size: 0.26rem;
        font-weight: bold;
        color: #fff;
        margin-left: 0.86rem;
        width: 2.67rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: "BeaufortforLOL-Bold";

    }

    .login {
        width: 0.4rem;
        height: 0.4rem;
        background-image: url('../ossweb-img/switch.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        margin-left: 0.46rem;
        margin-top: .03rem;

    }

    .title {
        width: 7.2rem;
        margin-left: 0.69rem;
        margin-top: 0.55rem;
        text-align: left;
        font-family: "BeaufortforLOL-Bold";

    }

        .gradient-text {
            line-height: 0.71rem;
            font-size: 0.72rem;
            background: linear-gradient(0deg, #3C3CAE 20%, #3F4CC5 70%);
            -webkit-background-clip: text;
            /* WebKit兼容前缀 */
            background-clip: text;
            /* 标准属性 */
            color: transparent;
            /* 隐藏原文字颜色 */
            display: inline-block;
            div{
                font-size: 1.4rem;
                line-height: 1.2rem;
            }
    }

    .time {
        font-size: 0.24rem;
        color: #4141B5;
        line-height: 0.24rem;
        margin-left: 0.69rem;
        text-align: left;
        font-style: normal;
        margin-top: 0.1rem;
        font-family: "BeaufortforLOL-Bold";
    }
        .text{
            display: none;
    }
        .content{
        display: flex;
        justify-content: space-between;
        padding: 0.25rem;
        position: absolute;
        left: 0;
        bottom: .2rem;
        width: 100%;
        box-sizing: border-box;
    }

    .play{
        margin: 0 auto;
        margin-top: 1.55rem;
        width: 2.22rem;
        height: 2.15rem;
        background-image: url('../ossweb-img/play-but.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .play-text{
        font-size: 0.24rem;
        color: #F2E3FF;
        text-align: center;
        font-family: "BeaufortforLOL-Bold";
        letter-spacing: 0.03rem;
    }


    .btn {
        width: 4.35rem;
        height: 1.15rem;
        background-image: url('../ossweb-img/pc-menu.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        line-height: 1.08rem;
        position: absolute;
        color: #4141B5;
        font-size: .36rem;
        left: 0.61rem;
        bottom: 0.45rem;
        font-family: "BeaufortforLOL-Bold";
        letter-spacing: 0.02rem;
    }
    .reward-name{
        width: 1.4rem;
        font-size: 0.2rem;
        padding-top: 1.65rem;
        line-height: 0.22rem;
        height: .65rem;
    }
    .btn1{
        background-image: url('../ossweb-img/daimenu.png');
    }

    .btn2{
        background-image: url('../ossweb-img/nomenu.png');
        color: #939393;
    }

    .share {
        font-size: 0.22rem;
        width: 4.1rem;
        color: #E6E6E6;
        line-height: 0.19rem;
        text-align: center;
        position: absolute;
        left: 0.69rem;
        bottom: 0.35rem;
        font-family: "Spiegel-Regular";

    }

    .reward {
        width: 2.14rem;
        height: 2.4rem;
        background-image: url('../ossweb-img/pc-award.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: block;
        text-align: center;
        border-radius: 0.17rem 0.17rem 0.17rem 0.17rem;
        left: 0.69rem;
        bottom: 1.87rem;
        position: absolute;
    }
            .mask{
                width: 100%;
                height: 100%;
                display: none;
                position: absolute;
                background: url('../ossweb-img/pc-awardk.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                top: 0;
                left: 0;
                border-radius: 0.17rem 0.17rem 0.17rem 0.17rem;
                z-index: 1000;
            }
                .yes{
                    width: .91rem;
                    height: .65rem;
                    background: url('../ossweb-img/pc-yes.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }
        .rewards{
            /* width: .83rem; */
            width: 1.55rem;
            height: 1.55rem;
            background: url('../ossweb-img/awa.gif');
            /* background: url('../ossweb-img/pc-awards.png'); */
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translate(-50%,-50%);
        }


    .pop {
        outline: none;
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 1000;
    }

    .pop-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .pop-bg1{
        width: 7.57rem;
        height: 4.93rem;
        background-image: url('../ossweb-img/pc-popbg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        text-align: center;
    }
    .pop-bg2{
        width: 7.57rem;
        height: 4.93rem;
        background-image: url('../ossweb-img/pc-pops.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-sizing: border-box;
        text-align: center;
    }
    .pop-bg2 .contents{
        width: 5.5rem;
        height: 1.7rem;
        text-align: center;
        overflow: hidden;
        font-size: 0.28rem;
        color: #3C3CAE;
        line-height: 0.34rem;
        margin:0 auto;
        margin-top: 1.7rem;
        font-family: "BeaufortforLOL-Bold";
    }
    .pop-close {
        background: url(../ossweb-img/pc-close.png) no-repeat;
        background-size: 100% 100%;
        width: .26rem;
        height: .26rem;
        position: absolute;
        top: .24rem;
        right: 0rem;
        text-indent: -999999999px;
        z-index: 10;
    }
    .pop-alter-title{
        font-weight: bold;
        font-size: 0.36rem;
        color: #6132A1;
        line-height: 0.26rem;
        margin-top: 1.02rem;
        font-family: "BeaufortforLOL-Bold";
    }
    .pop-alter{
        width: 6.2rem;
        height: 0.83rem;
        margin: 0 auto;
        margin-top: 1rem;
    }
    .pop-alter-btn{
        width: 0.83rem;
        height: 0.83rem;
    }
}