@charset "utf-8";

/* CSS Document */
html,
body {
  margin: 0;
  padding: 0;
}

.page_pc {
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  margin: 0 auto;
  position: relative;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #333;
}

.page_pc img {
  display: block;
  max-width: 100%;
}

.page_pc .centBox {
  width: 100%;
}

.page_pc .centBox::before {
  content: "";
  display: table;
}

.nav-wrap {
  position: absolute;
  top: 5.8%;
  width: 100%;
  max-width: 1920px;
  min-width: 1200px;
  padding: 10px 0;
}

.nav-wrap .nav-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 85%;
  height: 100%;
  margin: 0 auto;
}

.nav-wrap .nav-item {
  width: 20%;
  cursor: pointer;
  opacity: 0.8;
  margin-bottom: 74px;
}

/* .nav-wrap .nav-item .hover {
  display: none;
} */
.nav-wrap .nav-item img {
  width: 100%;
}

.nav-item.active {
  display: block;
  opacity: 1;
  transform: scale(1.1);
}

.nav-item:nth-of-type(2),
.nav-item:nth-of-type(3),
.nav-item:nth-of-type(4),
.nav-item:nth-of-type(6) {
  margin-left: 55px;
}

.nav-item:nth-of-type(5),
.nav-item:nth-of-type(6),
.nav-item:nth-of-type(7) {
  margin-bottom: 0;
}

/* .nav-item.active .normal {
  display: none;
} */
.content-box {
  /* margin-top: -130px; */
}

.video-mask {
  position: absolute;
  left: 0;
  top: 10%;
  max-width: 1793px;
  width: 100%;
}

.video_container_1 {
  position: absolute;
  width: 61.3vw;
  height: 33vw;
  max-width: 1177px;
  max-height: 632px;
  /* min-width: 880px;
  min-height: 500px; */
  left: 0;
  right: 0;
  top: 12.6%;
  margin: 0 auto;
  border: 2px solid #b4e9ff;
  border-radius: 10px;
  overflow: hidden;
}

.video_container_2 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 24.4%;
  margin: 0 auto;
}

.video_container_3 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 37%;
  margin: 0 auto;
}

.video_container_4 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 48.8%;
  margin: 0 auto;
}

.video_container_5 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 60%;
  margin: 0 auto;
}

.video_container_6 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 72%;
  margin: 0 auto;
}

.video_container_7 {
  position: absolute;
  width: 53.02vw;
  height: 29.90vw;
  max-width: 1018px;
  max-height: 574px;
  min-width: 700px;
  min-height: 395px;
  left: 0;
  right: 0;
  top: 84%;
  margin: 0 auto;
}

.video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  object-fit: cover;
}

.video_icon {
  position: absolute;
  width: 6vw;
  height: 6vw;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.video_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hide {
  display: none;
}

.decorate-1 {
  position: absolute;
  right: -10%;
  top: -18%;
  width: 19.11%;
}

.decorate-2 {
  position: absolute;
  right: -7%;
  top: 84%;
  width: 19.11%;
}

.decorate-3 {
  position: absolute;
  left: -18%;
  top: -15%;
  width: 22.24%;
}

.decorate-5 {
  position: absolute;
  left: -19%;
  top: -15%;
  width: 23.47%;
}

.decorate-6 {
  position: absolute;
  left: -8%;
  top: 90%;
  width: 13.01%;
}

.recommand-wrap {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 0%;
  right: 0;
  top: 91.5%;
  width: 72%;
  height: 5.5%;
  margin: 0 auto;
}

.recommand-wrap a {
  width: 25%;
  height: 50%;
}