@import url(./common.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;
    }

    .header-categories {
        display: none;
    }

    .header-search {
        display: none;
    }

    body {
        overflow: hidden;
    }

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

    .container-top {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 99999;
    }

    .header {
        position: relative;
        width: 100%;
        height: .8333rem;
        background-color: var(--pr-color);
    }

    .header-menu {
        position: absolute;
        top: 0;
        left: 0;
        width: .8333rem;
        height: .8333rem;
        transform: translate(0, 0);
    }

    .header-home {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .header-home:active {
        transform: translate(-50%, -50%) scale(0.95);
    }

    .header-logo {
        width: 1.5667rem;
        height: 100%;
        object-fit: contain;
    }

    /* 滑块风格 */
    .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;
    }

    .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;
    }

    .container-top {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 50px;
        z-index: 9999;
        background-color: var(--pr-color);
    }

    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 90%;
    }

    .header-home {
        cursor: pointer;
    }

    .header-home .header-logo {
        width: 100px;
    }

    .header-categories {
        display: flex;
        height: 50px;
        flex: 1;
        margin-left: 100px;
    }

    .header-categories__item {
        width: fit-content;
        height: 50px;
        padding: 0 12px;
        cursor: pointer;
    }

    .header-categories__item:hover {
        background-color: var(--su-color);
    }

    .header-categories__item .header-categories__img {
        width: 25px;
        margin-right: 6px;
    }

    .header-categories__item .header-categories__item_name {
        line-height: 1;
        font-size: var(--text-m);
        text-transform: uppercase;
        color: #ffffff;
    }

    .header-search {
        position: relative;
        display: flex;
        width: 38px;
        height: 35px;
        transition: width 300ms linear;
        background-color: var(--su-color);
        border-radius: 20px;
        overflow: hidden;
    }

    .header-search:hover {
        width: 180px;
    }

    .header-search:hover .header-search__input {
        width: 120px;
    }

    .header-search .header-search__input {
        position: absolute;
        top: 50%;
        left: 20px;
        width: 0;
        height: 35px;
        transform: translateY(-50%);
        line-height: 1;
        border: 0;
        outline: none;
        font-size: var(--text-m);
        color: #ffffff;
        background-color: transparent;
        transition: width 350ms linear;
    }

    .header-search:hover .header-search-button {
        cursor: pointer;
    }

    .header-search .header-search-button {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        height: 35px;
    }

    .header-search .header-search-button .header-search-button__icon {
        width: 15px;
        height: 15px;
        font-size: 0;
    }

    .main {
        margin-top: 20px;
        width: 100%;
    }

    .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-areas:
            'd d a a a . . . . . . . . . . .'
            'd d a a a . . . b b . . . . c c'
            'd d a a a . . . b b . . . . c c'
            '. . . . . . e e e . . . . . . .'
            '. . . . . . e e e . . . f f . .'
            '. . . . . . e e e . . . f f . .'
            '. . . . . . . . . . . . . . . .'
        ;
        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%);
    }


}