.main {

    width: 1200px;

    margin: 100px auto;

    min-height: 900px;

    /* display: none; */
    background-color: #9f04ff;
}



.category-show {

    width: 100%;

    height: 100px;

    margin: 50px 0 0;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-justify-content: space-around;

            justify-content: space-around;

}



.category-show-item {

    width: 24%;

    height: 80px;



    border: 4px solid #f0f4f6;

    border-radius: 15px;

    background-color: rgb(155, 237, 255);

    -webkit-transition: all .3s;

    transition: all .3s;

    cursor: pointer;

}



.category-show-item:hover {

    -webkit-transform: scale(1.1);

            transform: scale(1.1);

}



.category-show-item .show-img {

    height: 70px;

    aspect-ratio: 1;

    margin: 0 auto;

}



.category-show-item img {

    height: 50px;

    aspect-ratio: 1;

    margin: 10px;

    border-radius: 10px;

}



.category-show-item .all {

    height: 50px;

    aspect-ratio: 1.3;

    margin: 10px;

    border-radius: 10px;

    background-image: url(../png/all.9e6a935.png);

    background-size: 100%;

    background-position: center;



}



.top {

    width: 100%;

    height: 70px;

    padding: 20px 10px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    font-weight: 600;

    color: rgb(255, 200, 44);



}



.title {

    -webkit-box-flex: 1;

    -webkit-flex: 1;

       -moz-box-flex: 1;

            flex: 1;

}



.more {

    color: #f0f4f6;

}



.more:hover {

    color: rgb(166, 186, 254);

    cursor: pointer;

}



.game-recommond-list,

.game-hot-list,

.gamebox {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-justify-content: space-around;

            justify-content: space-around;

    -webkit-flex-wrap: wrap;

            flex-wrap: wrap;

}



@media screen and (max-width:1200px) {

    .main {

        width: 98%;



    }

}

* {

    margin: 0;

    padding: 0;

    -moz-box-sizing: border-box;

         box-sizing: border-box;

    -webkit-user-select: none;

       -moz-user-select: none;

            user-select: none;

}



.ad {

    margin: 10px 0;

    width: 100%;

}



.gptslot {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

            justify-content: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

            align-items: center;

    margin: 16px;

    margin-top: 0px;

}



.ad-label {

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

            justify-content: center;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

            align-items: center;

    position: relative;

    padding: 5px 0px 2px 0px;

    font-size: 14px;

}



a {

    text-decoration: none;

}



a:link,

a:visited {

    color: inherit;

    text-decoration: none;

}



.score {

    color: #f0f4f6;

    font-size: .9rem;

}

.show-text{
    color: #f0f4f6;
}

.header {

    position: fixed;

    top: 0;

    width: 100%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    z-index: 100;

}
 @media screen and (min-width: 1200px) {
      .header {
       padding: 0 calc(50% - 600px) !important;
      }
    }


.menu {

    width: 40px;

    display: block;

    margin-right: 20px;

    height: auto;

    aspect-ratio: 1;

    background-image: url(../png/menu.7889495.png);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    cursor: pointer;

}



.close {

    width: 40px;

    display: none;

    margin-right: 20px;

    height: auto;

    aspect-ratio: 1;

    background-image: url(../png/close.27d0d87.png);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    cursor: pointer;

}



.fav {

    height: 60px;

    -webkit-box-flex: 1;

    -webkit-flex: 1;

       -moz-box-flex: 1;

            flex: 1;

    line-height: 60px;

    text-align: center;

    font-size: 1.7rem;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;



}



.left {

    width: 60px;

}



.rootbg {

    margin-left: 10px;

    width: 150px;

    height: 100%;

    background-position: center;

    background-size: 100% auto;

    background-repeat: no-repeat;

    cursor: pointer;

}



/* 回到顶部 */



#top_arrow {

    position: fixed;

    width: 50px;

    height: 50px;

    background-image: url(../png/arrow.83fe83a.png);

    background-position: center;

    background-repeat: no-repeat;

    background-size: 100%;

    border-radius: 50%;

    bottom: 10%;

    right: 5%;

    cursor: pointer;

}



.aside {

    width: 100%;

    position: fixed;

    top: 60px;

    overflow: hidden;

    overflow-y: scroll;

    height: 100%;

    background-color: #f0f4f6;

}



.category {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

       -moz-box-orient: vertical;

       -moz-box-direction: normal;

            flex-direction: column;

    width: 90%;

    margin: 0 auto;

    padding: 0 0 50px 0;





}



.category-box {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    padding: 20px 0;

    border-bottom: 2px solid #fff;

    cursor: pointer;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

            justify-content: center

}



.category-box img {

    height: 60px;

    aspect-ratio: 1;

    border-radius: 15px;

}



.all-category-img {

    height: 60px;

    aspect-ratio: 1;

    border-radius: 15px;

    background-image: url(../png/all.9e6a935.png);

    background-position: center;

    background-size: 100%;

}



.category-box .category-item {

    vertical-align: middle;

    line-height: 60px;

    color: #9f04ff;

    font-weight: 500;

    font-size: 1.3rem;

    margin-left: 20px;

}



.bottom {

    margin-top: 30px;

    position: absolute;

    left: 0;

    width: 100%;

    text-align: center;

    padding: 10px 0 20px;

}



.bottom a {

    color: #9f04ff;

    text-decoration: none;



}



.bottom a:hover {

    cursor: pointer;

}



.bottom .btxt {

    margin: auto;

    width: 80%;

    height: auto;

}



.bottom .fav .rootbg {

    margin: 0 auto;

}



.style1-item {

    width: 33%;

    margin: 20px auto;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

       -moz-box-orient: vertical;

       -moz-box-direction: normal;

            flex-direction: column;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

            align-items: center;

    -webkit-transition: all .3s;

    transition: all .3s;

}



.style1-item:hover {

    -webkit-transform: scale(1.1);

            transform: scale(1.1);

    cursor: pointer;

}



.game-img {

    width: 90%;

    aspect-ratio: 1.3;

    /* background-color: red; */

    border-radius: 15px;

    background-position: center;

    background-size: cover;

}



.game-score {



    display: -webkit-box;



    display: -webkit-flex;



    display: -moz-box;



    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

       -moz-box-pack: center;

            justify-content: center;

}



.game-mask {

    /* width: 10px; */

    height: 100%;

    position: absolute;

    right: 0;

    background-color: #fff;

}



.game-star {

    position: relative;

    width: 80px;

    height: 20px;

    background-image: url(../png/5.263a0ca.png);

    background-size: 100%;

    background-position: center;

    margin-right: 2%;

    vertical-align: middle;

}



.style2-item {

    width: 16.6%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -webkit-flex-direction: column;

       -moz-box-orient: vertical;

       -moz-box-direction: normal;

            flex-direction: column;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

            align-items: center;

    margin: 10px 0;

}



.style2-item .game-img {

    width: 95%;

    aspect-ratio: 1.3;

    border-radius: 10px;

    box-shadow: 0 3px 5px 3px rgba(0, 0, 0, .2);

    background-position: center;

    background-size: cover;

}



.style2-item .game-score {

    margin-top: 20px;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: flex;

    font-size: .9rem;

    color: rgb(132, 146, 166);

}



.style2-item .game-name {

    margin: 5px 0;

    font-size: .7rem;

}



.style2-item .play-button {

    width: 30%;

    text-align: center;

    height: 30px;

    line-height: 30px;

    background-color: rgb(155, 144, 219);

    border-radius: 15px;

    color: #fff;

}



.style2-item:hover {

    cursor: pointer;

}



@media screen and (max-width:1200px) {

    .game-star {

        width: 80px;

        height: 20px;

    }



    .style2-item .play-button {

        width: 50%;

    }



}



@media screen and (max-width:750px) {

    .style2-item {

        width: 33%;

    }

}