@charset "UTF-8";
/*title提ç¡èºæ¡†ç¾ŽåŒ¨Cæ ¡¤å¼?/
.tooltip {
	font-size: 12px;
	position: absolute;
	padding: 5px;
	z-index: 100000;
	opacity: .8;
	font-family: Microsoft Yahei
}

.tipsy-arrow {
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	border: 6px dashed #000;
	top: 0;
	left: 20%;
	margin-left: -5px;
	border-bottom-style: solid;
	border-top: 0;
	border-left-color: transparent;
	border-right-color: transparent
}

.tipsy-arrow-n {
	border-bottom-color: #2D4383;
}

.tipsy-inner {
	background-color: #6F8EC5;
	background: linear-gradient(135deg, rgba(1, 60, 141, 0.9), rgba(203, 19, 26, 0.9), rgba(0, 165, 233, 0.9));
	color: #FFF;
	max-width: 200px;
	padding: 5px 8px 4px 8px;
	text-align: center;
	border-radius: 3px
}




/* banner */
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,700);
.banner {
  width: 100%;
  min-width: 1355px;
  height: 820px;
  overflow: hidden;
  margin-top: 120px;
  height: calc(100vh - 120px);
  background-color: #b4b4b4;
}

.banner .swiper-container {
  width: 2000px;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.banner .swiper-container .swiper-wrapper {
  width: 100%;
  height: 100%;
}

#swiper1 .swiper-pagination {
  bottom: 46px;
}

#swiper1 .swiper-pagination span {
  width: 14px;
  height: 14px;
  margin: 0 10px;
  opacity: 1;
  background-color: #ffffff;
}

#swiper1 .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #0096ff;
}

.banner .swiper-container .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.banner .swiper-container .swiper-wrapper .swiper-slide > img {
  width: 100%;
  min-height: 100%;
}

.swiper-slide .container {
  position: absolute;
  top: 0;
  height: 100%;
  left: 322.5px;
  z-index: 11;
}

/* swiper-one */
#swiper-one .container > img {
  position: absolute;
  transition: all 2s;
  opacity: 0;
}

#swiper-one .container > a {
  position: absolute;
  transition: all 2s;
  display: inline-block;
  opacity: 0;
}

#swiper-one .container > img:nth-child(1) {
  left: 422px;
  top: 148px;
  transition-delay: 0.3s;
  transform: translate(500px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > img:nth-child(2) {
  left: 676px;
  top: 148px;
  transition-delay: 0.3s;
  transform: translate(-500px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > img:nth-child(3) {
  left: -99.5px;
  top: 223px;
  transition-delay: 0.8s;
  opacity: 0;
  transform: translate(0, -10px) scale(1, 1) rotate(0);
}

#swiper-one .container > img:nth-child(4) {
  left: 500px;
  top: 249px;
  transition-delay: 1s;
  transform: translate(0, 300px) scale(1, 1) rotate(0);
}

#swiper-one .container > img:nth-child(5) {
  left: 497px;
  top: 284px;
  transition-delay: 1.2s;
  transform: translate(0, 300px) scale(1, 1) rotate(0);
}

/* 图ç¡ë‡ */
#swiper-one .container > a img {
  transition: all 0.8s;
}

#swiper-one .container > a:nth-child(6) {
  left: -55px;
  top: 396px;
  transition-delay: 1.5s;
  transform: translate(400px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > a:nth-child(7) {
  left: 158px;
  top: 384px;
  transition-delay: 1.8s;
  transform: translate(200px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > a:nth-child(8) {
  right: -60px;
  top: 396px;
  transition-delay: 1.5s;
  transform: translate(-400px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > a:nth-child(9) {
  right: 160px;
  top: 384px;
  transition-delay: 1.8s;
  transform: translate(-200px, 0) scale(1, 1) rotate(0);
}

#swiper-one .container > a:hover img {
  transform: scale(1.1, 1.1);
}

#swiper-one .container .tu-three {
  position: absolute;
  left: 441px;
  top: 366px;
  overflow: hidden;
  width: 471px;
  height: 335px;
  opacity: 0;
  padding: 20px;
  transform: translate(0, 0) scale(1, 1) rotate(0);
  background-image: url(../images/ban1-tu3bg.png);
  background-position: center;
  transition: all 2s;
  transition-delay: 2s;
}

#swiper-one .container .tu-three img {
  width: 100%;
  max-height: 247px;
  transition: all 0.3s;
}

#swiper1 .swiper-slide-active .container > img,
#swiper1 .swiper-slide-active .container > a,
#swiper1 .swiper-slide-active .container .tu-three {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

/* swiper-two */
#swiper-two .container > img {
  position: absolute;
  transition: all 2s;
  opacity: 0;
}

#swiper-two .container .ban-logo {
  position: absolute;
}

#swiper-two .container span {
  width: 316px;
  display: inline-block;
  text-align: right;
  opacity: 0;
  position: absolute;
  transition: all 2s;
}

#swiper-two .container > img:nth-child(1) {
  left: 105px;
  bottom: 190px;
  transition-delay: 0.3s;
  transform: translate(200px, 200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(2) {
  left: 82px;
  bottom: 215px;
  transition-delay: 0.3s;
  transform: translate(-200px, -200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(3) {
  left: 246px;
  top: 182px;
  transition-delay: 0.5s;
  transform: translate(0, 200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(4) {
  left: 165px;
  top: 236px;
  transition-delay: 0.8s;
  transform: translate(0, 200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(5) {
  left: 225px;
  top: 269px;
  transition-delay: 1s;
  transform: translate(0, 200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(6) {
  left: 261px;
  top: 305px;
  transition-delay: 1s;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > span {
  left: 130px;
  top: 320px;
  font-size: 8.4375rem;
  color: #e60020;
  transition-delay: 1s;
  transform: translate(-100px, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(8) {
  left: 461px;
  top: 381px;
  transition-delay: 2.5s;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(9) {
  left: 166px;
  top: 479px;
  transition-delay: 1.3s;
  transform: translate(0, 200px) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(10) {
  left: 140px;
  top: 513px;
  transition-delay: 1.5s;
  transform: translate(200px, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(11) {
  left: 149px;
  top: 544px;
  transition-delay: 1.8s;
  transform: translate(-200px, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > img:nth-child(12) {
  left: 258px;
  top: 537px;
  transition-delay: 2s;
  transform: translate(200px, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > .ban-logo {
  width: 683px;
  height: 852px;
  right: -33px;
  bottom: 0;
  transition-delay: 0s;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper-two .container > .ban-logo div {
  position: absolute;
  opacity: 0;
  background-image: url(../images/ban2-logo.png);
  transform: translate(100px, -200px) scale(1, 1) rotate(360deg);
  transition: all 1s;
}

#swiper-two .container > img:nth-child(14) {
  left: 490px;
  bottom: 0;
  transition-delay: 3s;
  animation-name: bantwofu;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  /* Safari and Chrome: */
  -webkit-animation-name: bantwofu;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

@keyframes bantwofu {
  0% {
    transform: translate(0, 0);
  }
  16% {
    transform: translate(0, -10px);
  }
  33% {
    transform: translate(0, -20px);
  }
  50% {
    transform: translate(0, -30px);
  }
  66% {
    transform: translate(0, -20px);
  }
  83% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}
#swiper1 .swiper-slide-active .container > img {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper1 .swiper-slide-active .container > span {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper1 .swiper-slide-active .container > .ban-logo div {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1) rotateY(0deg);
}

/* swiper-three */
#swiper-three {
  background-color: #33a0bd;
}

#swiper-three > img {
  position: absolute;
  transition: all 1s;
  width: auto;
  height: auto;
  min-height: auto;
  left: 50%;
  top: 50%;
  opacity: 0;
}

#swiper-three > img:nth-child(1) {
  width: 100%;
  height: 100%;
  left: 0 !important;
  top: 0 !important;
  opacity: 0;
  z-index: 9;
  transition-delay: 1s !important;
}

#swiper1 .swiper-slide-active > img:nth-child(1) {
  opacity: 1;
}

/* ban-three 图ç¡ë‡ */
#swiper1 .swiper-slide-active > img:nth-child(3) {
  left: 0 !important;
  top: 0 !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(4) {
  left: 330px !important;
  top: 0 !important;
  z-index: 6;
}

#swiper1 .swiper-slide-active > img:nth-child(5) {
  left: 706px !important;
  top: 0 !important;
  z-index: 7;
}

#swiper1 .swiper-slide-active > img:nth-child(6) {
  left: 927px !important;
  top: 0 !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(7) {
  left: 1570px !important;
  top: 0 !important;
  z-index: 6;
}

#swiper1 .swiper-slide-active > img:nth-child(8) {
  left: 0 !important;
  top: 231px !important;
  z-index: 6;
}

#swiper1 .swiper-slide-active > img:nth-child(9) {
  left: 229px !important;
  top: 231px !important;
  z-index: 7;
}

#swiper1 .swiper-slide-active > img:nth-child(10) {
  left: 689px !important;
  top: 300px !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(11) {
  left: 1110px !important;
  top: 313px !important;
  z-index: 6;
}

#swiper1 .swiper-slide-active > img:nth-child(12) {
  left: 1427px !important;
  top: 316px !important;
  z-index: 7;
}

#swiper1 .swiper-slide-active > img:nth-child(13) {
  left: 1771px !important;
  top: 333px !important;
  z-index: 8;
}

#swiper1 .swiper-slide-active > img:nth-child(14) {
  left: 0 !important;
  top: 564px !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(15) {
  left: 271px !important;
  top: 593px !important;
  z-index: 6;
}

#swiper1 .swiper-slide-active > img:nth-child(16) {
  left: 300px !important;
  top: 456px !important;
  z-index: 4;
}

#swiper1 .swiper-slide-active > img:nth-child(17) {
  left: 606px !important;
  top: 542px !important;
  z-index: 4;
}

#swiper1 .swiper-slide-active > img:nth-child(18) {
  left: 1009px !important;
  top: 577px !important;
  z-index: 4;
}

#swiper1 .swiper-slide-active > img:nth-child(19) {
  left: 1320px !important;
  top: 552px !important;
  z-index: 3;
}

#swiper1 .swiper-slide-active > img:nth-child(20) {
  left: 1701px !important;
  top: 492px !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(21) {
  left: 1685px !important;
  top: 626px !important;
  z-index: 5;
}

#swiper1 .swiper-slide-active > img:nth-child(22) {
  left: 0 !important;
  top: 517px !important;
  z-index: 2;
}

#swiper1 .swiper-slide-active > img:nth-child(23) {
  left: 420px !important;
  top: 570px !important;
  z-index: 2;
}

#swiper1 .swiper-slide-active > img:nth-child(24) {
  left: 900px !important;
  top: 617px !important;
  z-index: 2;
}

#swiper1 .swiper-slide-active > img:nth-child(25) {
  left: 1100px !important;
  top: 647px !important;
  z-index: 2;
  transition-delay: 1.15s;
}

#swiper1 .swiper-slide-active > img {
  opacity: 1;
}

/* ban-3  浮务§¨¨¯´æ˜Ž */
#swiper-three .container img {
  position: absolute;
  transition: all 1s;
  z-index: 10;
  opacity: 0;
}

#swiper-three .container img:nth-child(1) {
  height: 100%;
  left: 50%;
  transform: translate(-150%, 0);
  top: 0;
  transition-delay: 1.6s;
}

#swiper-three .container img:nth-child(2) {
  left: 50%;
  transform: translate(-50%, 100px);
  top: 182px;
  transition-delay: 2s;
}

#swiper-three .container img:nth-child(3) {
  left: 50%;
  transform: translate(-50%, 0) scale(1.5, 1.5);
  top: 250px;
  transition-delay: 2.3s;
}

#swiper-three .container img:nth-child(4) {
  left: 50%;
  transform: translate(-150%, 0);
  top: 345px;
  transition-delay: 2.6s;
}

#swiper-three .container img:nth-child(5) {
  left: 50%;
  transform: translate(50%, 0);
  top: 430px;
  transition-delay: 2.6s;
}

#swiper1 .swiper-slide-active .ban-three img {
  transform: translate(-50%, 0) scale(1, 1);
}

/* banner-four */
#swiper-four .container img {
  position: absolute;
  transition: all 1s;
  opacity: 0;
}

/* ä¹?*/
#swiper-four .container img:nth-child(1) {
  left: -242px;
  top: 215px;
  transition-delay: 0.3s;
  transform: translate(-200px, 0) scale(1, 1);
  z-index: 8;
}

/* ¨¨Š?*/
#swiper-four .container img:nth-child(2) {
  right: -280px;
  top: 50px;
  transition-delay: 0.4s;
  transform: translate(100px, 0) scale(1, 1);
  z-index: 8;
}

/* æ¡ë?*/
#swiper-four .container img:nth-child(3) {
  right: 40px;
  bottom: -18px;
  transition-delay: 0.8s;
  transform: translate(0, 236px) scale(1, 1);
  z-index: 8;
}

/* ¨¨®¯¨¨¿ˆåäºŒå¹?*/
#swiper-four .container img:nth-child(4) {
  left: 500px;
  top: 305px;
  transition-delay: 1.5s;
  transform: translate(0, 200px) scale(1, 1);
}

/* æ¡ë¡ì着建站 */
#swiper-four .container img:nth-child(5) {
  left: 440px;
  top: 460px;
  transition-delay: 2.2s;
  transform: translate(-200px, 0) scale(1, 1);
}

/* 不忘初心 */
#swiper-four .container img:nth-child(6) {
  left: 735px;
  top: 460px;
  transition-delay: 2.2s;
  transform: translate(200px, 0) scale(1, 1);
}

/* ¨¨‹¡Àæ¨C‡ */
#swiper-four .container img:nth-child(7) {
  left: 430px;
  top: 550px;
  transition-delay: 2.5s;
  transform: translate(0, 100px) scale(1, 1);
}

/* �*/
#swiper-four .container img:nth-child(8) {
  left: -137px;
  top: 144px;
  transition-delay: 3s;
  transform: translate(0, 0) scale(1, 1);
  z-index: 5;
}

/* icon */
#swiper-four .container img:nth-child(9) {
  left: -143px;
  top: 88px;
  transition-delay: 3.5s;
  transform: translate(0, 0) scale(1, 1);
  z-index: 4;
  transition-delay: 3s;
  animation-name: bantwofu;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
  -webkit-animation-name: bantwofu;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-play-state: running;
}

#swiper1 .swiper-slide-active .ban-four img {
  transform: translate(0, 0) scale(1, 1);
}

/* #swiper1 .swiper-slide-active .ban-four img:nth-child(3) {
	transform: translate(0,0) scale(1,1);
	animation-name: banfourshou;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: alternate;
	animation-play-state: running;
	-webkit-animation-name: banfourshou;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
} */
@keyframes banfourshou {
  0% {
    transform: translate(-10px, 0) scale(1, 1);
  }
  16% {
    transform: translate(0, 0) scale(1, 1);
  }
  33% {
    transform: translate(10px, 0) scale(1, 1);
  }
  50% {
    transform: translate(0, 0) scale(1, 1);
  }
  66% {
    transform: translate(-10px, 0) scale(1, 1);
  }
  83% {
    transform: translate(0, 0) scale(1, 1);
  }
  100% {
    transform: translate(10px, 0) scale(1, 1);
  }
}
/* loading */
.loading {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: #000000;
  background: rgba(0, 0, 0, 0.9);
}

.loading2 {
  margin-top: calc(50vh - 71px);
}

#colorfulPulse {
  width: 100px;
  height: 80px;
  margin: 0 auto;
}

#colorfulPulse span {
  display: inline-block;
  width: 10px;
  height: 40px;
  animation-name: scale;
  -webkit-animation-name: scale;
  -moz-animation-name: scale;
  -ms-animation-name: scale;
  -o-animation-name: scale;
  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  -moz-animation-duration: 1.2s;
  -ms-animation-duration: 1.2s;
  -o-animation-duration: 1.2s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

span.item-1 {
  background: #2ecc71;
}

span.item-2 {
  background: #3498db;
}

span.item-3 {
  background: #9b59b6;
}

span.item-4 {
  background: #e67e22;
}

span.item-5 {
  background: #c0392b;
}

span.item-6 {
  background: #e74c3c;
}

span.item-7 {
  background: #e74c8c;
}

.item-1 {
  animation-delay: -1s;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -ms-animation-delay: -1s;
  -o-animation-delay: -1s;
}

.item-2 {
  animation-delay: -0.9s;
  -webkit-animation-delay: -0.9s;
  -moz-animation-delay: -0.9s;
  -ms-animation-delay: -0.9s;
  -o-animation-delay: -0.9s;
}

.item-3 {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
  -moz-animation-delay: -0.8s;
  -ms-animation-delay: -0.8s;
  -o-animation-delay: -0.8s;
}

.item-4 {
  animation-delay: -0.7s;
  -webkit-animation-delay: -0.7s;
  -moz-animation-delay: -0.7s;
  -ms-animation-delay: -0.7s;
  -o-animation-delay: -0.7s;
}

.item-5 {
  animation-delay: -0.6s;
  -webkit-animation-delay: -0.6s;
  -moz-animation-delay: -0.6s;
  -ms-animation-delay: -0.6s;
  -o-animation-delay: -0.6s;
}

.item-6 {
  animation-delay: -0.5s;
  -webkit-animation-delay: -0.5s;
  -moz-animation-delay: -0.5s;
  -ms-animation-delay: -0.5s;
  -o-animation-delay: -0.5s;
}

.item-7 {
  animation-delay: -0.4s;
  -webkit-animation-delay: -0.4s;
  -moz-animation-delay: -0.4s;
  -ms-animation-delay: -0.4s;
  -o-animation-delay: -0.4s;
}
@keyframes scale {
  0%, 40%, 100% {
    transform: scaleY(0.2);
  }
  20%, 60% {
    transform: scaleY(1);
  }
}
#container2 {
  width: 156px;
  margin: 0 auto;
}

#container2 h1 {
  font-family: "Lato";
  color: white;
  text-transform: uppercase;
  font-size: 1em;
  letter-spacing: 1.5px;
  text-align: center;
  width: 155px;
  margin-top: 20px;
  -webkit-animation: fade 2s infinite;
  -moz-animation: fade 2s infinite;
  letter-spacing: 0.2rem;
}

.stick {
  width: 30px;
  height: 3px;
  background: white;
  display: inline-block;
  margin-left: -8px;
}

.stick:nth-child(n) {
  transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  /* IE 9 */
  -webkit-transform: rotate(30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(30deg);
  -webkit-animation: fall 2s infinite;
  -moz-animation: fall 2s infinite;
}

.stick:nth-child(2n) {
  transform: rotate(-30deg);
  -ms-transform: rotate(-30deg);
  /* IE 9 */
  -webkit-transform: rotate(-30deg);
  /* Safari and Chrome */
  -moz-transform: rotate(-30deg);
  -webkit-animation: rise 2s infinite;
  -moz-animation: rise 2s infinite;
}
/* Happy New Year */
.banner .swiper-container {
  width: 100%;
  left: auto;
  transform: none;
}

.swiper-slide .container {
  left: 50%;
  transform: translate(-50%, 0);
}

#swiper-new #canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

#swiper-new > .bg {
  all: unset;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
}

#swiper-new > .left {
  all: unset;
  width: auto;
  height: auto;
  min-height: auto;
  position: absolute;
  left: 2%;
  top: 50%;
  transform: translate(-200px, -50%);
  transition: all 1s;
}

#swiper-new .container > img {
  position: absolute;
  transition: all 1s;
  opacity: 0;
}

#swiper-new .container > img:nth-child(1) {
  left: 18%;
  top: 8%;
  height: 44.44%;
  transform: translate(0, -100px);
  transition-delay: 0s;
}

#swiper-new .container > img:nth-child(2) {
  left: 15%;
  top: 22.8%;
  height: 25%;
  transform: translate(-100px, 0);
  transition-delay: 0.8s;
}

#swiper-new .container > img:nth-child(3) {
  left: 36%;
  top: 35.77%;
  height: 21.01%;
  transform: translate(-200px, 0);
  transition-delay: 0.3s;
}

#swiper-new .container > img:nth-child(4) {
  left: 33%;
  top: 51.05%;
  height: 23.98%;
  transform: translate(200px, 0);
  transition-delay: 1s;
}

#swiper-new .container > img:nth-child(5) {
  height: 18.33%;
  left: 23%;
  top: 51.05%;
  transform: translate(-100px, 0) scale(1.5);
  transition-delay: 1.5s;
}

#swiper1 .swiper-slide-active .conNewyear > img {
  opacity: 1;
  transform: translate(0, 0) scale(1, 1) rotate(0);
}

#swiper1 .swiper-slide-active > .left {
  transition-delay: 2s;
  transform: translate(0, -50%);
}

.dang {
  text-align: center;
}

.dang img {
  display: block;
  margin: 0 auto;
  opacity: 0;
  transition: all 1s;
}

.dang img:nth-child(1) {
  margin-top: 10%;
  max-height: 45.59%;
  transform: translateY(150px) scale(1.5);
  transition-delay: 0.7s;
}

.dang img:nth-child(2) {
  margin-top: 5%;
  max-height: 12%;
  transform: translateY(150px);
  transition: all 1.5s;
  transition-delay: 1.5s;
}

/* »Ø¹¨¦ */
.hg {
  text-align: center;
  padding-top: 155px;
  padding-left: 16%;
}

.hg img {
  display: block;
  opacity: 0;
}

.hg-1 {
  transition: all 1.5s !important;
  transition-delay: 0.5s !important;
  margin-left: 235px;
  transform: translate(0, 0) scale(1.5);
}

.hg-2 {
  margin-top: 44px;
  transition: all 1.5s !important;
  transition-delay: 1s !important;
  transform: translate(0, 150px) scale(1.5);
}

/* 2023-ÐÂĨº´¨®¼ª */
/* ѶÂõ¿Æ¼¼¡ª¹¡ìºØдº-ÍÃĨº´¨®¼ª */
.banner {
  perspective: 1000px;
}

.swiper-slide #canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
}

.ad2023 {
  position: relative;
}

.ad2023_1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.ad2023_2 {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  padding-top: 160px;
}

.ad2023_2 img {
  display: block;
  margin: 0 auto;
  opacity: 0;
}

.ad2023_2 img:nth-child(2) {
  margin-top: 55px;
}

.ad2023_1 img {
  position: absolute;
}

.ad2023_1 img:nth-child(1) {
  bottom: 0;
  right: 6.77%;
  z-index: 10;
}

.ad2023_1 img:nth-child(2) {
  right: 4.9%;
  top: 37.17%;
}

.ad2023_1 img:nth-child(3) {
  right: 20%;
  bottom: 20px;
}

.ad2023_1 img:nth-child(4) {
  right: 6.9%;
  top: 55.76%;
}

.ad2023_1 img:nth-child(5) {
  left: 6.6%;
  top: 32.94%;
}

.ad2023_1 img:nth-child(6) {
  left: 13.17%;
  top: 17.76%;
}

.ad2023_1 img:nth-child(7) {
  left: 10%;
  top: 56.94%;
}

.ad2023_1 img:nth-child(8) {
  left: 6.97%;
  top: 47.41%;
}

.ad2023_1 img:nth-child(9) {
  left: 18.85%;
  bottom: 10.94%;
}

.ad2023_1 img:nth-child(10) {
  right: 3.75%;
  top: 5.6%;
}

.ad2023_1 img:nth-child(11) {
  left: 0;
  top: 0;
  z-index: 10;
}

.ad2023_1 img.thxc {
  left: 1.56%;
  bottom: 4.7%;
}

.ad2023_1 img.tutu {
  z-index: 1000;
  transform-style: preserve-3d;
  transition: all 1s;
  transition-delay: 1.5s;
  transition-timing-function: cubic-bezier(1, 0, 0, 1.82);
  transform-origin: center bottom;
  transform: rotateX(90deg);
}

.swiper-slide-active .ad2023_1 img.tutu {
  transform: rotateX(0);
}

@keyframes hua {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}
.ad2023_1 img.hua {
  /* transition-delay: 3s; */
  animation-name: hua;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-play-state: running;
}

.ad2023_1 img.hua2 {
  transition-delay: 0.5s;
}

.ad2023_1 img.hua3 {
  transition-delay: 0.3s;
}

.ad2023_1 img.hua4 {
  transition-delay: 0.8s;
}

@keyframes xian {
  from {
    transform: translate(-10px, 0);
  }
  to {
    transform: translate(10px, 0);
  }
}
.ad2023_1 img.xian {
  animation: xian linear 5s infinite alternate running;
}

.ad2023_1 img.xian2 {
  animation-delay: 1s;
}

.ad2023_1 img.xian3 {
  animation-delay: 3s;
}

@keyframes niao {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(60%);
  }
}
.ad2023_1 img.niao {
  animation: niao linear 3s infinite alternate running;
}

.ad2023_1 img.niao2 {
  animation-delay: 1.5s;
}

.ad2023_1 img.thxc {
  z-index: 1000;
}

@keyframes denglong {
  from {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(5deg);
  }
}
.ad2023_1 img.denglong {
  transform-style: preserve-3d;
  transform-origin: left top;
  animation: denglong linear 4s infinite alternate running;
}

.swiper-slide-active .ad2023_2 img:nth-child(1) {
  animation: fadeInUp 1s;
  opacity: 1;
}

.swiper-slide-active .ad2023_2 img:nth-child(2) {
  transition-delay: 1s;
  animation: bounceInRight 1s;
  animation-delay: 1s;
  opacity: 1;
}

/* .ad_20d {} */
.ad2023_3 {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 236px;
  text-align: center;
}

.swiper-slide-active .ad2023_3 img {
  animation: fadeInUp 1.5s;
}

/* 2024-1-1 {} */
@keyframes xian2 {
  from {
    transform: translateX(10px);
  }
  to {
    transform: translateX(-10px);
  }
}
@keyframes xian3 {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-20px);
  }
}
@keyframes xian4 {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(20px);
  }
}
.ad2024Con {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

.ad2024Con img {
  transition: all 1s;
  transition-delay: 0.5s;
  opacity: 0;
}

.ad2024 #canvas {
  z-index: 99;
}

.ad2024 .fu {
  width: 100%;
  min-height: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -o-object-fit: cover;
  object-fit: cover;
  animation: xian linear 5s infinite alternate running;
}

.ad2024 .fu2 {
  width: 100%;
  height: 100%;
  -o-object-fit: scale-down;
  object-fit: scale-down;
  -o-object-position: center center;
  object-position: center center;
  animation-name: xian2;
}

.ad2024 .logo {
  position: absolute;
  bottom: 46px;
  right: 160px;
}

.ad2024 .lef {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  animation: xian3 linear 5s infinite alternate running;
}

.ad2024 .rig {
  position: absolute;
  height: 100%;
  top: 0;
  right: 0;
  animation: xian4 linear 5s infinite alternate running;
}

.ad2024 .txt {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.2);
  transition: all 1.5s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transition-delay: 0.8s;
  opacity: 0;
}

.ad2024.swiper-slide-active .txt {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.ad2024.swiper-slide-active .ad2024Con img {
  opacity: 1;
}

.ad2024 .lef.y202402 {
  width: 744px;
  height: 840px;
  top: 0;
}

.ad2024 .rig.y202402 {
  width: 466px;
  height: 229px;
  top: 0;
}

.ad2024 .txt.y202402 {
  width: 980px;
  height: 589px;
  top: 220px;
  right: 7.29vw;
  left: auto;
  bottom: auto;
  transform: none;
}

.ad2024 .logo {
  /* opacity: 0; */
}

.ad2024 .logo.y202402 {
  animation: fadeInRight 1s;
  transition-delay: 1s;
  animation-delay: 1s;
  /* opacity: 1; */
}

@keyframes and_none1 {
  from {
    transform: scale3d(1, 1, 1);
  }
  to {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes rotate1 {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes translateX {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(15px);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-15px);
  }
  100% {
    transform: translateX(0);
  }
}
.ad2025 {
  position: relative;
  background-size: cover;
  perspective: 1000px;
}
.ad2025 canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5 !important;
  pointer-events: none;
}
.ad2025 .con {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.ad2025 .con > * {
  position: absolute;
  transition: all 1s;
  transition-delay: 0.5s;
}
.ad2025 .con > * img {
display: block;
  max-width: 100%;
  max-height: 100%;
}
.ad2025 .con .dl {
  top: 0;
  left: 1.93%;
  width: 96.14%;
  transform: translateY(-100%);
}
.ad2025 .con .dl img {
  animation: translateX linear 10s infinite alternate running;
}
.ad2025 .con .hua {
  height: 108%;
  right: 0;
  bottom: -7%;
  transition-delay: 1s;
  opacity: 0;
}
.ad2025 .con .yun {
  right: 0;
  bottom: 0;
  width: 32.44%;
  transform: translateY(100%);
}
.ad2025 .con .she2 {
  left: 0;
  bottom: 0;
  width: 29%;
  transition: all 1s;
  transition-delay: 1.5s;
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  transform: translateX(-100%);
}
.ad2025 .con .she2 img {
  transform-style: preserve-3d;
  transform-origin: left bottom;
  animation: denglong linear 3s infinite alternate running;
}
.ad2025 .con .she1 {
  height: 66%;
  left: 50%;
  top: 50%;
  transition-delay: 1s;
  transform: translate(-50%, -50%) scale(2, 2);
  opacity: 0;
}
.ad2025 .con .she1 img {
  animation: rotate1 60s linear infinite;
}
.ad2025 .con .she {
  height: 42.44%;
  left: 50%;
  top: calc(50% - 20px);
  transition-delay: 1.5s;
  transform: translate(-50%, -50%) scale(2, 2);
  opacity: 0;
}
.ad2025 .con .fu-logo {
  right: 5.2%;
  bottom: 4.16%;
  width: 11.09%;
  transform: translateX(200%) scale(2, 2);
  opacity: 0;
  transition-delay: 3.2s;
}
.ad2025 .con .txt1 {
  left: 50%;
  top: 22%;
  width: 42.34%;
  transform: translate(-50%, 50%);
  opacity: 0;
  transition-delay: 2s;
}
.ad2025 .con .txt2 {
  left: 50%;
  width: 30.46%;
  top: calc(22% + 18.75vw);
  transform: translate(-50%, 100%);
  opacity: 0;
  transition-delay: 2.5s;
}
.ad2025.swiper-slide-active > img {
  animation: and_none1 10s linear 0s both;
}
.ad2025.swiper-slide-active .con .dl {
  transform: translateY(0);
}
.ad2025.swiper-slide-active .con .hua {
  opacity: 1;
}
.ad2025.swiper-slide-active .con .yun {
  transform: translateY(0);
}
.ad2025.swiper-slide-active .con .she2 {
  transform: translateX(0);
}
.ad2025.swiper-slide-active .con .she1,
.ad2025.swiper-slide-active .con .she {
  transform: translate(-50%, -50%) scale(1, 1);
  opacity: 1;
}
.ad2025.swiper-slide-active .con .txt1,
.ad2025.swiper-slide-active .con .txt2 {
  transform: translate(-50%, 0);
  opacity: 1;
}
.ad2025.swiper-slide-active .con .fu-logo {
  transform: translateX(0) scale(1, 1);
  opacity: 1;
}