body {
    background: #0a0a0a;
    background: url(/public/uploads/1706681869997673.jpg) ;
    color: #333;
    font-family: "Microsoft YaHei", Arial, sans-serif;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.notice2 {
    background: rgba(255, 255, 255, 0.65);
    border-radius: 20px;
    margin: 0 auto;
    padding: 8px 15px;
    overflow: hidden;
    text-align: center;
    /* width: 700px; */
    /* margin-top: 15px; */
    margin-bottom: 25px;
    width: 100%;
}
/*.navbar-right {*/
/*    float: right !important;*/
/*    margin-right: -15px;*/
/*}*/
/*.navbar-nav {*/
/*    float: left;*/
/*    margin: 0;*/
/*}*/

.pagenavbar{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: url("/public/index/header_bg.png") ;
    background-size: contain;
    border-color: #000;
}
.pagenavbar-left>li>a {
    display: block;
    line-height: 90px;
    font-size: 20px;
    color: #e4ce79;
    margin-left: 30px;
    font-weight: 900;
}

.navbar-default {
  background: url("/public/index/header_bg.png") ;
  background-size: contain;
  border-color: #000;
}
.navbar-brand {
    float: left;
    height: 90px;
    padding: 0;
    line-height: 90px;
    font-size: 20px;
    color: #e4ce79;
    font-weight: 900;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #e4ce79;
}
.navbar-brand-img{
    height: 75px;
    margin-left: 10px;
}
.navbar-nav>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 90px;
    font-size: 20px;
    color: #e4ce79;
    font-weight: 900;
}
.navbar-default .navbar-nav>li>a{
    color: #e4ce79;
}
.navbar-default .navbar-brand {
    color: #e4ce79;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: red;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: red;
    background-color: transparent;
}
.notice-aldult-img{
    margin-top: 35px;
    width: 100%;
}

.dropdown-menu {
    min-width: 215px;
    top: 87px;
}
.user-small-group {
    background: #624e3a;
    padding: 20px;
    box-sizing: border-box;
    border: 0px;
}
.user-small-group .avatar img {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
}
.user-small-group .layui-nav-item-box {
    line-height: 36px;
    width: 170px;
}
.user-small-group .color {
    color: #fabd76;
}
.user-small-group .active{
    color: #f60;
    font-weight: bold;
}
.user-small-group .button{
    text-decoration: none;
    font-size: 13px;
    border: 1px solid #f66854;
    border-radius: 4px;
    padding: 0 5px;
    height: 22px;
    line-height: 22px;
    color: #f66854;
    background: url(/public/static/images/bg-btn.png) repeat-x;
    background-size: auto 100%;
    color: #fabd76;
    border: 1px solid #681615;
    cursor: pointer;
}
.user-small-group .button:hover{
    /*background: #fabd76;
    color: #681615;
    border: 1px solid #fabd76;*/
    color: #fff;
}
#logout{
    cursor: pointer;
    color: #c9c9c9;
}
#logout:hover{
    color: #f60;
}
.openid{
    color: #ccc;font-size: 9px;line-height: 1;text-align: center;cursor: pointer;
}
.openid:hover{
    color: #fff;
}

.slts-content{
    display: none;
    min-height: 200px;
    background-color: #26303a;
    padding: 20px 30px 20px 30px;
    border-radius: 0 0 4px 4px;
    color: #fff;
}
.slts-content h3,.slts-content p{
    color: #fff;
}
.slts-content h3{
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
}
.slts-content p{
    text-align: left;
    font-size: 14px;
    margin-top: 5px;
}


@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.container-nav {
    width: 1600px;
    margin: 0 auto;
}

.swiper-banner {
    margin: 25px auto;
    width: 100%;
    height: 387px;
    box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.1);
}

.swiper-banner .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.swiper-banner .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 4px;
}
.version-group-good{
    width: 790px;
    color: red!important;
}

.version-group-good .swiper-item{
    position: relative;
    left: 0;
    top: 0;
    width: 260px;
    height: 273px;
    background: url(/public/index/games_bg.png) no-repeat center top;
    background-size: cover;
    transition: all 0.2s linear;
    padding: 17px;
}
.version-group-good .swiper-item .image-link{
    position: relative;
    display: block;
    overflow: hidden;
}
.version-group-good .swiper-item .image-link .badge-hot {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff0000;
    background: rgba(0,0,255,0.8);
    color: #fff;
    font-weight: bold;
    padding: 2px 5px;
    /*border-radius: 5px;*/
    border-radius: 0;
    border-bottom-left-radius: 4px;
    font-size: 12px;
    z-index: 10;
}
.version-group-good .swiper-item .image-link .game-type{
    font-size: 12px;
    color: yellow;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 2px 10px;
    text-align: center;
    background: rgba(0,0,0,.6);
    /*border-top-left-radius: 4px;*/
    z-index: 10;
}
.version-group-good .swiper-content{
    /* background-color: yellow; */
    margin-top: 16px;
    position: absolute;
    left: 10px;
    bottom: 69px;
    width: 238px;
}
.version-group-good .nav-title {
    color: yellow;
    font-size: 18px;
    font-weight: bold;
    white-space: normal;
    text-align: center;
    /* margin-bottom: 15px; */
    line-height: 1.5;
    background: #E32025;
    background: linear-gradient(0deg, #efdf8d, #bf973a);
    background: linear-gradient(135deg, #8b0000, #ff0000);
    padding: 5px 10px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.version-group-good .append-version-title {
    color: #00ff00;
}

.version-group-good .swiper-content .game-title{
    font-size: 12px;
    color: #fff;
}
.version-group-good .swiper-content .game-desc{
    font-size: 12px;
    color: #fff;
    width: 230px; /* 容器宽度 */
    white-space: nowrap;    /* 强制单行 */
    overflow: hidden;       /* 隐藏超出部分 */
    text-overflow: ellipsis;/* 超出显示省略号 */
    word-wrap: normal;

}
.version-group-good .swiper-content .icon-img{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.swiper-group-btn{
    position: absolute;
    left: 17px;
    bottom: 20px;
    width: 225px;
    /* background-color: pink; */
}
.version-group-good .game-btn{
    width: 53px;
    line-height: 2;
    background: linear-gradient(0deg, #efdf8d, #bf973a);
    transition: transform 0.2s;
    border-color: 1px solid #6b3208;
    border-radius: 2px;
    font-size: 11px;
    color: #a32306;
    font-weight: bold;
    cursor: pointer;
}

.version-group-good .game-btn:hover{
    background: linear-gradient(0deg, #f5e67f, #f5e67f);
    border-color: transparent;
    color: #ff0000;
}

.swiper-good {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.swiper-good .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-good .swiper-slide img{
    display: block;
    width: 100%;
    height: 130px;
    object-fit: fill;
    transition: transform 0.3s;
}
.swiper-good .swiper-slide img:hover{
    transform: scale(1.1);
}

@media (max-width: 760px) {
    .swiper-button-next {
        right: 20px;
        transform: rotate(90deg);
    }

    .swiper-button-prev {
        left: 20px;
        transform: rotate(90deg);
    }
}

.Games-Title{
    margin-top: 20px;
    height: 72px;
    /*line-height: 60px;*/
    /*padding-top: 9px;*/
    padding-bottom: 1px;
    border-bottom: 3px solid #851b03;
    font-size: 20px;
    font-weight: 700;
    font-stretch: normal;
    letter-spacing: 0;
    color: #664630;
}
.Games-Title div {
    /*width: 1280px;*/
    /*margin: 0 auto;*/
    text-align: center;
}
.Games-Title span {
    padding-left: 5px;
    border-bottom: 3px solid #ffa739;
    display: inline-block;
}
.download-launcher{
    /*width: 250px;*/
    /*background: rgba(255,255,255,0.1);*/
}
.download-text{
    display: block;
    width: 122px;
    height: 40px;
    line-height: 50px;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
    background: url(/public/index/download-text.png) no-repeat;
    background-size: cover;
    cursor: pointer;
}

.download-text:hover,.download-text:active,.download-text:focus{
    color: #00ff00;
}
#bb option{
    background: #000;
}
.rainbow {
    font-size: 50px;
    font-weight: 900;
    margin: 0 20px;
    animation: rainbow 5s linear infinite;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

@keyframes rainbow {
    0% {
        color: red;
    }
    10% {
        color: orange;
    }
    20% {
        color: yellow;
    }
    30% {
        color: green;
    }
    40% {
        color: blue;
    }
    50% {
        color: indigo;
    }
    60% {
        color: violet;
    }
    70% {
        color: pink;
    }
    80% {
        color: cyan;
    }
    90% {
        color: magenta;
    }
    100% {
        color: red;
    }
}


/* 服务器列表 */
.container-main {
    width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
    margin-top: 20px;
}

.container-main h3 {
    text-align: center;
    color: #ffd700;
    margin-bottom: 30px;
    font-size: 28px;
    margin-bottom: 0;
}

.filter-bar {
    background: #1a1a1a;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
    border: 1px solid #333;
}

.filter-bar .btn {
    margin: 5px;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* 按钮样式 */
.btn-game {
    background: linear-gradient(135deg, #8b0000, #ff0000);
    border: 1px solid #ffd700;
    /* padding: 8px 20px; */
    border-radius: 5px;
    transition: all 0.3s;
    color: #fff !important;
}
.btn-game:focus,.btn-game:focus-visible {
    outline: none!important; /* 移除默认轮廓线 */
}

.btn-game:hover {
    background: linear-gradient(135deg, #ff0000, #ff4500);
    color: #fff;
    transform: scale(1.05);
}
/* 样式2 Start */
.game-card{
    box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.3);
    /* border: 1px solid rgba(255, 255, 255, 0.65); */
    border-radius: 4px;
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 319px;
    background: url(/public/index/games_bg.png) no-repeat center top;
    background-size: cover;
    transition: all 0.2s linear;
    padding: 19px;
}
.game-card .game-cover-group{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    /* height: 155px; */
    /* object-fit: cover; */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    /*溢出隐藏*/
    overflow: hidden;
}

.game-card .game-cover-group .cover{
    width: 100%;
    height: 152px;
    object-fit: fill;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: transform 0.3s;

}
.game-card .game-cover-group .cover:hover{
    transform: scale(1.1);
}

.game-card .game-card-content{
    margin-top: 16px;
    position: absolute;
    left: 14px;
    bottom: 82px;
    width: 270px;
    /* background-color: #00ff00; */
}
.game-card .game-title{
    width: 100%;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
}
.game-card .game-title .title{
    width: 155px;
    width: 255px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.game-card .game-type{
    font-size: 12px;
    color: yellow;
    width: 90px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.game-card .game-desc{
    font-size: 12px;
    color: #ddd;
}
.game-card .game-desc .desc{
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.game-card .icon-img{
    width: 20px;
    height: 20px;
    margin-right: 4px;
}
.game-card .game-group-btn{
    position: absolute;
    left: 19px;
    bottom: 24px;
    width: 265px;
    /* background-color: pink; */
}
.game-card .game-btn{
    width: 60px;
    line-height: 2.3;
    background: linear-gradient(0deg, #efdf8d, #bf973a);
    transition: transform 0.2s;
    border-color: 1px solid #6b3208;
    border-radius: 2px;
    font-size: 12px;
    color: #a32306;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
}
.game-card .game-btn:hover{
    transform: scale(1.05);
}


.server-card{
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.3);
    /* border: 1px solid rgba(255, 255, 255, 0.65); */
    border-radius: 4px;
}
.card-body .title{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card-body .sup-title{
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: red;
    font-weight: light;
}

.card-body .game-desc{
    width: 100%;
    height: 45px;
    line-height:2rem;
    font-size: 14px;
    font-weight: 400;
    color: #707070;
    overflow: hidden;
    white-space: inherit;
    text-overflow: ellipsis;
    padding-top: 5px;
    /* font-weight: bold; */
}
.card-body .game-group-btn{
    padding: 10px 0;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.card-body .game-btn {
    display: block;
    cursor: pointer;
    width: 65px;
    height: 28px;
    line-height: 28px;
    background: url(/public/index/welfare_1.png);
    border-radius: 3px;
    font-size: 13px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    margin-right: 6px;
    text-align: center;
}

.server-card-group{
    position: relative;
}

.server-card .game-cover{
    width: 100%;
    height: 155px;
    object-fit: cover;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.server-card .card-body{
    padding: 10px 8px;
}

/* 底部 */
footer {
    background: #000;
    padding: 30px 0;
    text-align: center;
    border-top: 2px solid #c9a063;
    color: #888;
    font-size: 12px;
}

footer a {
    color: #c9a063;
    text-decoration: none;
}

/* 标签 */
.badge-hot {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff0000;
    background: rgba(255,0,0,0.7);
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    /*border-radius: 5px;*/
    border-radius: 0;
    border-bottom-left-radius: 4px;
    font-size: 12px;
    z-index: 10;
}
.game-cover-group .game-type{
    width: auto;
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 2px 10px;
    text-align: center;
    background: rgba(0,0,0,.6);
    /*border-top-left-radius: 4px;*/
    z-index: 10;
}

.badge-new {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #00ff00;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

.age-tip{
    position: fixed;
    top: 290px;
    left: 0.5%;
    color: #000;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    z-index: 10;
}

.version-search-label-body .version-search-label-group {
    width:100%;
    margin: 0 auto;

    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0;
    color: #ffa300;
    background-color: #e8c478;
    border: solid 1px #707070;
    /*border-top-left-radius: 5px;*/
    /*border-top-right-radius: 5px;*/
    background: #1a1a1a;
    padding:5px 0px;
    margin-bottom: 13px;
    /*border-radius: 5px;*/
    border: 1px solid #333;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background: linear-gradient(179deg, #333, #555);
    box-shadow: 0 2px 12px 0 rgba(255, 255, 255, 0.3);
}
.version-search-label-body .version-search-label-box {
    width: 355px;
    width: 428px;
    width: 510px;
}
.version-search-label-body .version-search-label-group .vsersion-label {
    cursor: pointer;
    height: 20px;
    line-height: 18px;
    background: transparent;
    border-radius: 15px;
    width: 59px;
    text-align: center;
    opacity: 0.9;
    font-weight: 400;
    color: #382616;
    font-size: 11px;
    border: 1px solid #382616;
    margin: 0 6px;
    background: linear-gradient(0deg, #efdf8d, #bf973a);
    border: 1px solid #efdf8d;
    color: #a32306;
}
.version-search-label-body .liebiao_title {
    background: transparent;
    padding: 15px 11px;
}
.version-search-label-body .liebiao_title {
    /*background: url(/public/static/images1/ti.png) no-repeat;*/
    background-size: 100%;
    justify-content: space-around;
    height: 64px;
    width: 100%;
    padding: 15px 30px;
    display: flex;
    align-items: center;
}
.version-search-label-body .liebiao_title .label {
    font-size: 15px;
    line-height: 35px;
    color: #fff;
    color: #382616;
    font-weight: bold;
}
.version-search-label-body .liebiao_title .intput, .liebiao_title .select {
    border: 1px solid #382616;
    color: #333;
}
.version-search-label-body .liebiao_title .intput, .liebiao_title .select {
    width: 262px;
    height: 34px;
    border: 1px solid #DDDCDC;
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    padding: 0px 10px;
    margin-right: 15px;
}
.version-search-label-body .liebiao_title .intput {
    width: 209px;
}
.version-search-label-body .liebiao_title button {
    width: 94px;
    height: 34px;
    border: 1px solid #E34120;
    border-radius: 5px;
    background: #E34120;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, #8b0000, #ff0000);
    border: 1px solid #8b0000;
}
.version-search-label-body .tishi {
    background: rgba(249, 249, 249, 1);
    padding: 0px 20px;
    height: 35px;
    color: rgba(227, 32, 37, 1);
    font-size: 17px;
    font-weight: bold;
    line-height: 35px;
    border-radius: 20px 0 0px 20px;
    margin-left: 25px;
}