.container {
  width: 100%;
  /* min-height: 100vh; */
  margin: 0 auto;
  position: relative;
}
.wrap {
  width: 92%;
  margin: 0 auto;
  margin: 60px auto;
}
.wrap>div{
  padding:0 10%;
}
.bg_color{
  background-color: #f9f9f9;
}
/*----- header -----*/
.hero {
  position: relative;
  width: 100%;
}

.hero img {
  width: 100%;
  min-height: 283px;
  object-fit: cover;
}

.download {
  position: relative;
  width: 100%;
  text-align: center;
  padding:0;
  margin:0;
}

.btn {
  width: 320px;
  height: 100px;
  border: none;
  display: inline-block;
  text-align: left;
}

.btn.android {
  background: url(../img/btn_and.jpg) no-repeat;
  background-size: contain;
  transform: translate(15%, 30%);
}

.btn.ios {
  background: url(../img/btn_ios.jpg) no-repeat;
  background-size: contain;
  transform: translate(-15%, 30%);
}
/*----- communicate -----*/
.text {
  margin: 0 auto;
  padding-bottom: 74px;
  background-color:#fcfcfc;
}

.summary {
  font-size: 32px;
  font-family: "Arial", serif;
  padding-top: 16px;
  font-weight: bold;
  text-align: center;
}

.desc {
  margin-top: 8px;
  font-size: 22px;
  font-family: "Arial", serif;
  color: #838383;
  text-align: left;
}

/*----- game way----- */
.wrap > div {
  margin-bottom: 60px;
}
.game_play {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: center;
  margin: 0 auto;
}
.game_play > div {
  width: 25%;
  height: auto;
}
.game_play>div>img{
  width: 95%;
  object-fit: cover;
}
.module_title {
  margin: 0 auto;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 40px;
}
#mobile_play{
  display:none;
}
.mobile_play .swiper-container{
  height: 416px;
}
img.play_pic{
  width: 238px;
  height: 416px;
}
/* -----source-video----- */
.wrap>.source_video{
  padding:0;
}

/* -----user commit----- */
.commonts_wrap .swiper-container{
  height:320px;
}
.shadow_box{
  height: 320px;
  box-sizing: border-box;
  padding:30px 40px;
  border: 2px solid #9e9c9c;
  background-color: #fcfcfc;
}
.star_wrap {
  width: auto;
  margin: 0 auto;
}
.star_wrap > img {
  width: 25px;
  height: 25px;
}
.commont_text {
  font-size: 20px;
  font-weight: 300;
  color: rgb(58, 56, 56);
  margin-top: 30px;
}
.commont_text > div {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
}
.commont_text > div > p {
  float: right;
}
.commont_text > p {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  margin-bottom: 60px;
}
.user_name{
  font-weight: 700;
}
/* -----footer----- */
.footer{
  width: 100%;
  margin:auto;
  padding-bottom:70px;
}
.social_wrap{
  margin:auto;
  margin-top:50px;
}
.social_wrap img{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  border:none;
}


@media only screen and (min-width: 1440px) {

}

@media only screen and (max-width: 1024px) {
  .game_play{
    display: none;
  }
  #mobile_play{
    display: block;
  }
}
@media only screen and (max-width:780px){
  .game_play > div{
    width: 50%;
  }
  .star_wrap>img{
    width: 15px;
    height: 15px;
  }
  .commont_text{
    font-size:12px;
  }
  .shadow_box{
    padding:20px 20px;
  }
}
@media only screen and (max-width: 640px) {
  .text {
    padding-left: 16px;
    padding-right: 16px;
  }

  .summary {
    font-size: 18px;
  }

  .desc {
    margin-top: 8px;
    font-size: 12px;
  }

  .btn {
    width: 220px;
    height: 75px;
  }

  .btn.android {
    transform: translate(0%, 40%);
  }

  .btn.ios {
    transform: translate(0%, 40%);
  }
  .game_play > div{
    width: 100%;
  }
  .social_wrap img{
    width: 50px;
    height: 50px;
  }
}