@charset "UTF-8";
/* common */
.game-logo {
  background: url(../../common/images/logo_h_b.png) center center no-repeat;
  /*游戏logo*/
  background-size: 100% 100%;
}

.page-nav {
  /* 导航栏*/
  background: rgba(255, 255, 255, 0.95);
  /*导航栏背景，默认是白色透明底*/
  background-size: 100%;
  box-shadow: 0 .026rem .1563rem .0052rem #e1e1e1;
}

.page-nav nav a {
  color: #333;
  /*导航栏字体颜色*/
}

.page-nav nav a.active {
  color: #3B83FF;
}

.page-nav nav a.active::after {
  background-color: #3B83FF;
  /*导航栏选中颜色*/
}

.page-wrapper {
  background: left center no-repeat;
  background-size: 100% 100%;
}

.page-wrapper.page-news {
  /* 首页第二屏 新闻*/
  background-image: url(../images/page_forth_bg.png);
  /* 全屏背景*/
}

.page-wrapper.page-news .title {
  background-image: url(../images/page_forth_title.png);
  /* 页面title*/
}

.page-wrapper.page-fifth {
  background-image: url(../images/page_fifth_bg.png);
  /* 全屏背景*/
}

.page-wrapper.page-fifth .title {
  background-image: url(../images/page_fifth_title.png);
  /* 页面title*/
}

.link_btn, .about .about-item > section a {
  display: block;
  margin-top: .1302rem;
  border: .0104rem solid #3B83FF;
  border-radius: .1406rem;
  position: relative;
  line-height: .2083rem;
  text-align: center;
  font-size: .0833rem;
  color: #3B83FF;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 .1146rem;
}

.link_btn::after, .about .about-item > section a::after {
  content: '';
  display: block;
  border: .0313rem solid transparent;
  border-right: none;
  border-left-color: #3B83FF;
  margin-left: .0521rem;
}

.product-wrapper {
  width: 100%;
  margin: 0 auto;
}

.product-wrapper .product-title {
  width: 100%;
  height: .3021rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-wrapper .product-title img {
  display: block;
  flex: 0 0 auto;
}

.product-wrapper .product-title img.title-jx {
  display: block;
}

.product-wrapper .product-title img.title-ip {
  display: none;
}

.product-wrapper.ip-box {
  background: url(../images/product_ip_bg.jpg) left top no-repeat;
  background-size: 100% 100%;
  padding-top: .5208rem;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-wrapper.ip-box .fifth-main {
  max-width: 7.5rem;
  margin-top: .1563rem;
  margin-bottom: .625rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.product-wrapper.ip-box .fifth-main .banner-container {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.product-wrapper.ip-box .fifth-main .banner-container .prev,
.product-wrapper.ip-box .fifth-main .banner-container .next {
  position: absolute;
  width: .474rem;
  height: .474rem;
  cursor: pointer;
  z-index: 9;
}

.product-wrapper.ip-box .fifth-main .banner-container .prev {
  background: url(../images/fifth_prev_btn.png) center center no-repeat;
  background-size: cover;
  left: .7292rem;
}

.product-wrapper.ip-box .fifth-main .banner-container .next {
  background: url(../images/fifth_next_btn.png) center center no-repeat;
  background-size: cover;
  right: .7292rem;
}

.product-wrapper.ip-box .fifth-main .banner-container ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li {
  width: 6.3542rem;
  flex: 0 0 6.3542rem;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item img {
  width: 100%;
  display: block;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: .3125rem;
  overflow: hidden;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section h3 {
  font-size: .1146rem;
  color: #3e3e3e;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  margin-bottom: .0938rem;
  position: relative;
  padding-bottom: .0625rem;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section h3::after {
  content: '';
  display: block;
  position: absolute;
  width: .1563rem;
  height: .0104rem;
  background-color: #878787;
  border-radius: .0052rem;
  left: 0;
  bottom: 0;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section p {
  font-size: .0729rem;
  color: #545454;
  line-height: .1146rem;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section a.link_btn:hover, .product-wrapper.ip-box .fifth-main .banner-container ul li .list-item .about .about-item > section a:hover, .about .product-wrapper.ip-box .fifth-main .banner-container ul li .list-item .about-item > section a:hover {
  background-color: #3B83FF;
  color: #fff;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li .list-item section a.link_btn:hover::after, .product-wrapper.ip-box .fifth-main .banner-container ul li .list-item .about .about-item > section a:hover::after, .about .product-wrapper.ip-box .fifth-main .banner-container ul li .list-item .about-item > section a:hover::after {
  border-left-color: #FFF;
}

.product-wrapper.ip-box .fifth-main .banner-container ul li.swiper-slide-prev div::before, .product-wrapper.ip-box .fifth-main .banner-container ul li.swiper-slide-next div::before {
  content: '';
  z-index: 9;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
}

.product-wrapper.game-product {
  background: url(../images/product_list_bg.jpg) left top no-repeat;
  background-size: 100% 100%;
  height: 5.5625rem;
  flex: 0 0 auto;
  background-color: #333;
}

.product-wrapper.game-product .product-title {
  padding: .2865rem 0;
}

.product-wrapper.game-product .game-list {
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(5, 1.3958rem);
  grid-template-rows: repeat(3, 1.4219rem);
  grid-gap: .0781rem .0781rem;
  justify-content: center;
  align-items: center;
}

.product-wrapper.game-product .game-list section {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  border-radius: .0313rem;
  overflow: hidden;
}

.product-wrapper.game-product .game-list section img {
  display: block;
  width: 100%;
  height: 100%;
}

.product-wrapper.game-product .game-list section.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

.product-wrapper.game-product .game-list section.item-2 {
  grid-column: 3 / 5;
}

.product-wrapper.game-product .game-list section.item-4 {
  grid-column: 3 / 4;
  grid-row: 2 / 4;
}

.product-wrapper.game-product .game-list section .mask-item {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 0 .1146rem;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: all .2s ease-in-out;
}

.product-wrapper.game-product .game-list section .mask-item:hover {
  opacity: 1;
}

.product-wrapper.game-product .game-list section .mask-item h3 {
  font-size: .1146rem;
  color: #3e3e3e;
  position: relative;
  margin-bottom: .0625rem;
}

.product-wrapper.game-product .game-list section .mask-item h3 small {
  display: block;
  font-size: .0833rem;
  background-image: linear-gradient(to right, #2F46A9, transparent);
  margin-top: .0313rem;
  padding: .026rem .0521rem;
  position: relative;
  color: #fff;
  font-weight: normal;
}

.product-wrapper.game-product .game-list section .mask-item h3 small::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: .0156rem;
  background-color: #75DEFB;
  font-size: 0;
  overflow: hidden;
}

.product-wrapper.game-product .game-list section .mask-item p {
  font-size: .0729rem;
  color: #545454;
  line-height: .1146rem;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-wrapper.game-product .game-list section .mask-item a.link_btn, .product-wrapper.game-product .game-list .about .about-item > section .mask-item a, .about .product-wrapper.game-product .game-list .about-item > section .mask-item a {
  margin-top: .1354rem;
  background-color: #3B83FF;
  color: #fff;
}

.product-wrapper.game-product .game-list section .mask-item a.link_btn::after, .product-wrapper.game-product .game-list .about .about-item > section .mask-item a::after, .about .product-wrapper.game-product .game-list .about-item > section .mask-item a::after {
  border-left-color: #FFF;
}

.product-wrapper.dz-box {
  background: url(../images/product_dz_bg.jpg) left top no-repeat;
  background-size: 100% 100%;
  height: 4.224rem;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
}

.product-wrapper.dz-box .product-dz {
  margin-top: .2865rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.product-wrapper.dz-box .product-dz section {
  flex: 0 0 auto;
  margin: 0 .0521rem;
}

.product-wrapper.dz-box .product-dz section img {
  display: block;
  width: 1.3802rem;
  height: 2.6354rem;
}

.about-desc {
  width: 100%;
  height: 3.125rem;
  background: url(../images/about_desc.png) left top no-repeat;
  background-size: 100% 100%;
  padding-top: 1.7552rem;
  color: #fff;
  font-size: .0729rem;
}

.about-desc p {
  width: 58%;
  margin: .0313rem auto;
  text-indent: .1458rem;
}

.about {
  width: 100%;
  background: url(../images/about_bg.png) left top no-repeat;
  background-size: 100%;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.about .left_base, .about .about-item.tianxi, .about .about-item.paras {
  align-self: flex-end;
  padding-left: 2.8125rem;
  padding-right: 2.0313rem;
}

.about .right_base, .about .about-item.yilewan, .about .about-item.yiqiyou {
  align-self: flex-start;
  padding-left: 2.0313rem;
  padding-right: 2.8125rem;
}

.about .right_base div, .about .about-item.yilewan div, .about .about-item.yiqiyou div,
.about .right_base p, .about .about-item.yilewan p, .about .about-item.yiqiyou p,
.about .right_base section, .about .about-item.yilewan section, .about .about-item.yiqiyou section {
  justify-content: flex-end;
  text-align: right;
  width: 100%;
}

.about .about-title {
  width: 100%;
  padding: .401rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about .about-item {
  width: 9.3021rem;
  height: 2.4531rem;
  margin-bottom: .3646rem;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.about .about-item div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.about .about-item p {
  font-size: .0938rem;
  margin-top: .1563rem;
  color: #545454;
  line-height: .1146rem;
}

.about .about-item > section {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: .1563rem;
}

.about .about-item > section a {
  flex: 0 0 auto;
  margin-right: .1042rem;
}

.about .about-item > section a:hover {
  background-color: #3B83FF;
  color: #fff;
}

.about .about-item > section a:hover::after {
  border-left-color: #FFF;
}

.about .about-item.tianxi {
  background: url(../images/about_item_1.png) left top no-repeat;
  background-size: 100% 100%;
}

.about .about-item.yilewan {
  background: url(../images/about_item_2.png) left top no-repeat;
  background-size: 100% 100%;
}

.about .about-item.paras {
  background: url(../images/about_item_3.png) left top no-repeat;
  background-size: 100% 100%;
}

.about .about-item.yiqiyou {
  background: url(../images/about_item_4.png) left top no-repeat;
  background-size: 100% 100%;
}

.practice {
  width: 100%;
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: url(../images/practice_bg.png) bottom right no-repeat;
  background-size: 5.1146rem 3.1198rem;
}

.practice .practice-item {
  width: 80%;
  margin-bottom: 1.0417rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.practice .practice-item .item-icon {
  flex: 0 0 auto;
}

.practice .practice-item .item-icon img {
  display: block;
}

.practice .practice-item .item-icon img.img1 {
  width: 5.7344rem;
  height: 4.6146rem;
}

.practice .practice-item .item-icon img.img2 {
  width: 3.401rem;
  height: 2.8906rem;
}

.practice .practice-item .item-icon img.img3 {
  width: 4.2083rem;
  height: 3.276rem;
}

.practice .practice-item .item-content {
  flex: 1 1 auto;
  font-size: .0833rem;
  color: #3e3e3e;
  padding: 0 .6979rem;
}

.practice .practice-item .item-content div {
  margin-bottom: .2604rem;
}

.practice .practice-item .item-content div .title1 {
  width: 1.724rem;
  height: .4479rem;
}

.practice .practice-item .item-content div .title2 {
  width: 2.3229rem;
  height: .4479rem;
}

.practice .practice-item .item-content div .title3 {
  width: 2.4531rem;
  height: .4479rem;
}

.practice .practice-item.culture {
  align-self: flex-start;
  width: 86%;
  margin-bottom: 0;
}

.practice .practice-item.culture .item-content {
  padding: 0 .1563rem;
}