@charset "UTF-8";
@font-face {
  font-family: "SourceHanSerifCN";
  src: url("SourceHanSerifCN-SemiBold_0.otf");
}
@font-face {
  font-family: "SourceHanSerifCN-Bold";
  src: url("SourceHanSerifCN-Bold_0.otf");
}
* {
  touch-action: none;
}
/* 任何触摸事件都不会产生默认行为 解决控制台报错 */
.nav {
  position: fixed;
  left: 0;
  top: 0.15rem;
  z-index: 9;
  height: 0.28rem;
  width: 0.55rem;
}
.btn-nav {
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
  border: none;
  padding: 0.03rem 0.18rem;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  cursor: pointer;
  z-index: 99999;
  background: #2f2629 url(../../pc/images/pc-button1.png) center center no-repeat;
  background-size: cover;
}
.btn-nav:focus {
  outline: 0;
}
.icon-bar {
  display: block;
  margin: 3px 0;
  width: 20px;
  height: 3px;
  background-color: #FFFFFF;
  box-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b;
  border-radius: 6px;
}
.btn-nav:hover .icon-bar {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.nav-content {
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  display: block;
  z-index: 8;
  background: url(../images/h5-block-3.png) bottom center no-repeat;
}
.nav-list {
  list-style: none;
  padding: 0.25rem 0;
  position: relative;
  top: 0;
  margin: 0;
}
.item-anchor {
  color: #fff;
  font-size: 0.2rem;
  text-transform: uppercase;
  position: relative;
  text-decoration: none;
  padding: 0.06rem;
  letter-spacing: 0.08rem;
  display: block;
  background: url(../images/h5-button1.png) center center no-repeat;
  background-size: contain;
}
.nav-item:nth-child(1) .item-anchor {
  background-image: url(../images/h5-button1.png);
}
.nav-item:nth-child(2) .item-anchor {
  background-image: url(../images/h5-button2.png);
}
.nav-item:nth-child(3) .item-anchor {
  background-image: url(../images/h5-button3.png);
}
.nav-item:nth-child(4) .item-anchor {
  background-image: url(../images/h5-button4.png);
}
.nav-item:nth-child(5) .item-anchor {
  background-image: url(../images/h5-button5.png);
}
.nav-item:nth-child(6) .item-anchor {
  background-image: url(../images/h5-button6.png);
}
.nav-item:nth-child(7) .item-anchor {
  background-image: url(../images/h5-button7.png);
}
.nav-item:nth-child(8) .item-anchor {
  background-image: url(../images/h5-button8.png);
}
.nav-item:nth-child(9) .item-anchor {
  background-image: url(../images/h5-button9.png);
}
.nav-item:nth-child(10) .item-anchor {
  background-image: url(../images/h5-button10.png);
}
.nav-item {
  margin: 0.1rem auto;
  text-align: center;
}
.nav-item.active .item-anchor {
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b;
}
.animated {
  display: block;
  margin: 0 auto;
  background: none;
}
.animated:focus {
  cursor: pointer;
  z-index: 9999;
}
.middle {
  margin: 0 auto;
}
.icon-bar {
  -webkit-transition: all 0.7s ease;
  -moz-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  transition: all 0.7s ease;
  z-index: 999999;
}
.animated .icon-bar {
  z-index: 999999;
}
.animated .top {
  -webkit-transform: translateY(6px) rotateZ(45deg);
  -moz-transform: translateY(6px) rotateZ(45deg);
  -ms-transform: translateY(6px) rotateZ(45deg);
  -o-transform: translateY(6px) rotateZ(45deg);
  transform: translateY(6px) rotateZ(45deg);
}
.animated .bottom {
  -webkit-transform: translateY(-6px) rotateZ(-45deg);
  -moz-transform: translateY(-6px) rotateZ(-45deg);
  -ms-transform: translateY(-6px) rotateZ(-45deg);
  -o-transform: translateY(-6px) rotateZ(-45deg);
  transform: translateY(-6px) rotateZ(-45deg);
}
.animated .middle {
  width: 0;
}
.showNav {
  -webkit-animation: showNav 1s ease forwards;
  -moz-animation: showNav 1s ease forwards;
  -o-animation: showNav 1s ease forwards;
  animation: showNav 1s ease forwards;
}
.hideNav {
  -webkit-animation: hideNav 1s ease forwards;
  -moz-animation: hideNav 1s ease forwards;
  -o-animation: hideNav 1s ease forwards;
  animation: hideNav 1s ease forwards;
}
.hidden {
  display: none;
}
@keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@-webkit-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@-moz-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@-o-keyframes showNav {
  from {
    top: -100%;
  }
  to {
    top: 0;
  }
}
@keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@-webkit-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@-moz-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@-o-keyframes hideNav {
  from {
    top: 0;
  }
  to {
    top: -100%;
  }
}
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ghostUpdown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 8px;
  }
  100% {
    margin-top: 0;
  }
}
.section {
  text-align: center;
  font: 0.18rem "Microsoft Yahei";
  color: #fff;
}
.goLink {
  position: fixed;
  right: 0;
  top: 3%;
  font-size: 0.12rem;
  color: #ffffff;
  background: url(../images/h5-block-enter.png) bottom center no-repeat;
  background-size: contain;
  height: 0.26rem;
  letter-spacing: 0.2rem;
  z-index: 9;
  text-decoration: none;
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b, 0 0 40px #ff956b, 0 0 70px #ff956b, 0 0 80px #ff956b, 0 0 100px #ff956b, 0 0 150px #ff956b;
}
/* section1  */
.section {
  background: url(../images/h5-bg.jpg) bottom center no-repeat;
  background-size: cover;
  overflow: hidden;
}
.section1 {
  background: url(../images/h5-home.jpg) top center no-repeat;
  background-size: cover;
  position: relative;
}
.screen-main {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.screen-main span {
  position: absolute;
  background-size: contain !important;
}
.screen-main .logo {
  width: 1.15rem;
  height: 0.5rem;
  left: calc(50% - 0.57rem);
  top: 0.2rem;
  z-index: 4;
  background: url(../images/h5-logo.png) no-repeat;
  opacity: 0;
}
.screen-main .slogan {
  width: 90%;
  height: 2.3rem;
  left: 5%;
  bottom: 0.45rem;
  z-index: 4;
  background: url(../images/h5-slogan2021.png) center bottom no-repeat;
}
/* section2 */
.science-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.science-inner .title {
  background: url(../images/h5-block-1.png) center center no-repeat;
  background-size: contain;
  color: #fff;
  position: absolute;
  top: 11%;
  left: 0;
  z-index: 2;
  width: 100%;
  font-size: 0.16rem;
  font-family: "SourceHanSerifCN" !important;
  opacity: 0;
  line-height: 0.44rem;
  letter-spacing: 0.02rem;
}
.science-inner .text {
  position: absolute;
  left: 0;
  top: 21%;
  opacity: 0;
  width: 100%;
}
.science-inner .text p {
  font-size: 0.16rem;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.03rem;
  font-family: "SourceHanSerifCN" !important;
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b;
  line-height: 0.33rem;
}
.section2 .text p + p {
  text-indent: 1.5em;
}
.section2 .text i {
  font-style: normal;
  font-size: 0.24rem;
}
.swiper-container {
  width: 100%;
  position: absolute;
  left: 0;
  top: 32%;
  height: 4rem;
}
.swiper-slide {
  transition: 300ms;
  transform: scale(1);
  position: relative;
}
.swiper-slide div {
  width: 60%;
  margin: 0.125rem auto;
  position: relative;
  font-size: 0;
}
.swiper-slide img {
  width: 100%;
}
.swiper-slide div:before {
  content: '';
  position: absolute;
  left: -15px;
  right: -16px;
  top: -19px;
  bottom: -16px;
  background: url(../images/h5-slide-frame-images.png) 0 0 no-repeat;
  background-size: 100% 100%;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  display: none;
}
.swiper-button-prev {
  left: 0.2rem;
  background: url(../images/h5-button-prev.png) center center no-repeat;
  background-size: contain;
}
.swiper-button-next {
  right: 0.2rem;
  background: url(../images/h5-button-next.png) center center no-repeat;
  background-size: contain;
}
/* section3 */
.section3 .text {
  width: 100%;
  left: 0;
  top: 21%;
}
.section3 .text p {
  line-height: 0.46rem;
}
.science-inner .video {
  width: 80%;
  position: absolute;
  left: 10%;
  top: 53%;
  z-index: 2;
}
.science-inner .video:before {
  content: '';
  background: url(../images/h5-frame-images.png) 0 0 no-repeat;
  background-size: 100% 100%;
  z-index: 2;
  position: absolute;
  top: -11%;
  right: -6%;
  bottom: -9%;
  left: -6%;
}
.science-inner .video img {
  width: 100%;
  height: 100%;
}
.science-inner .video .button {
  position: absolute;
  z-index: 4;
  background: url(../../pc/images/pc-button-miniplay.png) center center no-repeat;
  background-size: cover;
  width: 0.5rem;
  height: 0.5rem;
  right: -0.25rem;
  bottom: -0.16rem;
  transition: all 0.3s;
  cursor: pointer;
}
.science-inner .video .button:hover {
  background-image: url(../../pc/images/pc-button-miniplay2.png);
}
/* ection4 */
.section4 .text {
  left: 6%;
  width: 88%;
  top: 21%;
  line-height: 0.1rem;
  z-index: 3;
}
.section4 .text p {
  text-align: left;
  text-shadow: 0 0 10px #000000;
  line-height: 0.3rem;
  font-size: 0.14rem;
  letter-spacing: 0.02rem;
}
.section4 .person {
  position: absolute;
  right: -5%;
  bottom: 0;
  height: 75%;
  z-index: 2;
}
.science-inner .person img {
  height: 100%;
}
/* section5 */
.section5 .text {
  background: url(../images/h5-block-2.png) no-repeat;
  background-size: 100% 100%;
  left: 5%;
  top: 22%;
  width: 87%;
  line-height: 0.19rem;
  padding: 0.25rem 0 0.58rem 0.09rem;
  position: relative;
}
.section5 .text p {
  color: #6d2f3c;
  text-shadow: none;
  font-size: 0.12rem;
  line-height: 0.24rem;
  text-align: center;
  font-family: 'SourceHanSerifCN-Bold' !important;
}
.section5 .person {
  z-index: 2;
  width: 86%;
  display: block;
  margin: -16% auto 0;
}
.section5 .person img {
  width: 100%;
}
/* section6 */
.section6 .text {
  top: 21%;
  width: 100%;
  left: 0;
}
.section6 img {
  width: 1rem;
  animation: ghostUpdown 1.5s ease-in-out infinite;
}
.section6 .images {
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  bottom: 0;
}
.section6 .images div {
  position: absolute;
}
.section6 .images div:nth-child(1) img {
  width: 1.1rem;
}
.section6 .images div:nth-child(3) img,
.section6 .images div:nth-child(6) img {
  width: 0.95rem;
}
.section6 .images div:nth-child(5) img {
  width: 0.97rem;
}
.section6 .images div:nth-child(1) {
  left: 10%;
  top: 0;
}
.section6 .images div:nth-child(2) {
  left: 3%;
  top: 29%;
}
.section6 .images div:nth-child(3) {
  left: 18%;
  top: 48%;
}
.section6 .images div:nth-child(5) {
  right: 13%;
  top: 0.08rem;
}
.section6 .images div:nth-child(6) {
  right: 3%;
  top: 29%;
}
.section6 .images div:nth-child(7) {
  right: 19%;
  top: 53%;
}
.section6 .images div:nth-child(4) {
  position: absolute;
  left: 31.5%;
  top: 15%;
}
.section6 .images div:nth-child(4) img {
  animation: none;
  z-index: 3;
  width: 1.4rem;
  left: 0;
  position: absolute;
  transition: all 0.3s;
}
.video-btn .active {
  opacity: 0;
}
.video-btn .unActive {
  opacity: 1;
}
.video-btn:hover .active {
  opacity: 1;
}
.video-btn:hover .unActive {
  opacity: 0;
}
.video-btn .inner {
  z-index: 2;
  width: 1.94rem;
  left: 0.26rem;
  top: 0.72rem;
}
.section6 .images div:nth-child(4) .inner {
  width: 1.02rem;
  left: 0.18rem;
  top: 0.4rem;
}
/* section7 */
.section7 .text {
  top: 23%;
  z-index: 2;
  width: 90%;
  left: 5%;
}
.section7 .text p {
  text-shadow: 0 0 10px #000000;
  line-height: 0.28rem;
  text-align: left;
  font-size: 0.12rem;
}
.section7 .video-btn {
  position: absolute;
  right: 0;
  top: 17%;
  width: 1.35rem;
  z-index: 3;
  cursor: pointer;
}
.section7 .video-btn img {
  width: 100%;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  transition: all 0.3s;
}
.section7 .video-btn .inner {
  z-index: 2;
  width: 1rem;
  left: 0.15rem;
  top: 0.4rem;
}
.section7 .person {
  position: absolute;
  right: 0;
  bottom: 0.05rem;
  height: 4.1rem;
}
/* section8 */
.section8 .text {
  width: 89%;
  padding: 0 5%;
  left: 0;
  text-indent: 1em;
  text-align: left;
  top: 20%;
}
.section8 .text p {
  line-height: 0.3rem;
  font-size: 0.13rem;
}
.section8 .video {
  width: 70%;
  top: 71%;
  left: 15%;
}
/* section9  */
.section9 .text {
  top: 21%;
}
.section9 .text p i {
  font-style: normal;
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b, 0 0 40px #ff956b, 0 0 70px #ff956b, 0 0 80px #ff956b, 0 0 100px #ff956b, 0 0 150px #ff956b;
}
.section9 .text > p {
  text-shadow: 0 0 10px #000000;
}
.section9 .text > div {
  margin-top: 0.25rem;
  padding-left: 0.55rem;
  position: relative;
}
.section9 .text > div:before {
  content: '{';
  font-size: 0.5rem;
  position: absolute;
  left: 0.24rem;
  top: -0.05rem;
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b, 0 0 40px #ff956b, 0 0 70px #ff956b, 0 0 80px #ff956b, 0 0 100px #ff956b, 0 0 150px #ff956b;
  font-family: "SourceHanSerifCN" !important;
}
.section9 .text > div p {
  font-size: 0.17rem;
  text-shadow: 0 0 10px #ff956b, 0 0 20px #ff956b, 0 0 30px #ff956b;
  margin-bottom: 0.1rem;
  text-align: left;
  letter-spacing: 1px;
}
.section9 .person {
  position: absolute;
  left: 0.25rem;
  bottom: 0;
  height: 3.4rem;
}
.section9 .text img {
  height: 0.7rem;
  position: absolute;
  right: 0;
  top: -0.2rem;
}
/* section10  */
.section10 .text {
  top: 22%;
}
.section10 .text p i {
  font-size: 0.2rem;
  font-style: normal;
}
.section10 .text img {
  margin: 0.1rem 0;
  height: 1rem;
}
.section10 .text a {
  display: block;
  margin-top: 0.3rem;
  text-align: center;
}
.section10 .text a img:last-child {
  height: 0.45rem;
  margin: 0;
}
.section10 .person {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3rem;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  display: none;
}
.modal:before {
  content: '';
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.modal-main {
  width: 90%;
  height: 1.35rem;
  position: absolute;
  left: 5%;
  top: 50%;
  background: url(../images/modal.png) center center no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}
.modal-main p {
  margin: 0;
  color: #6c2f3d;
  font-size: 0.2rem;
  text-align: center;
  background: url(../images/modal-title.png) bottom center no-repeat;
  padding: 0.5rem 0 0.15rem;
  letter-spacing: 7px;
}
.modal-close {
  position: absolute;
  right: 0.02rem;
  top: 0.04rem;
  cursor: pointer;
  line-height: 1;
  font-size: 0;
  padding: 0.04rem;
}
.modal-close img {
  width: 0.14rem;
}
.sq_video_mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  z-index: 999999;
}
.sq_video_mask .sq_video_video {
  width: 3.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.sq_video_mask .sq_video_close {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}