@import url('../css/head-foot.css');
#content .lb {
  height: 134px;
  border-radius: 24px;
  border: 2px solid #EEE;
  padding: 24px 22px;
  margin-bottom: 16px;
  position: relative;
}
#content .lb .swiper {
  height: 86px;
  overflow: hidden;
}
#content .lb .swiper .swiper-wrapper .swiper-slide {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  border: 1px solid #EEE;
  margin-right: 8px;
  position: relative;
}
#content .lb .swiper .swiper-wrapper .swiper-slide:hover {
  transform: scale(0.9);
}
#content .lb .swiper .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}
#content .lb .swiper .swiper-wrapper .swiper-slide .apk {
  position: absolute;
  top: 8px;
  left: -5px;
  width: 41px;
  height: 24px;
  border-radius: 0 !important;
}
#content .cont-child {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#content .cont-child .cont-l {
  width: 392px;
  border-radius: 24px;
}
#content .cont-child .cont-l .recommend {
  border: 2px solid #eee;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .recommend h3 {
  margin-bottom: 16px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
}
#content .cont-child .cont-l .recommend .class-list {
  border-radius: 16px;
}
#content .cont-child .cont-l .recommend .class-list a {
  width: 344px;
  height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 16px;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .recommend .class-list a:hover {
  background-color: #eee;
}
#content .cont-child .cont-l .recommend .class-list a:hover .r-arrow {
  background: url('../images/r-shen.png') no-repeat;
  background-size: 32px;
}
#content .cont-child .cont-l .recommend .class-list a .game-img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}
#content .cont-child .cont-l .recommend .class-list a .r-arrow {
  width: 32px;
  height: 32px;
  background: url('../images/right.png') no-repeat;
  background-size: 32px;
}
#content .cont-child .cont-l .recommend .class-list a .center {
  width: calc(100% - 142px);
}
#content .cont-child .cont-l .recommend .class-list a .center h4 {
  font-size: 16px;
  font-family: s;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
#content .cont-child .cont-l .recommend .class-list a .center .num {
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #999;
}
#content .cont-child .cont-l .similar {
  border: 2px solid #eee;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .similar h3 {
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .similar .similar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 104px);
  grid-template-rows: repeat(auto-fill, 104px);
  grid-gap: 14px;
}
#content .cont-child .cont-l .similar .similar-list a {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 1px solid #eee;
  overflow: hidden;
  position: relative;
}
#content .cont-child .cont-l .similar .similar-list a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#content .cont-child .cont-l .similar .similar-list a .bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 32%, #3a2c2c 100%);
  position: absolute;
  top: 0;
  display: none;
}
#content .cont-child .cont-l .similar .similar-list a .bg h4 {
  width: 90px;
  font-size: 16px;
  font-family: s;
  font-weight: 600;
  color: #FFD61B;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  left: 10px;
  bottom: 16px;
}
#content .cont-child .cont-l .similar .similar-list a:hover {
  transform: scale(1.3);
  z-index: 2;
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.3);
}
#content .cont-child .cont-l .similar .similar-list a:hover .bg {
  display: block;
}
#content .cont-child .cont-l .gg-300 {
  border: 2px solid #eee;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .gg-300 .gg-long {
  width: 300px;
  height: 600px;
  position: relative;
  margin: 0 auto 20px;
}
#content .cont-child .cont-l .gg-300 .gg-long .gg-title {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
#content .cont-child .cont-l .new {
  border: 2px solid #eee;
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .new h3 {
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}
#content .cont-child .cont-l .new .class-list {
  border-radius: 16px;
}
#content .cont-child .cont-l .new .class-list a {
  width: 344px;
  height: 102px;
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 16px;
}
#content .cont-child .cont-l .new .class-list a:hover {
  background-color: #eee;
}
#content .cont-child .cont-l .new .class-list a .game-img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
  margin-right: 12px;
}
#content .cont-child .cont-l .new .class-list a .center {
  width: 240px;
}
#content .cont-child .cont-l .new .class-list a .center h4 {
  font-family: m;
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#content .cont-child .cont-l .new .class-list a .center .num {
  width: 100%;
  word-wrap: break-word;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#content .cont-child .cont-r {
  width: 800px;
  border-radius: 24px;
  padding: 24px 24px 8px;
  margin-bottom: 24px;
}
#content .cont-child .cont-r .bl-t {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .bl-t .game-de {
  width: 338px;
}
#content .cont-child .cont-r .bl-t .game-de .game {
  width: 338px;
  display: flex;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .bl-t .game-de .game .games-img {
  width: 86px;
  margin-right: 16px;
  height: 86px;
  border-radius: 16px;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r .game-title {
  width: 236px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
  line-height: 28px;
  word-wrap: break-word;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r .xing {
  margin: 0 14px 4px 0;
  float: left;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r .down-num {
  float: left;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r .down-num img {
  width: 16px;
  height: 16px;
}
#content .cont-child .cont-r .bl-t .game-de .game .de-r .down-num span {
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #666;
}
#content .cont-child .cont-r .bl-t .game-de .tags {
  display: flex;
  flex-wrap: wrap;
  width: 311px;
  height: 28px;
  overflow: hidden;
}
#content .cont-child .cont-r .bl-t .game-de .tags a {
  padding: 2px 8px;
  border-radius: 73px;
  border: 1px solid #666;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #666;
  height: 22px;
  line-height: 16px;
  margin: 0 8px 8px 0;
}
#content .cont-child .cont-r .bl-t .game-de .tags a:hover {
  background-color: #FFD61B;
  color: #fff;
  border-color: #FFD61B;
}
#content .cont-child .cont-r .bl-t .game-de .gg1 {
  width: 336px;
  height: 298px;
  position: relative;
  background-color: #c09f9f;
}
#content .cont-child .cont-r .bl-t .game-de .gg1 .gg-title {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd {
  width: 368px;
  height: 127px;
  background: #FAFAFA;
  border-radius: 24px;
  border: 2px solid #FAFAFA;
  padding: 46px 39px 16px;
  margin-bottom: 18px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .tiao {
  display: flex;
  margin-bottom: 8px;
  position: relative;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .tiao .yellow {
  width: 202px;
  height: 8px;
  background: #FFD61B;
  border-radius: 8px 0px 0px 8px;
  border-right: 2px solid #fff;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .tiao .red {
  width: 86px;
  height: 8px;
  background: #F44943;
  border-radius: 0px 8px 8px 0px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .tiao .jindu {
  width: 40px;
  height: 30px;
  background: url('../images/jindu.png') no-repeat;
  background-size: 40px 30px;
  position: absolute;
  top: -30px;
  right: 66px;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #333;
  line-height: 16px;
  text-shadow: 0px 2px 4px #D7900D;
  text-align: center;
  line-height: 25px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .num {
  font-size: 12px;
  font-family: m;
  font-weight: 500;
  color: #999;
  line-height: 14px;
  text-align: center;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .dian {
  width: 286px;
  display: flex;
  justify-content: space-between;
}
#content .cont-child .cont-r .bl-t .bl-t-r .jd .dian img {
  width: 32px;
  height: 32px;
  cursor: pointer;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition {
  width: 368px;
  height: 298px;
  background: #FAFAFA;
  border-radius: 16px;
  padding: 24px 39px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .top {
  display: flex;
  margin: 0 auto 16px;
  width: 290px;
  height: 40px;
  background: #280089;
  border-radius: 47px;
  padding: 4px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .top button {
  border: none;
  width: 145px;
  height: 32px;
  border-radius: 16px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #fff;
  background-color: #280089;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .top button img {
  width: 16px;
  height: 16px;
  opacity: 0.4;
  margin: -4px 4px 0 0;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb1 .hang,
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb2 .hang {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb1 .hang:last-child,
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb2 .hang:last-child {
  margin-bottom: 0;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb1 .hang .span1,
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb2 .hang .span1 {
  font-size: 16px;
  font-family: s;
  font-weight: 600;
  color: #666;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb1 .hang .span2,
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb2 .hang .span2 {
  font-size: 16px;
  font-family: s;
  font-weight: 600;
  color: #333;
}
#content .cont-child .cont-r .bl-t .bl-t-r .edition .tb2 {
  display: none;
}
#content .cont-child .cont-r .gg-long {
  width: 728px;
  height: 90px;
  position: relative;
  background-color: #c09f9f;
  margin: 0 auto 20px;
}
#content .cont-child .cont-r .gg-long .gg-title {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 400;
  color: #333;
}
#content .cont-child .cont-r .desc {
  margin-bottom: 19px;
}
#content .cont-child .cont-r .desc h3 {
  width: 752px;
  height: 28px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
  line-height: 21px;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .desc .desc-text {
  width: 752px;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #666;
  line-height: 22px;
}
#content .cont-child .cont-r .xc {
  margin-bottom: 24px;
}
#content .cont-child .cont-r .gg {
  position: relative;
  margin: 0 auto 36px;
  text-align: center;
  width: 1000px;
  height: 300px;
  background: #467AEE;
  border-radius: 16px;
}
#content .cont-child .cont-r .gg .gg-title {
  position: absolute;
  left: 50%;
  bottom: -19px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 400;
  color: #FFFFFF;
}
#content .cont-child .cont-r .comments h3 {
  width: 752px;
  height: 28px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
  line-height: 21px;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .comments textarea {
  width: 752px;
  height: 116px;
  box-sizing: border-box;
  background: #eee;
  padding: 16px;
  border-radius: 16px;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #999;
  line-height: 16px;
  border: none;
  margin-bottom: 8px;
}
#content .cont-child .cont-r .comments textarea::-webkit-input-placeholder {
  color: #999;
}
#content .cont-child .cont-r .comments .two-ipt {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
#content .cont-child .cont-r .comments .two-ipt input {
  width: 368px;
  height: 54px;
  background: #eee;
  border-radius: 16px;
  margin-right: 13px;
  border: none;
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #999;
  text-indent: 1em;
}
#content .cont-child .cont-r .comments .two-ipt input::-webkit-input-placeholder {
  color: #999;
}
#content .cont-child .cont-r .comments .two-ipt input:last-child {
  margin-right: 0;
}
#content .cont-child .cont-r .comments button {
  width: 93px;
  height: 42px;
  margin: 0 0 8px 658px;
  background: #FBD320;
  border-radius: 49px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-family: s;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 16px;
  text-shadow: 0px 2px 4px #D7900D;
}
#content .cont-child .cont-r .comments button:hover {
  background-color: #e9a525;
}
#content .cont-child .cont-r .comments .one-com {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .comments .one-com .head-img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
#content .cont-child .cont-r .comments .one-com .oc-r {
  width: 698px;
  background: #fafafa;
  border-radius: 16px;
  padding: 8px;
}
#content .cont-child .cont-r .comments .one-com .oc-r .name,
#content .cont-child .cont-r .comments .one-com .oc-r .talk {
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #333;
  line-height: 22px;
}
#content .cont-child .cont-r .comments .one-com .oc-r .talk {
  color: #999;
  margin-top: 4px;
}
#content .cont-child .cont-r .get-game {
  width: 752px;
  height: 60px;
  background: #FBD320;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  margin-bottom: 24px;
}
#content .cont-child .cont-r .get-game:hover {
  background-color: #D99211;
}
#content .cont-child .cont-r .get-game span {
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
}
#content .cont-child .cont-r .get-game img {
  width: 24px;
  height: 24px;
}
#content .cont-child .cont-r .good {
  width: 752px;
  height: 76px;
  background: #fafafa;
  border-radius: 16px;
  margin-bottom: 16px;
  padding: 16px;
  display: flex;
}
#content .cont-child .cont-r .good img {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
#content .cont-child .cont-r .good .good-r div {
  font-family: m;
  font-style: normal;
  line-height: 22px;
  color: #666;
  font-weight: 500;
  font-size: 14px;
}
#content .cont-child .cont-r .good .good-r div:last-child {
  color: #999;
}
#content .cont-child .cont-r .other {
  width: 752px;
}
#content .cont-child .cont-r .other h3 {
  margin-bottom: 16px;
  font-size: 18px;
  font-family: s;
  font-weight: 600;
  color: #333;
}
#content .cont-child .cont-r .other .class-list {
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#content .cont-child .cont-r .other .class-list a {
  width: 368px;
  height: 102px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border-radius: 16px;
  margin-bottom: 16px;
}
#content .cont-child .cont-r .other .class-list a:hover {
  background-color: #eee;
}
#content .cont-child .cont-r .other .class-list a:hover .r-arrow {
  background: url('../images/r-shen.png') no-repeat;
  background-size: 32px;
}
#content .cont-child .cont-r .other .class-list a .game-img {
  width: 86px;
  height: 86px;
  border-radius: 24px;
}
#content .cont-child .cont-r .other .class-list a .r-arrow {
  width: 32px;
  height: 32px;
  background: url('../images/right.png') no-repeat;
  background-size: 32px;
}
#content .cont-child .cont-r .other .class-list a .center {
  width: calc(100% - 142px);
}
#content .cont-child .cont-r .other .class-list a .center h4 {
  font-size: 16px;
  font-family: s;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}
#content .cont-child .cont-r .other .class-list a .center .num {
  font-size: 14px;
  font-family: m;
  font-weight: 500;
  color: #B0C6F9;
}
.btns {
  background: #6A44C7 !important;
  color: #fff !important;
}
.btns img {
  opacity: 1 !important;
}