/* 首页-大图 */
.index-banner-wrap{ min-height:calc( ( 660 / 1920 ) * 100vw); min-width: 1100px; margin: 0 auto 65px; overflow: hidden;background:url(../images/img-bg.png) no-repeat top center; background-size: cover; display: flex; position: relative;}
.index-banner{ position: relative; width: 1100px; height: 660px; margin: 0 auto;}
.index-banner__pic{ position: absolute; bottom: 0; left: 20px; z-index: 1; width: 550px;}
.index-banner__info{ position: absolute; top: 0; right: 0; z-index: 1; width: 440px; text-align: center;}
.index-banner__info .words{ color: #fff; line-height: 46px; margin-top: 150px; font-size: 28px;}
.index-banner__info .code{ color: #fff; line-height: 40px; margin-top: 34px;}
.index-banner__info .code .m-img{ width: 150px;margin: 0 auto;}
.index-banner__info .code .txt{ font-size: 12px;}
.index-banner__info .btn{ width: 334px; height: 70px; line-height: 70px; border-radius: 60px; color: #fff; background-color: #16bf6c; display: block; margin: 26px auto 0;}
.index-banner__info .btn .icon{ width: 26px; height: 26px; display: inline-block; vertical-align: middle; margin-right: 7px; margin-top: -2px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAZCAMAAAAYAM5SAAAAdVBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////li2ZAAAAAJnRSTlMAfkikFHGSJBHteOnY1GxCCQa9sGVYi18+KB4ZDfjiy8WGRjEuKxuWgGoAAACrSURBVCjPvc7HDoMwEEXRRwvYAWx6Sy/z/5+YiTCKDZtIkXIWbzF3YcPIRxiehutaAuFzAmSJlSKrTkQkWhFjpRH0loZUhXBE1F/ISBNY7nw40iKARXk2ubzfK42H7wCG2wiciTIE5Eg6HgVim7Tjif6Twl/SnkhskuRpEEs5bFLReQ1m64SP2ikZbDFf6pgJIq+A7cDJB+Nf5fg2aU7KpBquNq00WJ6VE2YvHg8vVih4mlwAAAAASUVORK5CYII=) no-repeat;}

/*swiper3*/
.I_swipers .swiper-slide{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.I_swipers .swiper-slide::before{ 
    content:'';
    background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 50%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
}
.I_swipers .swiper-slide_banner{
    width: 100%;
    height:100%; 
    display: flex;
    align-items: center;
    justify-content: center;
    
}
.I_swipers .swiper-slide_banner>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.I_swipers .swiper-pagination{
    padding-right: calc( ( 80 / 1920 ) * 100vw );
    padding-bottom: calc( (45 / 1920) * 100vw );
    box-sizing: border-box;
    text-align: right;
}
.I_swipers .swiper-pagination-bullet{
    background: #F0F2F5;
    width: 8px;
    height: 8px;
    transition: all .2s linear 0s;
 }
 .I_swipers .swiper-pagination-bullet-active{
    width: 24px;
    border-radius: 16px;
    background: #00CB4E;
}
.I_swipers .swiper-button-prev,
.I_swipers .swiper-button-next {
  opacity: 0;
  transition: opacity 0.3s;
  margin-top:-40px;
}
.I_swipers:hover .swiper-button-prev,
.I_swipers:hover .swiper-button-next {
  opacity: 1;
}
.I_swipers .swiper-button-next::after,.I_swipers .swiper-button-prev::after{
    display: none;
}
.I_swipers .swiper-button-next,.I_swipers .swiper-button-prev{
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
}
.I_swipers .swiper-button-next{
    background-image:url(../images/swiper-button-next.png);
    right: calc( ( 80 / 1920 ) * 100vw );
} 
.I_swipers .swiper-button-prev{
    background-image:url(../images/swiper-button-prev.png);
    left: calc( ( 80 / 1920 ) * 100vw );
} 
.I_swipers .swiper-slide_info img{
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    min-width: auto;
    min-height: auto;
    margin-right: 24px;
    border-radius: 16px;
    background: #D8D8D8;
 }
/*swiper8*/
.I_swiper .swiper-slide{ display: flex; justify-content: center; align-items: center; position: relative;}
.I_swiper .swiper-slide::before{ 
    content:'';
    background: linear-gradient(0deg, #000000 0%, rgba(0,0,0,0) 50%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
}
.I_swiper .swiper-slide_banner{
    height:100%; display: flex;align-items: center;justify-content: center;
}
.I_swiper .swiper-slide img{ 
    width: 100vw;
    min-width: 1100px;
}
.I_swiper .swiper-pagination{
    /* padding-right: 80px;
    padding-bottom: 45px; */
    padding-right: calc( ( 80 / 1920 ) * 100vw );
    padding-bottom: calc( (45 / 1920) * 100vw );
    box-sizing: border-box;
    text-align: right;
}
.I_swiper .swiper-pagination-bullet{
    background: #F0F2F5;
    width: 8px;
    height: 8px;
    transition: all .2s linear 0s;
 }
 .I_swiper .swiper-pagination-bullet-active{
    width: 24px;
    border-radius: 16px;
    background: #00CB4E;
}
.I_swiper .swiper-button-prev,
.I_swiper .swiper-button-next {
  opacity: 0;
  transition: opacity 0.3s;
  margin-top:-40px;
}
.I_swiper:hover .swiper-button-prev,
.I_swiper:hover .swiper-button-next {
  opacity: 1;
}
.I_swiper .swiper-button-next::after,.I_swiper .swiper-button-prev::after{
    display: none;
}
.I_swiper .swiper-button-next,.I_swiper .swiper-button-prev{
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-size: contain;
}
.I_swiper .swiper-button-next{
    background-image:url(../images/swiper-button-next.png);
    /* right: 80px; */
    right: calc( ( 80 / 1920 ) * 100vw );
} 
.I_swiper .swiper-button-prev{
    background-image:url(../images/swiper-button-prev.png);
    /* left: 80px; */
    left: calc( ( 80 / 1920 ) * 100vw );
} 
.index-banner-mask{
    position: absolute;
    /* left: 0; */
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.swiper-slide_info{   
    width: calc(100vw - 409px);
    /* padding: 0 80px; */
    padding: 0 calc( (80 / 1920) * 100vw );
    /* width: calc(100vw - 190px - 409px); */
    min-width: calc(1100px - 409px);
    padding-right: 409px;
    margin: 0 auto;
    font-family: SourceHanSansSC, SourceHanSansSC;
    display: flex;
    align-items: center;
    /* flex-direction: column; */
    /* transform: translateY(75%); */
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 55px; */
    bottom: calc( (55 / 1920) * 100vw );
    z-index: 1;
 }
 .I_swiper .swiper-slide_info img{
    flex-shrink: 0;
    /* width: calc( ( 100 / 1920 ) * 100vw );
    height: calc( ( 100 / 1920 ) * 100vw ); */
    width: 100px;
    height: 100px;
    min-width: auto;
    min-height: auto;
    margin-right: 24px;
    border-radius: 16px;
    background: #D8D8D8;
 }
 .swiper-slide_info .swiper-slide_textcontent{
    flex: 1;
    /* height: calc( ( 100 / 1920 ) * 100vw ); */
    height: 100px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
 }
.swiper-slide_info .swiper-slide_title{
    font-size: 32px;
    font-weight: bold;
    color: #FFFFFF;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
 }
.swiper-slide_info .swiper-slide_text{
    font-size: 22px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    /* line-height: 40px; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
 }
.index-banner-mask .mask-pagination{
    width: 409px;
    background: rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
}
.mask-pagination .mask-pagination_item{
    padding: 20px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.mask-pagination .mask-pagination_active{
    background: rgba(0, 0, 0, .5);
}
.mask-pagination .mask-pagination_active::before{
    content:'';
    width: 6px;
    height: 106px;
    background: #15BF6B;
    border-radius: 3px;
    position: absolute;
    right: 13px;
    /* animation: example .5s forwards; */
}
@keyframes example {
    0% { transform: translateX(0); }
    50% { transform: translateX(-18px); }
    70% { transform: translateX(-10px); }
    90% { transform: translateX(-15px); }
    100% { transform: translateX(-13px); }
}

.mask-pagination .mask-pagination_icon{
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    margin-right: 16px;
    border-radius: 16px;
    border: 1px solid #fff;
}
.mask-pagination .mask-pagination_info{
    flex: 1;
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: SourceHanSansSC, SourceHanSansSC;
    overflow: hidden;
}
.mask-pagination .mask-pagination_title{
    font-size: 20px;
    /* font-weight: bold; */
    color: #FFFFFF;
    line-height: 35px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.mask-pagination .mask-paginnation_text{
    font-size: 16px;
    font-weight: 400;
    color: rgba(255,255,255,0.85);
    line-height: 29px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* 首页-游戏风向标 */
.index-row{ width: 1120px; overflow: hidden;}
.index-row .item{ float: left; margin: 0 20px 30px 0; width: 166px; height: 200px; background-color: #fff; border-radius: 12px; overflow: hidden; text-align: center;box-shadow: 0px 2px 13px 0px rgba(22, 191, 108, 0.05);}
.index-row .item .m-img{ width: 84px; height: 84px; border-radius: 14px; overflow: hidden; margin: 25px auto 5px;}
.index-row .item .words{ padding: 0 30px; height: 30px; line-height: 30px; overflow: hidden; font-size: 14px;}
.index-row .item .btn{ display: block; width: 68px; height: 26px; line-height: 26px; color: #fff; border-radius: 20px;background-color: #16BF6C; margin: 5px auto 0; font-size: 12px;}

/* 首页-排行榜 */
.index-ranking-nav{ display: inline-block;height: 36px; line-height: 36px; border-radius: 18px; overflow: hidden; background-color: #ededed; vertical-align: top; margin-left: 20px;}
.index-ranking-nav a{ float: left; padding: 0 30px; text-align: center; font-size: 14px;}
.index-ranking-nav .active{ color: #fff; background-color: #16BF6C; border-radius: 18px;}
.index-ranking-con{ overflow: hidden; margin-bottom: 30px;}
.index-ranking{ height: 600px;border-radius: 12px;background-color: #fff;
    box-shadow: 0px 2px 13px 0px rgba(22, 191, 108, 0.05); overflow: hidden;display: flex;display:-webkit-flex;  flex-wrap: wrap;-webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; align-content: flex-start;-webkit-align-content: flex-start;}
.index-ranking .item{ position: relative; width: 520px; height: 84px; overflow: hidden;margin-top: 52px;}
.index-ranking .item-num{ position: absolute; left: 30px; top: 50%; transform: translateY(-50%);-webkit-transform: translateY(-50%);  display:block; width: 20px; height: 20px; line-height: 20px; text-align: center; color: #fff;font-weight: 700; background-color: #c7c7c7;}
.index-ranking .item:nth-child(1) .item-num,
.index-ranking .item:nth-child(2) .item-num,
.index-ranking .item:nth-child(3) .item-num{ background-color: #F5585C;}
.index-ranking .item-center{ position: absolute; left: 75px; top: 0; width: 314px; display: flex;display:-webkit-flex;box-sizing: border-box;}
.index-ranking .item-center .pic{ width: 84px; height: 84px; border-radius: 14px; overflow: hidden; display: block;}
.index-ranking .item-center .info{ flex: 1; -webkit-flex:1; overflow: hidden; padding-left: 13px; box-sizing: border-box;}
.index-ranking .item-center .info-title{ display: block; font-size: 18px; font-weight: 700; height: 30px; line-height: 30px; overflow: hidden;}
.index-ranking .item-center .info-title:hover{ text-decoration: underline;}
.index-ranking .item-center .info-down{ font-size: 14px; height: 30px; line-height: 30px; overflow: hidden; color: #999;}
.index-ranking .item-center .info-tag{ height: 20px; line-height: 20px; overflow: hidden;}
.index-ranking .item-center .info-tag>span{ position: relative; display: inline-block; padding-right: 5px; color: #999;
    font-size: 14px;}
.index-ranking .item-center .info-tag>span::after{
    content: ""; position: absolute; top: 50%; right: -1px; transform: translateY(-50%);-webkit-transform: translateY(-50%);width: 3px; height: 3px; opacity: .5; border-radius: 50%; background-color: #999;
}
.index-ranking .item-center .info-tag>span:last-of-type::after{
    width: 0;
}
.index-ranking .item-btn{ position: absolute; right: 40px; top: 50%; transform: translateY(-50%);-webkit-transform: translateY(-50%); display: block; width: 74px; height: 36px; line-height: 36px; text-align: center; background-color: #16BF6C; border-radius: 20px; color: #fff;}



/* 首页-热门资讯 */
.index-information{ overflow: hidden;display: flex;display:-webkit-flex; flex-wrap: wrap;-webkit-flex-wrap: wrap; justify-content: space-between; -webkit-justify-content: space-between; }
.index-information__item{
    width: 536px;height: 220px;border-radius: 12px;background-color: #fff;
    box-shadow: 0px 2px 13px 0px rgba(22, 191, 108, 0.05);
    display: flex;display:-webkit-flex; align-items: center; -webkit-align-items: center;
    padding: 0 25px; box-sizing: border-box; margin-bottom: 20px;
}
.index-information__item .pic{ width: 196px; height: 126px; overflow: hidden; border-radius: 13px;}
.index-information__item .info{ flex: 1; overflow: hidden; padding-left: 20px; box-sizing: border-box;}
.index-information__item .info-t{ font-size: 19px; height: 50px; line-height: 26px; margin-bottom: 16px; overflow: hidden; font-weight: 700;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.index-information__item .info-t:hover{ text-decoration: underline;}
.index-information__item .info-author{ font-size: 14px; color: #666;}
.index-information__item .info-author>p{ height: 26px; line-height: 26px; overflow: hidden;}