@font-face {
  font-family: "Roboto-Regular";
  src: url(../font/Roboto-Regular.ttf) format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "MFJiaHei";
  src: url(../font/MFJiaHei.TTF) format("truetype");
  font-style: normal;
}

.cube {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.img_100 {
  width: 100%;
  height: 100%;
}

.btn {
  background-color: transparent;
  outline: none;
  padding: 0;
  border: none;
  cursor: pointer;
}

.moveUp img {
  transition: transform 0.3s;
}

.moveUp:hover img {
  transform: translateY(5%);
}

.clip-img .img1,
.clip-img .img2,
.clip-img .img3 {
  position: absolute;
  top: 0;
  left: 0;
}

.clip-img .img1 {
  animation: clip1 3s 2s linear infinite;
}

.clip-img .img2 {
  animation: clip2 3s 2s linear infinite;
}

.clip-img .img3 {
  animation: clip3 3s 2s linear infinite;
}

@keyframes clip1 {
  0% {
    opacity: 1;
    transform: translate3d(10px, 0, 0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }

  2% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }

  4% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }

  6% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }

  8% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }

  10% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }

  12% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }

  14% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }

  16% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }

  18% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }

  20% {
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(10px, 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translateZ(0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes clip2 {
  0% {
    opacity: 1;
    transform: translate3d(9px, 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }

  3% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }

  5% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }

  7% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  9% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }

  11% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }

  13% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  15% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }

  17% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }

  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }

  20% {
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }

  21.9% {
    opacity: 1;
    transform: translate3d(9px, 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translateZ(0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes clip3 {
  0% {
    transform: translate3d(6px, 0, 0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }

  3% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }

  5% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }

  7% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }

  9% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }

  11% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }

  13% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }

  15% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }

  17% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }

  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }

  20% {
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }

  21.9% {
    transform: translate3d(6px, 0, 0);
  }

  22%,
  100% {
    opacity: 0;
    transform: translateZ(0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

html,
body {
  min-width: 1280px;
  overflow-y: hidden !important;
  overflow-x: auto !important;
  position: relative;
}

body {
  opacity: 0;
  transition: opacity 0.3s;
}

.section {
  overflow: hidden;
}

.content {
  width: 25.6rem;
  height: 14.4rem;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.sidebar {
  width: 5rem;
  height: 100%;
  position: fixed;
  top: 0;
  right: -4.5rem;
  z-index: 99;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}

.sidebar.cur {
  transform: translateX(-4.5rem);
}

.sidebar-triggerBox {
  width: 0.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.sidebar-trigger {
  background-color: #000;
  border-left: 1px solid #7f7f7f;
  width: 0.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.sidebar-trigger:hover {
  animation: blinkBlack 0.8s ease infinite;
}

@keyframes blinkBlack {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

.sidebar-trigger span {
  position: absolute;
  left: calc(50% - 0.15rem);
  width: 0.3rem;
  height: 2px;
  border: 1px solid #fff;
  background-color: #fff;
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
    top 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0.4s,
    transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1),
    -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.sidebar-trigger.cur span {
  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    top 0.4s cubic-bezier(0.19, 1, 0.22, 1),
    transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s,
    -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
}

.sidebar-trigger span:nth-of-type(1) {
  top: calc(50% - 0.1rem);
  transform: translateY(0) rotate(0) scaleX(1);
}

.sidebar-trigger span:nth-of-type(2) {
  top: 50%;
  opacity: 1;
  transform: scaleX(1);
}

.sidebar-trigger span:nth-of-type(3) {
  top: calc(50% + 0.1rem);
  transform: translateY(0) rotate(0) scaleX(1);
}

.sidebar-trigger.cur span:nth-of-type(1) {
  top: 50%;
  transform: translateY(0px) rotate(135deg);
}

.sidebar-trigger.cur span:nth-of-type(2) {
  top: 50%;
  opacity: 0;
}

.sidebar-trigger.cur span:nth-of-type(3) {
  top: 50%;
  transform: translateY(0px) rotate(-135deg);
}

.sidebar-right {
  background: url(../images/sidebar_bg.png) no-repeat 0 center / cover;
  width: 4.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
  transform: translateX(0);
}

.sidebar-con {
  width: 100%;
  height: 9rem;
  text-align: center;
}

.sidebar-logo {
  display: inline-block;
  width: 2.11rem;
  height: 0.54rem;
  margin: 0 auto 0;
}

.sidebar-con ul {
  margin: 1rem auto 0;
  width: 2.8rem;
  height: 5.36rem;
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}


.sidebar-con ul span {
  width: 0.02rem;
  height: 5rem;
  background-color: #858585;
  position: absolute;
  top: 0rem;
  right: -0.2rem;
}

.sidebar-con ul span::before {
  content: "";
  width: 0.05rem;
  height: 0.05rem;
  background-color: #fff;
  position: absolute;
  top: -0.2rem;
  right: 50%;
  margin-right: -0.025rem;
}

.sidebar-con ul span::after {
  content: "";
  width: 0.05rem;
  height: 0.05rem;
  background-color: #fff;
  position: absolute;
  bottom: -0.2rem;
  right: 50%;
  margin-right: -0.025rem;
}

.sidebar-con ul li {
  width: 2.8rem;
  height: 0.58rem;
  cursor: pointer;
  text-align: center;
  position: relative;
}

.sidebar-con ul li::before {
  content: "";
  width: 0.04rem;
  height: 0.58rem;
  position: absolute;
  top: -0.1rem;
  right: -0.2rem;
  background-color: #9872ff;
  opacity: 0;
  transform: translateY(0);
  transition: all 0.5s;
}

.sidebar-con ul li.cur::before {
  opacity: 1;
  transform: translateY(0.1rem);
}

.sidebar-con ul li:hover::before {
  opacity: 1;
  transform: translateY(0.1rem);
}

.sidebar-con ul li::after {
  content: "";
  background: url(../images/sidebar_part1_subtitle.png) no-repeat center 0 / 1.66rem 100%;
  width: 2.8rem;
  height: 0.13rem;
  position: absolute;
  bottom: -0.1rem;
  right: 0rem;
  transform: translateY(0);
  opacity: 0;
  transition: all 0.3s;
}

.sidebar-con ul li.cur::after {
  opacity: 1;
  transform: translateY(-0.1rem);
}

.sidebar-con ul li:hover::after {
  opacity: 1;
  transform: translateY(-0.1rem);
}

.sidebar-con ul li img {
  height: 0.3rem;
}

.sidebar-con ul li:nth-child(3)::after {
  background: url(../images/sidebar_part2_subtitle.png) no-repeat center 0 / 2.44rem 100%;
}

.sidebar-con ul li:nth-child(4)::after {
  background: url(../images/sidebar_part3_subtitle.png) no-repeat center 0 / 1.92rem 100%;
}
.sidebar-con ul li:nth-child(5)::after {
  background: url(../images/sidebar_part4_subtitle.png) no-repeat center 0 / 1.92rem 100%;
}
.sidebar .sidebar-twitter-share{
  display: block;
  width: 5rem;
  height: 0.5rem;
  margin: 0.5rem auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.share-text {
  color: #fff;
  font-size: 0.3rem;
}
.share-icon{
  width: 0.8rem;
  height: 0.6rem;
  background: url(../images/share-icon.png) no-repeat right top /100%;
}

.sidebar-sns {
  margin: 1rem auto 0;
}

.snsBtn {
  width: 3.8rem;
  height: 0.65rem;
  display: flex;
  justify-content: space-between;
}

.snsBtn a {
  background: url(../images/s1_sns.png) no-repeat 0 0 / 3.8rem 1.31rem;
  width: 0.6rem;
  height: 0.65rem;
}

.snsBtn a:nth-child(2) {
  background-position-x: -1.08rem;
}

.snsBtn a:nth-child(3) {
  background-position-x: -2.12rem;
}

.snsBtn a:nth-child(4) {
  background-position-x: -3.2rem;
}

.snsBtn a:hover {
  background-position-y: -0.69rem;
}

#section1 {
  background: url(../images/s1.jpg) no-repeat center center / cover;
  width: 100%;
  height: 100%;
}

.s1-video {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.s1-video::after {
  content: "";
  /* background: url(../images/s1_mask.png) no-repeat center center / cover; */
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

.video-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 1;
}

.s1-con {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s1-left {
  background: url(../images/s1_left_nav_bg.png) no-repeat 0 center / 4.99rem 14.4rem;
  width: 4.99rem;
  height: 100%;
  position: relative;
  z-index: 10;
}

ul.s1-left-title {
  width: 3.4rem;
  height: 5.56rem;
  position: absolute;
  top: 50%;
  left: 1.34rem;
  margin-top: -2.78rem;
}

ul.s1-left-title li {
  width: 2.58rem;
  height: 0.74rem;
  position: absolute;
  cursor: pointer;
}

.s1-left-title li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s;
}

.s1-left-title li:hover a {
  opacity: 1;
  transform: scale(1);
}

.s1-left-title li a span {
  background: url(../images/s1_icon.png) no-repeat 0 0 / 0.3rem 0.31rem;
  width: 0.3rem;
  height: 0.31rem;
  position: absolute;
}

.s1-left-title li a span:first-child {
  top: -0.3rem;
  left: -0.2rem;
  animation: iconTopLeftAni 0.8s infinite;
}

@keyframes iconTopLeftAni {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-0.05rem, -0.05rem);
  }

  100% {
    transform: translate(0, 0);
  }
}

.s1-left-title li a span:nth-child(2) {
  top: -0.3rem;
  right: -0.2rem;
  animation: iconTopRightAni 0.8s infinite;
}

@keyframes iconTopRightAni {
  0% {
    transform: translate(0, 0) rotate(90deg);
  }

  50% {
    transform: translate(0.05rem, -0.05rem) rotate(90deg);
  }

  100% {
    transform: translate(0, 0) rotate(90deg);
  }
}

.s1-left-title li a span:nth-child(3) {
  bottom: -0.3rem;
  right: -0.2rem;
  animation: iconBotRightAni 0.8s infinite;
}

@keyframes iconBotRightAni {
  0% {
    transform: translate(0, 0) rotate(180deg);
  }

  50% {
    transform: translate(0.05rem, 0.05rem) rotate(180deg);
  }

  100% {
    transform: translate(0, 0) rotate(180deg);
  }
}

.s1-left-title li a span:nth-child(4) {
  bottom: -0.3rem;
  left: -0.2rem;
  animation: iconBotLeftAni 0.8s infinite;
}

@keyframes iconBotLeftAni {
  0% {
    transform: translate(0, 0) rotate(-90deg);
  }

  50% {
    transform: translate(-0.05rem, 0.05rem) rotate(-90deg);
  }

  100% {
    transform: translate(0, 0) rotate(-90deg);
  }
}

.s1-left-title li::after {
  content: "";
  background: url(../images/s1_selected_bg.png) no-repeat 0 0 / 3.4rem 0.87rem;
  width: 3.4rem;
  height: 0.87rem;
  position: absolute;
  top: -0.1rem;
  left: -0.4rem;
  z-index: 1;
  opacity: 0;
  transform: scale(0.5);
  transition: all 0.3s;
}

.s1-left-title li:hover::after {
  transform: scale(1);
  opacity: 1;
}

.s1-left-title li::before {
  content: "";
  background: url(../images/s1_left_nav_title.png) no-repeat 0 0 / 2.58rem 5.41rem;
  width: 2.58rem;
  height: 0.74rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
  z-index: 2;
}

.s1-left-title li:first-child {
  transform: rotate(-8deg);
  top: 0.25rem;
  left: 0rem;
}

.s1-left-title li:nth-child(2) {
  transform: rotate(-4deg);
  top: 1.96rem;
  left: 0.3rem;
}

.s1-left-title li:nth-child(2)::before {
  background-position-y: -1.64rem;
}

.s1-left-title li:nth-child(3) {
  transform: rotate(4deg);
  top: 3.5rem;
  left: 0.4rem;
}

.s1-left-title li:nth-child(3)::before {
  background-position-y: -3.2rem;
}

.s1-left-title li:nth-child(4) {
  transform: rotate(8deg);
  top: 5.14rem;
  left: 0.16rem;
}

.s1-left-title li:nth-child(4)::before {
  background-position-y: -4.74rem;
}


.s1-left-thumb {
  width: 3.56rem;
  height: 2.27rem;
  position: absolute;
  top: -0.8rem;
  right: -5rem;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-0.5rem);
  transition: all 0.5s;
}

.s1-left-title li:hover .s1-left-thumb {
  opacity: 1;
  transform: translateX(0);
}

.s1-left-thumb::before {
  content: "";
  background: url(../images/s1_arrow.png) no-repeat 0 0 / 0.5rem 0.39rem;
  width: 0.5rem;
  height: 0.39rem;
  position: absolute;
  top: 0.96rem;
  left: -0.7rem;
  animation: bounceAni 0.6s infinite;
}

@keyframes bounceAni {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(0.1rem);
  }

  100% {
    transform: translateX(0);
  }
}

.s1-mid-logo {
  width: 17.39rem;
  height: 3.85rem;
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.s1-mid-shareBox {
  width: 14.63rem;
  height: 1.82rem;
  position: absolute;
  bottom: 2.3rem;
  left: 50%;
  margin-left: -7.315rem;
}

.s1-mid-share {
  width: 1rem;
  height: 1rem;
  position: absolute;
  top: 0.68rem;
  right: -0.7rem;
  cursor: pointer;
  z-index: 10;
}

.s1-right-sns {
  position: absolute;
  bottom: 1.4rem;
  right: 1.1rem;
}

.s1-right-vBox {
  background: url(../images/s1_v_bg.png) no-repeat 0 0 / 3.72rem 2.19rem;
  width: 3.72rem;
  height: 2.19rem;
  position: absolute;
  bottom: 4.5rem;
  right: 1.26rem;
}

.s1-right-vTitle {
  width: 2.77rem;
  height: 0.49rem;
  position: absolute;
  top: -0.2rem;
  left: -0.2rem;
  pointer-events: none;
}

.s1-right-tag {
  width: 1.1rem;
  height: 0.44rem;
  position: absolute;
  top: -0.42rem;
  right: 0rem;
  display: flex;
  justify-content: space-between;
}

.s1-right-tag button {
  width: 50%;
  height: 0.44rem;
  color: #fff;
  font-size: 0.24rem;
  font-weight: 700;
  font-family: "Roboto-Regular";
  transition: color 0.3s;
  animation: Glow 0.3s ease infinite alternate;
}

.s1-right-tag button.cur {
  font-size: 0.36rem;
  animation: none;
}

.s1-right-tag button:hover {
  color: #09f;
}


@keyframes Glow {
  from {
    text-shadow: 0 0 10px #fff,
      0 0 20px #fff,
      0 0 30px #fff,
      0 0 40px #09f,
      0 0 70px #09f,
      0 0 80px #09f,
      0 0 100px #09f,
      0 0 150px #09f;
  }

  to {
    text-shadow: 0 0 5px #fff,
      0 0 10px #fff,
      0 0 15px #fff,
      0 0 20px #09f,
      0 0 35px #09f,
      0 0 40px #09f,
      0 0 50px #09f,
      0 0 75px #09f;
  }
}


.s1-right-vBox ul {
  width: 3.55rem;
  height: 1.74rem;
  position: absolute;
  top: 0.22rem;
  left: 0.08rem;
}

.s1-right-vBox ul li {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: none;
}

.s1-right-vBox ul li.cur {
  display: block;
}

.s1-right-vBox ul li::after {
  content: "";
  background: url(../images/s1_v_playBtn.png) no-repeat 0 0 / 0.46rem 0.46rem;
  width: 0.46rem;
  height: 0.46rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.23rem;
  margin-left: -0.23rem;
  animation: flashAni 1s infinite;
}

@keyframes flashAni {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

#section2 {
  background: url(../images/s2.jpg) no-repeat center center / cover;
  width: 100%;
  height: 100%;
}
.s2-title {
  width: 9.66rem;
  height: 1.55rem;
  margin-top: 0.3rem;
  margin-left: 7.9rem;
  /* position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%); */
}
.s2-live{
  width: 5.36rem;
  height: 3.02rem;
  position: absolute;
  top: 1.78rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/live.png) no-repeat center center / cover;

  
 
  -webkit-clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 95%, 97% 100%, 3% 100%, 0 94%, 0 6%);
  clip-path: polygon(3% 0, 97% 0, 100% 6%, 100% 95%, 97% 100%, 3% 100%, 0 94%, 0 6%)
}

.s2-center{
  background: url(../images/s2_bg.png) no-repeat center center / cover;
  width: 6.96rem;
  height: 8.41rem;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-45%);
}
.s2-button-box{
  width: 5.36rem;
  height: 0.6rem;
  position: relative;
  top: 7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.s2-left-btn{
  width: 2.4rem;
  height: 0.6rem;
  background: url(../images/s2_button3.png) no-repeat left top / 100%;
}
.s2-right-btn{
  width: 2.4rem;
  height: 0.6rem;
  background: url(../images/s2_button2.png) no-repeat left top / 100%;
}

#section3 {
  background: url(../images/s3.jpg) no-repeat center center / cover;
  width: 100%;
  height: 100%;
}
.s3-title {
  width: 6.6rem;
  height: 1.55rem;
  margin-top: 0.3rem;
  margin-left: 9.2rem;
}

.s3-con {
  width: 18.1rem;
  height: 6.66rem;
  /* margin: 0.1rem auto 0; */
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.s3-con ul {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.s3-con ul li {
  float: left;
  width: 2.06rem;
  height: 6.66rem;
  transition: width 0.5s, filter 0.5s;
  overflow: hidden;
  position: relative;
  filter: brightness(0.5);
}

.s3-con ul li.cur {
  width: 11.84rem;
  filter: brightness(1);
}
.s3-con ul li.cur::after{
  content: '';
  background: url(../images/s3_decorate.png) no-repeat left top / 100%;
  position: absolute;
  width: 11.64rem;
  height: 6.46rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.s3-con ul li.cur .s3-img-small {
  pointer-events: none;
}

.s3-con ul li.cur .s3-img-big {
  transform: translateX(0) !important;
}

.s3-con ul li .s3-img-big {
  width: 11.84rem;
  height: 6.66rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-8rem);
  transition: transform 0.5s;
}

/* .s3-con ul li:nth-child(2) .s3-img-big {
  transform: translateX(-3rem);
} */

.s3-con ul li .s3-img-small {
  width: 2.06rem;
  height: 6.66rem;
  position: absolute;
  top: 0rem;
  right: 0rem;
  opacity: 0;
  cursor: pointer;
}


.s3-border::before {
  content: "";
  background: url(../images/s3_border_left.png) no-repeat 0 0 / 100% 100%;
  width: 0.54rem;
  height: 6.72rem;
  position: absolute;
  top: 0rem;
  left: -0.6rem;
}

.s3-border::after {
  content: "";
  background: url(../images/s3_border_right.png) no-repeat 0 0 / 100% 100%;
  width: 0.54rem;
  height: 6.72rem;
  position: absolute;
  top: 0rem;
  right: -0.6rem;
}

.s3-prev {
  width: 1.29rem;
  height: 0.71rem;
  position: absolute;
  top: 2.7rem;
  left: -1.5rem;
  transform: rotate(180deg);
}

.s3-prev::before {
  content: "";
  display: block;
  background: url(../images/s3_arrow.png) no-repeat 0 0 / 100% 100%;
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}

.s3-prev:hover::before {
  transform: translateX(0.1rem);
}

.s3-next {
  width: 1.29rem;
  height: 0.71rem;
  position: absolute;
  top: 2.7rem;
  right: -1.5rem;
  transition: transform 0.3s;
}

.s3-next::after {
  content: "";
  display: block;
  background: url(../images/s3_arrow.png) no-repeat 0 0 / 100% 100%;
  width: 100%;
  height: 100%;
  transition: transform 0.3s;
}

.s3-next:hover::after {
  transform: translateX(0.1rem);
}

.s3-icon {
  background: url(../images/s3_icon2.png) no-repeat 0 0 / 13.92rem 0.34rem;
  width: 13.92rem;
  height: 0.34rem;
  position: absolute;
  bottom: -0.8rem;
  left: 50%;
  margin-left: -6.96rem;
}
/* .s3-icon::before {
  content: "";
  background: url(../images/s3_icon3.png) no-repeat 0 0 / 7.01rem 1.37rem;
  width: 7.01rem;
  height: 1.37rem;
  position: absolute;
  bottom: 0.4rem;
  left: -2.6rem;
} */

.s3-pagination {
  background: url(../images/s3_icon.png) no-repeat 0 0 / 1.99rem 0.73rem;
  width: 1.99rem;
  height: 0.73rem;
  position: absolute;
  bottom: -0.38rem;
  right: 0.4rem;
  z-index: 3;
  pointer-events: none;
}

.s3-pagination span {
  font-size: 1rem;
  color: #fff;
  position: absolute;
  left: 0.8rem;
  bottom: 0.3rem;
  font-family: "Roboto-Regular";
}


#section4 {
  background: url(../images/s4.jpg) no-repeat center center / cover;
  width: 100%;
  height: 100%;
}
.s4-title {
  width: 6.60rem;
  height: 1.53rem;
  margin-top: 0.3rem;
  margin-left: 9.5rem;
}

.s4-left {
  width: 8.53rem;
  height: 7.33rem;
  position: absolute;
  top: 2.86rem;
  left: 3.6rem;
}

.s4-left li {
  width: 100%;
  height: 100%;
  display: none;
}

.s4-left li.cur {
  display: block;
}

.s4-left li:first-child img {
  width: 8.53rem;
  height: 7.33rem;
}

.s4-left li:nth-child(2) img {
  width: 8.53rem;
  height: 7.33rem;
}

.s4-left li:nth-child(3) img {
  width: 8.53rem;
  height: 7.33rem;
}

.s4-left li:nth-child(4) img {
  width: 8.53rem;
  height: 7.33rem;
}
.s4-left li:nth-child(5) img {
  width: 8.53rem;
  height: 7.33rem;
}
.s4-left li:nth-child(6) img {
  width: 8.53rem;
  height: 7.33rem;
}


.s4-right {
  width: 10.42rem;
  height: 9rem;
  position: absolute;
  top: 2.2rem;
  right: 3.02rem;
  perspective: 1000px;
}

.s4-right ul li {
  background: url(../images/s4_right_unselected_bg.png) no-repeat 0 0 / 4.51rem 8.17rem;
  width: 4.51rem;
  height: 8.17rem;
  position: absolute;
  box-shadow: 2px 2px 20px #0003;
  cursor: pointer;
  transition: opacity 0.6s, left 0.6s, zIndex 0.6s, transform 0.6s, backgroundImage 2s;
}

.s4-right ul li::before {
  content: "";
  width: 4.51rem;
  height: 8.17rem;
  position: absolute;
  top: 0;
}

.s4-right ul li:first-child::before {
  background-color: transparent;
  left: 0.8rem;
  transform: skew(-12deg);
  box-shadow: 2px 2px 20px #0003;
}

.s4-right ul li:nth-child(2)::before {
  background-color: transparent;
  left: 0.8rem;
  transform: skew(-12deg);
  box-shadow: 2px 2px 20px #0003;
}

.s4-right ul li.s4-right-0 {
  background: url(../images/s4_right_1.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-1 {
  background: url(../images/s4_right_1.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-2 {
  background: url(../images/s4_right_2.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-3 {
  background: url(../images/s4_right_3.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-4 {
  background: url(../images/s4_right_4.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-5 {
  background: url(../images/s4_right_5.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-6 {
  background: url(../images/s4_right_6.png) no-repeat 0 0 / 4.51rem 8.17rem;
}

.s4-right ul li.s4-right-7 {
  background: url(../images/s4_right_1.png) no-repeat 0 0 / 4.51rem 8.17rem;
}


.s4-right ul li:first-child {
  width: 6.15rem;
  height: 8.17rem;
  top: 0.18rem;
  /* left: -1.4rem; */
  top: 0.18rem;
  z-index: 3;
  opacity: 0;
  /* transform: scale(1.04); */
  box-shadow: none;
  cursor: auto;
  pointer-events: none;
  /* transition: opacity 0s; */
}

.s4-right ul li:nth-child(2) {
  width: 6.15rem;
  height: 8.17rem;
  top: 0.18rem;
  left: 0rem;
  z-index: 4;
  opacity: 1;
  box-shadow: none;
  cursor: auto;
  pointer-events: none;
}

.s4-right ul li:first-child.s4-right-0,
.s4-right ul li:nth-child(2).s4-right-0 {
  background: url(../images/s4_right_selected_1.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-1,
.s4-right ul li:nth-child(2).s4-right-1 {
  background: url(../images/s4_right_selected_1.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-2,
.s4-right ul li:nth-child(2).s4-right-2 {
  background: url(../images/s4_right_selected_2.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-3,
.s4-right ul li:nth-child(2).s4-right-3 {
  background: url(../images/s4_right_selected_3.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-4,
.s4-right ul li:nth-child(2).s4-right-4 {
  background: url(../images/s4_right_selected_4.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-5,
.s4-right ul li:nth-child(2).s4-right-5 {
  background: url(../images/s4_right_selected_5.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-6,
.s4-right ul li:nth-child(2).s4-right-6 {
  background: url(../images/s4_right_selected_6.png) no-repeat 0 0 / 6.15rem 8.17rem;
}

.s4-right ul li:first-child.s4-right-7,
.s4-right ul li:nth-child(2).s4-right-7 {
  background: url(../images/s4_right_selected_1.png) no-repeat 0 0 / 6.15rem 8.17rem;
}


.s4-right ul li:nth-child(3) {
  top: 0.18rem;
  left: 3.2rem;
  z-index: 3;
  transform: scale(0.96);
  transition-delay: 0.1s;
}

.s4-right ul li:nth-child(4) {
  top: 0.18rem;
  left: 4.6rem;
  z-index: 2;
  transform: scale(0.92);
  transition-delay: 0.2s;
}

.s4-right ul li:nth-child(5) {
  top: 0.18rem;
  left: 6rem;
  z-index: 1;
  transform: scale(0.88);
  transition-delay: 0.3s;
}

.s4-right ul li:nth-child(6) {
  top: 0.18rem;
  left: 7.4rem;
  z-index: 0;
  transform: scale(0.82);
  opacity: 0;
  transition-delay: 0.4s;
  pointer-events: none;
}


.s4-right ul::after {
  content: "";
  background: url(../images/s4_icon.png) no-repeat 0 0 / 100% 100%;
  width: 4.5rem;
  height: 0.1rem;
  position: absolute;
  top: 0rem;
  left: 1.7rem;
  z-index: 6;
}

.s4-right-line {
  background: url(../images/s4_line.png) no-repeat 0 0 / 100% 100%;
  width: 9.25rem;
  height: 0.05rem;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
}

.s4-right-line span {
  font-size: 0.3rem;
  color: #fff;
  position: absolute;
  top: -0.4rem;
  left: 0rem;
  width: 2.48rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  font-family: "MFJiaHei";
}

#section5 {
  height: auto !important;
  background: #000;
}

.footer {
  padding: 0.5rem 0 1rem 0;
  background-color: #000;
  border-top: 0.1rem solid #9872ff;
}

.footer-link {
  text-align: center;
  color: #ccc;
  font-size: 0.18rem;
}

.footer-link a {
  padding: 0 0.3rem;
  border-right: 1px solid #fff;
}

.footer-link a:first-child {
  border-left: 1px solid #fff;
}

.footer-link a:hover {
  color: #f05;
}

.footer-link a span:first-child {
  animation: nextAni 0.3s ease-in-out infinite;
}

.footer-link a span:nth-child(2) {
  animation: nextAni 0.4s ease-in-out infinite;
}

.footer-link a span:last-child {
  animation: nextAni 0.5s ease-in-out infinite;
}

@keyframes nextAni {
  0% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
}

.footer-company {
  width: 3.74rem;
  height: 0.74rem;
  margin: 0.2rem auto 0;
}

.footer-company img {
  width: 100%;
}

.footer-ratings {
  margin: 0.2rem auto 0;
  width: 14rem;
  color: #ccc;
  line-height: 1.5;
  font-size: 0.18rem;
  text-align: left;
  position: relative;
}

.footer-ratings::before {
  content: "";
  display: inline-block;
  width: 0.12rem;
  height: 0.12rem;
  background-color: #ccc;
  line-height: 1.5;
  margin-right: 0.1rem;
}

/* dialog */
.dialog-mask {
  background-color: #000;
  border-top: 1px solid #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

.dialog-mask.on {
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 9997;
}

.dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
}

.dialog.on {
  display: block;
}

.dialog-close {
  width: 0.53rem;
  height: 0.53rem;
  position: absolute;
  top: -0.6rem;
  right: 0rem;
}

.dialog-close img {
  transition: transform 0.3s;
}

.dialog-close:hover img {
  transform: translateY(-5%);
}

.dialog-iframe {
  width: 10rem;
  height: 6rem;
  background: #000;
  margin-left: -5rem;
  margin-top: -3rem;
  padding: 0.5rem 0;
}

.dialog-iframe .dialog-con {
  width: 100%;
  height: 100%;
}

.dialog-iframe iframe {
  width: 100%;
  height: 100%;
}

.dialog-uid {
  background: url(../images/dialog_login.png) no-repeat 0 0 / 13.37rem 8.4rem;
  width: 13.37rem;
  height: 8.4rem;
  margin-left: -6.685rem;
  margin-top: -4.2rem;
}

.dialog-uid-input {
  width: 4.04rem;
  height: 0.5rem;
  position: absolute;
  bottom: 1.7rem;
  left: 5.9rem;
}

.dialog-uid-input input {
  width: 100%;
  height: 100%;
  background-color: transparent;
  outline: none;
  border: none;
  padding: 0 0.1rem;
  line-height: 0.5rem;
  font-size: 0.28rem;
}

.dialog-uid-login {
  width: 4rem;
  height: 0.8rem;
  position: absolute;
  bottom: 0.42rem;
  left: 5rem;
}