html,body {background-color:#000;}
.main {
    margin: auto;
    max-width: 640px;
    height: 100%;
    padding-bottom: .5rem;
    font-size: .14rem;
    background: url("../img/paihangbang.jpg?s=1") #1d1e22 no-repeat center 0 / 6.4rem;
}
.main1 {margin:auto; max-width:640px; height:100%; padding-bottom:.5rem; font-size:.14rem; background:url("../images/head_bg1.jpg") #1d1e22 no-repeat center 0 / 6.4rem;}
.main2 {margin:auto; max-width:640px; height:100%; padding-bottom:.5rem; font-size:.14rem; background:url("../images/head_bg2.jpg") #1d1e22 no-repeat center 0 / 6.4rem;}
.main3 {margin:auto; max-width:640px; height:100%; padding-bottom:.5rem; font-size:.14rem; background:url("../images/head_bg3.jpg") #1d1e22 no-repeat center 0 / 6.4rem;}
.main4 {margin:auto; max-width:640px; height:100%; padding-bottom:.5rem; font-size:.14rem; background:url("../images/head_bg4.jpg") #1d1e22 no-repeat center 0 / 6.4rem;}
.main5 {margin:auto; max-width:640px; height:100%; padding-bottom:.5rem; font-size:.14rem; background:url("../images/head_bg5.jpg") #1d1e22 no-repeat center 0 / 6.4rem;}
.head {position: relative; height:6.3rem; font-size:.14rem;}
.head_effects {position: absolute; width: 6.4rem; height: 5.5rem; background:url("../img/3c8ef435f1d875bc1a34c3a4474dd1a0.gif") no-repeat center center / 6.4rem; mix-blend-mode: screen; top: 0; left: 0; z-index:998;}
.slider {position: absolute; width: 6rem; height: 2.57rem; margin:0 .2rem; overflow: hidden; border-radius: .25rem; top: 1.2rem; left: 0; z-index:999;}
.main3 .slider,.main4 .slider {top: 1.68rem; }
.slider_wrap {width: 6rem; height: 2.57rem;}
/*
@keyframes slider {
    0%,25% {
        margin-left: 0;
    }
    35%, 60% {
        margin-left: -6rem;
    }
    70%, 100% {
        margin-left: -12rem;
    }
}
*/
 
.slider_wrap > a {width: 6rem; height: 2.57rem; display: block;}
.slider_wrap > a > img {width: 6rem; height: 2.57rem; display: block;}
.rec_list {position: absolute; width: 6.1rem; height: 4.17rem; padding: 1.1rem .15rem 0 .15rem; margin-top:1.3rem; z-index:999;}
.rec_list > a {display:block; width:2rem; padding-top: .3rem; text-align:center; float:left;}
a.rec_list_2 {width: 2.1rem; padding-top: 0;}
a.rec_list_3 {padding-top: .5rem;}
.rec_list > a > img {display: inline-block; width: 1.42rem; height: 1.42rem; border:1px solid #000; box-shadow: 0 0 10px #000; border-radius:.18rem;}
.rec_list_name {font-size:.28rem; padding-top: .2rem; color:#f5d59f; overflow:hidden;}
.rec_list_scoring {font-size:.2rem; line-height: .2rem; color:#6e7385;}
.rec_list > a > .rec_list_btn {height: .8rem; position: relative;}
a.rec_list_2 > .rec_list_btn {margin-top: .3rem;}

.top_list {min-height:5rem; padding:0 .14rem;}
/*.game_list li {position:relative; height: 1.32rem; background:url("https://pic.imgdb.cn/item/62db8a3df54cd3f937d0b6be.jpg") no-repeat center center / 6.06rem; margin-bottom: .2rem;}*/
.game_list li {position:relative; height: 1.32rem; background:url("../img/6da784391e1721b5ef4ac6ec648b82f0.jpeg") no-repeat center center / 6.06rem; margin-bottom: .2rem;}
.game_list a {display:block; width:100%; height:1.06; padding:.13rem 0; overflow:hidden;}
.game_list a:active {background-color:rgba(72,38,0,.1);}
.game_list span {position: absolute; width: .26rem; text-align: center; display:block; font-size:.2rem; color:#e0e1e3; font-weight:bold; left:.05rem; top: .08rem; z-index: 999;}
.game_list i {display:block; width:1.06rem; height:1.06rem; margin-left: .5rem; float:left;}
.game_list dl {width:3.1rem; height:1.04rem; padding-left:.15rem; float:left; overflow:hidden;}
.game_list dt {height:.35rem; font-size:.3rem; margin-top: .06rem; overflow:hidden; vertical-align:middle;}
.game_list dt em {display:flex; align-items:center; justify-content:center; float:left; line-height:.24rem; padding:0 .08rem; vertical-align:middle; margin:.03rem .05rem .05rem .05rem; font-size:.13rem; border-radius:.5rem; color:#a9adbd; background-color: #1c1d1f;}
.game_list dt em.game_list_title {line-height:.35rem !important; font-size:.3rem; padding:0; margin:0; border:none; color:#f5d59f; background: none;}
.game_list dt em.blue {color:#fff;background-image: linear-gradient(to right, #00c0ff, #106ce2); border:none;}
.game_list dt em.green {color:#fff; background-image: linear-gradient(to right, #88c407, #339b00); border:none;}
.game_list dt em.orange {color:#fff; background-image: linear-gradient(to right, #ffc71c, #ff9c1c); border:none;}
.game_list dd {height:.34rem; line-height:.34rem; font-size:.15rem; color:#bdb7a9; overflow:hidden;}
.game_list dd.count {color: #ce3e3e;}
.game_list dd b {padding:.03rem .05rem; margin-right:.05rem; font-weight:normal; font-size:.14rem; border-radius:.03rem; color:#fff;}
.game_list dd tag {margin-left:.08rem}
.label_blue {background-image: linear-gradient(to right, #00b4ff, #106ce2);}
.label_red {background-image: linear-gradient(to right, #f775ff, #e13848);}
.label_green {background-image: linear-gradient(to right, #aac92d, #00800c);}
.label_orange {background-image: linear-gradient(to right, #ffc000, #ef7600);}
.game_list .down_btn {position:absolute; width:1.3rem; height:.44rem; top:0; bottom:0; right:0; margin:auto; z-index:998;}

a.list_more {position:relative; display:block; margin:.2rem auto; max-width:6rem; font-size:.25rem; height:.55rem; line-height:.55rem; border-radius:.15rem; text-align:center; background-image: linear-gradient(#232226, #333338); color:#e0e1e3;}
a.list_more:active {color:#e0e1e3; background-color:#1a1b1d;}
.foot {font-size:.16rem; text-align:center; color:#bdb7a9; margin-bottom: .8rem;}




.game_list2 li {position:relative; height: 1.32rem; background:url("../img/8097acbed1027419f0749df3391cee06.jpeg") no-repeat center center / 6.06rem; margin-bottom: .2rem;}
/* 触发弹窗图片的样式 */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    #myImg:hover {
        opacity: 0.7;
    }

/* 弹窗背景 */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1990; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* 图片 */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* 文本内容 */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* 添加动画 */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* 关闭按钮 */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/* 小屏幕中图片宽度为 100% */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}