* {
    padding: 0;
    margin: 0;
}

body {
    background: #F7F7F7;
}

.pointer {
    cursor: pointer;
}

.swiper-container1 {
    width: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}

.swiper-container2 {
    display: none;
}

.swiper-slide img {
    width: 100%;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    width: 2%;
    border-radius: 15px;
    background: white;
}

.btn1 {
    width: 3% !important;
    background: #CA5021 !important;
    opacity: 1;
}

.btn2 {
    width: 3% !important;
    background: #1CADE5 !important;
    opacity: 1;
}

.btn3 {
    width: 3% !important;
    background: #F7A607 !important;
    opacity: 1;
}

.btn4 {
    width: 3% !important;
    background: #032175 !important;
    opacity: 1;
}

.btn5 {
    width: 3% !important;
    background: #FED802 !important;
    opacity: 1;
}

.flex {
    display: flex;
}

.gameList,
.trends {
    width: 90%;
    min-height: 200px;
    position: relative;
    flex-wrap: wrap;
    margin: 5% auto 0;
    justify-content: flex-start;
    padding: 1%;
}

.gameList .gameTitle,
.trends .trendsTitle {
    position: absolute;
    top: 1.5vh;
    left: -7%;
}

.gameList .gameTitle>img,
.trends .trendsTitle>img {
    width: 25% !important;
}

.trends .pointer>img:hover {
    transform: scale(1.1);
}

.gameList .gameTitle>span,
.trends .trendsTitle>span {
    float: right;
    margin-left: -15%;
}

.btn1_c {
    color: #CA5021;
}

.btn2_c {
    color: #1CADE5;
}

.btn3_c {
    color: #F7A607 !important;
}

.btn4_c {
    color: #032175 !important;
}

.btn5_c {
    color: #FED802 !important;
}

.trends {
    margin-top: 10%;
}

.gameList>div,
.trends>div {
    width: 23.8%;
    height: 100%;
    position: relative;
    text-align: center;
}

.gameList>div:not(:first-child),
.trends>div:not(:first-child) {
    margin-top: 5%;
    margin-left: 1%;
}

.trends>div:not(:first-child) {
    width: 32%;
    text-align: inherit;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    overflow: hidden;
}

.gameList>div img:first-child,
.trends>div img:first-child {
    width: 100%;
}

.gameList>div .gameName {
    position: absolute;
    bottom: 12%;
    width: 100%;
    color: white;
    z-index: 11;
    display: none;
}

.gameList>.pointer>.zao {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent 50%);
    display: none;
    z-index: 10;
    border-radius: 15px;
}

.gameList>div:hover .gameName,
.gameList>div:hover .zao {
    display: block;
}

.gameList>div img:last-child {
    position: absolute;
    left:50%;
    bottom: 0.8%;
    width: 25%;
    transform: translate(-50%, 50%);
    z-index: 11;
}

.trends>div .card {
    width: 100%;
    height: 180px;
    background: white;
    position: relative;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    color: #A2A2A2;
    overflow: hidden;
}

.trends>div .card h3 {
    height: 35%;
    padding: 5%;
}

.trends>div .card p,
.trends>div .card h2 {
    margin-left: 5%;
}

.trends>div>h3 {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -10%;
    position: relative;
    padding: 1% 0;
}

.foot {
    width: 100%;
    margin-top: 10%;
    text-align: center;
}

.foot>div:first-child>img {
    width: 7%;
}

.foot>div:first-child>img:first-child {
    width: 100%;
}

.foot>div:last-child {
    background: #D7D7D7;
    margin-top: 4.5%;
    padding: 1% 0;
}

/* 移动端 */
@media screen and (max-width: 800px) {
    .trends>.pointer {
        display: none;
    }

    .swiper-container2 {
        display: block;
    }

    .gameList {
        gap: 2%;
    }

    .gameList>div,
    .trends>div {
        width: 160px;
    }

    .gameList .gameName {
        display: block !important;
        font-size: 9px;
        background: rgb(137, 137, 137, .5);
    }

    .gameList .gameTitle {
        /*top: 33.5%;*/
        left: -5%;
    }

    .trends .trendsTitle {
        /*top: 57%;*/
        left: -5%;
    }

    .gameList .gameTitle>span,
    .trends .trendsTitle>span {
        margin-left: 0;
        font-size: 12px;
    }

    .trends>div:not(:first-child) {
        box-shadow: none;
    }

    .gameList .zao {
        display: none !important;
    }

    .gameList>div:not(:first-child) {
        margin-left: 0;
        margin-top: 0%;
    }

    .trends>div:not(:first-child) {
        width: 100%;
        margin-left: 0;
    }

    .gameList,
    .trends {
        position: inherit;
        min-height: 230px;
        flex-wrap: nowrap;
        margin: 4% auto 0;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .gameList {
        margin: 8% auto 0;
    }

    .trends {
        margin: 7% auto 0;
    }

    .gameList>div img:first-child {
        width: 160px;
    }

    /* 隐藏滚动条 */
    .gameList::-webkit-scrollbar {
        display: none;
    }

    .card {
        font-size: 12px;
    }

    .card>div:last-child {
        align-items: center;
        justify-content: flex-end;
        padding-right: 5%;
    }
}