@import url(./common.css);
@import url(./header.css);

.footer {
    width: 100%;
    height: 45px;
    background-color: var(--pr-color);
}

.footer-ul {
    width: 400px;
}

.footer-ul-li__link {
    font-size: var(--text-m);
    color: #ffffff;
}

.main {
    padding-bottom: 20px;
}

.img-load {
    background-image: url('../img/picture.gif');
    background-size: 100% 100%;
    border-radius: .2333rem;
}

.scroll {
    overflow: auto;
    height: 83vh;
}

@media screen and (max-width: 768px) {
    .pc-container {
        display: none;
    }

    body {
        overflow: hidden;
    }

    .footer {
        position: fixed;
        bottom: 0;
        z-index: 99;
    }

    /* 滑块风格 */
    .swiper-title {
        position: relative;
        width: 100%;
        height: .8333rem;
        box-shadow: 0px 0px .1667rem #d5d5d5;
        background-color: #ffffff;
    }

    .swiper-title__group {
        display: flex;
        width: 1rem;
    }

    .swiper-title__text {
        position: relative;
        font-weight: 700;
        color: var(--pr-color);
        margin-left: .3333rem;
    }

    .swiper-title__text.active::after {
        content: '';
        position: absolute;
        left: 50%;
        width: .4167rem;
        height: .0667rem;
        border-radius: .0667rem;
        background-color: var(--pr-color);
        transform: translate(-50%, .4667rem);
        transition: all 200ms ease-in-out;
    }

    .main {
        width: 100%;
        margin-top: 1.6667rem;
    }

    /* 首页 */
    .list {
        display: grid;
        grid-template-areas:
            ". . . ."
            "ip0 ip0 . ."
            "ip0 ip0 . ."
            ". . ip1 ip1"
            ". . ip1 ip1";
        grid-gap: .25rem;
        width: 100%;
        padding: .1667rem;
        max-height: 83vh;
        overflow: auto;
    }

    .list-item {
        height: fit-content;
        border-radius: .2333rem;
    }

    .list-item:active {
        transform: scale(.98);
    }

    .list-item.hotT {
        grid-area: ip0 / ip0 / ip0 / ip0;
    }

    .list-item.hotB {
        grid-area: ip1 / ip1 / ip1 / ip1;
    }

    .list-item-game__img {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
    }

    .list-item-game__img .img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: .2333rem;
    }

    /* 类目 */
    .categories {
        flex-wrap: wrap;
        padding: .1667rem;
        min-height: 50vh;
    }

    .categories-cate {
        width: 48.5%;
        box-shadow: 0px 0px 10px #d7d7d7;
        border-radius: .1667rem;
    }

    .categories-cate:active {
        transform: scale(0.98);
        box-shadow: inset 5px 5px 10px #d9d9d9,
            inset -5px -5px 10px #ffffff;
    }

    .categories-cate__img {
        position: relative;
        width: .8333rem;
        padding-bottom: .8333rem;
        object-fit: contain;
        border-radius: .1667rem;
        border: .0333rem solid var(--pr-color);
    }

    .categories-cate__img .img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
        object-fit: contain;
    }

    .categories-cate__name {
        flex: 1;
        height: .8333rem;
        border-radius: 0 .1667rem .1667rem 0;
        font-size: var(--text-l);
        font-weight: 700;
        color: var(--pr-color);
        padding-left: .2333rem;
    }

    .categories-games {
        padding: 0 .1667rem;
        font-weight: 700;
        color: var(--pr-color);
    }

    .categories-games-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 0.3rem;
        padding: .2rem 0;
    }

    .categories-games-list-item {
        position: relative;
        border-radius: .2333rem;
        box-shadow: -3px -2px 5px #dfdfdf;
    }

    .categories-games-list-item:active {
        transform: scale(0.98);
    }

    .categories-games-list-item .list-item__img {
        position: relative;
        width: 100%;
        height: 100%;
        padding-bottom: 100%;
    }

    .categories-games-list-item .list-item__img img {
        position: absolute;
        border-radius: 0.2333rem;
    }

    .categories-games-list-item .list-item__name {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: .4167rem;
        border-radius: 0 0 .2333rem .2333rem;
        background-color: rgb(201, 54, 63, 0.5);
    }

    .categories-games-list-item .list-item__name span {
        display: block;
        width: 1.6667rem;
        line-height: .4167rem;
        color: #ffffff;
        font-size: var(--text-s);
        font-weight: 400;
        text-align: center;
        margin: 0 auto;
    }


}

@media screen and (min-width: 768px) {
    .swiper-title {
        display: none;
    }

    .swiper {
        display: none;
    }

    .main {
        width: 100%;
        min-height: 100vh;
        padding-left: 130px;
        box-sizing: border-box;
    }

    .pc-container {
        padding: 0 20px;
    }

    .pc-container .ad-top {
        left: 100px;
        width: 100vh;
        height: 140px;
        border: 1px solid #ee3f4d;
        transform: translateX(400px);
    }

    .list {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-gap: 20px;
        margin-top: 20px;
    }

    /* .list-item.a {
        grid-area: a / a / a / a;
    }

    .list-item.b {
        grid-area: b / b / b / b;
    }

    .list-item.c {
        grid-area: c / c / c / c;
    }

    .list-item.d {
        grid-area: d / d / d / d;
    }

    .list-item.e {
        grid-area: e / e / e / e;
    }

    .list-item.f {
        grid-area: f / f / f / f;
    } */

    /* .list::before {
        content: '';
        display: block;
        grid-column-start: span 2;
    } */
    .list-item-game__img {
        position: relative;
        width: 100%;
        padding-bottom: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

    .list-item-game__img .img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .list-item {
        position: relative;
        transition: transform 200ms linear;
        box-shadow: 0px 0px 5px #9d9d9d;
        border-radius: 10px;
    }

    .list-item-game__name {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: var(--text-s);
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        transform: translateY(100%);
        transition: transform 200ms ease-in-out;
        text-shadow: #9d9d9d;
        background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
        border-radius: 0 0 10px 10px;
    }

    .list-item:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    .list-item:hover .list-item-game__name {
        transform: translateY(0%);
    }
}