.bannerBox{width: 7.5rem;height: 2rem;position: relative;}
.bannerBox .bannerPic{width: 7.5rem;height: 4.2rem;}
.bannerBox .cont{
    width: 5.8rem;
    position: absolute;
    left: 50%;
    margin-left: -2.9rem;
    height: 48%;

}


.bannerBox .cont ul li .bannerFace{width: 1.4rem;height: 1.4rem;border-radius: .27rem;float: left;margin-right: .25rem;box-shadow: 3px 3px 10px #333, -1px -1px 10px #333;}
.bannerBox .cont ul li h4{font-size: .36rem;color: #fff;font-weight: normal;padding-top: .03rem;}

.bannerBox .cont ul li p {
    font-size: .22rem;
    color: #6c7582;
    margin-top: .1rem;
    margin-bottom: .05rem;
    white-space: nowrap;
}
.bannerBox .cont ul li p em{color: #00ffe7;}
.bannerBox .cont ul li p img{width: .31rem;height: .29rem;margin-right: .1rem;position: relative;top: .03rem;}

.bannerBox .cont ul li span {
    width: 1rem;
    font-size: .22rem;
    color: #ffffff;
    display: block;
    overflow: hidden;
    height: .3rem;
    background-color: #a96534;
    border-radius: 12px;
    text-align: center;
}
.bannerBox .cont .startGame{width: 2.9rem;height: .8rem;line-height: .8rem;text-align: center;font-size: .32rem;color: #fff;background: linear-gradient(to right, #a555dc, #da61e8);display: block;margin: 0 auto;border-radius: .4rem;clear: both;margin-top: .3rem;}
.startGame2{width: 2.9rem;height: .8rem;line-height: .8rem;text-align: center;font-size: .32rem;color: #fff;background: linear-gradient(to right, #a555dc, #da61e8);display: block;margin: 0 auto;border-radius: .4rem;clear: both;margin-bottom:.7rem;-webkit-tap-highlight-color:transparent;}
.startGame3{ 
 width: 2.9rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    font-size: .32rem;
    color: #1e1b1b;
    background: linear-gradient(to right, #ddda0b,#f2ee02);
    display: block;
    margin: 0 auto;
    border-radius: .4rem;
    clear: both;
    margin-bottom: .7rem;
	margin-top: -.5rem;}
	.startGame4{width: 2.9rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    font-size: .32rem;
    color: #fff;
    background: linear-gradient(to right, #a555dc, #da61e8);
    display: block;
    margin: 0 auto;
    border-radius: .4rem;
    clear: both;
    margin-bottom: .7rem;}
        .loading-dots::after {
            content: '';               /* 初始内容为空 */
            width: 1em;
            text-align: left;
            animation: dots 1.5s steps(4, end) infinite; /* 1.5秒步进动画 */
        }
        .startGame2:active{
            transform: scale(0.95);
        }
        @keyframes dots {
            0% {
                content: '';
            }
            25% {
                content: '.';
            }
            50% {
                content: '..';
            }
            75% {
                content: '...';
            }
            100% {
                content: '';
            }
        }
.bannerBox .gradient{width: 7.5rem;height: 3rem;background: linear-gradient(180deg,transparent,rgba(33,39,47,0) 5%,rgba(33,39,47,.33) 20%,#21272f 40%,#252a35);position: absolute;bottom: 0;}

/* 中部banner图片 */
.middle{width:7rem ;margin:auto;}
/* 游戏图片 */
.gamePic{margin-top: .4rem;padding: 0 .3rem;}
.gamePic .tit h3{height: .32rem;line-height: .32rem;font-size: .28rem;color: #fff;font-weight: normal;background: url(/static/o2uc/assets/image/icon_1.png) no-repeat;padding-left: .43rem;background-size: .27rem .32rem;}
.gamePic .cont{
    margin-top: .3rem;
    
}
.gamePic .cont ul{width: 6.9rem;height: 6rem;white-space: nowrap;overflow-y: hidden;}
.gamePic .cont ul li{display: inline-block;}
.gamePic .cont ul li img{/*width: 3.6rem;*/height: 6rem;border-radius:10px;}
.gamePic .cont ul::-webkit-scrollbar{display: none;}

/* 游戏介绍 */
.gameIntr{margin-top: .4rem;padding: 0 .3rem;}
.gameIntr .tit h3{height: .32rem;line-height: .32rem;font-size: .28rem;color: #fff;font-weight: normal;background: url(/static/o2uc/assets/image/icon_2.png) no-repeat;padding-left: .43rem;background-size: .31rem .32rem;}
.gameIntr .cont{
    padding: 0 .1rem;
    margin-top: .3rem;
    font-size: .26rem;
    color: #a3a3a3;
    line-height: .48rem;
    text-align: justify;
        overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    position: relative;
    transition: all 0.3s;
}
.gameIntr .cont p{line-height: .48rem;font-size: .26rem;color: #a3a3a3;text-align: justify;}

/* 2019-04-25 游戏推荐详情页*/
.gameReco{margin-top: .4rem;padding: 0 .3rem;}
.gameReco .tit{display: flex;justify-content: space-between;}
.gameReco .tit h3{height: .32rem;line-height: .32rem;font-size: .28rem;color: #fff;font-weight: normal;background: url(/static/o2uc/assets/image/ji.png) no-repeat left 0.03rem;padding-left: .43rem;background-size: .3rem .26rem;}
.gameReco .tit a{font-size: 0.24rem;color: #a3a3a3;}
.gameReco .cont{margin-top: 0.35rem;}
.gameReco .cont ul{display: flex;justify-content: space-between;}
.gameReco .cont ul a li{width: 1.28rem;text-align: center;}
.gameReco .cont ul a li img{width: 1.28rem;height: 1.28rem;display: block;border-radius: 0.25rem;}
.gameReco .cont ul a li p{font-size: 0.24rem;color: #a3a3a3;margin-top: 0.08rem;}
.bmbox{
    overflow: hidden;
    height: 50%;
	margin-top: 1%;
}
.box{
    padding: 10px 0;
    white-space: nowrap;/*文本不会换行，文本会在在同一行上继续*/
    overflow-y:auto;/*可滑动*/
}
/*自定义滚动条的伪对象选择器, CSS 可以隐藏滚动条*/
/*.box::-webkit-scrollbar{
    display: none;
}*/
.box1{
    width: 30%;
    margin-left: 3%;
    height: 60px;
    display: inline-block;/*行内块元素*/
}

.gamepl{margin-top: .4rem;padding: 0 .3rem;}
.gamepl .tit h3{height: .32rem;line-height: .32rem;font-size: .28rem;color: #fff;font-weight: normal;background: url(/static/o2uc/assets/image/icon_2.png) no-repeat;padding-left: .43rem;background-size: .31rem .32rem;}
.avatar{float: left;width: .4rem;height: .4rem;border-radius: 50%;}
.name{font-size: .24rem;color: #e4e4e4;margin-left: .47rem;}
.item{margin-top: 0rem;}
.item-content{padding-left: .5rem;font-size: .24rem;color: #a3a3a3;}
.follows{font-size: .24rem;color: #c5c5c5;position: relative;top: .4rem;margin-left: 5.5rem;}
.avatar-wrap{width: 100%;height: 1rem;}
.star-box{line-height: .5rem;}

.item-img {margin-top: .1rem;padding-left: .5rem;}
.comments .item .multiple-img img {width: 1.57rem;}
.imaaa{width: 1.57rem;}
.xx{margin-bottom: 2rem;}
.zz{width: .28rem;}
.comments .item .follows .hand {
    display: inline-block;
    width: .25rem;
    height: .23rem;
    background: url(http://img.37wan.cn/tg/hy-example03-20171113/image/follow.png?t=20180125070351749) no-repeat;
    background-size: 100% 100%;
    margin-left: .05rem;}

   .aygdzcan {border-radius: .4rem;
    background: linear-gradient(to right, #aa56dd, #fe494d);
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding: 8px 30%;
    margin-left: 10%;
	border: none;}
.ayzcsrk{margin-top: 25px;display: inline-flex;;align-items: center;background-color: rgb(250 255 189 / 1);}

/*功能介绍弹窗开始*/
        /* 遮罩层样式 */
        .overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            transition: opacity 0.3s ease-in-out;
        }

        /* 弹窗容器样式 */
        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            width: 5.5rem;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1001;
            transition: transform 0.1s ease-in-out;
        }

        /* 弹窗标题样式 */
        .popup h2 {
            margin: 0;
            font-size: 0.4em;
        }
        .popup p{
            font-size: 0.3em;
        }
        /* 链接样式 */
        .popup a {
            text-decoration: none;
            font-size: 0.3em;
            display: block;
            text-align: right;
            -webkit-tap-highlight-color: transparent; /* Safari和部分Android浏览器 */
            tap-highlight-color: transparent; 
        }
        /* 显示弹窗 */
        .show-popup {
            display: block;
        }
        .cont.expanded {
  -webkit-line-clamp: unset; /* 展开全部 */
}

.toggle-btn {
  cursor: pointer;
  color: #a3a3a3;
    align-items: center;
  font-size: .26rem;
  display: flex;
    justify-content: center;
    
}

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
    border-left: 0.18rem solid transparent;
    border-right: 0.18rem solid transparent;
    border-top: 0.18rem solid #a3a3a3;       /* 上边为实色，形成 ▼ */
  transition: transform 0.3s;
}

.toggle-btn.active .arrow {
  transform: rotate(180deg); /* 点击时旋转180°，变成 ▲ */
}
/*功能介绍弹窗结束*/