body {
    padding: 0px;
    margin: 0px;
}

.container {
    width: 100vw;
}

.container-content {
    width: 100vw;
}


/** 顶部悬浮 **/

.header {
    width: 100%;
    height: 13.6vw;
    background-image: url('../img/header-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    position: fixed;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.header-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    width: 14vw;
    height: 10.5333vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.header-avatar {
    width: 11.2vw;
    height: 11.2vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url('../img/icon.png');
}

.header-middle-content {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 13.3333vw;
}

.header-right {
    width: 30.1333vw;
    height: 8.9333vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    right: 2vw;
    position: relative;
}

.header-right-button {
    width: 100%;
    height: 100%;
    background-image: url('../img/book.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: scaleAnimation 1s infinite alternate;
}


/** 背景 **/

.body-content {
    width: 100%;
    height: 710vw;
    background-image: url('../img/bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 13.6vw;
    position: relative;
    margin-bottom: 13.33333333vw;
}

.footer-btn-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 50;
    top: 106.6vw;
}

.footer-btn {
    width: 44.9333vw;
    height: 12.9333vw;
    background-image: url('../img/body-btn.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: scaleAnimation 1s infinite alternate;
}

.finger {
    width: 15.87vw;
    height: 16.3765vw;
    background-image: url('../img/finger.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 9.2vw;
    left: 63.6vw;
    animation: scaleAnimation 1s infinite alternate;
}

.alert-container {
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 0, 0, 0.9);
    position: fixed;
    z-index: 2000;
    display: flex;
    justify-content: center;
}

.alert-content {
    width: 100%;
    height: 88.9333vw;
    background-image: url('../img/alert-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 50.4vw;
}

.alert-btn {
    width: 42.6667vw;
    height: 13.3333vw;
    background-image: url('../img/alert-btn.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 133vw;
    /* left: 48.8vw; */
    animation: scaleAnimation 1s infinite alternate;
}

.alert-finger {
    width: 12.53333333vw;
    height: 12.93333333vw;
    background-image: url('../img/finger.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 112.2vw;
    left: 79vw;
    animation: scaleAnimation 1s infinite alternate;
}

.alert-close {
    width: 9.0667vw;
    height: 9.0667vw;
    background-image: url('../img/close.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 41vw;
    left: 83.7vw;
}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/** 抽奖活动 **/
.lottery-container {
    margin: 0 auto 0;
    padding: 0 8.5333vw;
    position: absolute;
    top: 319.0666667vw;
}

.lottery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9333vw;
    margin-bottom: 2.1333vw;
}

.lottery-item {
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: pointer;
    width: 27.0667vw;
    height: 26.8vw;
}

.lottery-item:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.lottery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lottery-item.active {
    animation: lotteryActive 0.5s ease-in-out infinite;
}

@keyframes lotteryActive {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 3px #FFD700;
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5);
    }
}

.lottery-buttons {
    display: flex;
    justify-content: center;
    gap: 6vw;
    margin-bottom: 1vw;
}

.lottery-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.3s;
    width: 36.6667vw;
    height: 12.1333vw;
}

.lottery-btn:hover {
    transform: scale(1.05);
}

.lottery-btn img {
    width: 100%;
    height: 100%;
}

.record-btn {
    width: 32.4vw;
    height: 8.4vw;
    background: url('../img/gift_code.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 2vw auto;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
}

.lottery-remaining {
    text-align: center;
    color: #f0dc6e;
    font-size: 2.7vw;
    background-image: url('../img/lottery-chances.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 61.6vw;
    height: 5.866666667vw;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .18vw;
}

.lottery-remaining span {
    display: inline-block;
}

/** 抽奖弹窗 **/
.lottery-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.lottery-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.lottery-modal-content {
    width: 87.33333333vw;
    height: 39.46666667vw;
    background: url('../img/reward.png');
    background-size: 100% 100%;
    text-align: center;
}

.lottery-modal-title {
    font-size: 2vw;
    font-weight: bold;
    margin-top: 10.5vw;
}
.lottery-modal-title .t1{
    color: #1facf6;
}
.lottery-modal-title .t2{
    color: #fe5105;
}
.lottery-modal-title .t2.copyable {
    cursor: pointer;
}

.lottery-modal-prize {
    width: 14.93333333vw;
    height: 14.93333333vw;
    margin: 1.5vw auto;
    overflow: hidden;
}

.lottery-modal-prize img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lottery-modal-close {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s;
}

.lottery-modal-close:hover {
    transform: scale(1.05);
}

.lottery-modal-close img {
    width: 100%;
    height: 100%;
}

.lottery-modal-share {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.3s;
}

.lottery-modal-share:hover {
    transform: scale(1.05);
}

.lottery-modal-share img {
    width: 100%;
    height: 100%;
}

.lottery-modal-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.67vw;
    margin-top: 0vw;
    flex-wrap: wrap;
}

.lottery-modal-buttons div {
    width: 22.13333333vw;
    height: 7.333333333vw;
}

/** 礼包码弹窗 start **/
.giftcode-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3000;
    justify-content: center;
    align-items: center;
}

.giftcode-modal.show {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.giftcode-content {
    width: 75.86666667vw;
    height: 109.0666667vw;
    background: url('../img/gift_list.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.giftcode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 13vw;
}

.giftcode-title {
    font-size: 5vw;
    color: #FFD700;
    font-weight: bold;
}

.giftcode-close {
    position: absolute;
    top: -6vw;
    right: -4vw;
    width: 3.866666667vw;
    height: 3.2vw;
    cursor: pointer;
}

.giftcode-close img {
    width: 100%;
    height: 100%;
}

.giftcode-list {
    height: 74vw;
}

.giftcode-loading {
    text-align: center;
    color: #fff;
    font-size: 4vw;
    padding: 3vw 0;
}

.giftcode-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 2vw;
    padding: 2vw 8vw 1.4vw;
    margin-bottom: 2.3vw;
    height: 7vw;
}

.giftcode-item-code {
    font-size: 2.8vw;
    color: #fdef14;
    font-family: monospace;
    word-break: break-all;
}

.giftcode-item-copy {
    background: url("../img/copy_button.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 12.53333333vw;
    height: 7.066666667vw;
    cursor: pointer;
    transition: transform 0.2s;
}

.giftcode-item-copy:hover {
    transform: scale(1.05);
}

.giftcode-empty {
    text-align: center;
    color: #fff;
    font-size: 4vw;
    padding: 10vw 0;
}

.giftcode-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    padding: 4vw 0;
    margin-top: 2vw;
}

.pagination-btn {
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    color: #000;
    font-weight: bold;
    background-color: unset;
}
.pagination-btn:disabled {
    background-color: unset;
}
.prev-btn{
    background-image: url('../img/s_prev.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 4.133333333vw;
    height: 5.466666667vw;
}
.next-btn{
    background-image: url('../img/s_next.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 4.133333333vw;
    height: 5.466666667vw;
}

.pagination-info {
    font-size: 3.5vw;
    color: #fff;
    min-width: 12vw;
    text-align: center;
}
/** 礼包码弹窗 end **/

/** 轮播比赛预测 **/
.carousel-container {
    /* padding: 2vw; */
    position: absolute;
    top: 160vw;
}

.carousel-header {
    width: 100%;
    text-align: center;
    margin-bottom: 4vw;
}

.carousel-title {
    width: 80%;
    height: auto;
}

.carousel-slides {
    position: relative;
    width: 100vw;
    overflow: hidden;
}

.carousel-slide {
    display: none;
    width: 100%;
    transition: opacity 0.5s ease;
    height: 115vw;
}

.carousel-slide.active {
    display: block;
    opacity: 1;
}

.carousel-slide .match-content:nth-child(1) {
    margin-bottom: 12vw;
}

.match-header {
    width: 82vw;
    height: 7.8667vw;
    text-align: center;
    margin: auto;
    margin-bottom: 2vw;
    background-image: url('../img/s_top.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-title {
    color: #fff;
    font-size: 4vw;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.match-flags {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 3vw;
    justify-content: center;
}

.flag-left, .flag-right {
    width: 41.2vw;
    height: 26vw;
    overflow: hidden;
}

.flag-left img, .flag-right img {
    width: 100%;
    height: 100%;
    display: block;
}

.vs-icon {
    width: 16.4vw;
    height: 16.4vw;
}

.vs-icon img {
    width: 100%;
    height: 100%;
}

.match-buttons {
    display: flex;
    justify-content: center;
}

.match-btn {
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 33.7333vw;
    height: 11.3333vw;
    transition: transform 0.2s;
    border-radius: 60% 0 60% 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.match-btn.left-btn {
    background-image: url('../img/s_left.png');
}
.match-btn.left-btn.hid ,.match-btn.draw-btn.hid ,.match-btn.right-btn.hid {
    filter: grayscale(0.5);
}
.match-btn.left-btn.hidden {
    background-image: url('../img/s_left_h.png');
}

.match-btn.draw-btn {
    background-image: url('../img/s_draw.png');
    position: relative;
}
.match-btn.draw-btn.hidden {
    background-image: url('../img/s_draw_h.png');
    position: relative;
}

.match-btn.right-btn {
    background-image: url('../img/s_right.png');
}
.match-btn.right-btn.hidden {
    background-image: url('../img/s_right_h.png');
}

.match-btn .win-icon {
    position: absolute;
    top: 0vw;
    right: 1vw;
    width: 4.8vw;
    height: 4.933333333vw;
}

.match-btn:hover {
    transform: scale(1.05);
}

.match-btn .btn-text {
    color: #fff;
    font-size: 3.5vw;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    z-index: 1;
    word-wrap: break-word;
    width: 26vw;
}

.match-btn{
    margin: 0 -1.8vw;
}

.match-btn .selected-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4vw;
    margin-top: 3.2vw;
}

.nav-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 3.4667vw;
    height: 4.5333vw;
    transition: transform 0.2s;
}

.nav-btn:hover {
    transform: scale(1.1);
}

.nav-btn img {
    width: 100%;
    height: 100%;
}

.carousel-dots {
    display: flex;
    gap: 2vw;
    align-items: center;
}

.dot {
    width: 2.5333vw;
    height: 2.5333vw;
    border-radius: 50%;
    background: url('../img/s_unselected.png') center/contain no-repeat;
    cursor: pointer;
    transition: transform 0.2s;
}

.dot:hover {
    transform: scale(1.2);
}

.dot.active {
    background: url('../img/s_selected.png') center/contain no-repeat;
}

/** 图片轮播 **/
.image-carousel-container {
    padding: 2.9333vw;
    position: absolute;
    top: 459vw;
}

.image-carousel {
    position: relative;
    width: 100%;
    border-radius: 3vw;
    overflow: hidden;
}

.carousel-image {
    display: none;
    width: 100%;
    height: auto;
}

.carousel-image.active {
    display: block;
}

.image-carousel-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3vw;
    margin-top: 3vw;
}

.image-nav-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 3.4667vw;
    height: 4.5333vw;
    transition: transform 0.2s;
}

.image-nav-btn:hover {
    transform: scale(1.1);
}

.image-nav-btn img {
    width: 100%;
    height: auto;
}

.image-dots {
    display: flex;
    gap: 1.5vw;
    align-items: center;
}

.image-dot {
    cursor: pointer;
    transition: transform 0.2s;
}

.image-dot:hover {
    transform: scale(1.2);
}

.image-dot img {
    width: 2.5333vw;
    height: 2.5333vw;
}

.image-dot.active {
    transform: scale(1.15);
}

/** 底部公司信息 **/

.footer-container {
    width: 100Vw;
    height: 53.6vw;
    display: flex;
    flex-direction: column;
    background: black;
    position: relative;
    background-image: url('../img/footer-bg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    align-items: center;
    position: relative;
}

.footer-url {
    width: 67vw;
    height: 9.2vw;
    position: absolute;
    top: 30vw;
    /* border-bottom: 1px solid white; */
    display: flex;
    justify-content: space-between;
    text-align: center;
    line-height: 9.2vw;
}

.body-next-img {
    width: 32vw;
    height: 9.2vw;
    border-radius: 10vw;
    /* background-image: url('../img/right.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.body-prev-img {
    width: 32vw;
    height: 9.2vw;
    border-radius: 10vw;
    /* background-image: url('../img/left.png'); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.footer-url a {
    color: #a9a9a9;
    text-decoration: none;
    font-size: 1.6vw;
}

/* 底部导航栏 */
.footer-nav {
    width: 100vw;
    height: 43.0667vw;
    background-image: url('../img/footer-float.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/** 登录弹窗 start **/
.login-window {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-window-content {
    width: 80vw;
    height: 40vw;
    background-image: url('../img/msg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.login-close {
    position: absolute;
    top: -6vw;
    right: -4vw;
    width: 3.866666667vw;
    height: 3.2vw;
    cursor: pointer;
}

.loginc-close-btn {
    width: 100%;
    height: 100%;
}

.login-btn-confirm {
    width: 30vw;
    height: 10vw;
    cursor: pointer;
    margin-bottom: 2vw;
}

.login-btn-confirm img {
    width: 100%;
    height: 100%;
}

.login-btn-content {
    width: 30vw;
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 15vw;
    /* left: 25vw; */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

/** 登录弹窗 end **/

.fb-login-btn {
    width: 9.466666667vw;
    height: 9.466666667vw;
    background-image: url('../img/facebook.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.gg-login-btn {
    width: 9.466666667vw;
    height: 9.466666667vw;
    background-image: url('../img/google.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/** 角色绑定弹窗 **/
.role-bind-window {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.role-bind-content {
    width: 80vw;
    height: 40vw;
    padding-bottom: 3vw;
    background-image: url(../img/msg_login.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 2vw;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.role-bind-close {
    position: absolute;
    top: -6vw;
    right: -4vw;
    width: 3.866666667vw;
    height: 3.2vw;
    cursor: pointer;
}

.role-close-btn {
    width: 100%;
    height: 100%;
}

.role-bind-title {
    font-size: 5vw;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-bottom: 1vw;
    margin-top: -3vw;
}

.role-info {
    margin-top: 10vw;
    display: inline-block;
}

.role-item {
    display: flex;
    justify-content: flex-end;
    padding: 2vw 0;
    font-size: 2.5vw;
    align-items: center;
}

.role-item:last-child {
    border-bottom: none;
}

.role-label {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.role-label-uid {
    width: 14.93333333vw;
    height: 2.533333333vw;
    background-image: url('../img/uid.png');
}

.role-label-character {
    width: 21.33333333vw;
    height: 2.666666667vw;
    background-image: url('../img/character.png');
}

.role-value {
    color: #ffffff;
    font-weight: bold;
    padding-left: 1.2vw;
    border-bottom: 1px dotted #cccccc;
    width: 30vw;
}
#bindInput, #roleIdSelect{
    width: 100%;
    height: 6vw;
    padding: 0 2vw;
    border-radius: 1vw;
    font-size: 2.6vw;
    box-sizing: border-box;
    background: none;
    color: #fff;
    border: none;
}
#bindInput{
    background: none;
    border: none;
    outline: none;
    color: #fff;
}

#bindInput::placeholder {
    color: #fff;
}

#bindInput:focus,
#bindInput:not(:placeholder-shown) {
    color: #fff;
}

#roleIdSelect{
    color: #fff;
    border: none;
    outline: none;
}

#roleIdSelect option {
    background-color: #000;
    color: #fff;
}
#roleIdSelect option{
    font-size: 3vw;
}

.role-bind-btn {
    margin-top: 3.5vw;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000000;
    font-size: 4vw;
    font-weight: bold;
}
.role-bind-btn img {
    width: 26.66666667vw;
    height: 8.666666667vw;
}
.role-bind-status {
    width: 30.1333vw;
    height: 8.9333vw;
    margin-top: 3.5vw;
    background-image: url('../img/book.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/** 右下角操作按钮 **/

.bottom-right-buttons {
    position: fixed;
    right: 0;
    bottom: 20vw;
    display: flex;
    flex-direction: column;
    gap: 3vw;
    z-index: 100;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    color: #fff;
    font-size: 3.5vw;
    font-weight: bold;
    text-align: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.login-action-btn {
    width: 8.266666667vw;
    height: 28.8vw;
    background-image: url('../img/login.png');
}

.bind-action-btn {
    width: 8.266666667vw;
    height: 28.8vw;
    background-image: url('../img/bind.png');
}

.query-role-btn {
    width: 8.266666667vw;
    height: 28.8vw;
    background-image: url('../img/bind.png');
}

.logout-action-btn {
    width: 6vw;
    height: 15vw;
    background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
}

/** 查询角色弹窗 **/
.query-role-window {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 200;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.query-role-content {
    width: 80vw;
    height: 40vw;
    background-image: url('../img/msg_login.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.query-role-close {
    position: absolute;
    top: -6vw;
    right: -4vw;
    width: 3.866666667vw;
    height: 3.2vw;
    cursor: pointer;
}

.query-role-close-btn {
    width: 100%;
    height: 100%;
}

.query-role-title {
    text-align: center;
    font-size: 5vw;
    font-weight: bold;
    color: #333;
    margin-top: -4vw;
    margin-bottom: 5vw;
}

.query-role-info {
    /* margin-bottom: 5vw; */
    margin-top: 10vw;
    display: inline-block;
}

.query-role-item {
    display: flex;
    justify-content: flex-end;
    padding: 2vw 0;
    /* border-bottom: 1px solid #eee; */
    font-size: 2.5vw;
    align-items: center;
}


.role-confirm-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2vw;
    cursor: pointer;
    transition: transform 0.3s;
}

.role-confirm-btn:hover {
    transform: scale(1.05);
}

.role-confirm-btn img {
    width: 26.66666667vw;
    height: 8.666666667vw;
}

/** 自定义弹窗 start **/

.custom-alert {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 3001;
    justify-content: center;
    align-items: center;
}

.custom-alert-content {
    position: relative;
    width: 80vw;
    height: 40vw;
    background-image: url('../img/msg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

.custom-alert-close {
    position: absolute;
    top: -6vw;
    right: -4vw;
    width: 3.866666667vw;
    height: 3.2vw;
    cursor: pointer;
}

.custom-alert-close img {
    width: 100%;
    height: 100%;
}

.custom-alert-message {
    font-size: 3vw;
    color: #fff;
    text-align: center;
    padding: 0 8vw;
    margin-bottom: 6vw;
    margin-top: 12vw;
    width: 100%;
}

.custom-alert-confirm {
    width: 30vw;
    height: 10vw;
    cursor: pointer;
}

.custom-alert-confirm img {
    width: 100%;
    height: 100%;
}
/** 自定义弹窗 end **/