@media screen and (max-width: 1023px) {
  html {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: 26px;
  }
}

@media screen and (min-width: 1440px) {
  html {
    font-size: 28px;
  }
}

.part3Contain {
  display: grid;
  grid-template-columns: 1fr 900px 1fr;
  grid-template-rows: 200px 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
}

.part3Contain .titleBox {
  grid-area: 1 / 2 / 2 / 3;
  text-align: center;
  position: relative;
}

.part3Contain .titleBox img {
  height: 170px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

.part3Contain .featureBox {
  grid-area: 2 / 2 / 3 / 3;
  position: relative;
  z-index: 999;
  /*border-image-width: 1.5rem;*/
  /*border-image-slice: 30;*/
  /*border-image-outset: 1.5rem;*/
}


.part3Contain .featureBox .featureBoxImg {
  z-index: 9999;
  position: absolute;
  height: 540px;
  width: 960px;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.part3Contain .featureBox .featureBoxBg {
  position: absolute;
  z-index: 999;
  height: 540px;
  width: 960px;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%) scale(100%);
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 100%;
}

.part3Contain .featureBox #game_feature {
  /* border-image-width: 1.5rem; */
  /* border-image-slice: 30; */
  /* border-image-outset: 1.5rem; */
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: 100% 100%;
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.part3Contain .featureBox .layui-carousel .carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.part3Contain .featureBox .carousel-div, .part3Contain .featureBox .carousel-img {
  background-color: transparent;
}

.part3Contain .leftBox {
  grid-area: 2 / 1 / 3 / 2;
  text-align: right;
  align-content: center;
}

.part3Contain .leftBox img {
  margin-right: 50px;
}

.part3Contain .rightBox {
  grid-area: 2 / 3 / 3 / 4;
  text-align: left;
  align-content: center;
}
.part3Contain .rightBox img{
  margin-left: 50px;
}
.part3Contain .pageBox {
  text-align: center;
  position: absolute;
  width: 100%;
  /* top: b; */
  left: 50%;
  transform: translate(-50%, 0%);
  bottom: -80px;
}

.part3Contain .pageBox ul {
  height: 80px;
  /* min-height: 100px; */
  /* position: absolute; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
  /* width: 100%; */
  /* top: 50%; */
  position: absolute;
  bottom: 0;
  width: 100%;
}

.part3Contain .pageBox ul li {
  height: 100%;
  display: inline;
  margin-right: 1%;
}

.part3Contain .pageBox ul li img {
  height: 70px;
  margin-top: 10px;
}