.banner { width: 100%; min-height: 4.5rem; background: url("../images/community_banner.gif") no-repeat center center; background-size: cover; }
.banner .banner-main { width: 100%; max-width: 1200px; height: 4.5rem; margin: 0 auto; display: flex; font-size: .36rem; font-weight: 900; line-height: .45rem; letter-spacing: 1px; text-align: center; color: #fff; text-transform: uppercase; }


.community { width: 100%; padding: .3rem 0 .82rem 0; background-color: #f0f1ef; }
.community .community-main {  width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 .3rem;  }
.community .community-main .community-main-left { flex: auto; flex-grow: 1; }
.community .community-main .community-main-right { margin-left: .2rem; width: 3rem; flex-shrink: 0; }

.game-info { height: 5.3rem; padding: .3rem .18rem; border-radius: 4px; text-align: center; border: none; background: url("../images/promo.png") no-repeat 100% 100%; background-size: 100% 100%; position: relative;  }
.game-info h2 { margin-bottom: 0.05rem; font-size: .25rem; font-weight: 700; line-height: .3rem; letter-spacing: normal; text-align: center; color: #fff; }
.game-info p { font-size: .18rem; font-weight: 500; line-height: .2rem; letter-spacing: normal; text-align: center; color: rgba(255, 255, 255, 0.8); }
.game-info button { position: absolute; bottom: .4rem; }
.game-info .btn.down-btn { padding: 8px 16px; color: #fff; font-weight: 600; box-shadow: rgb(0 0 0 / 30%) 0px 15px 20px -10px; font-size: 20px; background: linear-gradient(rgb(250, 84, 0) -7%, rgb(250, 62, 0) 105%); }

.community-blog-list { display: flex; flex-direction: column; }
.community-blog-list li { width: 100%; background-color: rgb(255, 255, 255); box-shadow: rgb(0 0 0 / 20%) 0px 1px 10px 1px; border-radius: 4px; margin-bottom: .2rem; overflow: hidden; }
.community-blog-list li a { width: 100%; height: 100%; display: flex; flex-direction: row; }
.community-blog-list li.large-com a { flex-direction: column; }
.community-blog-list li.large-com p { display: none;}
.community-blog-list li a img { display: block; width: 3.2rem; height: 2rem;}
.community-blog-list li a .li-txt { flex: auto; display: flex; flex-direction: column; padding: .2rem .24rem; }
.community-blog-list li a .li-txt h3 { font-size: .2rem; line-height: .25rem; font-weight: 600; letter-spacing: normal; color: rgb(38, 38, 38); }

.community-blog-list li a .li-txt p { margin-top: .1rem; font-size: .16rem; font-weight: 400; line-height: .2rem; letter-spacing: normal; color: rgba(0, 0, 0, 0.6); }
.community-blog-list li.large-com a img { width: 100%; height: 3.75rem;}

.move-li { text-align: center; background-color: #fff; }


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


@media screen and (min-width: 768px) and (max-width: 960px) {
  .community .community-main .community-main-right { display: none;}
}

@media screen and (min-width: 640px) and (max-width: 768px) {
  .community .community-main .community-main-right { display: none;}
  .community-blog-list li a { flex-direction: column; }
  .community-blog-list li a img { width: 100%; height: 3.75rem;}
  .community-blog-list li p { display: none;}
}

@media screen and (min-width: 320px) and (max-width: 640px) {
  .community .community-main .community-main-right { display: none;}
  .community-blog-list li a { flex-direction: column; }
  .community-blog-list li a img { width: 100%; height: 3.75rem;}
  .community-blog-list li p { display: none;}
  
}